/* PIXELFROG - consolidated stylesheet (hand-cleaned Webflow export).
   1  reset (normalize)
   2  base framework -- the load-bearing rules, renamed .wf-
   2b widget geometry the dropped runtime rules used to provide
   3  Pixelfrog design
   4  components -- vanilla replacements for the Webflow runtime
      and its IX2 / IX3 interactions

   Fonts: assets/fonts/fonts.css -- Rubik and Inter, both self-hosted
   woff2, both SIL OFL 1.1. The export pulled both from Google at
   runtime through webfont.js; neither family is substituted, only
   served locally, so every `--font-family--*` in :root below still
   names what the design named. */

/* ======================================================================
   1. Reset (normalize)
   ====================================================================== */
html {
  font-family: sans-serif;
  
  -ms-text-size-adjust: 100%;
  
  -webkit-text-size-adjust: 100%;
  
}
body {
  margin: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}
audio, canvas, progress, video {
  display: inline-block;
  
  vertical-align: baseline;
  
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden], template {
  display: none;
}
a {
  background-color: transparent;
}
a:active, a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b, strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  font-size: 2em;
  margin: 0.67em 0;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  box-sizing: content-box;
  height: 0;
}
pre {
  overflow: auto;
}
code, kbd, pre, samp {
  font-family: monospace, 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;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  
  padding: 0;
  
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td, th {
  padding: 0;
}

/* ======================================================================
   2. Base framework (runtime-only rules dropped; the rest kept as .wf-)
   ====================================================================== */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  background-color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}
img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}
.inline-block {
  max-width: 100%;
  display: inline-block;
}
.wf-button {
  display: inline-block;
  padding: 9px 15px;
  background-color: #3898EC;
  color: white;
  border: 0;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
}
input.wf-button {
  -webkit-appearance: button;
}
h1:where(:not([class*="heading-scale-"])), h2:where(:not([class*="heading-scale-"])), h3:where(:not([class*="heading-scale-"])), h4:where(:not([class*="heading-scale-"])), h5:where(:not([class*="heading-scale-"])), h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-1), :where(.heading-scale-2), :where(.heading-scale-3), :where(.heading-scale-4), :where(.heading-scale-5), :where(.heading-scale-6) {
  font-weight: bold;
  margin-bottom: 10px;
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  font-size: 38px;
  line-height: 44px;
  margin-top: 20px;
}
h2:where(:not([class*="heading-scale-"])), :where(.heading-scale-2) {
  font-size: 32px;
  line-height: 36px;
  margin-top: 20px;
}
h3:where(:not([class*="heading-scale-"])), :where(.heading-scale-3) {
  font-size: 24px;
  line-height: 30px;
  margin-top: 20px;
}
h4:where(:not([class*="heading-scale-"])), :where(.heading-scale-4) {
  font-size: 18px;
  line-height: 24px;
  margin-top: 10px;
}
h5:where(:not([class*="heading-scale-"])), :where(.heading-scale-5) {
  font-size: 14px;
  line-height: 20px;
  margin-top: 10px;
}
h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-6) {
  font-size: 12px;
  line-height: 18px;
  margin-top: 10px;
}
p {
  margin-top: 0;
  margin-bottom: 10px;
}
blockquote {
  margin: 0 0 10px 0;
  padding: 10px 20px;
  border-left: 5px solid #E2E2E2;
  font-size: 18px;
  line-height: 22px;
}
figure {
  margin: 0;
  margin-bottom: 10px;
}
figcaption {
  margin-top: 5px;
  text-align: center;
}
ul, ol {
  margin-top: 0px;
  margin-bottom: 10px;
  padding-left: 40px;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
.embed:before, .embed:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.embed:after {
  clear: both;
}
fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}
button, [type='button'], [type='reset'] {
  border: 0;
  cursor: pointer;
  -webkit-appearance: button;
}
.wf-form {
  margin: 0 0 15px;
}
.wf-form-done {
  display: none;
  padding: 20px;
  text-align: center;
  background-color: #dddddd;
}
.wf-form-fail {
  display: none;
  margin-top: 10px;
  padding: 10px;
  background-color: #ffdede;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}.wf-input {
  display: block;
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333333;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}
.wf-input::placeholder {
  color: #999;
}
.wf-input:focus {
  border-color: #3898EC;
  outline: 0;
}
.wf-input[disabled], .wf-input[readonly], fieldset[disabled] .wf-input {
  cursor: not-allowed;
}
.wf-input[readonly] {
  background-color: #eeeeee;
}
textarea.wf-input {
  height: auto;
}

.richtext:before, .richtext:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.richtext:after {
  clear: both;
}
.richtext[contenteditable="true"]:before, .richtext[contenteditable="true"]:after {
  white-space: initial;
}
.richtext ol, .richtext ul {
  overflow: hidden;
}.richtext figure[data-rt-type="video"] > div:after {
  content: '';
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.richtext figure {
  position: relative;
  max-width: 60%;
}
.richtext figure > div:before {
  cursor: default!important;
}
.richtext figure img {
  width: 100%;
}
.richtext figure div {
  
  font-size: 0px;
  color: transparent;
}.richtext figure[data-rt-type="image"] {
  display: table;
}
.richtext figure[data-rt-type="image"] > div {
  display: inline-block;
}
.richtext figure[data-rt-type="image"] > figcaption {
  display: table-caption;
  caption-side: bottom;
}
.richtext figure[data-rt-type="video"] {
  width: 60%;
  height: 0;
}
.richtext figure[data-rt-type="video"] iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.richtext figure[data-rt-type="video"] > div {
  width: 100%;
}
@keyframes spin {

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


/* ======================================================================
   2b. Widget geometry the dropped framework rules used to provide
   ======================================================================

   Section 2 drops every components.css rule that only existed for the
   Webflow runtime to drive. Two of those families were carrying real
   LAYOUT as well as behaviour -- the navbar with its overlay, and the two
   sliders -- and this file restates that layout against the design's own
   class names so the pages measure the same without the framework's.

   It is emitted BETWEEN the framework and the design sheet, in the same
   place components.css sat, so the design keeps overriding it exactly as
   it did before: `.menu-button`'s own `padding: 0` still beats the
   widget's 18px, `.navbar`'s `position: absolute` still beats the
   widget's `relative`, `.testimonial-mask`'s `overflow: visible` still
   beats the widget's `hidden`. Moving any of it after the design silently
   wins arguments it used to lose.

   Three details that are easy to get wrong and expensive to notice:

     * `[data-nav-menu-open]`'s `display: block !important` is the ONE
       runtime rule in this export that has to beat the design sheet.
       `.w-nav[data-collapse='all'] .w-nav-menu { display: none }` closes
       the panel at every width -- this navbar collapses at ALL of them,
       the desktop links being a separate `.desk_menu-items` row -- and
       the open state has to outrank it. It is written here with the
       `!important` it shipped with, and it is why the open panel is
       marked by an ATTRIBUTE rather than by a class.
     * `.w-nav-button.w--open`'s grey is transcribed even though nothing
       can see it. `.menu-button` has `padding: 0`, so the button's box is
       exactly `.hamburger-details`, which paints its own background over
       the whole of it; and below 992px the design overrides the grey with
       transparent anyway. It is here because a parity sweep compares
       computed values, and because a re-export that gives the button any
       padding at all would suddenly show it -- at which point it should
       show the same grey the published site shows.
     * `.w-nav`'s two clearfix pseudo-elements are NOT restated. On other
       templates in this series they were real boxes with a real line box
       and dropping them moved the page; here `.navbar` is a flex
       container, so `content: " "` collapses to a 0x0 flex item on the
       published site too. Measured, not assumed.

   The slider geometry below is the whole of what makes a Webflow slider
   lay out: a `white-space: nowrap` mask with `inline-block` slides in a
   row, overflowing to the right, which main.js then translates. The
   framework's own `height: 300px` and `#dddddd` are NOT restated -- the
   design sets `height: 100%` and a transparent background over both, on
   both sliders, at every breakpoint.

   ---- what a <button> loses that a <div> or an <a> had -----------------
   transform.py turns five kinds of element into real <button>s: the
   hamburger, the FAQ question rows, the four slider arrows, the cookie
   banner's "Got it" and every gallery thumbnail. One thing gets lost on
   the way, and it is invisible until something is measured: normalize.css
   sets
   `text-transform: none` on every button, and this design puts
   `text-transform: uppercase` on the hamburger label and on both slider
   arrows. `font: inherit` (also normalize's) restores the family, the
   size, the weight and the line height, and letter-spacing is inherited
   normally -- text-transform is the one that has to be asked for back.

   There is no bare `a` rule in either sheet, so an `<a>` retagged to a
   `<button>` loses nothing else. */
button {
  font: inherit;
  text-transform: inherit;
}

/* The six kinds of div-and-anchor control that become buttons. A <button>
   brings the UA's own ButtonFace background, its centred text, a border the
   element it replaces never had, and -- the one that costs LAYOUT --
   `padding: 1px 6px`. The gallery thumbnails are the case that proves it:
   left un-reset, every picture in every project and blog gallery drew 12px
   narrower and 14px shorter than the anchor it replaced, and the section
   around it measured 19px short.

   Written as one `:where()` group so it scores 0 and every design rule for
   these elements -- `.blog-slider-arrow`'s 4px border, `.left-arrow`'s
   circle -- still wins exactly as it did. */
:where(.menu-button, .faq-question, .left-arrow, .right-arrow,
       .blog-slider-arrow, .cookies-button,
       .project-lightbox, .blog-lightbox-link) {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  text-align: inherit;
}

/* ---- navbar ---------------------------------------------------------
   `.w-nav`, `.w-nav-brand`, `.w-nav-menu`, `.w-nav-button`,
   `.w-nav-overlay`, `[data-nav-menu-open]` and the `data-collapse='all'`
   pair, re-keyed on this design's own names. */
.navbar {
  position: relative;
  z-index: 1000;
}

.navbar-brand {
  position: relative;
  text-decoration: none;
  color: #333333;
}

/* `data-collapse="all"`: the panel is closed at every width, and the
   hamburger that opens it is shown at every width. Above 992px the bar
   also carries a separate row of `.nav-link`s, which is why a desktop
   navbar can collapse "all" and still look like a desktop navbar. */
.nav-menu {
  position: relative;
  display: none;
}

.menu-button {
  position: relative;
  display: block;
  padding: 18px;
  font-size: 24px;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
}

.menu-button:focus {
  outline: 0;
}

.menu-button.is-open {
  background-color: #C8C8C8;
  color: white;
}

/* The overlay main.js creates and moves `.nav-menu` into when the panel
   opens, so `top: 100%` measures from the bottom of the bar. */
.nav-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  display: none;
}

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

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

/* ---- sliders --------------------------------------------------------
   `.w-slider`, `.w-slider-mask`, `.w-slide` and the two arrow rules, for
   the testimonial slider (3 slides) and the blog rail (6). The design
   sets the height, the background and the arrows' own inset over the
   top of all of it; what is left here is the part that makes the row a
   row. `.slide-nav` -- Webflow's dot strip -- is `display: none` in the
   design sheet on both sliders, so no dots are built and none of the
   `.w-slider-nav` rules are restated. */
.testimonial-slider,
.blogs-slider {
  position: relative;
  text-align: center;
  clear: both;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.testimonial-mask,
.blogs-mask {
  position: relative;
  display: block;
  z-index: 1;
  left: 0;
  right: 0;
  white-space: nowrap;
}

/* THE INDENTATION BETWEEN TWO SLIDES IS A VISIBLE GAP. The slides are
   `inline-block` inside a `white-space: nowrap` mask, so the newline the
   markup is indented with collapses into one space -- 3.66px of Inter at
   16px -- and every slide after the first sits that much further along,
   14px by the fifth. Webflow's own export has it too; its PUBLISHED pages
   do not, because they are minified onto one line. Zeroing the font on the
   mask removes the space, and the slide restores it: the root is 16px at
   all four breakpoints, so `1rem` is exactly what the slide was
   inheriting. */
.testimonial-mask,
.blogs-mask {
  font-size: 0;
}

.testimonial-slide,
.blogs-slide {
  font-size: 1rem;
  position: relative;
  display: inline-block;
  vertical-align: top;
  white-space: normal;
  text-align: left;
}

.left-arrow,
.right-arrow,
.blog-slider-arrow {
  position: absolute;
  margin: auto;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* `.w-slider-arrow-left { z-index: 3 }` / `-right { z-index: 4 }`. The design
   gives neither arrow a stacking order of its own, and both sit in the same
   positioned box as the slides they sit over, so without these the blog
   rail's two wide buttons fall behind the sixth card. */
.left-arrow,
.blog-slider-arrow.left {
  z-index: 3;
}

.right-arrow,
.blog-slider-arrow.right {
  z-index: 4;
}

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

/* ======================================================================
   3. Pixelfrog design
   ====================================================================== */
:root {
  --_colors---background-color--dark: #003020;
  --font-family--inter: Inter, sans-serif;
  --_colors---text-color--light: #f2f4e1;
  --_typography---texts-font-sizes--default-paragraph: 1rem;
  --_typography---texts-line-height--default-paragraph: 130%;
  --font-weight--regular: 400;
  --_typography---texts-letter-spacing--default-paragraph: -.06rem;
  --font-family--rubik: Rubik, sans-serif;
  --_typography---heading-font-sizes--h1: 3.25rem;
  --_typography---heading-line-height--h1: 120%;
  --font-weight--heavy: 900;
  --_typography---heading-letter-spacing--h1: -.0975rem;
  --_typography---heading-font-sizes--h2: 2.625rem;
  --_typography---heading-line-height--h2: 120%;
  --_typography---heading-letter-spacing--h2: -.07875rem;
  --_typography---heading-font-sizes--h3: 2.125rem;
  --_typography---heading-line-height--h3: 120%;
  --font-weight--semi-bold: 600;
  --_typography---heading-letter-spacing--h3: -.1275rem;
  --_typography---heading-font-sizes--h4: 1.5rem;
  --_typography---heading-line-height--h4: 120%;
  --_typography---heading-letter-spacing--h4: -.09rem;
  --_typography---heading-font-sizes--h5: 1.25rem;
  --_typography---heading-line-height--h5: 140%;
  --_typography---heading-letter-spacing--h5: -.0375rem;
  --_sizes---default-sizes--width: 100%;
  --_sizes---default-sizes--height: 100%;
  --_sizes---spacing--spacing-small: 1rem;
  --_sizes---spacing--spacing-jumbo: 3.75rem;
  --_sizes---spacing--spacing-medium: 1.25rem;
  --_sizes---spacing--spacing-big: 2.5rem;
  --_sizes---spacing--spacing-normal: 2rem;
  --_colors---text-color--transparent: #fff0;
  --_colors---text-color--primary: #ee5d36;
  --_typography---texts-font-sizes--paragraph-l: 1.625rem;
  --_typography---texts-line-height--paragraph-l: 120%;
  --_typography---texts-letter-spacing--paragraph-l: -.0975rem;
  --_sizes---spacing--spacing-xsmall: .5rem;
  --_typography---texts-font-sizes--title-bold: 2rem;
  --_typography---texts-line-height--title-bold: 120%;
  --_typography---texts-letter-spacing--title-bold: -.08rem;
  --_sizes---spacing--spacing-tiny: .25rem;
  --_sizes---spacing--spacing-colossal: 6.5rem;
  --_sizes---spacing--spacing-massive: 5rem;
  --_sizes---spacing--spacing-large: 2.25rem;
  --_sizes---spacing--spacing-regular: 1.5rem;
  --_sizes---container--max-width: 83rem;
  --_sizes---spacing--spacing-xxsmall: .75rem;
  --_typography---heading-font-sizes--display-04: 8.25rem;
  --_typography---heading-line-height--display-04: 120%;
  --_typography---heading-letter-spacing--display-04: -.165rem;
  --_typography---heading-font-sizes--display-03: 9.6rem;
  --_typography---heading-line-height--display-03: 120%;
  --_typography---heading-letter-spacing--display-03: -.55125rem;
  --_sizes---border-radius--radius-big: 2rem;
  --_sizes---border-radius--radius-regular: 1.5rem;
  --_typography---heading-font-sizes--h6: 1.125rem;
  --_typography---heading-line-height--h6: 150%;
  --_typography---heading-letter-spacing--h6: -.02rem;
  --_sizes---border-radius--radius-large: 1.875rem;
  --_sizes---border-radius--radius-small: 1rem;
  --_sizes---border-radius--radius-circle: 100%;
  --_sizes---border-radius--radius-medium: 1.25rem;
  --_typography---texts-font-sizes--paragraph-s: .75rem;
  --_typography---texts-line-height--paragraph-s: 125%;
  --_typography---texts-letter-spacing--paragraph-s: -.045rem;
  --_sizes---border-radius--radius-xsmall: .5rem;
  --_colors---light-10: #f2f4e11a;
  --_typography---heading-font-sizes--display-02: 18.125rem;
  --_typography---heading-line-height--display-02: 120%;
  --_typography---heading-letter-spacing--display-02: -1.0875rem;
  --_typography---heading-font-sizes--display-01: 25rem;
  --_typography---heading-line-height--display-01: 120%;
  --_typography---heading-letter-spacing--display-01: -1.5rem;
  --_colors---text-color--white: white;
  --font-weight--medium: 500;
  --_sizes---border-radius--radius-tiny: .25rem;
  --_colors---background-color--black: black;
  --font-weight--thin: 100;
  --font-weight--extra-light: 200;
  --font-weight--light: 300;
  --_colors---button-color--granite-gray: #666;
  --_colors---border-color--mid-tone-gray: #7e7e7e;
  --font-weight--bold: 700;
  --font-weight--extra-bold: 800;
  --_sizes---border-radius--radius-xxsmall: .75rem;
  --_sizes---border-radius--radius-soft: 3.75rem;
  --_sizes---border-radius--radius-pill: 5rem;
}
body {
  background-color: var(--_colors---background-color--dark);
  font-family: var(--font-family--inter);
  color: var(--_colors---text-color--light);
  font-size: var(--_typography---texts-font-sizes--default-paragraph);
  line-height: var(--_typography---texts-line-height--default-paragraph);
  font-weight: var(--font-weight--regular);
  letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  --_typography---texts-font-sizes--default-paragraph: 1rem;
  --_typography---texts-line-height--default-paragraph: 130%;
  --_typography---texts-letter-spacing--default-paragraph: -.06rem;
  --_typography---heading-font-sizes--h1: 3.25rem;
  --_typography---heading-line-height--h1: 120%;
  --_typography---heading-letter-spacing--h1: -.0975rem;
  --_typography---heading-font-sizes--h2: 2.625rem;
  --_typography---heading-line-height--h2: 120%;
  --_typography---heading-letter-spacing--h2: -.07875rem;
  --_typography---heading-font-sizes--h3: 2.125rem;
  --_typography---heading-line-height--h3: 120%;
  --_typography---heading-letter-spacing--h3: -.1275rem;
  --_typography---heading-font-sizes--h4: 1.5rem;
  --_typography---heading-line-height--h4: 120%;
  --_typography---heading-letter-spacing--h4: -.09rem;
  --_typography---heading-font-sizes--h5: 1.25rem;
  --_typography---heading-line-height--h5: 140%;
  --_typography---heading-letter-spacing--h5: -.0375rem;
  --_typography---texts-font-sizes--paragraph-l: 1.625rem;
  --_typography---texts-line-height--paragraph-l: 120%;
  --_typography---texts-letter-spacing--paragraph-l: -.0975rem;
  --_typography---texts-font-sizes--title-bold: 2rem;
  --_typography---texts-line-height--title-bold: 120%;
  --_typography---texts-letter-spacing--title-bold: -.08rem;
  --_typography---heading-font-sizes--display-04: 8.25rem;
  --_typography---heading-line-height--display-04: 120%;
  --_typography---heading-letter-spacing--display-04: -.165rem;
  --_typography---heading-font-sizes--display-03: 9.6rem;
  --_typography---heading-line-height--display-03: 120%;
  --_typography---heading-letter-spacing--display-03: -.55125rem;
  --_typography---heading-font-sizes--h6: 1.125rem;
  --_typography---heading-line-height--h6: 150%;
  --_typography---heading-letter-spacing--h6: -.02rem;
  --_typography---texts-font-sizes--paragraph-s: .75rem;
  --_typography---texts-line-height--paragraph-s: 125%;
  --_typography---texts-letter-spacing--paragraph-s: -.045rem;
  --_typography---heading-font-sizes--display-02: 18.125rem;
  --_typography---heading-line-height--display-02: 120%;
  --_typography---heading-letter-spacing--display-02: -1.0875rem;
  --_typography---heading-font-sizes--display-01: 25rem;
  --_typography---heading-line-height--display-01: 120%;
  --_typography---heading-letter-spacing--display-01: -1.5rem;
  --_sizes---default-sizes--width: 100%;
  --_sizes---default-sizes--height: 100%;
  --_sizes---spacing--spacing-small: 1rem;
  --_sizes---spacing--spacing-jumbo: 3.75rem;
  --_sizes---spacing--spacing-medium: 1.25rem;
  --_sizes---spacing--spacing-big: 2.5rem;
  --_sizes---spacing--spacing-normal: 2rem;
  --_sizes---spacing--spacing-xsmall: .5rem;
  --_sizes---spacing--spacing-tiny: .25rem;
  --_sizes---spacing--spacing-colossal: 6.5rem;
  --_sizes---spacing--spacing-massive: 5rem;
  --_sizes---spacing--spacing-large: 2.25rem;
  --_sizes---spacing--spacing-regular: 1.5rem;
  --_sizes---container--max-width: 83rem;
  --_sizes---spacing--spacing-xxsmall: .75rem;
  --_sizes---border-radius--radius-big: 2rem;
  --_sizes---border-radius--radius-regular: 1.5rem;
  --_sizes---border-radius--radius-large: 1.875rem;
  --_sizes---border-radius--radius-small: 1rem;
  --_sizes---border-radius--radius-circle: 100%;
  --_sizes---border-radius--radius-medium: 1.25rem;
  --_sizes---border-radius--radius-xsmall: .5rem;
  --_sizes---border-radius--radius-tiny: .25rem;
  --_sizes---border-radius--radius-xxsmall: .75rem;
  --_sizes---border-radius--radius-soft: 3.75rem;
  --_sizes---border-radius--radius-pill: 5rem;
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  font-family: var(--font-family--rubik);
  color: var(--_colors---text-color--light);
  font-size: var(--_typography---heading-font-sizes--h1);
  line-height: var(--_typography---heading-line-height--h1);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
}
h2:where(:not([class*="heading-scale-"])), :where(.heading-scale-2) {
  font-family: var(--font-family--rubik);
  color: var(--_colors---text-color--light);
  font-size: var(--_typography---heading-font-sizes--h2);
  line-height: var(--_typography---heading-line-height--h2);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---heading-letter-spacing--h2);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
}
h3:where(:not([class*="heading-scale-"])), :where(.heading-scale-3) {
  font-family: var(--font-family--inter);
  color: var(--_colors---text-color--light);
  font-size: var(--_typography---heading-font-sizes--h3);
  line-height: var(--_typography---heading-line-height--h3);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h3);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
}
h4:where(:not([class*="heading-scale-"])), :where(.heading-scale-4) {
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
  margin-top: 0;
  margin-bottom: 0;
}
h5:where(:not([class*="heading-scale-"])), :where(.heading-scale-5) {
  font-size: var(--_typography---heading-font-sizes--h5);
  line-height: var(--_typography---heading-line-height--h5);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h5);
  margin-top: 0;
  margin-bottom: 0;
}
p {
  margin-top: 0;
  margin-bottom: 0;
}
ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}
img {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  max-width: var(--_sizes---default-sizes--width);
  object-fit: cover;
  display: inline-block;
}
.page-wrapper {
  overflow: clip;
}
.utility-page-wrap {
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  padding-right: var(--_sizes---spacing--spacing-small);
  padding-left: var(--_sizes---spacing--spacing-small);
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.utility-page-wrap.error {
  flex-flow: column;
  position: relative;
}
.utility-page-content {
  width: var(--_sizes---default-sizes--width);
  text-align: center;
  flex-direction: column;
  max-width: 34.4375rem;
  margin-bottom: 0;
  display: flex;
}
.utility-page-content.protected {
  max-width: 30rem;
  margin-top: var(--_sizes---spacing--spacing-jumbo);
}
.utility-page-content.error {
  margin-bottom: var(--_sizes---spacing--spacing-medium);
}
.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}
.nav_menu-wrap {
  width: var(--_sizes---default-sizes--width);
  padding: var(--_sizes---spacing--spacing-big);
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  background-color: var(--_colors---text-color--light);
  justify-content: space-between;
  align-items: flex-start;
  margin-top: .62rem;
  display: flex;
}
.navbar-brand {
  width: 8.5rem;
  display: none;
}
.navbar {
  left: 0%;
  top: var(--_sizes---spacing--spacing-normal);
  background-color: #fff0;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: absolute;
  bottom: auto;
  right: 0%;
}
.nav-menu {
  background-color: var(--_colors---text-color--transparent);
  width: 57.5rem;
  margin-left: auto;
  margin-right: auto;
}
.navbar-wrapper {
  width: var(--_sizes---default-sizes--width);
  justify-content: space-between;
  align-items: center;
  max-width: 39.7rem;
  display: flex;
}
.nav-link {
  border: 1px solid var(--_colors---text-color--light);
  background-color: var(--_colors---text-color--light);
  width: 6.5625rem;
  height: 2.5rem;
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---texts-font-sizes--default-paragraph);
  line-height: var(--_typography---texts-line-height--default-paragraph);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  padding: 0;
  text-decoration: none;
  transition: all .25s;
  display: flex;
}
.nav-link:hover, .nav-link[aria-current="page"], .nav-link.is-active {
  background-color: var(--_colors---text-color--transparent);
  color: var(--_colors---text-color--light);
}
.menu-button {
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---texts-font-sizes--default-paragraph);
  line-height: var(--_typography---texts-line-height--default-paragraph);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  text-transform: uppercase;
  padding: 0;
}
.menu-button.is-open {
  color: var(--_colors---background-color--dark);
}
.hamburger-details {
  grid-column-gap: .38rem;
  grid-row-gap: .38rem;
  background-color: var(--_colors---text-color--light);
  justify-content: center;
  align-items: center;
  width: 6.5625rem;
  height: 2.5rem;
  display: flex;
}
.hamburger-logos {
  grid-column-gap: .3rem;
  grid-row-gap: .3rem;
  flex-flow: column;
  display: flex;
}
.hamburger-line {
  background-color: var(--_colors---background-color--dark);
  width: 1rem;
  height: .16rem;
}
.desk_menu-items {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.menu-items {
  grid-column-gap: 1.88rem;
  grid-row-gap: 1.88rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.dropdown_menu-title {
  color: var(--_colors---text-color--primary);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: uppercase;
}
.dropdown_menu-links {
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.dropdown_menu-link {
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---texts-font-sizes--title-bold);
  line-height: var(--_typography---texts-line-height--title-bold);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---texts-letter-spacing--title-bold);
  text-transform: uppercase;
  text-decoration: none;
  transition: all .25s;
}
.dropdown_menu-link:hover, .dropdown_menu-link[aria-current="page"], .dropdown_menu-link.is-active {
  color: var(--_colors---text-color--primary);
}
.section {
  position: relative;
}
.section.section_home-hero {
  background-image: url('../images/desktop-1.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.section.section_about {
  background-color: var(--_colors---text-color--light);
}
.section.section_process {
  background-color: var(--_colors---text-color--light);
  height: 400vh;
}
.section.section_together {
  background-image: url('../images/desktop-18-1.webp');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
.section.section_services {
  background-image: url('../images/desktop-5.webp');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
}
.section.section_service-items {
  margin-top: -15rem;
}
.section.section_pricing {
  background-image: url('../images/group-2085664255-1.webp');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: 100%;
}
.section.section_testimonial {
  background-image: url('../images/testimonials-1.webp'), url('../images/group-2085664255.webp');
  background-position: 50% 100%, 50% 0;
  background-repeat: no-repeat, no-repeat;
  background-size: 100%, 100%;
}
.section.section_blog {
  background-color: var(--_colors---text-color--light);
  margin-top: -1px;
}
.section.section_faq {
  background-color: var(--_colors---text-color--light);
}
.section.section_cta {
  background-color: var(--_colors---text-color--light);
  height: 300vh;
}
.section.section_about-hero {
  height: 400vh;
}
.section.section_functional, .section.section_director, .section.section_team {
  background-color: var(--_colors---text-color--light);
}
.section.section_logos {
  background-image: url('../images/desktop-9.webp');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: -14rem;
}
.section.section_service-hero {
  background-image: url('../images/desktop-1.png');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  position: sticky;
  top: 0;
}
.section.section_strategy {
  background-color: var(--_colors---text-color--light);
  background-image: url('../images/desktop-6.webp');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
}
.section.section_popular {
  background-color: var(--_colors---text-color--light);
}
.section.section_advantage {
  background-color: var(--_colors---text-color--light);
  background-image: url('../images/desktop-8-1.webp');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: -1px;
}
.section.section_more-blogs {
  margin-top: -14rem;
}
.section.section_blogs {
  background-color: var(--_colors---text-color--light);
}
.section.section_blog-single {
  background-image: url('../images/desktop-1_1.webp');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
.section.section_pricing-hero {
  background-image: url('../images/desktop-1-1_1.webp');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
.section.section_compare {
  background-color: var(--_colors---text-color--light);
}
.section.section_contact-hero {
  background-image: url('../images/desktop-1_2.webp');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
.padding-global {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  padding-right: var(--_sizes---spacing--spacing-big);
  padding-left: var(--_sizes---spacing--spacing-big);
  margin-left: auto;
  margin-right: auto;
}
.padding-global.together {
  position: relative;
}
.padding-global.cta {
  background-image: url('../images/cta.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  position: sticky;
  top: 0;
}
.padding-global.about-hero {
  background-image: url('../images/desktop-1-1.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
  position: sticky;
  top: 0;
}
.padding-section-large {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  padding-top: var(--_sizes---spacing--spacing-colossal);
  padding-bottom: var(--_sizes---spacing--spacing-colossal);
  grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
  grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.padding-section-large.styleguide-hero_wrapper {
  padding-top: 9.5rem;
  padding-bottom: var(--_sizes---spacing--spacing-massive);
  grid-column-gap: var(--_sizes---spacing--spacing-colossal);
  grid-row-gap: var(--_sizes---spacing--spacing-colossal);
  justify-content: center;
  align-items: center;
}
.padding-section-large.styleguide-details_wrapper {
  padding-top: var(--_sizes---spacing--spacing-medium);
  grid-column-gap: var(--_sizes---spacing--spacing-colossal);
  grid-row-gap: var(--_sizes---spacing--spacing-colossal);
}
.padding-section-large.footer_wrapper {
  padding-top: var(--_sizes---spacing--spacing-massive);
  padding-bottom: var(--_sizes---spacing--spacing-medium);
  grid-column-gap: 10rem;
  grid-row-gap: 10rem;
}
.padding-section-large.home-hero_wrapper {
  grid-column-gap: 6rem;
  grid-row-gap: 6rem;
  justify-content: center;
  align-items: center;
  padding-top: 9.5rem;
  padding-bottom: 3.13rem;
  position: relative;
}
.padding-section-large.about_wrapper {
  grid-column-gap: var(--_sizes---spacing--spacing-colossal);
  grid-row-gap: var(--_sizes---spacing--spacing-colossal);
  grid-template-rows: auto;
  grid-template-columns: .9fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.padding-section-large.process_wrapper {
  grid-template-rows: auto;
  grid-template-columns: .9fr 1fr;
  grid-auto-columns: 1fr;
  height: 100vh;
  position: sticky;
  top: 0;
}
.padding-section-large.together_wrapper {
  grid-template-rows: auto;
  grid-template-columns: .9fr 1fr;
  grid-auto-columns: 1fr;
  padding-top: 13.12rem;
  padding-bottom: 2.87rem;
}
.padding-section-large.services_wrapper {
  z-index: 2;
  grid-column-gap: 9.37rem;
  grid-row-gap: 9.37rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  padding-top: 13.75rem;
  position: relative;
}
.padding-section-large.services_wrapper:where(.services-section-about) {
  padding-top: 13.75rem;
  padding-bottom: 9rem;
}
.padding-section-large.services-items {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
}
.padding-section-large.testimonial-wrapper {
  grid-column-gap: var(--_sizes---spacing--spacing-colossal);
  grid-row-gap: var(--_sizes---spacing--spacing-colossal);
  padding-bottom: 14.87rem;
  position: relative;
}
.padding-section-large.blog-wrapper {
  padding-bottom: 12rem;
  position: relative;
}
.padding-section-large.blog-wrapper:where(.blog-section-about), .padding-section-large.blog-wrapper:where(.blog-section-more-blogs) {
  padding-top: var(--_sizes---spacing--spacing-normal);
}
.padding-section-large.faq-wrapper {
  padding-top: var(--_sizes---spacing--spacing-jumbo);
  padding-bottom: var(--_sizes---spacing--spacing-jumbo);
  grid-column-gap: var(--_sizes---spacing--spacing-massive);
  grid-row-gap: var(--_sizes---spacing--spacing-massive);
  position: relative;
}
.padding-section-large.cta-wrapper {
  max-width: 53.125rem;
  padding-top: 10.25rem;
  padding-bottom: var(--_sizes---spacing--spacing-tiny);
  grid-column-gap: var(--_sizes---spacing--spacing-colossal);
  grid-row-gap: var(--_sizes---spacing--spacing-colossal);
  justify-content: center;
  align-items: center;
  position: relative;
}
.padding-section-large.about-hero_wrapper {
  justify-content: flex-start;
  align-items: center;
  padding-top: 10rem;
  position: relative;
}
.padding-section-large.functional-wrapper {
  justify-content: flex-start;
  align-items: stretch;
  height: 400vh;
  padding: 0;
}
.padding-section-large.director_wrapper {
  grid-template-rows: auto;
  grid-template-columns: .9fr 1fr;
  grid-auto-columns: 1fr;
  padding-top: 16rem;
  padding-bottom: 10rem;
}
.padding-section-large.team_wrapper {
  grid-template-rows: auto;
  grid-template-columns: .9fr;
  grid-auto-columns: 1fr;
  max-width: 120rem;
  display: flex;
}
.padding-section-large.logos_wrapper {
  grid-column-gap: 4.75rem;
  grid-row-gap: 4.75rem;
  grid-template-rows: auto;
  grid-template-columns: .9fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  padding-top: 16rem;
  padding-bottom: 21rem;
}
.padding-section-large.service-hero_wrapper {
  padding-top: 9.5rem;
  padding-bottom: var(--_sizes---spacing--spacing-medium);
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.padding-section-large.strategy-wrapper {
  padding-top: 12.5rem;
  padding-bottom: var(--_sizes---spacing--spacing-massive);
}
.padding-section-large.popular-wrapper {
  height: 100vh;
  position: sticky;
  top: 0;
}
.padding-section-large.advantage-wrapper {
  padding-top: var(--_sizes---spacing--spacing-big);
  padding-bottom: var(--_sizes---spacing--spacing-massive);
  justify-content: center;
  align-items: center;
}
.padding-section-large.projects-hero_wrapper {
  padding-top: 9.5rem;
  padding-bottom: var(--_sizes---spacing--spacing-regular);
  grid-column-gap: 9.75rem;
  grid-row-gap: 9.75rem;
  justify-content: center;
  align-items: center;
  position: relative;
}
.padding-section-large.projects_single-hero {
  grid-column-gap: var(--_sizes---spacing--spacing-massive);
  grid-row-gap: var(--_sizes---spacing--spacing-massive);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding-top: 9.5rem;
  padding-bottom: 0;
  position: relative;
}
.padding-section-large.project-detail {
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
}
.padding-section-large.blog-single-wrapper {
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  padding-top: 10.5rem;
  padding-bottom: 20rem;
}
.padding-section-large.pricing-hero_wrapper {
  grid-column-gap: 9.5rem;
  grid-row-gap: 9.5rem;
  justify-content: center;
  align-items: center;
  padding-top: 9.5rem;
  position: relative;
}
.padding-section-large.pricing-single_wrapper {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  justify-content: center;
  align-items: center;
  padding-top: 9.5rem;
  position: relative;
}
.padding-section-large.contact-hero_wrapper {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  justify-content: center;
  align-items: center;
  padding-top: 11rem;
  position: relative;
}
.padding-section-large.changelog-details_wrapper {
  padding-top: var(--_sizes---spacing--spacing-medium);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
}
.padding-section-large.instructions-details_wrapper {
  padding-top: var(--_sizes---spacing--spacing-medium);
  grid-column-gap: var(--_sizes---spacing--spacing-massive);
  grid-row-gap: var(--_sizes---spacing--spacing-massive);
}
.container-large {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  max-width: var(--_sizes---container--max-width);
  padding-right: var(--_sizes---spacing--spacing-small);
  padding-left: var(--_sizes---spacing--spacing-small);
  margin-left: auto;
  margin-right: auto;
}
.site-link {
  width: 13.8125rem;
}
.display {
  color: var(--_colors---text-color--light);
  font-size: var(--_typography---heading-font-sizes--display-04);
  line-height: var(--_typography---heading-line-height--display-04);
  letter-spacing: var(--_typography---heading-letter-spacing--display-04);
}
.styleguide-detail {
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  grid-template-rows: auto;
  grid-template-columns: .8fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}
.styleguide_subtitle {
  top: var(--_sizes---spacing--spacing-regular);
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #ff5122;
  position: sticky;
}
.styleguide_cards {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  display: flex;
}
.styleguide_cards._02 {
  grid-column-gap: 1.88rem;
  grid-row-gap: 1.88rem;
}
.styleguide_card {
  width: var(--_sizes---default-sizes--width);
  background-color: var(--_colors---text-color--primary);
  justify-content: center;
  align-items: center;
  height: 12.5rem;
  display: flex;
  position: relative;
}
.styleguide_card._02 {
  border: 1px solid var(--_colors---text-color--light);
  background-color: var(--_colors---text-color--transparent);
}
.styleguide_card._03 {
  background-color: var(--_colors---text-color--light);
}
.styleguide_card.license {
  background-color: var(--_colors---text-color--light);
  text-decoration: none;
}
.color_code._03 {
  color: var(--_colors---background-color--dark);
}
.decoration-icon {
  height: auto;
  position: absolute;
  inset: 0% 0% auto;
}
.decoration-icon.bottom {
  inset: auto 0% 0%;
}
.typography_detail {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.typography-line {
  width: var(--_sizes---default-sizes--width);
  background-color: var(--_colors---text-color--primary);
  height: .125rem;
}
.title-bold {
  font-family: var(--font-family--rubik);
  color: var(--_colors---text-color--light);
  font-size: var(--_typography---heading-font-sizes--h3);
  line-height: var(--_typography---heading-line-height--h3);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---heading-letter-spacing--h3);
  text-transform: uppercase;
  flex: none;
  margin-right: 1.2rem;
  text-decoration: none;
}
.title-bold:where(.marquee-animate-light) {
  color: var(--_colors---text-color--primary);
}
.title-bold.contact {
  transition: all .4s;
}
.title-bold.contact:hover {
  transform: rotate(-2deg);
}
.paragraph-large {
  font-family: var(--font-family--inter);
  color: var(--_colors---text-color--light);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: uppercase;
}
.button {
  font-family: var(--font-family--rubik);
  color: var(--_colors---text-color--light);
  font-weight: var(--font-weight--heavy);
  text-transform: uppercase;
}
.button.blog-date {
  color: var(--_colors---background-color--dark);
}
.button.changelog-date {
  color: var(--_colors---text-color--primary);
}
.buttons-flex {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.primary-button {
  padding: var(--_sizes---spacing--spacing-medium);
  border: 4px solid var(--_colors---text-color--light);
  background-color: var(--_colors---background-color--dark);
  font-family: var(--font-family--rubik);
  color: var(--_colors---text-color--light);
  font-weight: var(--font-weight--heavy);
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: all .25s;
  display: flex;
  position: relative;
}
.primary-button:hover {
  color: var(--_colors---background-color--dark);
}
.primary-button-text {
  z-index: 1;
  position: relative;
}
.primary-button-bg {
  width: var(--_sizes---default-sizes--width);
  background-color: var(--_colors---text-color--light);
  height: 0%;
  position: absolute;
  inset: auto 0% 0%;
}
.secondary-button {
  padding: var(--_sizes---spacing--spacing-medium);
  border: 4px solid var(--_colors---background-color--dark);
  background-color: var(--_colors---text-color--light);
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-weight: var(--font-weight--heavy);
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
}
.secondary-button:where(.secondary-button-price), .secondary-button.cookies-button {
  padding-right: var(--_sizes---spacing--spacing-big);
  padding-left: var(--_sizes---spacing--spacing-big);
}
.secondary-button_texts {
  height: 1rem;
  padding-right: .125rem;
  overflow: clip;
}
.marquee {
  background-color: var(--_colors---text-color--primary);
  justify-content: flex-start;
  align-items: center;
  padding-top: 3.05rem;
  padding-bottom: 3.05rem;
  display: flex;
  position: relative;
}
.marquee:where(.marquee-animate-light) {
  background-color: var(--_colors---text-color--light);
}
.marquee-items {
  flex: none;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.marquee-icon {
  width: 2.125rem;
  height: 2.125rem;
  margin-right: 1.2rem;
}
.top-header {
  width: var(--_sizes---default-sizes--width);
  height: auto;
}
.footer_top {
  grid-column-gap: var(--_sizes---spacing--spacing-colossal);
  grid-row-gap: var(--_sizes---spacing--spacing-colossal);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.marquee-dots {
  z-index: 1;
  height: auto;
  position: absolute;
  inset: auto 0% -7.5%;
}
.marquee-dots:where(.marquee-animate-light) {
  display: none;
}
.marquee-dots.top {
  display: none;
  inset: -8% 0% auto;
}
.marquee-dots.top:where(.marquee-animate-light) {
  display: block;
}
.footer-logo_link {
  font-family: var(--font-family--rubik);
  color: var(--_colors---text-color--light);
  font-size: var(--_typography---heading-font-sizes--display-03);
  line-height: var(--_typography---heading-line-height--display-03);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---heading-letter-spacing--display-03);
  text-transform: uppercase;
  text-underline-offset: auto;
  text-underline-position: from-font;
  -webkit-text-decoration: underline wavy #ff5122;
  text-decoration: underline wavy #ff5122;
  text-decoration-thickness: calc(1em / 10);
  transition-property: all;
  transition-duration: .25s;
  transition-timing-function: ease;
}
.footer-logo_link:hover {
  color: var(--_colors---text-color--primary);
}
.footer-social_links {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}
.footer-social_link {
  width: var(--_sizes---default-sizes--width);
  background-color: var(--_colors---text-color--primary);
  height: 15rem;
  font-family: var(--font-family--rubik);
  color: var(--_colors---text-color--light);
  font-size: var(--_typography---heading-font-sizes--h2);
  line-height: var(--_typography---heading-line-height--h2);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---heading-letter-spacing--h2);
  text-transform: uppercase;
  border-radius: 3.125rem;
  justify-content: center;
  align-items: center;
  padding: 1.87rem 2.25rem;
  text-decoration: none;
  display: flex;
}
.footer-social_info {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  border: 2px dashed var(--_colors---text-color--light);
  border-radius: var(--_sizes---border-radius--radius-large);
  justify-content: center;
  align-items: center;
  display: flex;
}
.footer_bottom {
  width: var(--_sizes---default-sizes--width);
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
}
.copyright-text {
  width: var(--_sizes---default-sizes--width);
  max-width: 31.875rem;
  font-size: var(--_typography---texts-font-sizes--title-bold);
  line-height: var(--_typography---texts-line-height--title-bold);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--title-bold);
  text-transform: capitalize;
}
.copyright-link {
  color: var(--_colors---text-color--light);
  text-decoration: none;
  transition: all .25s;
}
.copyright-link:hover {
  color: var(--_colors---text-color--primary);
}
.back-top {
  border-radius: var(--_sizes---border-radius--radius-circle);
  background-color: var(--_colors---text-color--light);
  width: 3.75rem;
  height: 3.75rem;
  color: var(--_colors---background-color--dark);
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: all .25s;
  display: flex;
}
.back-top:hover {
  background-color: var(--_colors---text-color--primary);
  color: var(--_colors---text-color--light);
}
.back-top_arrow {
  width: 1.125rem;
}
.none {
  display: none;
}
.footer-rotate_icon {
  width: 11.8125rem;
  height: 11.8125rem;
  position: absolute;
  inset: auto 20% -7rem auto;
}
.home-hero_top {
  z-index: 1;
  width: var(--_sizes---default-sizes--width);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 38rem;
  display: flex;
  position: relative;
}
.home-hero_title {
  font-family: var(--font-family--inter);
  font-size: var(--_typography---heading-font-sizes--h3);
  line-height: var(--_typography---heading-line-height--h3);
  font-weight: var(--font-weight--semi-bold);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--h3);
  margin-top: 2.19rem;
  margin-bottom: 1.88rem;
}
.home-hero_bottom {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: .31rem;
  grid-row-gap: .31rem;
  flex-flow: column;
  display: flex;
}
.home-hero_texts {
  grid-column-gap: .31rem;
  grid-row-gap: .31rem;
  justify-content: center;
  align-items: center;
  display: flex;
}
.home-hero_text {
  background-color: var(--_colors---text-color--primary);
  flex: none;
  padding: .62rem 1.25rem;
}
.home-hero_icon {
  width: 8.375rem;
  height: auto;
  position: absolute;
  inset: 10% auto auto 10%;
}
.home-hero_icon._02 {
  width: 17.0625rem;
  inset: auto auto 33% 0%;
  transform: rotate(-15deg);
}
.home-hero_icon._03, .home-hero_icon._04 {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  position: static;
}
.home-hero_icon.testimonial {
  width: 9.60838rem;
  left: 0%;
}
.home-hero_icon.faq, .home-hero_icon.pricing {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  position: static;
}
.home-hero_card {
  z-index: 1;
  justify-content: center;
  align-items: center;
  width: 12rem;
  height: 12rem;
  display: flex;
  position: absolute;
  inset: auto -2% 24% auto;
}
.home-hero_card._02 {
  z-index: 0;
  width: 21.0625rem;
  height: 8.4375rem;
  bottom: 36%;
  right: 3%;
  transform: rotate(-6.079deg);
}
.home-hero_card.fun {
  z-index: 0;
  width: 21.0625rem;
  height: 8.4375rem;
  inset: auto -28% -10% auto;
  transform: rotate(-6.079deg);
}
.home-hero_card.flexible {
  inset: 4rem auto auto 33%;
  transform: rotate(-27deg);
}
.home-hero_card.testimonial {
  inset: auto 1% -16% auto;
}
.home-hero_card.faq {
  z-index: 0;
  width: 18.4823rem;
  height: auto;
  inset: auto -14% 30% auto;
  transform: rotate(-6.079deg);
}
.home-hero_card.service-hero {
  bottom: 16%;
  right: 15%;
}
.home-hero_card.pricing {
  z-index: 0;
  width: 18.4823rem;
  height: auto;
  inset: 14rem auto auto;
}
.dynamic-text {
  z-index: 1;
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
  position: absolute;
}
.dynamic-text._02 {
  width: 15.6875rem;
  font-size: var(--_typography---heading-font-sizes--h3);
  line-height: var(--_typography---heading-line-height--h3);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--h3);
}
.dynamic-text.fun {
  width: 12rem;
  color: var(--_colors---text-color--light);
  font-size: var(--_typography---heading-font-sizes--h3);
  line-height: var(--_typography---heading-line-height--h3);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--h3);
}
.dynamic-text.faq, .dynamic-text.pricing {
  width: 12rem;
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---heading-font-sizes--h3);
  line-height: var(--_typography---heading-line-height--h3);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--h3);
}
.about_left {
  z-index: 1;
  padding-top: var(--_sizes---spacing--spacing-colossal);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
  position: relative;
}
.about_right {
  z-index: 1;
  grid-column-gap: var(--_sizes---spacing--spacing-normal);
  grid-row-gap: var(--_sizes---spacing--spacing-normal);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
}
.about-title {
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---heading-font-sizes--h1);
  line-height: var(--_typography---heading-line-height--h1);
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
  text-transform: capitalize;
}
.about_icon {
  width: 5.6875rem;
  height: 5.6875rem;
  position: absolute;
  inset: 0% 0% auto auto;
}
.about_icon.faq {
  height: auto;
  inset: auto 0% 25% auto;
}
.creative-title {
  width: var(--_sizes---default-sizes--width);
  max-width: 18.1875rem;
  font-family: var(--font-family--inter);
  color: var(--_colors---text-color--primary);
  font-size: var(--_typography---texts-font-sizes--title-bold);
  line-height: var(--_typography---texts-line-height--title-bold);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--title-bold);
}
.creative_image-box {
  width: var(--_sizes---default-sizes--width);
  max-width: 27.3125rem;
  height: 25.375rem;
  padding: var(--_sizes---spacing--spacing-small) var(--_sizes---spacing--spacing-large);
  background-color: var(--_colors---background-color--dark);
  position: relative;
}
.creative_icon {
  width: 6.6875rem;
  height: 6.6875rem;
  position: absolute;
  inset: -10% 3% auto auto;
}
.about_title-line {
  text-decoration: underline;
  -webkit-text-decoration-color: var(--_colors---text-color--primary);
  text-decoration-color: var(--_colors---text-color--primary);
  -webkit-text-decoration-skip-ink: auto;
  text-decoration-skip-ink: auto;
  text-decoration-style: wavy;
  text-decoration-thickness: calc(1em / 16.6667);
}
.process_items {
  z-index: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}
.process_item {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  border: 2px solid var(--_colors---text-color--light);
  background-color: var(--_colors---text-color--primary);
  flex-flow: column;
  max-width: 25rem;
  height: 34rem;
  padding: 1.88rem 1.75rem;
  display: flex;
}
.process_item._01 {
  z-index: 3;
  position: relative;
}
.process_item._02 {
  z-index: 2;
  border-color: var(--_colors---background-color--dark);
  position: absolute;
  transform: translate(.62rem, .62rem);
}
.process_item._03 {
  z-index: 1;
  border-color: var(--_colors---background-color--dark);
  position: absolute;
  transform: translate(1.24rem, 1.24rem);
}
.process_item-overflow {
  border: 2px solid var(--_colors---text-color--light);
}
.process_item-content {
  grid-column-gap: .62rem;
  grid-row-gap: .62rem;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.process_item-desp {
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: none;
}
.process-marquee {
  width: 140%;
  padding-top: var(--_sizes---spacing--spacing-medium);
  padding-bottom: var(--_sizes---spacing--spacing-medium);
  background-color: var(--_colors---text-color--primary);
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: absolute;
  transform: translate(-20%, -50%)rotate(7deg);
}
.process_marquee-items {
  flex: none;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.process_marquee-text {
  margin-right: var(--_sizes---spacing--spacing-medium);
  font-size: var(--_typography---heading-font-sizes--h1);
  line-height: var(--_typography---heading-line-height--h1);
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
}
.process_marquee-text._02 {
  text-decoration: underline;
  -webkit-text-decoration-color: var(--_colors---text-color--light);
  text-decoration-color: var(--_colors---text-color--light);
  text-decoration-style: wavy;
  text-decoration-thickness: calc(1em / 20);
}
.process_marquee-text._03 {
  color: var(--_colors---text-color--transparent);
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--_colors---text-color--light);
}
.process_marquee-icon {
  width: 2.125rem;
  height: 2.125rem;
  margin-right: var(--_sizes---spacing--spacing-medium);
}
.process-icon {
  width: 10.0625rem;
  height: 10.0625rem;
  position: absolute;
  inset: -10% 0% auto auto;
}
.process-icon.two {
  width: 15rem;
  height: 15rem;
  inset: auto auto 5% 30%;
}
.process_icon-big {
  width: 55rem;
  height: 55rem;
  position: absolute;
  inset: -80% auto auto -40%;
}
.together-text {
  margin-right: var(--_sizes---spacing--spacing-massive);
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---heading-font-sizes--display-03);
  line-height: var(--_typography---heading-line-height--display-03);
  letter-spacing: var(--_typography---heading-letter-spacing--display-03);
}
.together_marquee-texts {
  flex: none;
  display: flex;
}
.together-marquee {
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}
.together-marquee.director-marquee {
  top: var(--_sizes---spacing--spacing-jumbo);
}
.together-contents {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 45rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.together-icon {
  width: 8.75rem;
  height: auto;
}
.together-detail {
  width: var(--_sizes---default-sizes--width);
  position: relative;
}
.together-title {
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---heading-font-sizes--h1);
  line-height: var(--_typography---heading-line-height--h1);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
}
.together-image {
  border: 1px solid var(--_colors---background-color--dark);
  width: 6rem;
  height: auto;
  box-shadow: 3px 3px 0 0 var(--_colors---background-color--dark);
  border-radius: .375rem;
  position: absolute;
  inset: 0% 15rem auto auto;
}
.together-image._02 {
  width: 4.75rem;
  inset: 7.25rem auto auto 1rem;
}
.together-image._03 {
  width: 4.75rem;
  inset: 7.25rem 1rem auto auto;
}
.together-image._04 {
  width: 5.25rem;
  inset: 10.75rem 16.4rem auto auto;
}
.together-image._05 {
  width: 5.5rem;
  inset: auto auto 4rem 19rem;
}
.together-tab {
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---heading-font-sizes--h1);
  line-height: var(--_typography---heading-line-height--h1);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
  display: none;
}
.services_top {
  justify-content: center;
  align-items: center;
  display: flex;
}
.services_bottom {
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  grid-template-rows: auto;
  grid-template-columns: .4fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}
.section_title {
  width: 10.625rem;
  height: 3.5625rem;
  font-weight: var(--font-weight--semi-bold);
  text-align: center;
  text-transform: uppercase;
  background-image: url('../images/ellipse-18.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}
.section_title.blog {
  width: 12.5rem;
  height: 4.1875rem;
  color: var(--_colors---background-color--dark);
  background-image: url('../images/ellipse-18_1.webp');
}
.section_title.advantage {
  width: 11.625rem;
  height: 3.9rem;
  color: var(--_colors---background-color--dark);
  background-image: url('../images/ellipse-18_1.webp');
}
.service_items {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 21rem;
  display: flex;
}
.service_items-contents {
  position: relative;
}
.service_item {
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  opacity: .6;
  cursor: pointer;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.service_item._01 {
  opacity: 100;
}
.service_item-icon {
  opacity: 0;
  width: 1.31463rem;
  min-width: 1.31463rem;
  height: auto;
}
.service_item-icon._01 {
  opacity: 100;
}
.service_item-name {
  font-size: var(--_typography---texts-font-sizes--title-bold);
  line-height: var(--_typography---texts-line-height--title-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--title-bold);
  transform: translate(-1.75rem);
}
.service_item-name._01 {
  transform: translate(0);
}
.service_item-content {
  grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
  grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.service_item-content._02, .service_item-content._03, .service_item-content._04 {
  opacity: 0;
  position: absolute;
  inset: 0%;
}
.service_item-card {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-massive);
  grid-row-gap: var(--_sizes---spacing--spacing-massive);
  border-radius: var(--_sizes---spacing--spacing-normal);
  background-color: var(--_colors---text-color--light);
  flex-flow: column;
  max-width: 25rem;
  padding: 1.88rem 1.5rem;
  display: flex;
  overflow: clip;
}
.service_item-text {
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---heading-font-sizes--h2);
  line-height: var(--_typography---heading-line-height--h2);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---heading-letter-spacing--h2);
  text-transform: uppercase;
  padding-right: 1.88rem;
}
.service_item-tags {
  grid-column-gap: .31rem;
  grid-row-gap: .31rem;
  flex-flow: column;
  display: flex;
}
.service_tag-cards {
  grid-column-gap: .31rem;
  grid-row-gap: .31rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.service_tag-card {
  grid-column-gap: var(--_sizes---spacing--spacing-tiny);
  grid-row-gap: var(--_sizes---spacing--spacing-tiny);
  background-color: var(--_colors---text-color--primary);
  flex: none;
  justify-content: center;
  align-items: center;
  padding: .5rem;
  display: flex;
}
.service_tag-card.strategy {
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
}
.tag-dot {
  border-radius: var(--_sizes---border-radius--radius-circle);
  background-color: var(--_colors---background-color--dark);
  width: .4rem;
  min-width: .4rem;
  height: .4rem;
  min-height: .4rem;
}
.tag-dot.strategy {
  width: .5rem;
  min-width: .5rem;
  height: .5rem;
  min-height: .5rem;
}
.service_item-tag {
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---heading-font-sizes--h5);
  line-height: var(--_typography---heading-line-height--h5);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---heading-letter-spacing--h5);
  text-transform: uppercase;
}
.service_item-desp {
  width: var(--_sizes---default-sizes--width);
  max-width: 20rem;
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: capitalize;
}
.together-circle-icon {
  width: 10.0625rem;
  height: 10.0625rem;
  position: absolute;
  inset: 25% auto auto -6%;
}
.faster-card {
  background-color: var(--_colors---text-color--primary);
  border-radius: .875rem;
  justify-content: center;
  align-items: center;
  width: 9.875rem;
  height: 5.0625rem;
  padding: .67rem;
  display: flex;
  transform: rotate(-4deg);
}
.faster-card._02 {
  z-index: 1;
  background-color: var(--_colors---text-color--light);
  position: absolute;
  inset: 33.5% auto auto 16%;
  transform: rotate(4deg);
}
.faster-card._01 {
  z-index: 2;
  position: absolute;
  inset: 30% auto auto 16%;
}
.faster-card.faq-two {
  z-index: 1;
  background-color: var(--_colors---background-color--dark);
  position: absolute;
  inset: 15.5% auto auto 0%;
  transform: rotate(4deg);
}
.faster-card.faq-one {
  z-index: 2;
  position: absolute;
  inset: 11% auto auto 0%;
}
.faster-card.team-fb-link {
  z-index: 2;
  width: 11.0625rem;
  font-family: var(--font-family--rubik);
  color: var(--_colors---text-color--light);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: uppercase;
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
  position: absolute;
  inset: auto auto 5.5rem;
}
.faster-card.team-ins-link {
  z-index: 1;
  background-color: var(--_colors---text-color--light);
  width: 11.875rem;
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: uppercase;
  text-decoration: none;
  position: absolute;
  inset: auto 31% 3rem auto;
  transform: rotate(4deg);
}
.faster-text-box {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  border: 2px dashed var(--_colors---text-color--light);
  border-radius: .625rem;
  justify-content: center;
  align-items: center;
  display: flex;
}
.faster-text-box._02 {
  border-color: var(--_colors---background-color--dark);
}
.faster-text-box.faq-line {
  border-color: var(--_colors---text-color--light);
}
.faster-text-box.team-ins {
  border-color: var(--_colors---background-color--dark);
}
.faster-text {
  font-family: var(--font-family--rubik);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--heavy);
  text-align: center;
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: uppercase;
}
.faster-text._02 {
  color: var(--_colors---background-color--dark);
}
.faster-text.faq {
  color: var(--_colors---text-color--light);
}
.faster-dot {
  border-radius: var(--_sizes---border-radius--radius-circle);
  background-color: var(--_colors---background-color--dark);
  width: .6875rem;
  height: .6875rem;
  position: absolute;
  inset: auto auto 25% 1%;
}
.faster-dot.faq {
  background-color: var(--_colors---text-color--light);
}
.offer-card {
  z-index: 2;
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  background-image: url('../images/frame-34.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  flex-flow: column;
  width: 15rem;
  height: 10.1875rem;
  padding: 1.5rem .62rem;
  display: flex;
  position: absolute;
  inset: 33% auto auto 53.5%;
  transform: rotate(12.275deg);
}
.offer-card.director {
  background-image: url('../images/frame-34_1.png');
  inset: auto auto -20% -13%;
}
.offer-text {
  border-bottom: 2px dashed var(--_colors---text-color--light);
  font-size: var(--_typography---texts-font-sizes--paragraph-s);
  line-height: var(--_typography---texts-line-height--paragraph-s);
  font-weight: var(--font-weight--semi-bold);
  text-align: center;
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-s);
  text-transform: uppercase;
  padding-bottom: .81rem;
}
.offer-text.director {
  text-align: left;
}
.deal-text {
  font-family: var(--font-family--rubik);
  font-size: var(--_typography---texts-font-sizes--title-bold);
  line-height: var(--_typography---texts-line-height--title-bold);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---texts-letter-spacing--title-bold);
  text-transform: uppercase;
  text-shadow: 0 4px #003020;
}
.deal-text.director {
  width: 90%;
}
.project-marquee {
  z-index: 2;
  background-color: var(--_colors---text-color--transparent);
  margin-bottom: 0;
  position: relative;
  overflow: clip;
}
.project-marquee:where(.services-section-about) {
  display: none;
}
.services-cards {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  text-decoration: none;
  display: grid;
}
.service-left_card {
  justify-content: center;
  align-items: flex-end;
  padding: 15rem 2rem 7.5rem;
  display: flex;
  overflow: clip;
}
.service-left_card._02 {
  justify-content: center;
  align-items: center;
  padding-top: 12.5rem;
}
.service-left_card.more {
  background-color: var(--_colors---text-color--light);
  justify-content: center;
  align-items: center;
  padding-top: 15rem;
}
.service-right_card {
  background-color: var(--_colors---text-color--primary);
  justify-content: flex-start;
  align-items: center;
  padding: 15rem 4rem 7.5rem;
  display: flex;
  overflow: clip;
}
.service-right_card._02 {
  padding-top: 12.5rem;
}
.service-right_card.more {
  padding-top: 15rem;
}
.service-item_detail {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: 10rem;
  grid-row-gap: 10rem;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 39.1875rem;
  display: flex;
}
.service-item_title {
  color: var(--_colors---text-color--light);
}
.service-item_desp {
  color: var(--_colors---text-color--light);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: capitalize;
}
.services-circle-icon {
  align-self: center;
  width: 7.2rem;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  transform: translate(0, 1.1rem);
}
.services-circle-icon.testimonial {
  width: 6.3125rem;
  inset: 30% 1% auto auto;
}
.services-item-bg {
  z-index: 1;
  background-color: var(--_colors---background-color--dark);
  width: 43rem;
  height: 4.5rem;
  position: absolute;
  inset: 0% 0% auto auto;
}
.pricing-top {
  width: var(--_sizes---default-sizes--width);
  max-width: 56.875rem;
  position: relative;
}
.pricing-cards {
  z-index: 0;
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  max-width: 66.25rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.flexible-text {
  z-index: 1;
  font-family: var(--font-family--rubik);
  color: var(--_colors---text-color--light);
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
  position: absolute;
}
.pricing-card {
  z-index: 1;
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  background-color: var(--_colors---text-color--light);
  flex-flow: column;
  display: flex;
  position: relative;
}
.pricing-card.pricing-single {
  max-width: 62.5rem;
  margin-left: auto;
  margin-right: auto;
}
.pricing_card-top {
  padding: var(--_sizes---spacing--spacing-small);
  background-color: var(--_colors---text-color--primary);
  justify-content: center;
  align-items: center;
  display: flex;
}
.pricing_card-middle {
  padding: var(--_sizes---spacing--spacing-regular) var(--_sizes---spacing--spacing-small);
  border-bottom: 1px solid var(--_colors---background-color--dark);
  justify-content: center;
  align-items: center;
  display: flex;
}
.pricing_card-bottom {
  height: var(--_sizes---default-sizes--height);
  padding: var(--_sizes---spacing--spacing-jumbo) var(--_sizes---spacing--spacing-normal) var(--_sizes---spacing--spacing-big);
  grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
  grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}
.pricing_card-icon {
  width: 3.125rem;
  height: 3.125rem;
}
.plan-name {
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---heading-font-sizes--h1);
  line-height: var(--_typography---heading-line-height--h1);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
}
.includes-detail {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.includes-text {
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-weight: var(--font-weight--heavy);
  text-transform: uppercase;
}
.includes-list {
  grid-column-gap: .88rem;
  grid-row-gap: .88rem;
  color: var(--_colors---background-color--dark);
  font-weight: var(--font-weight--semi-bold);
  text-transform: uppercase;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
}
.includes-list ul {
  grid-column-gap: .88rem;
  grid-row-gap: .88rem;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  padding-left: 20px;
  display: flex;
}
.includes-list li {
  text-align: center;
}
.plan-buttons {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.plan-price {
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---texts-font-sizes--title-bold);
  line-height: var(--_typography---texts-line-height--title-bold);
  font-weight: var(--font-weight--heavy);
  text-align: center;
  letter-spacing: var(--_typography---texts-letter-spacing--title-bold);
  text-transform: uppercase;
}
.plan-dot {
  border-radius: var(--_sizes---border-radius--radius-circle);
  background-color: var(--_colors---background-color--dark);
  width: 6.25rem;
  height: 6.25rem;
  position: absolute;
  inset: auto auto 25% -10%;
}
.plan-dot.right {
  inset: auto -10% 25% auto;
}
.plan-dot.right.right-pricing-single {
  right: -5%;
}
.plan-dot.left-pricing-single {
  left: -5%;
}
.pricing-doll {
  z-index: 0;
  width: 18.7502rem;
  height: auto;
  position: absolute;
  inset: -30% -7% auto auto;
}
.pricing-doll:where(.pricing-cards-pricing) {
  display: none;
}
.testimonial-title {
  font-size: var(--_typography---heading-font-sizes--h1);
  line-height: var(--_typography---heading-line-height--h1);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
  text-decoration: underline;
  -webkit-text-decoration-color: var(--_colors---text-color--primary);
  text-decoration-color: var(--_colors---text-color--primary);
  text-decoration-style: wavy;
  text-decoration-thickness: calc(1em / 14.2857);
}
.testimonial-slider {
  z-index: 1;
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  background-color: var(--_colors---text-color--transparent);
  max-width: 69.1875rem;
  margin-left: auto;
  margin-right: auto;
  overflow: clip;
}
.slide-nav {
  display: none;
}
.testimonial-mask {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  overflow: visible;
}
.testimonial-slide {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  margin-right: 1rem;
}
.testimonial-slider-content {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  grid-column-gap: .63rem;
  grid-row-gap: .63rem;
  background-color: var(--_colors---text-color--primary);
  grid-template-rows: auto;
  grid-template-columns: 1fr .75fr;
  grid-auto-columns: 1fr;
  padding: .63rem;
  display: grid;
}
.testimonial-left-content {
  padding: var(--_sizes---spacing--spacing-normal);
  grid-column-gap: 1.88rem;
  grid-row-gap: 1.88rem;
  background-color: var(--_colors---text-color--light);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
  overflow: clip;
}
.testimonial-author-name {
  font-family: var(--font-family--rubik);
  color: var(--_colors---text-color--primary);
  font-size: var(--_typography---heading-font-sizes--h1);
  line-height: var(--_typography---heading-line-height--h1);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
}
.testimonial-author-desp {
  width: var(--_sizes---default-sizes--width);
  max-width: 30.0625rem;
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: capitalize;
}
.left-arrow {
  border-radius: var(--_sizes---border-radius--radius-circle);
  background-color: var(--_colors---background-color--dark);
  justify-content: center;
  align-items: center;
  width: 2.75rem;
  height: 2.75rem;
  transition: all .25s;
  display: flex;
  inset: auto auto 2.5rem 2rem;
}
.left-arrow:hover {
  background-color: var(--_colors---text-color--primary);
}
.testimonial-arrow {
  justify-content: center;
  align-items: center;
  width: 1.375rem;
  height: 1.375rem;
  display: flex;
}
.right-arrow {
  border-radius: var(--_sizes---border-radius--radius-circle);
  background-color: var(--_colors---background-color--dark);
  justify-content: center;
  align-items: center;
  width: 2.75rem;
  height: 2.75rem;
  transition: all .25s;
  display: flex;
  inset: auto auto 2.5rem 5.5rem;
}
.right-arrow:hover {
  background-color: var(--_colors---text-color--primary);
}
.blog-top {
  width: var(--_sizes---default-sizes--width);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.paragraph {
  width: var(--_sizes---default-sizes--width);
  max-width: 16rem;
  font-family: var(--font-family--inter);
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---texts-font-sizes--title-bold);
  line-height: var(--_typography---texts-line-height--title-bold);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--title-bold);
  text-transform: capitalize;
  margin-left: auto;
  margin-right: 0;
}
.blogs-slider {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  background-color: var(--_colors---text-color--transparent);
}
.blogs-mask {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  max-width: 30rem;
  overflow: visible;
}
.blogs-slide {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  padding: 0;
}
.blog-item-content {
  width: var(--_sizes---default-sizes--width);
  padding: var(--_sizes---spacing--spacing-medium);
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  border: 1px solid var(--_colors---background-color--dark);
  flex-flow: column;
  text-decoration: none;
  display: flex;
}
.blog-item-top {
  grid-column-gap: 1.88rem;
  grid-row-gap: 1.88rem;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.blog-reading-time {
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---heading-font-sizes--display-04);
  line-height: var(--_typography---heading-line-height--display-04);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---heading-letter-spacing--display-04);
}
.blog-item-name {
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---texts-font-sizes--title-bold);
  line-height: var(--_typography---texts-line-height--title-bold);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---texts-letter-spacing--title-bold);
  text-transform: capitalize;
}
.blog-item-overflow {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  overflow: clip;
}
.empty-state {
  border-radius: var(--_sizes---border-radius--radius-xsmall);
  background-color: var(--_colors---text-color--primary);
  text-align: center;
}
.blog-slider-arrow {
  border: 4px solid var(--_colors---background-color--dark);
  background-color: var(--_colors---text-color--light);
  width: 8.75rem;
  box-shadow: 0 4px 0 0 var(--_colors---background-color--dark);
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---texts-font-sizes--default-paragraph);
  line-height: var(--_typography---texts-line-height--default-paragraph);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  padding: 1.25rem 1.87rem;
  transition: all .25s;
  display: flex;
  inset: auto auto -7rem 0%;
}
.blog-slider-arrow.right {
  inset: auto 34% -7rem auto;
}
.blog-slider-arrow.left {
  left: 34%;
}
.blog-slider-texts {
  height: 1rem;
  padding-right: .125rem;
  overflow: clip;
}
.faq-header {
  width: var(--_sizes---default-sizes--width);
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.faq-title {
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---heading-font-sizes--display-04);
  line-height: var(--_typography---heading-line-height--display-04);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--display-04);
}
.faq-icon {
  width: 6.1rem;
  height: auto;
  position: absolute;
  inset: .6rem auto auto 8.4rem;
}
.primary-color {
  color: var(--_colors---text-color--primary);
}
.faq-items {
  border-top: 1px dashed var(--_colors---background-color--dark);
  flex-flow: column;
  display: flex;
}
.faq-list {
  width: var(--_sizes---default-sizes--width);
  padding: var(--_sizes---spacing--spacing-big) 0rem;
  border-bottom: 1px dashed var(--_colors---background-color--dark);
  background-color: var(--_colors---text-color--transparent);
  cursor: pointer;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.faq-list.hide {
  display: none;
}
.faq-question {
  width: var(--_sizes---default-sizes--width);
  justify-content: space-between;
  align-items: center;
  max-width: 43.75rem;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  display: flex;
}
.faq-ques {
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-weight: var(--font-weight--heavy);
  white-space: pre-wrap;
}
.faq-answer {
  width: var(--_sizes---default-sizes--width);
  background-color: #fff0;
  min-width: 43.75rem;
  max-width: 43.75rem;
  display: block;
  position: static;
  overflow: clip;
}
.faq-para {
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: none;
  white-space: pre-wrap;
  padding-top: 10px;
}
.faq-num {
  color: var(--_colors---text-color--primary);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: uppercase;
  position: absolute;
  inset: auto auto auto 0%;
}
.faq-item {
  width: var(--_sizes---default-sizes--width);
  cursor: pointer;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}
.faq-arrow-box {
  border-radius: var(--_sizes---border-radius--radius-circle);
  background-color: var(--_colors---text-color--primary);
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 1.8rem;
  min-width: 1.8rem;
  height: 1.8rem;
  min-height: 1.8rem;
  display: flex;
  position: absolute;
  inset: auto 0% auto auto;
}
.faq-lottie {
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 1.2rem;
  min-width: 1.2rem;
  height: 1.2rem;
  min-height: 1.2rem;
  display: flex;
}
.cta-title {
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---heading-font-sizes--display-04);
  line-height: var(--_typography---heading-line-height--display-04);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--display-04);
}
.cta-ready-card {
  z-index: 1;
  border: 7px solid var(--_colors---text-color--light);
  border-radius: var(--_sizes---border-radius--radius-large);
  background-color: var(--_colors---text-color--primary);
  justify-content: center;
  align-items: center;
  width: 12.75rem;
  height: 11.75rem;
  display: flex;
  position: absolute;
  inset: auto 0% 38% auto;
  transform: rotate(11.213deg);
}
.cta-ready-text {
  font-family: var(--font-family--rubik);
}
.cta-cross {
  left: auto;
  top: var(--_sizes---spacing--spacing-small);
  right: var(--_sizes---spacing--spacing-small);
  width: 2rem;
  height: auto;
  display: none;
  position: absolute;
  bottom: auto;
}
.cta-image {
  border-radius: var(--_sizes---border-radius--radius-medium);
  max-width: 25.8125rem;
  height: auto;
  position: absolute;
  inset: auto auto auto 0%;
  transform: translate(-11rem, -7.5rem)rotate(-4.538deg);
}
.cta-image.right {
  max-width: 16.7rem;
  inset: auto 0% auto auto;
  transform: translate(10rem, -12rem)rotate(9.007deg);
}
.about_hero-title {
  text-align: center;
}
.about_hero-content {
  grid-column-gap: 14.25rem;
  grid-row-gap: 14.25rem;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.about_hero-block {
  grid-column-gap: .62rem;
  grid-row-gap: .62rem;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.about_hero-desp {
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--semi-bold);
  text-align: center;
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: uppercase;
}
.about_image-block {
  border: 6px solid var(--_colors---text-color--light);
  background-color: var(--_colors---background-color--dark);
  width: 14.375rem;
  height: 11.25rem;
  position: absolute;
  inset: 4.3rem auto auto 7%;
  overflow: clip;
}
.about_image-block._02 {
  inset: 4.3rem 7% auto auto;
}
.about_image-block._03 {
  inset: auto auto auto 2%;
}
.about_image-block._05 {
  border-left-width: 12px;
  border-right-width: 12px;
  inset: auto auto 2rem 20%;
}
.about_image-block._04 {
  inset: auto 2% auto auto;
}
.about_image-block._06 {
  inset: auto 20% -5% auto;
}
.functional-sticky {
  width: var(--_sizes---default-sizes--width);
  height: 100vh;
  padding-top: var(--_sizes---spacing--spacing-jumbo);
  padding-bottom: var(--_sizes---spacing--spacing-jumbo);
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
  position: sticky;
  top: 0;
}
.functional-desp {
  width: var(--_sizes---default-sizes--width);
  max-width: 18.75rem;
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: capitalize;
}
.functional-counters {
  width: var(--_sizes---default-sizes--width);
  justify-content: center;
  align-items: center;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}
.functional-counter-block {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.functional-counter-block._02, .functional-counter-block._03 {
  opacity: 0;
  position: absolute;
  inset: 0%;
}
.functional-text {
  color: var(--_colors---text-color--primary);
  font-size: var(--_typography---heading-font-sizes--display-04);
  line-height: var(--_typography---heading-line-height--display-04);
  letter-spacing: var(--_typography---heading-letter-spacing--display-04);
}
.functional-para {
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---heading-font-sizes--h1);
  line-height: var(--_typography---heading-line-height--h1);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
}
.functional-icon {
  width: 14rem;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.functional-lines {
  height: var(--_sizes---default-sizes--height);
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0% 0% 0% auto;
}
.functional-line-block {
  border: 1px solid var(--_colors---background-color--dark);
  background-color: var(--_colors---text-color--light);
  width: 1.25rem;
  height: 3.75rem;
}
.functional-line-block._01 {
  height: 8.75rem;
}
.functional-animate-line {
  width: var(--_sizes---default-sizes--width);
  background-color: var(--_colors---text-color--primary);
  height: 0%;
}
.functional-animate-line._01 {
  height: 100%;
}
.hide-embed {
  display: none;
}
.director-contents {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-massive);
  grid-row-gap: var(--_sizes---spacing--spacing-massive);
  grid-template-rows: auto;
  grid-template-columns: .85fr 1fr;
  grid-auto-columns: 1fr;
  align-items: end;
  max-width: 64.375rem;
  margin-left: auto;
  margin-right: 0;
  display: grid;
  position: relative;
}
.director-desp {
  color: var(--_colors---text-color--primary);
  text-align: center;
  text-transform: capitalize;
}
.director-icon {
  width: 14.75rem;
  height: auto;
  position: absolute;
  inset: -9rem 14rem auto auto;
}
.director-dot {
  border: 5px solid var(--_colors---background-color--dark);
  border-radius: var(--_sizes---border-radius--radius-circle);
  width: 1.875rem;
  height: 1.875rem;
  position: absolute;
  inset: 7rem 16rem auto auto;
}
.director-dot._02 {
  border-width: 3px;
  width: .9375rem;
  height: .9375rem;
  top: 10rem;
  right: 19rem;
}
.team-top {
  padding-right: var(--_sizes---spacing--spacing-massive);
  padding-left: var(--_sizes---spacing--spacing-massive);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.team-member-num {
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---heading-font-sizes--display-04);
  line-height: var(--_typography---heading-line-height--display-04);
  letter-spacing: var(--_typography---heading-letter-spacing--display-04);
  text-transform: uppercase;
}
.team-member-num._02, .team-member-num._03, .team-member-num._04, .team-member-num._05 {
  opacity: 0;
  position: absolute;
  inset: 0%;
}
.team-total-num {
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---heading-font-sizes--display-04);
  line-height: var(--_typography---heading-line-height--display-04);
  letter-spacing: var(--_typography---heading-letter-spacing--display-04);
  text-transform: uppercase;
}
.team-members-nums {
  position: relative;
}
.team-bottom {
  z-index: 1;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  border-top: 2px solid var(--_colors---background-color--dark);
  border-bottom: 2px solid var(--_colors---background-color--dark);
  background-color: var(--_colors---text-color--light);
  grid-template-rows: auto;
  grid-template-columns: 1fr .7fr;
  grid-auto-columns: 1fr;
  display: grid;
  position: relative;
}
.team-members-images {
  border-left: 1px solid var(--_colors---background-color--dark);
  position: relative;
}
.team-member-info {
  padding: var(--_sizes---spacing--spacing-xxsmall) var(--_sizes---spacing--spacing-massive);
  border-bottom: 2px solid var(--_colors---background-color--dark);
  position: relative;
  overflow: clip;
}
.team-member-info.last {
  border-bottom-style: none;
}
.team-member-name {
  z-index: 1;
  width: var(--_sizes---default-sizes--width);
  max-width: 27rem;
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---heading-font-sizes--h1);
  line-height: var(--_typography---heading-line-height--h1);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
  text-transform: capitalize;
  position: relative;
}
.member-images-details {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  padding: var(--_sizes---spacing--spacing-small);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: clip;
}
.member-images-details._01 {
  opacity: 1;
}
.member-images-details._02, .member-images-details._03, .member-images-details._04, .member-images-details._05 {
  opacity: 0;
  position: absolute;
  inset: 0%;
}
.member-images-details.mob {
  opacity: 1;
  display: none;
}
.team-member-bg {
  width: var(--_sizes---default-sizes--width);
  background-color: var(--_colors---background-color--dark);
  height: 0%;
  position: absolute;
  inset: auto 0% 0%;
}
.startup-title {
  width: var(--_sizes---default-sizes--width);
  max-width: 26.25rem;
  font-family: var(--font-family--inter);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
}
.startups-logos-grid {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.startups-logos {
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  flex-flow: column;
  display: flex;
}
.startups-logos._02 {
  margin-top: 10rem;
}
.startup-logo-card {
  width: var(--_sizes---default-sizes--width);
  height: 19.375rem;
  padding: var(--_sizes---spacing--spacing-normal);
  border: 2px solid var(--_colors---light-10);
  background-color: var(--_colors---text-color--transparent);
  color: var(--_colors---text-color--light);
  justify-content: center;
  align-items: center;
  transition: all .25s;
  display: flex;
  position: relative;
}
.startup-logo-card:hover {
  border-width: 10px;
  border-color: var(--_colors---text-color--light);
  background-color: var(--_colors---text-color--primary);
  border-radius: 3.125rem;
}
.startup-logo-svg {
  width: 13.4375rem;
  height: auto;
}
.startup-logo-svg:where(.startup-logo-card-02) {
  width: 14.3125rem;
}
.startup-icon {
  opacity: 0;
  width: 7.5rem;
  height: auto;
  position: absolute;
  inset: -20% -20% auto auto;
}
.startup-right-bg {
  background-color: var(--_colors---text-color--light);
  width: 30rem;
  height: 5rem;
  position: absolute;
  inset: 0% 0% auto auto;
}
.startup-left-bg {
  background-color: var(--_colors---text-color--light);
  width: 30rem;
  height: 5rem;
  position: absolute;
  inset: 0% auto auto 0%;
}
.team-line {
  height: auto;
  position: absolute;
  inset: -1% 0% auto;
}
.services-title {
  font-size: var(--_typography---heading-font-sizes--display-02);
  line-height: var(--_typography---heading-line-height--display-02);
  letter-spacing: var(--_typography---heading-letter-spacing--display-02);
}
.service_hero-height {
  height: 270vh;
}
.service_hero-card {
  border: 6px solid var(--_colors---text-color--light);
  background-color: var(--_colors---text-color--light);
  width: 17.0625rem;
  height: 11.4375rem;
  position: absolute;
  inset: auto auto 22rem 7%;
  overflow: clip;
  transform: rotate(-15deg);
}
.service_hero-card._02 {
  bottom: 12rem;
}
.service_hero-card._03 {
  inset: 20% -5% auto auto;
}
.strategy-top {
  width: var(--_sizes---default-sizes--width);
  justify-content: center;
  align-items: center;
  max-width: 41.875rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.strategy-title {
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---heading-font-sizes--h1);
  line-height: var(--_typography---heading-line-height--h1);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
}
.strategy-line {
  text-decoration: underline;
  -webkit-text-decoration-color: var(--_colors---text-color--primary);
  text-decoration-color: var(--_colors---text-color--primary);
  text-decoration-style: wavy;
  text-decoration-thickness: calc(1em / 20);
}
.strategy-bottom {
  width: var(--_sizes---default-sizes--width);
  display: flex;
  position: relative;
}
.strategy-card {
  width: 25%;
  height: 35rem;
  padding: var(--_sizes---spacing--spacing-medium);
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  border-style: solid none solid solid;
  border-width: 2px;
  border-color: var(--_colors---background-color--dark);
  background-color: var(--_colors---text-color--light);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}
.strategy-card.last {
  border-right-style: solid;
}
.strategy-card-top {
  position: relative;
}
.strategy-card-bottom {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-normal);
  grid-row-gap: var(--_sizes---spacing--spacing-normal);
  justify-content: space-between;
  align-items: flex-end;
  height: 18rem;
  display: flex;
  overflow: clip;
}
.strategy-part-one {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.strategy-num {
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---texts-font-sizes--default-paragraph);
  line-height: var(--_typography---texts-line-height--default-paragraph);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  text-transform: uppercase;
}
.strategy-num.active {
  font-size: var(--_typography---texts-font-sizes--title-bold);
  line-height: var(--_typography---texts-line-height--title-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--title-bold);
}
.strategy-name {
  max-width: 15rem;
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---texts-font-sizes--title-bold);
  line-height: var(--_typography---texts-line-height--title-bold);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---texts-letter-spacing--title-bold);
  text-transform: capitalize;
}
.strategy-name.active {
  width: var(--_sizes---default-sizes--width);
  max-width: 18.375rem;
  margin-left: auto;
  margin-right: 0;
}
.strategy-name._02 {
  max-width: 12rem;
}
.strategy-name._04 {
  max-width: 13rem;
}
.strategy-part-two {
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.strategy-part-two.active {
  width: var(--_sizes---default-sizes--width);
  opacity: 0;
  pointer-events: none;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
  position: absolute;
  inset: 0%;
}
.strategy-tags {
  grid-column-gap: .31rem;
  grid-row-gap: .31rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.strategy-image-block {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  border: 2px solid var(--_colors---background-color--dark);
  background-color: var(--_colors---background-color--dark);
  max-width: 17.5rem;
  overflow: clip;
}
.strategy-tag {
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-weight: var(--font-weight--heavy);
  text-transform: uppercase;
  flex: none;
}
.popular-height {
  height: 700vh;
}
.popular-title {
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---heading-font-sizes--display-04);
  line-height: var(--_typography---heading-line-height--display-04);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--display-04);
}
.popular-title.mob {
  display: none;
}
.popular-header {
  width: var(--_sizes---default-sizes--width);
  justify-content: center;
  align-items: center;
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}
.popular-svg {
  width: 7.5rem;
  height: auto;
  position: absolute;
  inset: auto auto auto 35%;
}
.popular-cards {
  z-index: 1;
  width: var(--_sizes---default-sizes--width);
  max-width: 40rem;
  margin-top: 10rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.service-image-overflow {
  width: var(--_sizes---default-sizes--width);
  background-color: var(--_colors---text-color--primary);
  max-width: 32.5625rem;
  padding: .62rem 1.37rem;
  overflow: clip;
}
.service-image-overflow._01 {
  max-width: none;
  padding-top: var(--_sizes---spacing--spacing-massive);
  padding-bottom: var(--_sizes---spacing--spacing-massive);
  justify-content: center;
  align-items: center;
  display: flex;
}
.service-item-lnk {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  background-color: var(--_colors---text-color--light);
  flex-flow: column;
  text-decoration: none;
  display: flex;
}
.overflow-hidden {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  overflow: clip;
}
.service_item-detail {
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.service_item-left {
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.service-item-name {
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-weight: var(--font-weight--heavy);
}
.service-item-category {
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: capitalize;
}
.service-collection-list {
  grid-column-gap: 24rem;
  grid-row-gap: 24rem;
  flex-flow: column;
  display: flex;
}
.service-item-year {
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-weight: var(--font-weight--heavy);
}
.advantage-cards {
  z-index: 1;
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  position: relative;
}
.advantage-card {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  border-style: solid none solid solid;
  border-width: 2px;
  border-color: var(--_colors---background-color--dark);
  background-color: var(--_colors---text-color--light);
  flex-flow: column;
  justify-content: space-between;
  height: 43.75rem;
  padding: 1.87rem;
  display: flex;
  position: relative;
  overflow: clip;
}
.advantage-card:where(.advantage-card-last) {
  border-right-style: solid;
}
.advantage-top {
  position: relative;
  overflow: clip;
}
.advantage-name {
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---heading-font-sizes--h1);
  line-height: var(--_typography---heading-line-height--h1);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
  text-transform: capitalize;
}
.advantage-content {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  transform: translate(-100%);
}
.advantage-num {
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---heading-font-sizes--display-04);
  line-height: var(--_typography---heading-line-height--display-04);
  letter-spacing: var(--_typography---heading-letter-spacing--display-04);
}
.advantage-desp {
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: capitalize;
}
.advantage-main-num {
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---heading-font-sizes--display-01);
  line-height: var(--_typography---heading-line-height--display-01);
  letter-spacing: var(--_typography---heading-letter-spacing--display-01);
  position: absolute;
  inset: -.5% auto auto -17%;
}
.advantage-icon {
  top: auto;
  left: auto;
  right: var(--_sizes---spacing--spacing-normal);
  width: 8.3125rem;
  height: auto;
  position: absolute;
  bottom: 20%;
  transform: scale(0);
}
.advantage-star {
  z-index: 0;
  width: 26rem;
  height: auto;
  position: absolute;
  inset: 0% auto auto -14%;
}
.project_hero-title {
  width: var(--_sizes---default-sizes--width);
  max-width: 59.375rem;
  color: var(--_colors---text-color--light);
  font-size: var(--_typography---heading-font-sizes--display-04);
  line-height: var(--_typography---heading-line-height--display-04);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--display-04);
}
.project-svg {
  width: 195px;
  height: auto;
  position: absolute;
}
.project-banner-bg {
  z-index: 1;
  width: var(--_sizes---default-sizes--width);
  height: 48rem;
  padding-right: var(--_sizes---spacing--spacing-big);
  padding-left: var(--_sizes---spacing--spacing-big);
  background-color: var(--_colors---text-color--primary);
  position: relative;
}
.project-banner {
  z-index: 1;
  object-position: 50% 0%;
  position: relative;
}
.single-icon {
  z-index: 0;
  width: 12rem;
  height: auto;
  position: absolute;
  inset: -16% 16% auto auto;
}
.project-detail-one {
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  grid-template-rows: auto;
  grid-template-columns: .75fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}
.project-item-name {
  top: var(--_sizes---spacing--spacing-regular);
  position: sticky;
}
.project-detail-right {
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  flex-flow: column;
  display: flex;
}
.project-desp {
  color: var(--_colors---text-color--light);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: capitalize;
}
.project-flex {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  display: flex;
}
.project-info {
  padding-bottom: var(--_sizes---spacing--spacing-medium);
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  border-bottom: 1px solid var(--_colors---text-color--light);
  flex-flow: column;
  display: flex;
}
.services-text {
  font-family: var(--font-family--rubik);
  color: var(--_colors---text-color--primary);
  font-weight: var(--font-weight--heavy);
  text-transform: uppercase;
}
.services-name {
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: capitalize;
}
.project-lightbox {
  width: var(--_sizes---default-sizes--width);
  overflow: clip;
}
.concepts-details p {
  margin-bottom: var(--_sizes---spacing--spacing-big);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: capitalize;
}
.gallery-collection-list {
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.gallery-collection-wrapper {
  z-index: 1;
  margin-top: -2.5rem;
  position: relative;
}
.project-lightbox-image {
  transition: all .6s;
}
.project-lightbox-image:hover {
  transform: scale(1.1);
}
.more-right-bg {
  background-color: var(--_colors---background-color--dark);
  width: 30rem;
  height: 5rem;
  position: absolute;
  inset: 0% 0% auto auto;
}
.more-left-bg {
  background-color: var(--_colors---background-color--dark);
  width: 30rem;
  height: 5rem;
  position: absolute;
  inset: 0% auto auto 0%;
}
.blog_hero-title {
  width: var(--_sizes---default-sizes--width);
  max-width: 67.5rem;
  color: var(--_colors---text-color--light);
  font-size: var(--_typography---heading-font-sizes--display-04);
  line-height: var(--_typography---heading-line-height--display-04);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--display-04);
}
.blogs-collection-lists {
  width: var(--_sizes---default-sizes--width);
}
.blogs-collection-list {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
  grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
  flex-flow: column;
  display: flex;
}
.blog-collection-item {
  width: var(--_sizes---default-sizes--width);
  padding-bottom: var(--_sizes---spacing--spacing-jumbo);
  border-bottom: .125rem solid var(--_colors---background-color--dark);
}
.blog-collection-item:last-child {
  border-bottom-style: none;
  padding-top: 0;
  padding-bottom: 0;
}
.blog-item-link {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-normal);
  grid-row-gap: var(--_sizes---spacing--spacing-normal);
  grid-template-rows: auto;
  grid-template-columns: .7fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  text-decoration: none;
  display: grid;
}
.blog-category-name {
  top: var(--_sizes---spacing--spacing-regular);
  font-family: var(--font-family--rubik);
  color: var(--_colors---text-color--primary);
  font-size: var(--_typography---texts-font-sizes--title-bold);
  line-height: var(--_typography---texts-line-height--title-bold);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---texts-letter-spacing--title-bold);
  text-transform: uppercase;
  position: sticky;
}
.blog-category-name.date {
  text-transform: capitalize;
}
.blog-contents {
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  flex-flow: column;
  display: flex;
}
.blog-item-info {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.blog-name {
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---texts-font-sizes--title-bold);
  line-height: var(--_typography---texts-line-height--title-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--title-bold);
}
.blog-button {
  padding-top: var(--_sizes---spacing--spacing-medium);
  padding-right: var(--_sizes---spacing--spacing-regular);
  padding-bottom: var(--_sizes---spacing--spacing-medium);
  padding-left: var(--_sizes---spacing--spacing-regular);
  border-top-style: solid;
  border-top-width: 4px;
  border-top-color: var(--_colors---background-color--dark);
  border-right-style: solid;
  border-right-width: 4px;
  border-right-color: var(--_colors---background-color--dark);
  border-bottom-style: solid;
  border-bottom-width: 4px;
  border-bottom-color: var(--_colors---background-color--dark);
  border-left-style: solid;
  border-left-width: 4px;
  border-left-color: var(--_colors---background-color--dark);
  background-color: var(--_colors---text-color--light);
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-weight: var(--font-weight--heavy);
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
  box-shadow: 0 4px #003020;
}
.blog-button:where(.secondary-button-price) {
  padding-right: var(--_sizes---spacing--spacing-big);
  padding-left: var(--_sizes---spacing--spacing-big);
}
.blog-dates-info {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.blog-single-top {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.blog-single-bottom {
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  flex-flow: column;
  display: flex;
}
.blog-top-detail {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-massive);
  grid-row-gap: var(--_sizes---spacing--spacing-massive);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 36rem;
  display: flex;
}
.blog-single-item {
  text-align: center;
  text-transform: capitalize;
}
.blog-middle-detail {
  width: var(--_sizes---default-sizes--width);
  max-width: 36rem;
  margin-top: var(--_sizes---spacing--spacing-big);
  margin-bottom: var(--_sizes---spacing--spacing-medium);
  grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
  grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
  flex-flow: column;
  display: flex;
}
.info-blog {
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.blog-author-details {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  justify-content: center;
  align-items: center;
  max-width: 21.3125rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.blog-author-icon {
  border: 2px solid var(--_colors---text-color--light);
  border-radius: var(--_sizes---border-radius--radius-circle);
  width: 5rem;
  min-width: 5rem;
  height: 5rem;
  min-height: 5rem;
  padding: .62rem;
}
.blog-author-intro {
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: capitalize;
}
.blog-item-banner {
  z-index: 1;
  height: 42.5rem;
  position: relative;
}
.blog-banner-box {
  width: var(--_sizes---default-sizes--width);
  position: relative;
}
.blog-item-icon {
  width: 13.5625rem;
  height: auto;
  position: absolute;
  inset: -20% 5% auto auto;
}
.blog-icon-abs {
  width: 12.25rem;
  height: 12.25rem;
  position: absolute;
  inset: 5% auto auto -8%;
}
.blog-icon-abs.pricing {
  width: 9.52663rem;
  height: auto;
  top: 10%;
  left: -5%;
}
.description-text {
  top: var(--_sizes---spacing--spacing-regular);
  width: 18rem;
  position: sticky;
}
.description-details p {
  margin-bottom: var(--_sizes---spacing--spacing-medium);
  color: var(--_colors---text-color--light);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: capitalize;
}
.blog-gallery {
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.blog-gallery._02 {
  grid-template-columns: 1fr 1fr;
}
.blog-lightbox-link {
  width: var(--_sizes---default-sizes--width);
  overflow: clip;
}
.blog-galleries {
  margin-top: -1.25rem;
}
.pricing-bottom {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-massive);
  grid-row-gap: var(--_sizes---spacing--spacing-massive);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 67.5rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}
.pricing_hero-title {
  font-size: var(--_typography---heading-font-sizes--display-04);
  line-height: var(--_typography---heading-line-height--display-04);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--display-04);
}
.compare-details {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr .75fr .75fr;
  grid-auto-columns: 1fr;
  display: grid;
  position: relative;
}
.compare-elements {
  width: var(--_sizes---default-sizes--width);
}
.compare-header {
  height: 12.5rem;
  padding-top: var(--_sizes---spacing--spacing-small);
  padding-bottom: var(--_sizes---spacing--spacing-small);
  border-bottom: 1px solid var(--_colors---background-color--dark);
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}
.compare-header.plan {
  padding: var(--_sizes---spacing--spacing-regular);
  grid-column-gap: var(--_sizes---spacing--spacing-normal);
  grid-row-gap: var(--_sizes---spacing--spacing-normal);
  background-color: var(--_colors---background-color--dark);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
}
.compare-features-text {
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---heading-font-sizes--h3);
  line-height: var(--_typography---heading-line-height--h3);
  letter-spacing: var(--_typography---heading-letter-spacing--h3);
}
.compare-features-text.plan {
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---heading-font-sizes--h2);
  line-height: var(--_typography---heading-line-height--h2);
  letter-spacing: var(--_typography---heading-letter-spacing--h2);
}
.compare-item {
  width: var(--_sizes---default-sizes--width);
  height: 4.0625rem;
  padding-top: var(--_sizes---spacing--spacing-medium);
  padding-bottom: var(--_sizes---spacing--spacing-medium);
  border-bottom: 1px solid var(--_colors---background-color--dark);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.compare-item.space {
  padding-left: var(--_sizes---spacing--spacing-xsmall);
}
.compare-item-text {
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: capitalize;
}
.compare-minus-arrow {
  width: 1.25rem;
  height: auto;
  color: var(--_colors---background-color--dark);
  justify-content: center;
  align-items: center;
  display: flex;
}
.plan-svg {
  width: 7.1875rem;
  height: auto;
  position: absolute;
  inset: -10% auto auto -4%;
}
.pricing-collection-list {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.pricing-collection-wrapper {
  width: var(--_sizes---default-sizes--width);
}
.plan-item {
  font-size: var(--_typography---heading-font-sizes--h1);
  line-height: var(--_typography---heading-line-height--h1);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
}
.plan-naming {
  margin-top: var(--_sizes---spacing--spacing-massive);
  margin-bottom: var(--_sizes---spacing--spacing-jumbo);
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  text-decoration: underline;
  -webkit-text-decoration-color: var(--_colors---text-color--primary);
  text-decoration-color: var(--_colors---text-color--primary);
  justify-content: center;
  align-items: center;
  text-decoration-style: wavy;
  text-decoration-thickness: calc(1em / 12.5);
  display: flex;
}
.contact-title {
  font-size: var(--_typography---heading-font-sizes--display-04);
  line-height: var(--_typography---heading-line-height--display-04);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--display-04);
}
.contact-header {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-massive);
  grid-row-gap: var(--_sizes---spacing--spacing-massive);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 60rem;
  margin: 9.15rem auto 14.25rem;
  display: flex;
  position: relative;
}
.contact-star-icon {
  width: 6.25rem;
  height: auto;
  position: absolute;
  inset: 2% auto auto 46%;
}
.opacity-zero {
  opacity: 0;
}
.contact-card {
  width: var(--_sizes---default-sizes--width);
  padding: 12.5rem var(--_sizes---spacing--spacing-massive) var(--_sizes---spacing--spacing-massive);
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  border-top-left-radius: var(--_sizes---spacing--spacing-jumbo);
  background-color: var(--_colors---text-color--light);
  border-top-right-radius: 7rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}
.contact-left {
  z-index: 3;
  width: var(--_sizes---default-sizes--width);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 19rem;
  display: flex;
  position: relative;
}
.contact-form-block {
  z-index: 5;
  width: var(--_sizes---default-sizes--width);
  background-color: var(--_colors---text-color--transparent);
  max-width: 32.5rem;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: 0;
  position: relative;
}
.contact-form {
  width: var(--_sizes---default-sizes--width);
}
.conversation-title {
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---heading-font-sizes--h1);
  line-height: var(--_typography---heading-line-height--h1);
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
  white-space: pre-wrap;
  word-break: break-all;
}
.conversation-icon {
  width: 11.3125rem;
  height: 11.3125rem;
  margin-top: -2.5rem;
  margin-left: 6rem;
}
.field-label {
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---texts-font-sizes--default-paragraph);
  line-height: var(--_typography---texts-line-height--default-paragraph);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  text-transform: uppercase;
  margin-bottom: 0;
}
.text-field {
  z-index: 10;
  border: 2px solid var(--_colors---background-color--dark);
  background-color: var(--_colors---text-color--transparent);
  height: 3.25rem;
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---texts-font-sizes--default-paragraph);
  line-height: var(--_typography---texts-line-height--default-paragraph);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  margin-bottom: 0;
  padding: .62rem 1rem;
  position: relative;
}
.text-field:focus {
  border-color: var(--_colors---background-color--dark);
}
.text-field::placeholder {
  color: var(--_colors---background-color--dark);
}
.contact-form-fields {
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 1.88rem;
  display: flex;
}
.contact-fields-grid {
  z-index: 5;
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.text-area {
  border: 2px solid var(--_colors---background-color--dark);
  background-color: var(--_colors---text-color--transparent);
  height: 8.25rem;
  min-height: 8.25rem;
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---texts-font-sizes--default-paragraph);
  line-height: var(--_typography---texts-line-height--default-paragraph);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  margin-bottom: 0;
  padding: .62rem 1rem;
}
.text-area:focus {
  border-color: var(--_colors---background-color--dark);
}
.text-area::placeholder {
  color: var(--_colors---background-color--dark);
}
.form-button {
  width: var(--_sizes---default-sizes--width);
  padding: var(--_sizes---spacing--spacing-medium);
  border: 4px solid var(--_colors---background-color--dark);
  background-color: var(--_colors---text-color--light);
  box-shadow: 0 4px 0 0 var(--_colors---background-color--dark);
  font-family: var(--font-family--rubik);
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---texts-font-sizes--default-paragraph);
  line-height: var(--_typography---texts-line-height--default-paragraph);
  font-weight: var(--font-weight--heavy);
  text-align: center;
  letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  text-transform: uppercase;
  transition: all .25s;
}
.form-button:hover {
  background-color: var(--_colors---background-color--dark);
  color: var(--_colors---text-color--light);
}
.form-button.protected {
  border-color: var(--_colors---text-color--light);
  background-color: var(--_colors---background-color--dark);
  box-shadow: 0 4px 0 0 var(--_colors---text-color--light);
  color: var(--_colors---text-color--light);
}
.form-button.protected:hover {
  background-color: var(--_colors---text-color--light);
  color: var(--_colors---background-color--dark);
}
.contact-marquee {
  z-index: 2;
  width: var(--_sizes---default-sizes--width);
  background-color: var(--_colors---text-color--transparent);
  margin-bottom: 0;
  position: absolute;
  inset: auto 0% 41%;
  overflow: clip;
}
.contact-marquee:where(.services-section-about) {
  display: none;
}
.success-message {
  border-radius: var(--_sizes---border-radius--radius-xsmall);
  background-color: var(--_colors---text-color--primary);
  text-align: center;
}
.error-message {
  margin-top: var(--_sizes---spacing--spacing-medium);
  background-color: var(--_colors---text-color--transparent);
  color: var(--_colors---text-color--primary);
  padding: 0;
}
.global-link {
  position: absolute;
  inset: 20% auto auto;
}
.field-label-hide {
  display: none;
}
.protected-title {
  margin-bottom: var(--_sizes---spacing--spacing-big);
  color: var(--_colors---text-color--light);
  font-size: var(--_typography---heading-font-sizes--h1);
  line-height: var(--_typography---heading-line-height--h1);
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
  text-decoration: underline;
  -webkit-text-decoration-color: var(--_colors---text-color--primary);
  text-decoration-color: var(--_colors---text-color--primary);
  text-decoration-style: wavy;
  text-decoration-thickness: calc(1em / 12.5);
}
.pass-text-field {
  height: 3.6875rem;
  margin-bottom: var(--_sizes---spacing--spacing-small);
  border: 2px solid var(--_colors---text-color--light);
  background-color: var(--_colors---text-color--transparent);
  color: var(--_colors---text-color--light);
  font-size: var(--_typography---texts-font-sizes--default-paragraph);
  line-height: var(--_typography---texts-line-height--default-paragraph);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  padding: .62rem 1rem;
}
.pass-text-field:focus {
  border-color: var(--_colors---text-color--light);
}
.pass-text-field::placeholder {
  color: var(--_colors---text-color--light);
}
.protected-items {
  width: var(--_sizes---default-sizes--width);
}
.license-detail {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 45rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.license-para {
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--semi-bold);
  text-align: center;
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: capitalize;
}
.license-images {
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.license-images._02 {
  display: block;
}
.license-info-detail {
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  grid-template-rows: auto;
  grid-template-columns: .5fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}
.license-image {
  border: 2px solid var(--_colors---text-color--light);
}
.changelog-card {
  width: var(--_sizes---default-sizes--width);
  padding: var(--_sizes---spacing--spacing-big);
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  background-color: var(--_colors---text-color--light);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.changelog-info-flex {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.changelog-text {
  color: var(--_colors---background-color--dark);
}
.changelog-lists {
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: capitalize;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 0;
  padding-left: 20px;
  display: flex;
}
.cookies {
  top: auto;
  left: auto;
  right: var(--_sizes---spacing--spacing-jumbo);
  bottom: var(--_sizes---spacing--spacing-big);
  z-index: 999;
  width: var(--_sizes---default-sizes--width);
  max-width: 38.75rem;
  padding: var(--_sizes---spacing--spacing-big);
  grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
  grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
  background-color: var(--_colors---text-color--light);
  -webkit-backdrop-filter: blur(175.15px);
  backdrop-filter: blur(175.15px);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: fixed;
}
.cookies-flex {
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.cookies-title {
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---texts-font-sizes--title-bold);
  line-height: var(--_typography---texts-line-height--title-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--title-bold);
}
.cookies-desp {
  color: var(--_colors---background-color--dark);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: capitalize;
}
.wave-ribbon {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
}
.wave-ribbon.hide {
  display: none;
}
.terms-list {
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 0;
  padding-left: 20px;
  display: flex;
}
.terms-flex {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.terms-flex.header {
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
}
.staggers-cards {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  display: flex;
}
.staggers-box {
  border-radius: var(--_sizes---border-radius--radius-tiny);
  background-color: var(--_colors---text-color--light);
  width: 4rem;
  height: 4rem;
}
.code-block {
  width: var(--_sizes---default-sizes--width);
}
.gsap-info {
  font-size: var(--_typography---heading-font-sizes--h3);
  line-height: var(--_typography---heading-line-height--h3);
  letter-spacing: var(--_typography---heading-letter-spacing--h3);
}@media screen and (min-width: 1440px) {

  body {
    --_typography---texts-font-sizes--default-paragraph: 1rem;
    --_typography---texts-line-height--default-paragraph: 130%;
    --_typography---texts-letter-spacing--default-paragraph: -.06rem;
    --_typography---heading-font-sizes--h1: 3.25rem;
    --_typography---heading-line-height--h1: 120%;
    --_typography---heading-letter-spacing--h1: -.0975rem;
    --_typography---heading-font-sizes--h2: 2.625rem;
    --_typography---heading-line-height--h2: 120%;
    --_typography---heading-letter-spacing--h2: -.07875rem;
    --_typography---heading-font-sizes--h3: 2.125rem;
    --_typography---heading-line-height--h3: 120%;
    --_typography---heading-letter-spacing--h3: -.1275rem;
    --_typography---heading-font-sizes--h4: 1.5rem;
    --_typography---heading-line-height--h4: 120%;
    --_typography---heading-letter-spacing--h4: -.09rem;
    --_typography---heading-font-sizes--h5: 1.25rem;
    --_typography---heading-line-height--h5: 140%;
    --_typography---heading-letter-spacing--h5: -.0375rem;
    --_typography---texts-font-sizes--paragraph-l: 1.625rem;
    --_typography---texts-line-height--paragraph-l: 120%;
    --_typography---texts-letter-spacing--paragraph-l: -.0975rem;
    --_typography---texts-font-sizes--title-bold: 2rem;
    --_typography---texts-line-height--title-bold: 120%;
    --_typography---texts-letter-spacing--title-bold: -.08rem;
    --_typography---heading-font-sizes--display-04: 8.25rem;
    --_typography---heading-line-height--display-04: 120%;
    --_typography---heading-letter-spacing--display-04: -.165rem;
    --_typography---heading-font-sizes--display-03: 9.6rem;
    --_typography---heading-line-height--display-03: 120%;
    --_typography---heading-letter-spacing--display-03: -.55125rem;
    --_typography---heading-font-sizes--h6: 1.125rem;
    --_typography---heading-line-height--h6: 150%;
    --_typography---heading-letter-spacing--h6: -.02rem;
    --_typography---texts-font-sizes--paragraph-s: .75rem;
    --_typography---texts-line-height--paragraph-s: 125%;
    --_typography---texts-letter-spacing--paragraph-s: -.045rem;
    --_typography---heading-font-sizes--display-02: 19.2rem;
    --_typography---heading-line-height--display-02: 120%;
    --_typography---heading-letter-spacing--display-02: -1.0875rem;
    --_typography---heading-font-sizes--display-01: 25rem;
    --_typography---heading-line-height--display-01: 120%;
    --_typography---heading-letter-spacing--display-01: -1.5rem;
  }
  .blog-slider-arrow.right {
    right: 38%;
  }
  .blog-slider-arrow.left {
    left: 38%;
  }
  .service_hero-card {
    bottom: 24rem;
  }
  .service_hero-card._02 {
    bottom: 14rem;
  }
  .service_hero-card._03 {
    right: -4%;
  }}
@media screen and (min-width: 1920px) {

  body {
    --_typography---texts-font-sizes--default-paragraph: 1rem;
    --_typography---texts-line-height--default-paragraph: 130%;
    --_typography---texts-letter-spacing--default-paragraph: -.06rem;
    --_typography---heading-font-sizes--h1: 3.25rem;
    --_typography---heading-line-height--h1: 120%;
    --_typography---heading-letter-spacing--h1: -.0975rem;
    --_typography---heading-font-sizes--h2: 2.625rem;
    --_typography---heading-line-height--h2: 120%;
    --_typography---heading-letter-spacing--h2: -.07875rem;
    --_typography---heading-font-sizes--h3: 2.125rem;
    --_typography---heading-line-height--h3: 120%;
    --_typography---heading-letter-spacing--h3: -.1275rem;
    --_typography---heading-font-sizes--h4: 1.5rem;
    --_typography---heading-line-height--h4: 120%;
    --_typography---heading-letter-spacing--h4: -.09rem;
    --_typography---heading-font-sizes--h5: 1.25rem;
    --_typography---heading-line-height--h5: 140%;
    --_typography---heading-letter-spacing--h5: -.0375rem;
    --_typography---texts-font-sizes--paragraph-l: 1.625rem;
    --_typography---texts-line-height--paragraph-l: 120%;
    --_typography---texts-letter-spacing--paragraph-l: -.0975rem;
    --_typography---texts-font-sizes--title-bold: 2rem;
    --_typography---texts-line-height--title-bold: 120%;
    --_typography---texts-letter-spacing--title-bold: -.08rem;
    --_typography---heading-font-sizes--display-04: 8.25rem;
    --_typography---heading-line-height--display-04: 120%;
    --_typography---heading-letter-spacing--display-04: -.165rem;
    --_typography---heading-font-sizes--display-03: 9.6rem;
    --_typography---heading-line-height--display-03: 120%;
    --_typography---heading-letter-spacing--display-03: -.55125rem;
    --_typography---heading-font-sizes--h6: 1.125rem;
    --_typography---heading-line-height--h6: 150%;
    --_typography---heading-letter-spacing--h6: -.02rem;
    --_typography---texts-font-sizes--paragraph-s: .75rem;
    --_typography---texts-line-height--paragraph-s: 125%;
    --_typography---texts-letter-spacing--paragraph-s: -.045rem;
    --_typography---heading-font-sizes--display-02: 24.75rem;
    --_typography---heading-line-height--display-02: 120%;
    --_typography---heading-letter-spacing--display-02: -1.0875rem;
    --_typography---heading-font-sizes--display-01: 25rem;
    --_typography---heading-line-height--display-01: 120%;
    --_typography---heading-letter-spacing--display-01: -1.5rem;
  }
  .home-hero_card.service-hero {
    bottom: 20%;
    right: 8%;
  }
  .process_icon-big {
    top: -77%;
    left: -20%;
  }
  .together-circle-icon {
    left: -5%;
  }
  .offer-card {
    left: 51%;
  }
  .service-item_image {
    max-width: 42rem;
  }
  .service-item_title {
    font-size: var(--_typography---heading-font-sizes--h1);
    line-height: var(--_typography---heading-line-height--h1);
    letter-spacing: var(--_typography---heading-letter-spacing--h1);
  }
  .services-circle-icon.testimonial {
    right: 2.5%;
  }
  .blog-slider-arrow.right {
    right: 38%;
  }
  .about_image-block {
    width: 19rem;
    height: 14rem;
  }
  .team-member-image {
    object-position: 50% 20%;
    height: 41.5rem;
  }
  .service_hero-card {
    bottom: 26rem;
  }
  .service_hero-card._02 {
    bottom: 16rem;
  }
  .service_hero-card._03 {
    right: -3.5%;
  }
  .project-banner-bg {
    height: 52rem;
  }
  .single-icon {
    right: 20%;
  }
  .blog-icon-abs {
    left: -6%;
  }
  .blog-icon-abs.pricing {
    left: -4%;
  }}
@media screen and (max-width: 991px) {

  body {
    --_typography---texts-font-sizes--default-paragraph: 1rem;
    --_typography---texts-line-height--default-paragraph: 130%;
    --_typography---texts-letter-spacing--default-paragraph: -.06rem;
    --_typography---heading-font-sizes--h1: 3rem;
    --_typography---heading-line-height--h1: 120%;
    --_typography---heading-letter-spacing--h1: -.0975rem;
    --_typography---heading-font-sizes--h2: 2.5rem;
    --_typography---heading-line-height--h2: 120%;
    --_typography---heading-letter-spacing--h2: -.07875rem;
    --_typography---heading-font-sizes--h3: 2rem;
    --_typography---heading-line-height--h3: 120%;
    --_typography---heading-letter-spacing--h3: -.1275rem;
    --_typography---heading-font-sizes--h4: 1.5rem;
    --_typography---heading-line-height--h4: 120%;
    --_typography---heading-letter-spacing--h4: -.09rem;
    --_typography---heading-font-sizes--h5: 1.25rem;
    --_typography---heading-line-height--h5: 140%;
    --_typography---heading-letter-spacing--h5: -.0375rem;
    --_typography---texts-font-sizes--paragraph-l: 1.25rem;
    --_typography---texts-line-height--paragraph-l: 120%;
    --_typography---texts-letter-spacing--paragraph-l: -.0975rem;
    --_typography---texts-font-sizes--title-bold: 1.5rem;
    --_typography---texts-line-height--title-bold: 120%;
    --_typography---texts-letter-spacing--title-bold: -.08rem;
    --_typography---heading-font-sizes--display-04: 5.5rem;
    --_typography---heading-line-height--display-04: 120%;
    --_typography---heading-letter-spacing--display-04: -.165rem;
    --_typography---heading-font-sizes--display-03: 5.85rem;
    --_typography---heading-line-height--display-03: 120%;
    --_typography---heading-letter-spacing--display-03: -.55125rem;
    --_typography---heading-font-sizes--h6: 1.125rem;
    --_typography---heading-line-height--h6: 150%;
    --_typography---heading-letter-spacing--h6: -.02rem;
    --_typography---texts-font-sizes--paragraph-s: .75rem;
    --_typography---texts-line-height--paragraph-s: 125%;
    --_typography---texts-letter-spacing--paragraph-s: -.045rem;
    --_typography---heading-font-sizes--display-02: 10.6rem;
    --_typography---heading-line-height--display-02: 120%;
    --_typography---heading-letter-spacing--display-02: -1rem;
    --_typography---heading-font-sizes--display-01: 10.6rem;
    --_typography---heading-line-height--display-01: 120%;
    --_typography---heading-letter-spacing--display-01: -1rem;
    --_sizes---default-sizes--width: 100%;
    --_sizes---default-sizes--height: 100%;
    --_sizes---spacing--spacing-small: 1rem;
    --_sizes---spacing--spacing-jumbo: 3.125rem;
    --_sizes---spacing--spacing-medium: 1.25rem;
    --_sizes---spacing--spacing-big: 2.5rem;
    --_sizes---spacing--spacing-normal: 2rem;
    --_sizes---spacing--spacing-xsmall: .5rem;
    --_sizes---spacing--spacing-tiny: .25rem;
    --_sizes---spacing--spacing-colossal: 5rem;
    --_sizes---spacing--spacing-massive: 3.75rem;
    --_sizes---spacing--spacing-large: 2.25rem;
    --_sizes---spacing--spacing-regular: 1.5rem;
    --_sizes---container--max-width: 83rem;
    --_sizes---spacing--spacing-xxsmall: .75rem;
    --_sizes---border-radius--radius-big: 2rem;
    --_sizes---border-radius--radius-regular: 1.5rem;
    --_sizes---border-radius--radius-large: 1.875rem;
    --_sizes---border-radius--radius-small: 1rem;
    --_sizes---border-radius--radius-circle: 100%;
    --_sizes---border-radius--radius-medium: 1.25rem;
    --_sizes---border-radius--radius-xsmall: .5rem;
    --_sizes---border-radius--radius-tiny: .25rem;
    --_sizes---border-radius--radius-xxsmall: .75rem;
    --_sizes---border-radius--radius-soft: 3.75rem;
    --_sizes---border-radius--radius-pill: 5rem;
  }
  .utility-page-content.protected {
    max-width: 26rem;
  }
  .navbar-brand {
    display: block;
  }
  .navbar {
    top: var(--_sizes---spacing--spacing-medium);
    padding-right: var(--_sizes---spacing--spacing-small);
    padding-left: var(--_sizes---spacing--spacing-small);
  }
  .nav-menu {
    background-color: #0000;
    width: 96%;
  }
  .navbar-wrapper {
    max-width: none;
  }
  .nav-link {
    display: none;
  }
  .menu-button.is-open {
    background-color: #fff0;
  }
  .desk_menu-items {
    display: none;
  }
  .menu-items {
    grid-column-gap: var(--_sizes---spacing--spacing-medium);
    grid-row-gap: var(--_sizes---spacing--spacing-medium);
  }
  .dropdown_menu-link[aria-current="page"], .dropdown_menu-link.is-active {
    color: var(--_colors---text-color--primary);
  }
  .section.section_service-items {
    margin-top: -10rem;
  }
  .section.section_cta, .section.section_about-hero, .section.section_functional {
    height: auto;
  }
  .section.section_logos {
    margin-top: -11rem;
  }
  .section.section_service-hero {
    height: auto;
  }
  .section.section_more-blogs {
    margin-top: -10.5rem;
  }
  .padding-global {
    padding-right: var(--_sizes---spacing--spacing-tiny);
    padding-left: var(--_sizes---spacing--spacing-tiny);
  }
  .padding-global.cta {
    height: auto;
  }
  .padding-global.about-hero {
    height: auto;
    position: static;
  }
  .padding-section-large.styleguide-hero_wrapper {
    grid-column-gap: var(--_sizes---spacing--spacing-big);
    grid-row-gap: var(--_sizes---spacing--spacing-big);
    padding-top: 7.5rem;
  }
  .padding-section-large.footer_wrapper {
    grid-column-gap: 6rem;
    grid-row-gap: 6rem;
  }
  .padding-section-large.home-hero_wrapper {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
    padding-top: 7.5rem;
  }
  .padding-section-large.about_wrapper, .padding-section-large.process_wrapper {
    grid-template-columns: minmax(0, 1fr);
  }
  .padding-section-large.together_wrapper {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 8rem;
  }
  .padding-section-large.services_wrapper {
    padding-top: 10rem;
    padding-bottom: var(--_sizes---spacing--spacing-massive);
  }
  .padding-section-large.services_wrapper:where(.services-section-about) {
    padding-bottom: 5rem;
  }
  .padding-section-large.pricing-wrapper {
    padding-bottom: var(--_sizes---spacing--spacing-regular);
  }
  .padding-section-large.testimonial-wrapper {
    grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
    grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
    padding-bottom: 8rem;
  }
  .padding-section-large.blog-wrapper {
    padding-bottom: 10rem;
  }
  .padding-section-large.cta-wrapper {
    max-width: 36rem;
    padding-bottom: var(--_sizes---spacing--spacing-massive);
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
  }
  .padding-section-large.about-hero_wrapper {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  .padding-section-large.director_wrapper {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 12rem;
    padding-bottom: 8rem;
  }
  .padding-section-large.team_wrapper {
    grid-template-columns: minmax(0, 1fr);
  }
  .padding-section-large.logos_wrapper {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 8rem;
    padding-bottom: 13rem;
  }
  .padding-section-large.service-hero_wrapper {
    padding-top: 7.5rem;
    padding-bottom: var(--_sizes---spacing--spacing-big);
  }
  .padding-section-large.popular-wrapper {
    height: auto;
    padding-top: var(--_sizes---spacing--spacing-big);
    padding-bottom: var(--_sizes---spacing--spacing-big);
    position: static;
  }
  .padding-section-large.projects-hero_wrapper, .padding-section-large.projects_single-hero {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
    padding-top: 7.5rem;
  }
  .padding-section-large.project-detail {
    padding-bottom: var(--_sizes---spacing--spacing-massive);
  }
  .padding-section-large.blog-single-wrapper {
    padding-top: 8rem;
    padding-bottom: 12rem;
  }
  .padding-section-large.pricing-hero_wrapper {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
    padding-top: 7.5rem;
  }
  .padding-section-large.pricing-single_wrapper, .padding-section-large.contact-hero_wrapper {
    padding-top: 7.5rem;
  }
  .container-large {
    padding-right: var(--_sizes---spacing--spacing-xxsmall);
    padding-left: var(--_sizes---spacing--spacing-xxsmall);
  }
  .display.pricing-title {
    font-size: var(--_typography---heading-font-sizes--h1);
    line-height: var(--_typography---heading-line-height--h1);
    letter-spacing: var(--_typography---heading-letter-spacing--h1);
  }
  .styleguide-detail {
    grid-template-columns: .6fr 1fr;
  }
  .styleguide_card {
    height: 10rem;
  }
  .marquee-dots {
    bottom: -5%;
  }
  .marquee-dots.top {
    top: -6%;
  }
  .footer-social_link {
    border-radius: var(--_sizes---border-radius--radius-big);
    height: 10rem;
    font-size: var(--_typography---heading-font-sizes--h4);
    line-height: var(--_typography---heading-line-height--h4);
    letter-spacing: var(--_typography---heading-letter-spacing--h4);
    padding: 1.25rem 1.5rem;
  }
  .footer-social_info {
    border-radius: var(--_sizes---border-radius--radius-regular);
  }
  .copyright-text {
    max-width: 23rem;
  }
  .footer-rotate_icon {
    width: 8rem;
    height: 8rem;
    bottom: -5rem;
  }
  .home-hero_text {
    font-size: var(--_typography---heading-font-sizes--h4);
    line-height: var(--_typography---heading-line-height--h4);
    letter-spacing: var(--_typography---heading-letter-spacing--h4);
  }
  .home-hero_icon._02 {
    width: 12rem;
  }
  .home-hero_icon.one {
    width: 5rem;
    left: 5%;
  }
  .home-hero_icon.testimonial {
    width: 5rem;
    top: 13%;
  }
  .home-hero_card._02 {
    width: 14rem;
    height: 5.7rem;
  }
  .home-hero_card._01 {
    width: 8rem;
    height: 8rem;
  }
  .home-hero_card.fun {
    width: 14rem;
    height: 5.7rem;
  }
  .home-hero_card.flexible {
    width: 7rem;
    height: 7rem;
    top: 3rem;
    left: 30%;
  }
  .home-hero_card.testimonial {
    width: 6.5rem;
    height: 6.5rem;
    bottom: -14%;
  }
  .home-hero_card.faq {
    width: 12rem;
    bottom: 27%;
    right: -6%;
  }
  .home-hero_card.service-hero {
    width: 8rem;
    height: 8rem;
    bottom: 30%;
  }
  .home-hero_card.pricing {
    width: 12rem;
    top: 10rem;
  }
  .dynamic-text {
    font-size: var(--_typography---texts-font-sizes--paragraph-l);
    line-height: var(--_typography---texts-line-height--paragraph-l);
    letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  }
  .dynamic-text._02, .dynamic-text.fun, .dynamic-text.faq, .dynamic-text.pricing {
    width: 10rem;
    font-size: var(--_typography---texts-font-sizes--paragraph-l);
    line-height: var(--_typography---texts-line-height--paragraph-l);
    letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  }
  .about_left {
    grid-column-gap: var(--_sizes---spacing--spacing-massive);
    grid-row-gap: var(--_sizes---spacing--spacing-massive);
    padding-top: 0;
    padding-bottom: 0;
  }
  .about_right {
    width: var(--_sizes---default-sizes--width);
    max-width: 46rem;
  }
  .about-title {
    font-size: var(--_typography---heading-font-sizes--h2);
    line-height: var(--_typography---heading-line-height--h2);
    letter-spacing: var(--_typography---heading-letter-spacing--h2);
  }
  .about_icon.faq {
    bottom: 15%;
  }
  .creative-title {
    max-width: none;
  }
  .creative_icon {
    width: 6rem;
    height: 6rem;
  }
  .process_item {
    height: 31rem;
  }
  .process_marquee-text {
    font-size: var(--_typography---heading-font-sizes--h2);
    line-height: var(--_typography---heading-line-height--h2);
    letter-spacing: var(--_typography---heading-letter-spacing--h2);
  }
  .process-icon {
    width: 7rem;
    height: 7rem;
    top: -7%;
  }
  .process-icon.two {
    width: 11rem;
    height: 11rem;
    left: 10%;
  }
  .process_icon-big {
    width: 33rem;
    height: 33rem;
    top: -30%;
  }
  .together-contents {
    max-width: 35rem;
  }
  .together-icon {
    width: 5rem;
    top: -7%;
  }
  .together-title {
    font-size: var(--_typography---heading-font-sizes--h2);
    line-height: var(--_typography---heading-line-height--h2);
    letter-spacing: var(--_typography---heading-letter-spacing--h2);
  }
  .together-image {
    width: 5rem;
    top: -.5rem;
    right: 11.25rem;
  }
  .together-image._02, .together-image._03 {
    width: 3.75rem;
    top: 4.8rem;
  }
  .together-image._04 {
    width: 4.25rem;
    top: 7.2rem;
    right: 13rem;
  }
  .together-image._05 {
    width: 4.25rem;
    bottom: 2.75rem;
    left: 15rem;
  }
  .together-tab {
    font-size: var(--_typography---heading-font-sizes--h2);
    line-height: var(--_typography---heading-line-height--h2);
    letter-spacing: var(--_typography---heading-letter-spacing--h2);
  }
  .services_bottom {
    grid-template-columns: minmax(0, 1fr);
  }
  .service_items {
    max-width: none;
  }
  .service_item-card {
    border-radius: var(--_sizes---border-radius--radius-big);
  }
  .service_item-desp {
    max-width: 21rem;
  }
  .together-circle-icon {
    width: 7rem;
    height: 7rem;
    top: 15%;
  }
  .faster-card._02 {
    inset: 22.5% auto auto 11%;
  }
  .faster-card._01 {
    inset: 19% auto auto 11%;
  }
  .faster-card.faq-two {
    inset: 8% auto auto -10%;
  }
  .faster-card.faq-one {
    inset: 0% auto auto -10%;
  }
  .faster-card.team-ins-link {
    right: 24%;
  }
  .offer-card {
    background-image: url('../images/frame-34-1.png');
    width: 13rem;
    inset: 27% 5% auto auto;
  }
  .offer-card.director {
    left: 0%;
  }
  .service-left_card {
    padding-top: 11rem;
    padding-bottom: var(--_sizes---spacing--spacing-massive);
  }
  .service-left_card._02 {
    padding-top: var(--_sizes---spacing--spacing-massive);
  }
  .service-left_card.more {
    padding-top: 11rem;
  }
  .service-item_image {
    max-width: 20rem;
  }
  .service-right_card {
    padding: 11rem 1.5rem var(--_sizes---spacing--spacing-massive);
  }
  .service-right_card._02 {
    padding-top: var(--_sizes---spacing--spacing-massive);
  }
  .service-right_card.more {
    padding-top: 11rem;
  }
  .service-item_detail {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
  }
  .service-item_title {
    font-size: var(--_typography---heading-font-sizes--h4);
    line-height: var(--_typography---heading-line-height--h4);
    letter-spacing: var(--_typography---heading-letter-spacing--h4);
  }
  .service-item_desp {
    font-size: var(--_typography---texts-font-sizes--default-paragraph);
    line-height: var(--_typography---texts-line-height--default-paragraph);
    letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  }
  .services-circle-icon {
    width: 5rem;
    transform: translate(0, 3.5rem);
  }
  .services-circle-icon.testimonial {
    width: 4.5rem;
    right: -1%;
  }
  .services-item-bg {
    width: 20rem;
    height: 2.5rem;
  }
  .pricing-top {
    max-width: 28rem;
  }
  .flexible-text {
    font-size: var(--_typography---texts-font-sizes--default-paragraph);
    line-height: var(--_typography---texts-line-height--default-paragraph);
    letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  }
  .pricing-card.pricing-single {
    max-width: 42rem;
  }
  .pricing_card-bottom {
    padding-top: var(--_sizes---spacing--spacing-big);
    padding-right: var(--_sizes---spacing--spacing-regular);
    padding-left: var(--_sizes---spacing--spacing-regular);
  }
  .pricing_card-icon {
    width: 2.5rem;
    height: 2.5rem;
  }
  .plan-name {
    font-size: var(--_typography---heading-font-sizes--h2);
    line-height: var(--_typography---heading-line-height--h2);
    letter-spacing: var(--_typography---heading-letter-spacing--h2);
  }
  .plan-price {
    font-size: var(--_typography---heading-font-sizes--h3);
    line-height: var(--_typography---heading-line-height--h3);
    letter-spacing: var(--_typography---heading-letter-spacing--h3);
  }
  .plan-dot {
    width: 5rem;
    height: 5rem;
    left: -12%;
  }
  .plan-dot.right {
    right: -11%;
  }
  .pricing-doll {
    width: 12rem;
    top: -10%;
    right: 0%;
  }
  .testimonial-slider {
    max-width: 42rem;
  }
  .testimonial-left-content {
    padding: var(--_sizes---spacing--spacing-regular);
    grid-column-gap: var(--_sizes---spacing--spacing-small);
    grid-row-gap: var(--_sizes---spacing--spacing-small);
  }
  .testimonial-author-name {
    font-size: var(--_typography---heading-font-sizes--h3);
    line-height: var(--_typography---heading-line-height--h3);
    letter-spacing: var(--_typography---heading-letter-spacing--h3);
  }
  .testimonial-author-desp {
    max-width: 20.1rem;
    font-size: var(--_typography---texts-font-sizes--default-paragraph);
    line-height: var(--_typography---texts-line-height--default-paragraph);
    letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  }
  .left-arrow {
    width: 2.5rem;
    height: 2.5rem;
    bottom: 2rem;
  }
  .testimonial-arrow {
    width: 1rem;
    height: 1rem;
  }
  .right-arrow {
    width: 2.5rem;
    height: 2.5rem;
    bottom: 2rem;
    left: 5rem;
  }
  .paragraph {
    max-width: 12rem;
  }
  .blogs-mask {
    max-width: 22rem;
  }
  .blog-item-content {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
  }
  .blog-item-top {
    grid-column-gap: var(--_sizes---spacing--spacing-medium);
    grid-row-gap: var(--_sizes---spacing--spacing-medium);
  }
  .blog-slider-arrow {
    width: 7rem;
    padding: 1rem 1.5rem;
  }
  .blog-slider-arrow.right {
    right: 33.5%;
  }
  .blog-slider-arrow.left {
    left: 33.5%;
  }
  .faq-header {
    max-width: 32rem;
  }
  .faq-icon {
    width: 4.1rem;
    top: .4rem;
    left: 7.7rem;
  }
  .faq-list {
    padding-top: var(--_sizes---spacing--spacing-normal);
    padding-bottom: var(--_sizes---spacing--spacing-normal);
  }
  .faq-question {
    max-width: 36rem;
  }
  .faq-answer {
    min-width: 36rem;
    max-width: 36rem;
  }
  .cta-ready-card {
    width: 10rem;
    height: 9rem;
    right: -4%;
  }
  .cta-ready-text {
    font-size: var(--_typography---heading-font-sizes--h4);
    line-height: var(--_typography---heading-line-height--h4);
    letter-spacing: var(--_typography---heading-letter-spacing--h4);
  }
  .cta-cross {
    width: 1.25rem;
  }
  .cta-image {
    display: none;
  }
  .cta-image.left {
    max-width: 16rem;
  }
  .cta-image.right {
    max-width: 10rem;
  }
  .about_hero-content {
    grid-column-gap: var(--_sizes---spacing--spacing-big);
    grid-row-gap: var(--_sizes---spacing--spacing-big);
  }
  .about_hero-block {
    grid-column-gap: var(--_sizes---spacing--spacing-medium);
    grid-row-gap: var(--_sizes---spacing--spacing-medium);
  }
  .about_image-block {
    width: 10rem;
    height: 7rem;
    display: none;
  }
  .functional-counters {
    max-width: 26rem;
  }
  .functional-icon {
    width: 12rem;
  }
  .director-contents {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
  }
  .director-desp {
    font-size: var(--_typography---heading-font-sizes--h3);
    line-height: var(--_typography---heading-line-height--h3);
    letter-spacing: var(--_typography---heading-letter-spacing--h3);
  }
  .director-icon {
    width: 9rem;
    top: -5.5rem;
  }
  .director-dot._02 {
    top: 7.5rem;
    right: 16.5rem;
  }
  .director-dot._01 {
    top: 5rem;
    right: 15rem;
  }
  .team-top {
    padding-right: var(--_sizes---spacing--spacing-regular);
    padding-left: var(--_sizes---spacing--spacing-regular);
  }
  .team-member-num, .team-total-num {
    font-size: var(--_typography---heading-font-sizes--h1);
    line-height: var(--_typography---heading-line-height--h1);
    letter-spacing: var(--_typography---heading-letter-spacing--h1);
  }
  .team-bottom {
    grid-template-columns: 1fr 1fr;
  }
  .team-member-info {
    padding-right: var(--_sizes---spacing--spacing-regular);
    padding-left: var(--_sizes---spacing--spacing-regular);
  }
  .team-member-name {
    max-width: 16rem;
    font-size: var(--_typography---heading-font-sizes--h3);
    line-height: var(--_typography---heading-line-height--h3);
    letter-spacing: var(--_typography---heading-letter-spacing--h3);
  }
  .startup-title {
    text-align: center;
    max-width: 22rem;
  }
  .startup-logo-card {
    height: 10rem;
    padding: var(--_sizes---spacing--spacing-medium);
  }
  .startup-logo-card:hover {
    border-radius: var(--_sizes---border-radius--radius-big);
    border-width: 5px;
  }
  .startup-icon {
    width: 4rem;
  }
  .startup-right-bg {
    width: 16rem;
  }
  .startup-left-bg {
    width: 13rem;
  }
  .team-line {
    top: 0%;
  }
  .service_hero-height {
    height: auto;
  }
  .service_hero-card {
    width: 13rem;
    height: 9rem;
    display: none;
  }
  .strategy-bottom {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .strategy-card {
    width: var(--_sizes---default-sizes--width);
    grid-column-gap: var(--_sizes---spacing--spacing-regular);
    grid-row-gap: var(--_sizes---spacing--spacing-regular);
    border-bottom-style: none;
    height: auto;
  }
  .strategy-card.last {
    border-bottom-style: solid;
  }
  .strategy-card._02 {
    border-right-style: solid;
  }
  .strategy-card._03 {
    border-bottom-style: solid;
  }
  .strategy-part-one {
    flex-flow: row;
    justify-content: space-between;
  }
  .strategy-name {
    max-width: 13rem;
  }
  .strategy-name._04 {
    max-width: none;
  }
  .strategy-part-two.active, .strategy-tags {
    display: none;
  }
  .strategy-image-block {
    max-width: none;
  }
  .popular-height {
    height: auto;
    padding-bottom: var(--_sizes---spacing--spacing-colossal);
  }
  .popular-title.desk {
    font-size: var(--_typography---heading-font-sizes--h1);
    line-height: var(--_typography---heading-line-height--h1);
    letter-spacing: var(--_typography---heading-letter-spacing--h1);
  }
  .popular-header {
    max-width: 28rem;
  }
  .popular-svg {
    width: 3.5rem;
    left: 34%;
  }
  .popular-cards {
    max-width: none;
    margin-top: 0;
  }
  .service-image-overflow {
    max-width: 20rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .service-image-overflow._01 {
    padding-top: var(--_sizes---spacing--spacing-regular);
    padding-bottom: var(--_sizes---spacing--spacing-regular);
  }
  .service_item-image {
    object-position: 50% 0%;
    height: 14rem;
  }
  .service-item-name {
    font-size: var(--_typography---heading-font-sizes--h4);
    line-height: var(--_typography---heading-line-height--h4);
    letter-spacing: var(--_typography---heading-letter-spacing--h4);
  }
  .service-item-category {
    font-size: var(--_typography---texts-font-sizes--default-paragraph);
    line-height: var(--_typography---texts-line-height--default-paragraph);
    letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  }
  .service-collection-list {
    width: var(--_sizes---default-sizes--width);
    grid-column-gap: var(--_sizes---spacing--spacing-regular);
    grid-row-gap: var(--_sizes---spacing--spacing-big);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .service-item-year {
    font-size: var(--_typography---heading-font-sizes--h4);
    line-height: var(--_typography---heading-line-height--h4);
    letter-spacing: var(--_typography---heading-letter-spacing--h4);
  }
  .advantage-cards {
    grid-template-columns: 1fr 1fr;
  }
  .advantage-card {
    height: var(--_sizes---default-sizes--height);
    padding: var(--_sizes---spacing--spacing-regular);
    border-left-style: solid;
    border-right-style: solid;
  }
  .advantage-card:where(.advantage-card-last) {
    border-top-style: none;
  }
  .advantage-card:where(.advantage-card-second) {
    border-left-style: none;
  }
  .advantage-name {
    width: 80%;
    font-size: var(--_typography---heading-font-sizes--h3);
    line-height: var(--_typography---heading-line-height--h3);
    letter-spacing: var(--_typography---heading-letter-spacing--h3);
  }
  .advantage-content {
    transform: none;
  }
  .advantage-main-num {
    display: none;
  }
  .advantage-star {
    width: 14rem;
    top: 4%;
  }
  .project-svg {
    width: 120px;
  }
  .project-banner-bg {
    height: auto;
    padding-right: var(--_sizes---spacing--spacing-normal);
    padding-left: var(--_sizes---spacing--spacing-normal);
  }
  .single-icon {
    width: 8rem;
    top: -22%;
    right: 12%;
  }
  .project-detail-one {
    grid-template-columns: .6fr 1fr;
  }
  .more-right-bg {
    width: 18rem;
    height: 3.5rem;
  }
  .more-left-bg {
    width: 15.5rem;
    height: 3.5rem;
  }
  .blog_hero-title {
    max-width: 42rem;
  }
  .blog-item-link {
    grid-template-columns: .35fr 1fr;
  }
  .blog-top-detail, .blog-middle-detail {
    grid-column-gap: var(--_sizes---spacing--spacing-big);
    grid-row-gap: var(--_sizes---spacing--spacing-big);
  }
  .blog-author-details {
    max-width: 17rem;
  }
  .blog-author-icon {
    width: 4.5rem;
    min-width: 4.5rem;
    height: 4.5rem;
    min-height: 4.5rem;
    padding: .5rem;
  }
  .blog-item-banner {
    height: 28rem;
  }
  .blog-item-icon {
    width: 7rem;
    top: -15%;
  }
  .blog-icon-abs {
    width: 8rem;
    height: 8rem;
    top: 4%;
    left: -9%;
  }
  .blog-icon-abs.pricing {
    width: 6.5rem;
  }
  .pricing_hero-title {
    max-width: 46rem;
  }
  .compare-details {
    display: flex;
    overflow: auto;
  }
  .compare-elements {
    flex: none;
    max-width: 22rem;
  }
  .compare-elements._02, .compare-elements._03 {
    max-width: 18rem;
  }
  .compare-item {
    height: 3.75rem;
  }
  .plan-svg {
    width: 4.5rem;
    top: 1%;
    left: 1%;
  }
  .pricing-collection-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .plan-item {
    max-width: 46rem;
  }
  .plan-naming {
    margin-top: var(--_sizes---spacing--spacing-normal);
  }
  .contact-title {
    max-width: 46rem;
  }
  .contact-header {
    max-width: 42rem;
    margin-top: 4rem;
    margin-bottom: 8rem;
  }
  .contact-star-icon {
    width: 4rem;
    left: 47%;
  }
  .contact-card {
    padding-top: 8rem;
    padding-right: var(--_sizes---spacing--spacing-normal);
    padding-left: var(--_sizes---spacing--spacing-normal);
    border-top-left-radius: 8.25rem;
    border-top-right-radius: 10.5rem;
    grid-template-columns: .58fr 1fr;
  }
  .conversation-title {
    font-size: var(--_typography---heading-font-sizes--h2);
    line-height: var(--_typography---heading-line-height--h2);
    letter-spacing: var(--_typography---heading-letter-spacing--h2);
  }
  .conversation-icon {
    width: 7rem;
    height: 7rem;
    margin-top: -2rem;
    margin-left: 5rem;
  }
  .contact-fields-grid {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    grid-template-columns: 1fr;
  }
  .contact-marquee {
    bottom: 55.5%;
  }
  .license-detail {
    max-width: 36rem;
  }
  .license-info-detail {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
    grid-template-columns: minmax(0, 1fr);
  }
  .license-image {
    height: 20rem;
  }
  .cookies {
    right: var(--_sizes---spacing--spacing-normal);
    bottom: var(--_sizes---spacing--spacing-normal);
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
    max-width: 30rem;
  }
  .wave-ribbon {
    height: 250px;
  }}
@media screen and (max-width: 767px) {

  body {
    --_typography---texts-font-sizes--default-paragraph: 1rem;
    --_typography---texts-line-height--default-paragraph: 130%;
    --_typography---texts-letter-spacing--default-paragraph: -.01rem;
    --_typography---heading-font-sizes--h1: 2.5rem;
    --_typography---heading-line-height--h1: 120%;
    --_typography---heading-letter-spacing--h1: -.1rem;
    --_typography---heading-font-sizes--h2: 1.75rem;
    --_typography---heading-line-height--h2: 120%;
    --_typography---heading-letter-spacing--h2: 0rem;
    --_typography---heading-font-sizes--h3: 1.5rem;
    --_typography---heading-line-height--h3: 120%;
    --_typography---heading-letter-spacing--h3: 0rem;
    --_typography---heading-font-sizes--h4: 1.25rem;
    --_typography---heading-line-height--h4: 120%;
    --_typography---heading-letter-spacing--h4: 0rem;
    --_typography---heading-font-sizes--h5: 1.125rem;
    --_typography---heading-line-height--h5: 140%;
    --_typography---heading-letter-spacing--h5: 0rem;
    --_typography---texts-font-sizes--paragraph-l: 1.125rem;
    --_typography---texts-line-height--paragraph-l: 120%;
    --_typography---texts-letter-spacing--paragraph-l: -.02rem;
    --_typography---texts-font-sizes--title-bold: 1.25rem;
    --_typography---texts-line-height--title-bold: 120%;
    --_typography---texts-letter-spacing--title-bold: -.02rem;
    --_typography---heading-font-sizes--display-04: 3.5rem;
    --_typography---heading-line-height--display-04: 120%;
    --_typography---heading-letter-spacing--display-04: -.1rem;
    --_typography---heading-font-sizes--display-03: 3.75rem;
    --_typography---heading-line-height--display-03: 120%;
    --_typography---heading-letter-spacing--display-03: -.1rem;
    --_typography---heading-font-sizes--h6: 1rem;
    --_typography---heading-line-height--h6: 150%;
    --_typography---heading-letter-spacing--h6: 0rem;
    --_typography---texts-font-sizes--paragraph-s: .75rem;
    --_typography---texts-line-height--paragraph-s: 125%;
    --_typography---texts-letter-spacing--paragraph-s: -.01rem;
    --_typography---heading-font-sizes--display-02: 6rem;
    --_typography---heading-line-height--display-02: 120%;
    --_typography---heading-letter-spacing--display-02: -.1rem;
    --_typography---heading-font-sizes--display-01: 6rem;
    --_typography---heading-line-height--display-01: 120%;
    --_typography---heading-letter-spacing--display-01: -.1rem;
    --_sizes---default-sizes--width: 100%;
    --_sizes---default-sizes--height: 100%;
    --_sizes---spacing--spacing-small: 1rem;
    --_sizes---spacing--spacing-jumbo: 2.5rem;
    --_sizes---spacing--spacing-medium: 1rem;
    --_sizes---spacing--spacing-big: 2rem;
    --_sizes---spacing--spacing-normal: 1.25rem;
    --_sizes---spacing--spacing-xsmall: .5rem;
    --_sizes---spacing--spacing-tiny: .25rem;
    --_sizes---spacing--spacing-colossal: 3.75rem;
    --_sizes---spacing--spacing-massive: 3rem;
    --_sizes---spacing--spacing-large: 2rem;
    --_sizes---spacing--spacing-regular: 1rem;
    --_sizes---container--max-width: 83rem;
    --_sizes---spacing--spacing-xxsmall: .625rem;
    --_sizes---border-radius--radius-big: 2rem;
    --_sizes---border-radius--radius-regular: 1.5rem;
    --_sizes---border-radius--radius-large: 1.875rem;
    --_sizes---border-radius--radius-small: 1rem;
    --_sizes---border-radius--radius-circle: 100%;
    --_sizes---border-radius--radius-medium: 1.25rem;
    --_sizes---border-radius--radius-xsmall: .5rem;
    --_sizes---border-radius--radius-tiny: .25rem;
    --_sizes---border-radius--radius-xxsmall: .75rem;
    --_sizes---border-radius--radius-soft: 3.75rem;
    --_sizes---border-radius--radius-pill: 5rem;
  }
  .utility-page-content {
    max-width: 28rem;
  }
  .utility-page-content.protected {
    max-width: 24rem;
  }
  .nav_menu-wrap {
    padding: var(--_sizes---spacing--spacing-normal);
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    flex-flow: column;
  }
  .navbar-brand {
    padding-left: 0;
  }
  .nav-menu {
    width: 95%;
  }
  .section.section_process {
    height: auto;
  }
  .section.section_services {
    background-size: 100%;
  }
  .section.section_service-items {
    margin-top: -9rem;
  }
  .section.section_logos {
    margin-top: -6.5rem;
  }
  .section.section_strategy, .section.section_popular, .section.section_advantage {
    background-size: 100%;
  }
  .section.section_more-blogs {
    margin-top: -7.5rem;
  }
  .section.section_blog-single {
    background-size: 100%;
  }
  .padding-section-large.styleguide-hero_wrapper {
    padding-top: 7rem;
  }
  .padding-section-large.footer_wrapper {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
  }
  .padding-section-large.home-hero_wrapper {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    padding-top: 7rem;
  }
  .padding-section-large.about_wrapper {
    grid-column-gap: var(--_sizes---spacing--spacing-large);
    grid-row-gap: var(--_sizes---spacing--spacing-large);
    padding-bottom: 6.5rem;
  }
  .padding-section-large.process_wrapper {
    height: auto;
    padding-top: 6.5rem;
    position: static;
  }
  .padding-section-large.together_wrapper {
    grid-column-gap: var(--_sizes---spacing--spacing-large);
    grid-row-gap: var(--_sizes---spacing--spacing-large);
    padding-top: 5rem;
  }
  .padding-section-large.services_wrapper {
    grid-column-gap: var(--_sizes---spacing--spacing-colossal);
    grid-row-gap: var(--_sizes---spacing--spacing-colossal);
    padding-top: 7rem;
  }
  .padding-section-large.services_wrapper:where(.services-section-about) {
    padding-bottom: 5rem;
  }
  .padding-section-large.testimonial-wrapper {
    padding-bottom: 6rem;
  }
  .padding-section-large.blog-wrapper {
    padding-top: var(--_sizes---spacing--spacing-massive);
    padding-bottom: 9rem;
  }
  .padding-section-large.blog-wrapper:where(.blog-section-about) {
    padding-top: var(--_sizes---spacing--spacing-small);
  }
  .padding-section-large.cta-wrapper {
    grid-column-gap: var(--_sizes---spacing--spacing-large);
    grid-row-gap: var(--_sizes---spacing--spacing-large);
    max-width: 26rem;
  }
  .padding-section-large.about-hero_wrapper {
    padding-bottom: 6rem;
  }
  .padding-section-large.functional-wrapper {
    height: auto;
  }
  .padding-section-large.director_wrapper {
    padding-top: 8rem;
    padding-bottom: var(--_sizes---spacing--spacing-large);
    grid-column-gap: var(--_sizes---spacing--spacing-large);
    grid-row-gap: var(--_sizes---spacing--spacing-large);
  }
  .padding-section-large.team_wrapper {
    padding-bottom: var(--_sizes---spacing--spacing-jumbo);
  }
  .padding-section-large.logos_wrapper {
    grid-column-gap: var(--_sizes---spacing--spacing-massive);
    grid-row-gap: var(--_sizes---spacing--spacing-massive);
    padding-top: 6.5rem;
    padding-bottom: 9rem;
  }
  .padding-section-large.service-hero_wrapper {
    padding-top: 7rem;
  }
  .padding-section-large.strategy-wrapper {
    padding-top: 8rem;
  }
  .padding-section-large.projects-hero_wrapper, .padding-section-large.projects_single-hero {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    padding-top: 7rem;
  }
  .padding-section-large.blog-single-wrapper {
    padding-bottom: 9rem;
  }
  .padding-section-large.pricing-hero_wrapper {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    padding-top: 7rem;
  }
  .padding-section-large.pricing-single_wrapper, .padding-section-large.contact-hero_wrapper {
    padding-top: 7rem;
  }
  .site-link {
    width: 10.1rem;
  }
  .styleguide-detail {
    grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
    grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
    grid-template-columns: minmax(0, 1fr);
  }
  .styleguide_subtitle {
    position: static;
  }
  .styleguide_cards {
    grid-column-gap: var(--_sizes---spacing--spacing-medium);
    grid-row-gap: var(--_sizes---spacing--spacing-medium);
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .styleguide_cards._02 {
    grid-template-columns: 1fr;
  }
  .buttons-flex {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
  }
  .marquee {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }
  .marquee-icon {
    width: 1.75rem;
    height: 1.75rem;
  }
  .marquee-dots {
    bottom: -3%;
  }
  .marquee-dots.top {
    top: -5%;
  }
  .footer-social_link {
    border-radius: var(--_sizes---border-radius--radius-regular);
    height: 7rem;
    font-size: var(--_typography---heading-font-sizes--h6);
    line-height: var(--_typography---heading-line-height--h6);
    letter-spacing: var(--_typography---heading-letter-spacing--h6);
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .footer-social_info {
    border-radius: var(--_sizes---border-radius--radius-small);
  }
  .copyright-text {
    max-width: 21rem;
  }
  .back-top {
    width: 3rem;
    height: 3rem;
  }
  .footer-rotate_icon {
    width: 6rem;
    height: 6rem;
    bottom: -4rem;
    right: 14%;
  }
  .home-hero_top {
    max-width: 32rem;
  }
  .home-hero_title {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .home-hero_bottom {
    flex-flow: row;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
    overflow: clip;
  }
  .home-hero_texts {
    flex-flow: column;
    flex: none;
    justify-content: flex-start;
    align-items: center;
  }
  .home-hero_text {
    width: var(--_sizes---default-sizes--width);
    font-size: var(--_typography---texts-font-sizes--default-paragraph);
    line-height: var(--_typography---texts-line-height--default-paragraph);
    letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
    padding: .5rem 1rem;
  }
  .home-hero_icon {
    display: none;
  }
  .home-hero_icon.faq, .home-hero_icon.pricing {
    display: block;
  }
  .home-hero_card {
    display: none;
  }
  .home-hero_card.faq {
    width: 10rem;
    display: flex;
    right: -15%;
  }
  .home-hero_card.pricing {
    width: 10rem;
    display: flex;
    top: 6rem;
  }
  .about_right {
    max-width: 33.75rem;
  }
  .about_icon {
    width: 4.5rem;
    height: 4.5rem;
    inset: auto 0% 0% auto;
  }
  .creative_icon {
    width: 5rem;
    height: 5rem;
  }
  .process_items {
    grid-column-gap: var(--_sizes---spacing--spacing-small);
    grid-row-gap: var(--_sizes---spacing--spacing-small);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    align-items: stretch;
    margin-left: auto;
    margin-right: auto;
    padding-left: .875rem;
    padding-right: .875rem;
    display: grid;
  }
  .process_item {
    height: var(--_sizes---default-sizes--height);
    padding: 1.25rem;
  }
  .process_item._02, .process_item._03 {
    border-color: var(--_colors---text-color--light);
    position: static;
    transform: none;
  }
  .process_item-desp {
    font-size: var(--_typography---texts-font-sizes--default-paragraph);
    line-height: var(--_typography---texts-line-height--default-paragraph);
    letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  }
  .process-marquee {
    inset: 0% 0% auto;
  }
  .process-icon {
    width: 5rem;
    height: 5rem;
  }
  .process-icon.two {
    width: 7rem;
    height: 7rem;
    inset: auto 10% 5% auto;
  }
  .process_icon-big {
    display: none;
  }
  .together-text {
    margin-right: var(--_sizes---spacing--spacing-big);
  }
  .together-marquee.director-marquee {
    top: var(--_sizes---spacing--spacing-massive);
  }
  .together-icon {
    width: 3.25rem;
  }
  .together-title {
    display: none;
  }
  .together-image {
    width: 3.75rem;
    display: none;
    right: 9.6rem;
  }
  .together-tab {
    text-transform: capitalize;
    display: block;
  }
  .service_item-content {
    grid-column-gap: var(--_sizes---spacing--spacing-large);
    grid-row-gap: var(--_sizes---spacing--spacing-large);
    flex-flow: column;
  }
  .service_item-card, .service_item-desp {
    max-width: none;
  }
  .together-circle-icon {
    width: 5rem;
    height: 5rem;
  }
  .faster-card._02, .faster-card._01 {
    display: none;
  }
  .faster-card.faq-two {
    width: 8rem;
    height: 4.5rem;
    top: 16%;
  }
  .faster-card.faq-one {
    width: 8rem;
    height: 4.5rem;
    top: 8%;
  }
  .faster-card.team-fb-link, .faster-card.team-ins-link {
    display: none;
  }
  .offer-card {
    width: 11rem;
    display: none;
  }
  .service-left_card {
    padding-top: 8rem;
  }
  .service-left_card._02 {
    padding-top: var(--_sizes---spacing--spacing-jumbo);
    padding-bottom: var(--_sizes---spacing--spacing-jumbo);
  }
  .service-left_card.more {
    padding-top: 7.5rem;
    padding-bottom: var(--_sizes---spacing--spacing-jumbo);
  }
  .service-right_card {
    padding-top: 8rem;
  }
  .service-right_card._02 {
    padding-top: var(--_sizes---spacing--spacing-jumbo);
    padding-bottom: var(--_sizes---spacing--spacing-jumbo);
  }
  .service-right_card.more {
    padding-top: 7.5rem;
    padding-bottom: var(--_sizes---spacing--spacing-jumbo);
  }
  .services-circle-icon {
    width: 3.5rem;
    transform: translate(0, 2.5rem);
  }
  .services-circle-icon.testimonial {
    display: none;
  }
  .services-item-bg {
    border-bottom-left-radius: 4rem;
    width: 17rem;
    height: 4rem;
  }
  .pricing-top {
    max-width: 24rem;
  }
  .pricing-cards {
    grid-column-gap: var(--_sizes---spacing--spacing-large);
    grid-row-gap: var(--_sizes---spacing--spacing-large);
    grid-template-columns: minmax(0, 1fr);
  }
  .pricing-card.pricing-single {
    max-width: 32rem;
  }
  .plan-dot.right.right-pricing-single {
    right: -8%;
  }
  .plan-dot.left-pricing-single {
    left: -8%;
  }
  .pricing-doll {
    width: 8rem;
    top: -7%;
  }
  .testimonial-slider-content {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    padding: .5rem;
  }
  .left-arrow {
    width: 2rem;
    height: 2rem;
    bottom: 1rem;
    left: 1.25rem;
  }
  .right-arrow {
    width: 2rem;
    height: 2rem;
    bottom: 1rem;
    left: 3.75rem;
  }
  .blog-top {
    grid-column-gap: var(--_sizes---spacing--spacing-small);
    grid-row-gap: var(--_sizes---spacing--spacing-small);
  }
  .paragraph {
    text-align: center;
    max-width: 20rem;
    margin: 0;
  }
  .blogs-mask {
    max-width: 18rem;
  }
  .blog-item-content {
    grid-column-gap: var(--_sizes---spacing--spacing-large);
    grid-row-gap: var(--_sizes---spacing--spacing-large);
  }
  .blog-slider-arrow {
    bottom: -6rem;
  }
  .blog-slider-arrow.right {
    bottom: -6rem;
    right: 28%;
  }
  .blog-slider-arrow.left {
    left: 28%;
  }
  .faq-header {
    max-width: 20rem;
  }
  .faq-icon {
    width: 2.6rem;
    top: .2rem;
    left: 4.7rem;
  }
  .faq-question {
    max-width: 28rem;
  }
  .faq-ques {
    font-size: var(--_typography---heading-font-sizes--h4);
    line-height: var(--_typography---heading-line-height--h4);
  }
  .faq-answer {
    min-width: 28rem;
    max-width: 28rem;
  }
  .faq-para {
    font-size: var(--_typography---texts-font-sizes--default-paragraph);
    line-height: var(--_typography---texts-line-height--default-paragraph);
    letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  }
  .faq-arrow-box {
    width: 1.4rem;
    min-width: 1.4rem;
    height: 1.4rem;
    min-height: 1.4rem;
  }
  .faq-lottie {
    width: .9rem;
    min-width: .9rem;
    height: .9rem;
    min-height: .9rem;
  }
  .cta-ready-card {
    border-radius: var(--_sizes---border-radius--radius-regular);
    width: 8rem;
    height: 7rem;
    right: -10%;
  }
  .functional-sticky {
    height: auto;
    padding-top: var(--_sizes---spacing--spacing-colossal);
    grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
    grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
  }
  .functional-counters {
    grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
    grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    max-width: none;
    display: grid;
  }
  .functional-counter-block._02, .functional-counter-block._03 {
    opacity: 100;
    position: static;
  }
  .functional-para {
    font-size: var(--_typography---heading-font-sizes--h4);
    line-height: var(--_typography---heading-line-height--h4);
    letter-spacing: var(--_typography---heading-letter-spacing--h4);
  }
  .functional-icon, .functional-lines {
    display: none;
  }
  .director-contents {
    grid-template-columns: .75fr 1fr;
  }
  .director-icon, .director-dot._02, .director-dot._01 {
    display: none;
  }
  .team-top {
    justify-content: center;
    align-items: center;
  }
  .team-total-num, .team-members-nums {
    display: none;
  }
  .team-bottom {
    padding-right: var(--_sizes---spacing--spacing-small);
    padding-left: var(--_sizes---spacing--spacing-small);
    border-top-style: none;
    border-bottom-style: none;
    grid-template-columns: minmax(0, 1fr);
  }
  .team-members-details {
    grid-column-gap: var(--_sizes---spacing--spacing-small);
    grid-row-gap: var(--_sizes---spacing--spacing-small);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .team-members-images {
    display: none;
  }
  .team-member-info {
    padding: var(--_sizes---spacing--spacing-xsmall);
    grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
    grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
    border: 1px solid var(--_colors---background-color--dark);
    background-color: var(--_colors---text-color--light);
    flex-flow: column;
    display: flex;
  }
  .team-member-info.last._05 {
    border-style: solid;
    border-color: var(--_colors---background-color--dark);
  }
  .team-member-name {
    max-width: 10rem;
    font-size: var(--_typography---heading-font-sizes--h5);
    line-height: var(--_typography---heading-line-height--h5);
    letter-spacing: var(--_typography---heading-letter-spacing--h5);
  }
  .member-images-details.mob {
    order: -9999;
    height: 16rem;
    padding: 0;
    display: flex;
    position: static;
  }
  .startups-logos-grid {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }
  .startups-logos {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    flex-flow: row;
    flex: none;
  }
  .startups-logos._02 {
    margin-top: 0;
  }
  .startup-logo-card {
    max-width: 10rem;
    height: 6rem;
    margin-right: 1rem;
  }
  .startup-logo-card:hover {
    border-radius: var(--_sizes---border-radius--radius-small);
    border-width: 4px;
  }
  .startup-icon {
    display: none;
  }
  .startup-right-bg {
    width: 10rem;
    height: 3rem;
  }
  .startup-left-bg {
    width: 8rem;
    height: 3rem;
  }
  .strategy-card-bottom {
    height: 14rem;
  }
  .strategy-part-one {
    grid-column-gap: var(--_sizes---spacing--spacing-small);
    grid-row-gap: var(--_sizes---spacing--spacing-small);
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
  }
  .strategy-name, .strategy-name._02 {
    max-width: none;
  }
  .popular-title.mob {
    width: var(--_sizes---default-sizes--width);
    max-width: 28rem;
    font-size: var(--_typography---heading-font-sizes--h1);
    line-height: var(--_typography---heading-line-height--h1);
    letter-spacing: var(--_typography---heading-letter-spacing--h1);
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  .popular-header {
    display: none;
  }
  .service-image-overflow {
    padding: .62rem;
  }
  .service_item-image {
    height: 12rem;
  }
  .overflow-hidden.blog {
    order: -9999;
  }
  .service-item-year {
    font-size: var(--_typography---heading-font-sizes--h6);
    line-height: var(--_typography---heading-line-height--h6);
    letter-spacing: var(--_typography---heading-letter-spacing--h6);
  }
  .advantage-name {
    width: 90%;
  }
  .advantage-num {
    font-size: var(--_typography---heading-font-sizes--h1);
    line-height: var(--_typography---heading-line-height--h1);
    letter-spacing: var(--_typography---heading-letter-spacing--h1);
  }
  .advantage-desp {
    font-size: var(--_typography---texts-font-sizes--default-paragraph);
    line-height: var(--_typography---texts-line-height--default-paragraph);
    letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  }
  .project_hero-title {
    max-width: 32rem;
  }
  .project-svg {
    width: 80px;
  }
  .single-icon {
    width: 6rem;
  }
  .project-detail-one {
    grid-template-columns: minmax(0, 1fr);
  }
  .project-item-name {
    position: static;
  }
  .project-flex {
    grid-column-gap: var(--_sizes---spacing--spacing-large);
    grid-row-gap: var(--_sizes---spacing--spacing-large);
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .concepts-details p {
    margin-bottom: var(--_sizes---spacing--spacing-normal);
  }
  .gallery-collection-wrapper {
    margin-top: -1.5rem;
  }
  .more-right-bg {
    width: 13rem;
    height: 3rem;
  }
  .more-left-bg {
    width: 10.5rem;
    height: 3rem;
  }
  .blog_hero-title {
    max-width: 32rem;
  }
  .blog-item-link {
    grid-template-columns: minmax(0, 1fr);
  }
  .blog-category-name {
    position: static;
  }
  .blog-contents {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
  }
  .blog-item-info {
    order: 9999;
  }
  .blog-top-detail, .blog-middle-detail {
    max-width: 28rem;
  }
  .blog-author-icon {
    width: 4rem;
    min-width: 4rem;
    height: 4rem;
    min-height: 4rem;
  }
  .blog-item-banner {
    height: 20rem;
  }
  .blog-item-icon {
    width: 5rem;
  }
  .blog-icon-abs {
    width: 6rem;
    height: 6rem;
  }
  .blog-icon-abs.pricing {
    width: 5.5rem;
    left: -6%;
  }
  .description-text {
    width: auto;
    position: static;
  }
  .blog-gallery {
    grid-template-columns: 1fr 1fr;
  }
  .pricing_hero-title {
    max-width: 32rem;
  }
  .compare-elements {
    max-width: 18rem;
  }
  .compare-elements._02, .compare-elements._03 {
    max-width: 16rem;
  }
  .compare-header {
    height: 10rem;
  }
  .compare-item {
    height: 3.5rem;
  }
  .plan-svg {
    width: 3.5rem;
  }
  .plan-item, .contact-title {
    max-width: 32rem;
  }
  .contact-header {
    max-width: 32rem;
    margin-top: 2.5rem;
  }
  .contact-star-icon {
    width: 2.75rem;
  }
  .contact-card {
    padding-top: var(--_sizes---spacing--spacing-massive);
    border-radius: 0;
    grid-template-columns: minmax(0, 1fr);
  }
  .contact-left {
    max-width: none;
  }
  .conversation-icon {
    display: none;
  }
  .contact-marquee {
    inset: 23% 0% auto;
  }
  .license-detail {
    max-width: 33rem;
  }
  .license-info-detail {
    grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
    grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
    grid-template-columns: minmax(0, 1fr);
  }
  .license-image {
    height: 15rem;
  }
  .changelog-card {
    padding: 1.5rem;
  }
  .cookies {
    display: none;
  }
  .wave-ribbon {
    height: 170px;
  }}
@media screen and (max-width: 479px) {

  body {
    --_typography---texts-font-sizes--default-paragraph: 1rem;
    --_typography---texts-line-height--default-paragraph: 130%;
    --_typography---texts-letter-spacing--default-paragraph: -.01rem;
    --_typography---heading-font-sizes--h1: 2rem;
    --_typography---heading-line-height--h1: 120%;
    --_typography---heading-letter-spacing--h1: -.1rem;
    --_typography---heading-font-sizes--h2: 1.625rem;
    --_typography---heading-line-height--h2: 120%;
    --_typography---heading-letter-spacing--h2: 0rem;
    --_typography---heading-font-sizes--h3: 1.5rem;
    --_typography---heading-line-height--h3: 120%;
    --_typography---heading-letter-spacing--h3: 0rem;
    --_typography---heading-font-sizes--h4: 1.25rem;
    --_typography---heading-line-height--h4: 120%;
    --_typography---heading-letter-spacing--h4: 0rem;
    --_typography---heading-font-sizes--h5: 1.125rem;
    --_typography---heading-line-height--h5: 140%;
    --_typography---heading-letter-spacing--h5: 0rem;
    --_typography---texts-font-sizes--paragraph-l: 1.125rem;
    --_typography---texts-line-height--paragraph-l: 120%;
    --_typography---texts-letter-spacing--paragraph-l: -.02rem;
    --_typography---texts-font-sizes--title-bold: 1.25rem;
    --_typography---texts-line-height--title-bold: 120%;
    --_typography---texts-letter-spacing--title-bold: -.02rem;
    --_typography---heading-font-sizes--display-04: 2.25rem;
    --_typography---heading-line-height--display-04: 120%;
    --_typography---heading-letter-spacing--display-04: -.1rem;
    --_typography---heading-font-sizes--display-03: 2.5rem;
    --_typography---heading-line-height--display-03: 120%;
    --_typography---heading-letter-spacing--display-03: -.1rem;
    --_typography---heading-font-sizes--h6: 1rem;
    --_typography---heading-line-height--h6: 150%;
    --_typography---heading-letter-spacing--h6: 0rem;
    --_typography---texts-font-sizes--paragraph-s: .75rem;
    --_typography---texts-line-height--paragraph-s: 125%;
    --_typography---texts-letter-spacing--paragraph-s: -.01rem;
    --_typography---heading-font-sizes--display-02: 4rem;
    --_typography---heading-line-height--display-02: 120%;
    --_typography---heading-letter-spacing--display-02: -.1rem;
    --_typography---heading-font-sizes--display-01: 4rem;
    --_typography---heading-line-height--display-01: 120%;
    --_typography---heading-letter-spacing--display-01: -.1rem;
    --_sizes---default-sizes--width: 100%;
    --_sizes---default-sizes--height: 100%;
    --_sizes---spacing--spacing-small: 1rem;
    --_sizes---spacing--spacing-jumbo: 2.25rem;
    --_sizes---spacing--spacing-medium: 1rem;
    --_sizes---spacing--spacing-big: 2rem;
    --_sizes---spacing--spacing-normal: 1.25rem;
    --_sizes---spacing--spacing-xsmall: .5rem;
    --_sizes---spacing--spacing-tiny: .25rem;
    --_sizes---spacing--spacing-colossal: 3.75rem;
    --_sizes---spacing--spacing-massive: 2.5rem;
    --_sizes---spacing--spacing-large: 2rem;
    --_sizes---spacing--spacing-regular: 1rem;
    --_sizes---container--max-width: 83rem;
    --_sizes---spacing--spacing-xxsmall: .625rem;
    --_sizes---border-radius--radius-big: 2rem;
    --_sizes---border-radius--radius-regular: 1.5rem;
    --_sizes---border-radius--radius-large: 1.875rem;
    --_sizes---border-radius--radius-small: 1rem;
    --_sizes---border-radius--radius-circle: 100%;
    --_sizes---border-radius--radius-medium: 1.25rem;
    --_sizes---border-radius--radius-xsmall: .5rem;
    --_sizes---border-radius--radius-tiny: .25rem;
    --_sizes---border-radius--radius-xxsmall: .75rem;
    --_sizes---border-radius--radius-soft: 3.75rem;
    --_sizes---border-radius--radius-pill: 5rem;
  }
  .nav-menu {
    width: 92%;
  }
  .section.section_service-items {
    margin-top: -5rem;
  }
  .section.section_logos, .section.section_more-blogs {
    margin-top: -3rem;
  }
  .padding-section-large.styleguide-hero_wrapper {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
  }
  .padding-section-large.footer_wrapper {
    grid-column-gap: var(--_sizes---spacing--spacing-massive);
    grid-row-gap: var(--_sizes---spacing--spacing-massive);
  }
  .padding-section-large.services_wrapper {
    padding-top: 5rem;
    padding-bottom: var(--_sizes---spacing--spacing-large);
  }
  .padding-section-large.services_wrapper:where(.services-section-about), .padding-section-large.testimonial-wrapper {
    padding-bottom: 4rem;
  }
  .padding-section-large.cta-wrapper {
    max-width: 20rem;
    padding-top: var(--_sizes---spacing--spacing-massive);
    padding-bottom: var(--_sizes---spacing--spacing-colossal);
  }
  .padding-section-large.about-hero_wrapper {
    padding-bottom: 5rem;
  }
  .padding-section-large.director_wrapper {
    padding-top: 7rem;
    padding-bottom: var(--_sizes---spacing--spacing-small);
  }
  .padding-section-large.team_wrapper {
    padding-bottom: var(--_sizes---spacing--spacing-large);
  }
  .padding-section-large.logos_wrapper {
    padding-top: 4rem;
  }
  .padding-section-large.strategy-wrapper {
    padding-top: 6rem;
  }
  .padding-section-large.popular-wrapper {
    position: sticky;
  }
  .padding-section-large.blog-single-wrapper {
    padding-top: 7rem;
    padding-bottom: 5rem;
  }
  .padding-section-large.pricing-hero_wrapper {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }
  .site-link {
    width: 9.1rem;
  }
  .styleguide_card {
    height: 6rem;
  }
  .color_code {
    font-size: var(--_typography---texts-font-sizes--paragraph-l);
    line-height: var(--_typography---texts-line-height--paragraph-l);
    letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  }
  .buttons-flex {
    flex-flow: wrap;
  }
  .secondary-button:where(.secondary-button-price) {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .marquee {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .footer_top {
    grid-column-gap: var(--_sizes---spacing--spacing-massive);
    grid-row-gap: var(--_sizes---spacing--spacing-massive);
  }
  .marquee-dots.top {
    top: -2%;
  }
  .footer-social_links {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .footer_bottom {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }
  .copyright-text {
    max-width: 16rem;
    font-size: var(--_typography---texts-font-sizes--default-paragraph);
    line-height: var(--_typography---texts-line-height--default-paragraph);
    text-align: center;
    letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  }
  .back-top {
    width: 2.75rem;
    height: 2.75rem;
    margin-left: auto;
    margin-right: 0;
  }
  .back-top_arrow {
    width: 1rem;
  }
  .footer-rotate_icon {
    inset: auto auto -4rem 0%;
  }
  .home-hero_bottom {
    display: none;
  }
  .home-hero_text {
    text-align: center;
    padding: .5rem;
  }
  .home-hero_card.faq, .home-hero_card.pricing {
    display: none;
  }
  .about_right {
    max-width: 21.69rem;
  }
  .about_icon {
    display: none;
  }
  .creative-title {
    max-width: 22rem;
  }
  .creative_image-box {
    max-width: none;
    height: auto;
    padding-right: var(--_sizes---spacing--spacing-normal);
    padding-left: var(--_sizes---spacing--spacing-normal);
  }
  .creative_icon {
    width: 4rem;
    height: 4rem;
    top: -7%;
  }
  .process_items {
    grid-template-columns: minmax(0, 1fr);
  }
  .process_item {
    max-width: none;
    padding-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    position: sticky;
    top: 0;
  }
  .process_item._01, .process_item._02, .process_item._03 {
    top: var(--_sizes---spacing--spacing-normal);
    z-index: 0;
    position: sticky;
  }
  .process-icon.two {
    inset: auto 0% 0% auto;
  }
  .service_item-name {
    font-size: var(--_typography---texts-font-sizes--paragraph-l);
    line-height: var(--_typography---texts-line-height--paragraph-l);
    letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  }
  .service_item-card {
    border-radius: var(--_sizes---border-radius--radius-medium);
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    padding-left: 1.25rem;
  }
  .service_tag-card {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    padding: .5rem;
  }
  .tag-dot {
    width: .5rem;
    min-width: .5rem;
    height: .5rem;
    min-height: .5rem;
  }
  .service_item-tag {
    font-size: var(--_typography---heading-font-sizes--h6);
    line-height: var(--_typography---heading-line-height--h6);
    letter-spacing: var(--_typography---heading-letter-spacing--h6);
  }
  .service_item-desp {
    font-size: var(--_typography---texts-font-sizes--default-paragraph);
    line-height: var(--_typography---texts-line-height--default-paragraph);
    letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  }
  .together-circle-icon {
    width: 4rem;
    height: 4rem;
    top: 13%;
  }
  .faster-card.faq-two, .faster-card.faq-one {
    display: none;
  }
  .services-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .service-left_card {
    padding: var(--_sizes---spacing--spacing-large) var(--_sizes---spacing--spacing-normal);
  }
  .service-left_card._02, .service-left_card.more {
    padding-top: var(--_sizes---spacing--spacing-large);
    padding-bottom: var(--_sizes---spacing--spacing-large);
  }
  .service-right_card {
    padding-top: 5rem;
    padding-bottom: var(--_sizes---spacing--spacing-large);
  }
  .service-right_card._02 {
    padding: var(--_sizes---spacing--spacing-large) var(--_sizes---spacing--spacing-normal);
  }
  .service-right_card.more {
    padding: 3.5rem var(--_sizes---spacing--spacing-normal) var(--_sizes---spacing--spacing-large);
  }
  .services-circle-icon {
    display: none;
  }
  .services-item-bg {
    width: var(--_sizes---default-sizes--width);
    border-radius: 0;
    height: 2.5rem;
    top: -1.5%;
  }
  .pricing_card-icon {
    width: 2rem;
    height: 2rem;
  }
  .plan-name {
    font-size: var(--_typography---heading-font-sizes--h3);
    line-height: var(--_typography---heading-line-height--h3);
    letter-spacing: var(--_typography---heading-letter-spacing--h3);
  }
  .includes-list {
    grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
    grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
    font-size: var(--_typography---texts-font-sizes--paragraph-s);
    line-height: var(--_typography---texts-line-height--paragraph-s);
    letter-spacing: var(--_typography---texts-letter-spacing--paragraph-s);
  }
  .includes-list ul {
    font-size: var(--_typography---texts-font-sizes--default-paragraph);
    line-height: var(--_typography---texts-line-height--default-paragraph);
    letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
    text-transform: none;
  }
  .includes-list p {
    font-size: var(--_typography---texts-font-sizes--default-paragraph);
    line-height: var(--_typography---texts-line-height--default-paragraph);
    letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
    text-transform: capitalize;
  }
  .plan-dot {
    width: 3.5rem;
    height: 3.5rem;
    bottom: 20%;
  }
  .plan-dot.right {
    bottom: 20%;
  }
  .pricing-doll {
    width: 5rem;
    top: -4%;
  }
  .testimonial-mask {
    height: 525.609px;
  }
  .testimonial-slider-content {
    flex-flow: column;
    grid-template-columns: minmax(0, 1fr);
    display: flex;
  }
  .testimonial-left-content {
    height: var(--_sizes---default-sizes--height);
    padding-bottom: var(--_sizes---spacing--spacing-colossal);
  }
  .testimonial-right-content {
    height: 16rem;
  }
  .testimonial-slider-image {
    object-position: 50% 0%;
  }
  .testimonial-author-name {
    max-width: 16rem;
  }
  .left-arrow, .right-arrow {
    bottom: 1.5rem;
  }
  .blog-slider-arrow.right {
    right: 11%;
  }
  .blog-slider-arrow.left {
    left: 11%;
  }
  .faq-header {
    max-width: 12rem;
  }
  .faq-icon {
    width: 1.65rem;
    top: .1rem;
    left: 2.7rem;
  }
  .faq-list {
    padding-top: var(--_sizes---spacing--spacing-jumbo);
  }
  .faq-question {
    max-width: none;
  }
  .faq-answer {
    min-width: auto;
    max-width: none;
  }
  .faq-num {
    inset: .5rem auto auto 0%;
  }
  .faq-item {
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
  }
  .faq-arrow-box {
    inset: .5rem 0% auto auto;
  }
  .cta-ready-card {
    display: none;
  }
  .functional-sticky {
    padding-bottom: var(--_sizes---spacing--spacing-large);
  }
  .functional-counters {
    grid-column-gap: var(--_sizes---spacing--spacing-small);
  }
  .functional-para {
    font-size: var(--_typography---texts-font-sizes--paragraph-s);
    line-height: var(--_typography---texts-line-height--paragraph-s);
    letter-spacing: var(--_typography---texts-letter-spacing--paragraph-s);
  }
  .director-contents {
    grid-template-columns: minmax(0, 1fr);
  }
  .director-image {
    height: 18rem;
  }
  .director-desp {
    font-size: var(--_typography---heading-font-sizes--h4);
    line-height: var(--_typography---heading-line-height--h4);
    letter-spacing: var(--_typography---heading-letter-spacing--h4);
  }
  .team-members-details {
    grid-template-columns: minmax(0, 1fr);
  }
  .team-member-info {
    top: var(--_sizes---spacing--spacing-normal);
    position: sticky;
  }
  .member-images-details.mob {
    height: 17rem;
  }
  .startup-right-bg, .startup-left-bg {
    display: none;
  }
  .strategy-top {
    position: sticky;
    top: 2rem;
  }
  .strategy-bottom {
    grid-column-gap: var(--_sizes---spacing--spacing-small);
    grid-row-gap: var(--_sizes---spacing--spacing-small);
    grid-template-columns: minmax(0, 1fr);
  }
  .strategy-card {
    border-style: solid;
    position: sticky;
    top: 10rem;
  }
  .strategy-card-bottom {
    height: 16rem;
  }
  .popular-height {
    padding-bottom: var(--_sizes---spacing--spacing-massive);
  }
  .service_item-image {
    height: 14rem;
  }
  .service-collection-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .service-collection-item {
    position: sticky;
    top: 8rem;
  }
  .advantage-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .advantage-card:where(.advantage-card-second) {
    border-top-style: none;
    border-left-style: solid;
  }
  .advantage-name {
    width: var(--_sizes---default-sizes--width);
  }
  .advantage-star {
    width: 7.5rem;
  }
  .project_hero-title {
    max-width: 22rem;
  }
  .project-svg {
    width: 60px;
  }
  .project-banner-bg {
    padding-right: var(--_sizes---spacing--spacing-small);
    padding-left: var(--_sizes---spacing--spacing-small);
  }
  .single-icon {
    width: 4rem;
    top: -27%;
  }
  .services-name {
    font-size: var(--_typography---texts-font-sizes--default-paragraph);
    line-height: var(--_typography---texts-line-height--default-paragraph);
    letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  }
  .more-right-bg, .more-left-bg {
    display: none;
  }
  .blog_hero-title {
    max-width: 22rem;
  }
  .blog-button:where(.secondary-button-price) {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .blog-top-detail, .blog-middle-detail {
    max-width: 22rem;
  }
  .blog-author-details {
    max-width: 15rem;
  }
  .blog-author-icon {
    width: 3.25rem;
    min-width: 3.25rem;
    height: 3.25rem;
    min-height: 3.25rem;
    padding: .3rem;
  }
  .blog-item-banner {
    height: 16rem;
  }
  .blog-item-icon {
    display: none;
  }
  .blog-icon-abs {
    width: 4rem;
    height: 4rem;
    top: 2%;
  }
  .blog-icon-abs.pricing {
    width: 3.5rem;
  }
  .blog-gallery, .blog-gallery._02 {
    grid-template-columns: minmax(0, 1fr);
  }
  .blog-lightbox-link {
    height: 16rem;
  }
  .blog-galleries {
    margin-top: -1rem;
  }
  .pricing_hero-title {
    max-width: 18.25rem;
  }
  .plan-svg {
    width: 3.1rem;
  }
  .plan-item, .contact-title {
    max-width: 18.25rem;
  }
  .contact-header {
    max-width: 18.25rem;
    margin-top: 2rem;
    margin-bottom: 5.25rem;
  }
  .contact-star-icon {
    width: 1.75rem;
  }
  .contact-form-fields {
    margin-bottom: var(--_sizes---spacing--spacing-normal);
  }
  .text-area {
    height: 7rem;
    min-height: 7rem;
  }
  .contact-marquee {
    top: 21.5%;
  }
  .license-images {
    grid-template-columns: minmax(0, 1fr);
  }
  .changelog-card {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .changelog-lists {
    font-size: var(--_typography---texts-font-sizes--default-paragraph);
    line-height: var(--_typography---texts-line-height--default-paragraph);
    letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  }
  .wave-ribbon {
    height: 120px;
  }}

#node-a90f03ed-77d8-b262-415c-19dbfd117918-f83ce43f {
  place-self: center;
}@media screen and (max-width: 479px) {

  #node-_0a812543-9cfc-f979-6cf0-aeb6be71dfaa-57fcbaa4, #node-_6268d258-5012-f9eb-8b4d-468d57dc342f-57fcbaa4, #node-af419be3-ae69-3630-02e4-3a25c7d515aa-c7d51597, #node-af419be3-ae69-3630-02e4-3a25c7d515b7-c7d51597, #node-af419be3-ae69-3630-02e4-3a25c7d515c4-c7d51597, #node-_93d2504a-25c1-a0fe-d684-5d475f7e4bed-f736b464, #node-a5057c6c-380c-fe24-d5a5-445969dfdc2b-f736b464, #node-f9f11638-c787-d981-b0ef-e449758f551d-f736b464, #node-_8b0d6f80-e637-7d38-da95-8b52fdc5f339-f736b464, #node-_1cb70544-9f15-71e2-a48f-575be12d47a5-f736b464, #node-b086cadd-dcc1-6efa-60da-f59bd2ce75b9-260854d9 {
    order: -9999;
  }}


/* ======================================================================
   4. Components -- vanilla replacements for the Webflow runtime
   ======================================================================

   Everything the export needed 1.4 MB of `pixelfrog-digital.js`, jQuery,
   four GSAP files and Lenis for. Nothing below needs a library: the widgets
   are CSS states that main.js toggles, and every piece of motion is a CSS
   animation or transition.

   Four conventions run through the file.

   * A SCROLL REVEAL IS AN ANIMATION, NOT A TRANSITION. A `transition:`
     shorthand on a revealed element DELETES whatever transition the design
     already gave it -- which on an earlier conversion silently killed every
     card hover on the page. The reveal layer only ever declares
     `animation-*`, so the two never meet.

   * A REVEAL'S FINISHED STATE IS STATED TWICE. main.js adds `.is-revealed`
     to play it and swaps that for `.is-shown` on `animationend`, because
     `animation-fill-mode: both` pins `transform` forever and would freeze
     anything that is also hovered, scrubbed or looping. So the end state
     must be restated on `.is-shown` -- a reveal whose finished state lives
     ONLY in its keyframes undoes itself a second after it plays, which is a
     bug that shipped once in this series and which `audit_reveals.py` now
     guards.

   * A SCROLL SCRUB SETS ONE NUMBER. main.js writes `--scrub` (0..1) on the
     section and nothing else; the motion is a PAUSED animation seeked by
     `animation-delay: calc(var(--scrub) * -1s)` over
     `animation-duration: 1s`. That keeps the IX2 payload's own keyframe
     percentages -- 5%, 10%, 30%, 40%, 46%, 56%, 64%, 67%, 70% -- as literal
     CSS keyframe percentages instead of re-deriving them in script, which is
     what `audit_scrub_values.py` checks them against.

   * A BREAKPOINT GATE IS WRITTEN ON BOTH SIDES. Where IX2 limits an event to
     `main, medium` (the process scrub, the counters scrub, the five team
     rows) or to `small, tiny` (the startup-logo marquee), the media query is
     here AND in main.js. Gating only the script leaves the rest state
     applied at widths that never animate out of it -- which is how a
     breakpoint-gated reveal shipped invisible on an earlier build.

   The easing names in the comments are IX2's own. Their curves:

       outQuart                cubic-bezier(.165, .84, .44, 1)
       [0.25, 0.46, 0.45, 0.94] = outQuad
       [0.25, 0.25, 0.75, 0.75] = linear
       (no easing named)       linear
   ====================================================================== */

:root {
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ------------------------------------------------------------ structure */

/* transform.py wraps each page's own content in <main> for the skip link and
   the main landmark. `display: contents` removes the BOX and leaves the
   sections exactly where the design put them. */
main {
  display: contents;
}

/* The heading wrapper rebuild_faq puts round each question, for the document
   outline. `display: contents` removes the box but NOT the inheritance: h3's
   own type would otherwise pass straight through into the question, which
   cost an earlier conversion 18px a row. `font` carries neither
   letter-spacing nor word-spacing, so both are restated. */
.faq-heading {
  display: contents;
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-transform: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The first thing in every <body>: off-screen until it is focused. */
.skip-link {
  position: absolute;
  top: -100vh;
  left: 1rem;
  z-index: 2000;
  padding: 0.75rem 1.25rem;
  background: var(--_colors---text-color--light);
  color: var(--_colors---background-color--dark);
  font-family: var(--font-family--rubik);
  font-weight: var(--font-weight--heavy);
  text-transform: uppercase;
  text-decoration: none;
  border: 4px solid var(--_colors---background-color--dark);
}

.skip-link:focus {
  top: 1rem;
}

/* A visible focus ring everywhere. The export shipped `outline: 0` on the
   navbar button and both slider arrows and nothing in its place. */
:focus-visible {
  outline: 3px solid var(--_colors---text-color--primary);
  outline-offset: 3px;
}

/* ================================================================ reveals
   IX2's three live scroll presets. Each element carries `.reveal` plus one of
   the classes below; main.js observes it and adds `.is-revealed`, then
   `.is-shown`.

   THE REST STATE IS GATED ON `html.js`. Without the gate a visitor with
   scripting off gets a blank page, because nothing would ever remove the
   `opacity: 0` -- which is exactly what shipped on an earlier conversion. The
   export gates the same thing with `html.w-mod-js`; transform.py writes the
   `js` class in one line at the top of every <head>. */
:where(.js) .reveal {
  opacity: 0;
}

.reveal.is-revealed,
.reveal.is-shown {
  opacity: 1;
}

/* All three presets are 1000ms `outQuart`, IX2's stock scroll timing. The
   per-element delay comes from `data-reveal-delay`, which main.js copies into
   `--reveal-delay`. */
.reveal.is-revealed {
  animation-duration: 1s;
  animation-timing-function: var(--ease-out-quart);
  animation-fill-mode: both;
  animation-delay: var(--reveal-delay, 0ms);
}

/* `slideInBottom`, 140 of the 158 live reveals: y 100px, opacity 0. */
/* THE OFFSET IS THE `translate` PROPERTY, NOT `transform` -- AND THAT IS
   DELIBERATE. `translate`, `scale` and `rotate` are applied BEFORE
   `transform` and compose with it, so a preset written this way slides an
   element the designer has already rotated without flattening the rotation.
   Written as `transform` it would, and `.is-shown` PINS the end value, so
   the element would stay flattened for the rest of the page's life --
   invisible to the parity harness, which pins every reveal on both sides. */
@keyframes reveal-up {
  from {
    opacity: 0;
    translate: 0 100px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.reveal-up.is-revealed {
  animation-name: reveal-up;
}

.reveal-up.is-shown {
  translate: 0 0;
}

/* `growIn`, 14 reveals: scale 0.75, opacity 0. */
@keyframes reveal-grow {
  from {
    opacity: 0;
    scale: 0.75;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

.reveal-grow.is-revealed {
  animation-name: reveal-grow;
}

.reveal-grow.is-shown {
  scale: 1;
}

/* `fadeIn`, 4 reveals: opacity only, so the end state on `.is-shown` is the
   `opacity: 1` the three of them already share above. */
@keyframes reveal-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.reveal-fade.is-revealed {
  animation-name: reveal-fade;
}

/* Twelve reveals are limited to one band of widths. Outside it the element is
   never revealed, so its rest state must not apply either -- gating only the
   script leaves it at `opacity: 0` forever. The three gates below are the
   ones this payload actually uses; `main` is not among them. */
@media screen and (max-width: 767px) {
  :where(.js) .reveal[data-reveal-mq="medium"] {
    opacity: 1;
  }
}@media screen and (min-width: 768px) {

  :where(.js) .reveal[data-reveal-mq="below-medium"] {
    opacity: 1;
  }}
@media screen and (min-width: 992px) {

  :where(.js) .reveal[data-reveal-mq="below-main"] {
    opacity: 1;
  }}


/* ============================================================= entrances
   Two lists that fire ONCE when their trigger scrolls into view and animate
   several named siblings on a stagger. main.js adds `.is-entered` to the
   trigger AND to its parent, because the targets sit both before and after
   the trigger in document order and a sibling combinator only looks forward.

   Unlike a reveal these have no rest state of their own to gate: both keep
   the design's, which is already in the sheet above. */

/* `a-22` ("home-hero_icons animate"): the four floating pieces of the home
   hero fade in on a 300 / 400 / 500 / 500 ms stagger over 500ms, linear. */
:where(.js) .home-hero_icon.one,
:where(.js) .home-hero_icon._02,
:where(.js) .home-hero_card._01,
:where(.js) .home-hero_card._02 {
  opacity: 0;
}

.is-entered > .home-hero_icon.one,
.is-entered > .home-hero_icon._02,
.is-entered > .home-hero_card._01,
.is-entered > .home-hero_card._02 {
  opacity: 1;
  transition: opacity 500ms linear;
}

.is-entered > .home-hero_card._02 {
  transition-delay: 300ms;
}

.is-entered > .home-hero_icon._02 {
  transition-delay: 400ms;
}

.is-entered > .home-hero_card._01,
.is-entered > .home-hero_icon.one {
  transition-delay: 500ms;
}

/* `a-43` ("director-icons scroll view"): the badge scales in from 0 after
   400ms and the two dots fade in at 0ms and 200ms, all over 500ms. The
   badge's `transform: scale(0)` rest state is IX2's, not the design's, so it
   is written here and gated on `.js`. */
:where(.js) .director-icon {
  transform: scale(0);
}

:where(.js) .director-dot {
  opacity: 0;
}

[data-enter="director"].is-entered {
  transform: scale(1);
  transition: transform 500ms linear 400ms;
}

.is-entered > .director-dot {
  opacity: 1;
  transition: opacity 500ms linear;
}

.is-entered > .director-dot._01 {
  transition-delay: 200ms;
}

/* ================================================================== loops
   Fourteen infinite animations, every one of them a SCROLL_INTO_VIEW event
   that starts a list with `loop: true`. main.js adds `.is-looping` when the
   element first appears; before that they do not run at all, which is what
   the payload says and what keeps an off-screen marquee off the compositor.

   Two of them are NOT in the payload: the home page's inline
   `gsap.to(".home-hero_icon.one, .services-circle-icon, ...", {rotation: 360,
   duration: 20, ease: "none", repeat: -1})`, which spins eight badges from
   page load rather than from a scroll trigger, and its twin on the other
   pages. Those keep the same behaviour -- no trigger, straight from load --
   which is why they are plain `animation` and not `.is-looping`. */
@keyframes marquee-left {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}@keyframes spin-cw {

  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }}
@keyframes spin-ccw {

  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }}


/* --- marquees ---------------------------------------------------------
   Each band holds several identical rows; the payload moves EVERY row by
   -100% of its own width over the period below, which is what makes the
   loop seamless. */
[data-marquee].is-looping > .marquee-items,
[data-marquee].is-looping .process_marquee-items,
[data-marquee].is-looping .together_marquee-texts,
[data-marquee].is-looping .startups-logos {
  animation: marquee-left linear infinite;
  animation-duration: var(--marquee-duration, 40s);
  will-change: transform;
}

[data-marquee="process"] {
  --marquee-duration: 60s;
}

[data-marquee="together"] {
  --marquee-duration: 100s;
}

[data-marquee="startups"] {
  --marquee-duration: 25s;
}

/* `a-56` is authored for `small, tiny` ONLY: above 768px the client logos
   are a two-column grid rather than a running band, and the design's own
   `flex-flow: column` on `.startups-logos` is what makes that grid. Running
   the marquee there would drag the column off the left edge. */
@media screen and (min-width: 768px) {
  [data-marquee="startups"].is-looping .startups-logos {
    animation: none;
  }
}

/* --- rotating badges --------------------------------------------------- */
[data-spin].is-looping {
  animation: spin-cw linear infinite;
  animation-duration: var(--spin-duration, 25s);
}

[data-spin="footer"].is-looping,
[data-spin="hero-icon"].is-looping,
[data-spin="advantage-star"].is-looping,
[data-spin="blog-abs"].is-looping,
[data-spin="contact-star"].is-looping {
  animation-name: spin-ccw;
}

[data-spin="footer"],
[data-spin="startup"] {
  --spin-duration: 20s;
}

[data-spin="hero-icon"] {
  --spin-duration: 30s;
}

/* The eight badges the export spun from an inline GSAP call rather than from
   IX2: 360 degrees over 20 seconds, linear, from page load. `.home-hero_icon
   .one` is in BOTH lists -- the GSAP spin and the `a-22` entrance -- so it
   spins and fades in at the same time, and the fade is on `opacity` alone
   precisely so the two do not collide over `transform`. */
.home-hero_icon.one,
.home-hero_icon.testimonial,
.services-circle-icon,
.together-circle-icon,
.together-icon,
.process-icon,
.process-icon.two,
.about_icon {
  animation: spin-cw 20s linear infinite;
}

/* ================================================================= hovers
   Twelve `[hover in]` / `[hover out]` pairs. Each "in" list has
   `useFirstGroupAsInitialState: true`, so its group 0 is the rest state and
   its group 1 is the hovered state; each "out" list is group 0 again. That
   is exactly a CSS transition played both ways, so the rest state lives on
   the element and the hovered state on `:hover`.

   Where the design sheet ALREADY states the rest value -- `.startup-icon
   { opacity: 0 }`, `.advantage-content { transform: translate(-100%) }`,
   `.advantage-icon { transform: scale(0) }`, `.strategy-part-two.active
   { opacity: 0 }`, `.faster-card { transform: rotate(-4deg) }` -- it is NOT
   repeated here. Every one of those was checked against the sheet first: a
   group-0 value that CONTRADICTS the design is not redundant, and stripping
   one on an earlier conversion left white text on a lime button. */

/* `a-11` / `a-12` "primary-button": the light panel grows up from the
   bottom edge over 400ms. `.primary-button-bg { height: 0% }` is the
   design's own rest state. */
.primary-button-bg {
  transition: height 400ms var(--ease-out-quad);
}

[data-hover="primary-button"]:hover .primary-button-bg,
[data-hover="primary-button"]:focus-visible .primary-button-bg {
  height: 100%;
}

/* `a-13` / `a-14` "secondary-button" and `a-76` / `a-77`, the cookie
   banner's "Got it": the two stacked labels roll up by their own height
   over 350ms. `.secondary-button_texts { height: 1rem; overflow: clip }` is
   the window they roll through. */
.secondary-button_text {
  transition: transform 350ms var(--ease-out-quad);
}

[data-hover="roll"]:hover .secondary-button_text,
[data-hover="roll"]:focus-visible .secondary-button_text {
  transform: translate3d(0, -100%, 0);
}

/* `a-35` / `a-36` "blog-slider-arrow": the same roll, 400ms, on the two
   `.blog-slider-text` lines inside each of the blog rail's wide arrows. */
.blog-slider-text {
  transition: transform 400ms var(--ease-out-quad);
}

[data-hover="slider-arrow"]:hover .blog-slider-text,
[data-hover="slider-arrow"]:focus-visible .blog-slider-text {
  transform: translate3d(0, -100%, 0);
}

/* `a-16` / `a-17` "footer-social_link": the chip inverts -- primary red with
   light type becomes light with dark type -- tilts -4 degrees, and its
   dashed inner border follows the type. 400ms; the border is `linear` in the
   payload while everything else is outQuad. */
[data-hover="social"] {
  transition: background-color 400ms var(--ease-out-quad),
    color 400ms var(--ease-out-quad),
    transform 400ms var(--ease-out-quad);
}

[data-hover="social"] .footer-social_info {
  transition: border-color 400ms linear;
}

[data-hover="social"]:hover,
[data-hover="social"]:focus-visible {
  background-color: var(--_colors---text-color--light);
  color: var(--_colors---background-color--dark);
  transform: rotate(-4deg);
}

[data-hover="social"]:hover .footer-social_info,
[data-hover="social"]:focus-visible .footer-social_info {
  border-color: var(--_colors---background-color--dark);
}

/* `a-33` / `a-34` "blog-item-content": the card's content strip floods dark
   over 500ms while its title and reading time go light over 350ms, and the
   photograph scales to 1.1. The strip's rest background is
   `--_colors---text-color--transparent`, which is `#fff0`. */
[data-hover="blog-card"] {
  transition: background-color 500ms var(--ease-out-quad);
}

[data-hover="blog-card"] .blog-item-image {
  transition: transform 500ms var(--ease-out-quad);
}

[data-hover="blog-card"] .blog-item-name,
[data-hover="blog-card"] .blog-reading-time {
  transition: color 350ms var(--ease-out-quad);
}

/* THE HOOK IS ON `.blog-item-content` ITSELF. The payload scopes the
   background action to `.blog-item-content` with no CHILDREN scope, and the
   element the trigger id lands on IS that strip -- so the descendant form
   (`[data-hover]:hover .blog-item-content`) matches nothing anywhere on the
   site and is not written. This is the Eyeconic lesson in the other
   direction: check WHICH of the two forms the markup actually needs rather
   than shipping both. */
[data-hover="blog-card"]:hover,
[data-hover="blog-card"]:focus-visible {
  background-color: var(--_colors---background-color--dark);
}

[data-hover="blog-card"]:hover .blog-item-image,
[data-hover="blog-card"]:focus-visible .blog-item-image {
  transform: scale(1.1);
}

[data-hover="blog-card"]:hover .blog-item-name,
[data-hover="blog-card"]:hover .blog-reading-time,
[data-hover="blog-card"]:focus-visible .blog-item-name,
[data-hover="blog-card"]:focus-visible .blog-reading-time {
  color: var(--_colors---text-color--light);
}

/* `a-44`..`a-47`, the two social chips on each team card. They start tilted
   in opposite directions (-4 and +4 degrees, both the design's own) and
   deepen to -8 and +8 on hover while swapping their colours. 400ms.

   BOTH FORMS OF EACH SELECTOR ARE WRITTEN. The payload scopes the colour
   actions to `.faster-card.team-fb-link` with no CHILDREN scope, and the
   element carrying the hook IS that card -- so a descendant-only rule
   (`[data-hover]:hover .faster-card`) matches nothing. This is the Eyeconic
   lesson: a state class lands on the TRIGGER, so write it both ways. */
[data-hover="team-fb"],
[data-hover="team-ins"] {
  transition: background-color 400ms var(--ease-out-quad),
    color 400ms var(--ease-out-quad),
    transform 400ms var(--ease-out-quad);
}

[data-hover="team-fb"] .faster-text-box,
[data-hover="team-ins"] .faster-text-box {
  transition: border-color 400ms var(--ease-out-quad);
}

[data-hover="team-fb"]:hover,
[data-hover="team-fb"]:focus-visible {
  background-color: var(--_colors---text-color--light);
  color: var(--_colors---background-color--dark);
  transform: rotate(-8deg);
}

[data-hover="team-fb"]:hover .faster-text-box.team-fb,
[data-hover="team-fb"]:focus-visible .faster-text-box.team-fb {
  border-color: var(--_colors---background-color--dark);
}

[data-hover="team-ins"]:hover,
[data-hover="team-ins"]:focus-visible {
  background-color: var(--_colors---text-color--primary);
  color: var(--_colors---text-color--light);
  transform: rotate(8deg);
}

[data-hover="team-ins"]:hover .faster-text-box.team-ins,
[data-hover="team-ins"]:focus-visible .faster-text-box.team-ins {
  border-color: var(--_colors---text-color--light);
}

/* `a-53` / `a-54` "startup-logo-card": the spinning badge in the corner
   fades in over 500ms and out over 200ms. `.startup-icon { opacity: 0 }` is
   the design's. */
.startup-icon {
  transition: opacity 200ms var(--ease-out-quad);
}

[data-hover="startup-logo"]:hover .startup-icon,
[data-hover="startup-logo"]:focus-within .startup-icon {
  opacity: 1;
  transition-duration: 500ms;
}

/* `a-63` / `a-64` "service-item-lnk": image to 1.1, name to primary red.
   500ms. */
[data-hover="service-link"] .service_item-image {
  transition: transform 500ms var(--ease-out-quad);
}

[data-hover="service-link"] .service-item-name {
  transition: color 500ms var(--ease-out-quad);
}

[data-hover="service-link"]:hover .service_item-image,
[data-hover="service-link"]:focus-visible .service_item-image {
  transform: scale(1.1);
}

[data-hover="service-link"]:hover .service-item-name,
[data-hover="service-link"]:focus-visible .service-item-name {
  color: var(--_colors---text-color--primary);
}

/* `a-68` / `a-69` "project-item": the project card's photograph to 1.1,
   500ms. Seven cards across three pages. */
[data-hover="project-card"] .service-item_image {
  transition: transform 500ms var(--ease-out-quad);
}

[data-hover="project-card"]:hover .service-item_image,
[data-hover="project-card"]:focus-visible .service-item_image {
  transform: scale(1.1);
}

/* `a-70` / `a-71` "blog-item-link", the blog page's featured card: the title
   goes primary red, the photograph un-blurs from 1px and scales to 1.1, and
   the button underneath rolls. All 500ms. */
[data-hover="blog-feature"] .blog-name {
  transition: color 500ms var(--ease-out-quad);
}

[data-hover="blog-feature"] .blog-image {
  filter: blur(1px);
  transition: filter 500ms var(--ease-out-quad),
    transform 500ms var(--ease-out-quad);
}

[data-hover="blog-feature"] .secondary-button_text {
  transition-duration: 500ms;
}

[data-hover="blog-feature"]:hover .blog-name,
[data-hover="blog-feature"]:focus-visible .blog-name {
  color: var(--_colors---text-color--primary);
}

[data-hover="blog-feature"]:hover .blog-image,
[data-hover="blog-feature"]:focus-visible .blog-image {
  filter: blur(0);
  transform: scale(1.1);
}

[data-hover="blog-feature"]:hover .secondary-button_text,
[data-hover="blog-feature"]:focus-visible .secondary-button_text {
  transform: translate3d(0, -100%, 0);
}@media screen and (min-width: 992px) {

  /* `a-65` / `a-66` "advantage-card": the big outline number slides 118% to
     the right, the content panel slides in from -100%, the header row fades
     in and the star scales up from 0. 500ms in; the "out" list uses 500 / 400
     / 300 / 500, which is what the four `transition-duration`s below say. */
  .advantage-main-num {
    transition: transform 500ms var(--ease-out-quad);
  }

  .advantage-content {
    transition: transform 500ms var(--ease-out-quad);
  }

  .advantage-top {
    opacity: 0;
    transition: opacity 300ms var(--ease-out-quad);
  }

  .advantage-icon {
    transition: transform 400ms var(--ease-out-quad);
  }

  [data-hover="advantage"]:hover .advantage-main-num,
  [data-hover="advantage"]:focus-within .advantage-main-num {
    transform: translate3d(118%, 0, 0);
  }

  [data-hover="advantage"]:hover .advantage-content,
  [data-hover="advantage"]:focus-within .advantage-content {
    transform: translate3d(0, 0, 0);
  }

  [data-hover="advantage"]:hover .advantage-top,
  [data-hover="advantage"]:focus-within .advantage-top {
    opacity: 1;
    transition-duration: 500ms;
  }

  [data-hover="advantage"]:hover .advantage-icon,
  [data-hover="advantage"]:focus-within .advantage-icon {
    transform: scale(1);
    transition-duration: 500ms;
  }

  /* `a-60` / `a-61` "strategy-card": four equal columns; hovering one takes it
     to 40% and the other three to 20%, swapping its front face for its tags
     and photograph. ONE list drives all four cards, so this is a `:has()` rule
     and not an indexed group.

     THE YIELD RULE EXCLUDES THE HOVERED CARD. `:has()` takes its ARGUMENT's
     specificity, so `.strategy-bottom:has(.strategy-card:hover) .strategy-card`
     scores (0,4,0) and would BEAT `.strategy-card:hover` at (0,2,0) -- which on
     an earlier conversion collapsed the whole rail the moment a card was
     hovered. `:not(:hover)` keeps the two rules from ever meeting. */
  .strategy-card {
    transition: width 500ms var(--ease-out-quad);
  }

  .strategy-part-one {
    transition: opacity 200ms var(--ease-out-quad);
  }

  .strategy-part-two.active {
    transition: opacity 200ms var(--ease-out-quad);
  }

  .strategy-tags,
  .strategy-image-block {
    transform: translate3d(0, 102%, 0);
    transition: transform 500ms var(--ease-out-quad);
  }

  .strategy-image-block {
    transition-delay: 100ms;
  }

  [data-hover="strategy"]:hover {
    width: 40%;
  }

  .strategy-bottom:has([data-hover="strategy"]:hover)
    [data-hover="strategy"]:not(:hover) {
    width: 20%;
  }

  [data-hover="strategy"]:hover .strategy-part-one {
    opacity: 0;
    transition-duration: 0ms;
  }

  [data-hover="strategy"]:hover .strategy-part-two.active {
    opacity: 1;
  }

  [data-hover="strategy"]:hover .strategy-tags,
  [data-hover="strategy"]:hover .strategy-image-block {
    transform: translate3d(0, 0, 0);
  }}


/* ------------------------------------------------- exclusive hover groups
   Two rails where the members take turns, and where the REST STATE is one
   member already open. IX2 writes that state inline on load from each
   list's group 0; the design sheet states most of it too (`.service_item
   { opacity: .6 }` with `._01 { opacity: 100 }`, `.service_item-icon
   { opacity: 0 }` with `._01` at 100, `.member-images-details._01
   { opacity: 1 }`, `.team-member-bg { height: 0% }`), so what is left here
   is the transitions and the hovered states. */

/* `a-28`..`a-31` "service_item-1..4", 300ms linear. Hovering row N brings it
   to full opacity, slides its name back to x=0, shows its icon and its
   content panel, and dims the other three.

   THE HOST IS `.services_bottom`, WHICH IS WHERE THE TWO HALVES MEET. The
   four rows live in `.service_items` and their four panels in a sibling
   `.service_items-contents`, so a `:has()` written on either one reaches
   only half the group -- and one written on `.services-items`, which is a
   DIFFERENT element on the same page, reaches none of it. That is what the
   first version of this file did, and the whole rail was inert.

   AND EVERY YIELD RULE EXCLUDES THE HOVERED ROW. `:has()` takes its
   ARGUMENT's specificity, so the dim rule scores (0,4,0) against the hovered
   row's own (0,2,0) and would win on the row being pointed at. `:not(:hover)`
   keeps the two from ever meeting -- the same lesson a sibling conversion
   learned by collapsing an entire rail the moment a card was hovered. */
.service_item,
.service_item-icon,
.service_item-content {
  transition: opacity 300ms linear;
}

.service_item-name {
  transition: transform 300ms linear;
}

.services_bottom:has([data-service-item]:hover)
  [data-service-item]:not(:hover) {
  opacity: 0.6;
}

.services_bottom:has([data-service-item]:hover)
  [data-service-item]:not(:hover) .service_item-icon {
  opacity: 0;
}

.services_bottom:has([data-service-item]:hover)
  [data-service-item]:not(:hover) .service_item-name {
  transform: translate3d(-1.75rem, 0, 0);
}

[data-service-item]:hover {
  opacity: 1;
}

[data-service-item]:hover .service_item-icon {
  opacity: 1;
}

[data-service-item]:hover .service_item-name {
  transform: translate3d(0, 0, 0);
}

/* The content panels sit in the sibling column, keyed `._01`.. `._04`, so
   the four pairings are written out. The "all off" rule scores (0,4,0) and
   each "this one on" rule (0,5,0), which is what puts the right panel up. */
.services_bottom:has([data-service-item]:hover) .service_item-content {
  opacity: 0;
}

.services_bottom:has([data-service-item="1"]:hover) .service_item-content._01,
.services_bottom:has([data-service-item="2"]:hover) .service_item-content._02,
.services_bottom:has([data-service-item="3"]:hover) .service_item-content._03,
.services_bottom:has([data-service-item="4"]:hover) .service_item-content._04 {
  opacity: 1;
}

/* `a-48`..`a-52` "team-member-1..5", 400ms (200ms for the numbers), and
   `main, medium` ONLY -- below 768px the rows are a plain list with no
   hover state at all.

   THE HOST IS `.team_wrapper`, NOT `.team-bottom`. The five rows and their
   portraits are in `.team-bottom`, but the five big NUMBERS are in
   `.team-top` beside it -- so a `:has()` on `.team-bottom` reaches four of
   the five things this hover moves and silently drops the fifth. The
   wrapper is the only element that contains both. */
@media screen and (min-width: 768px) {
  .team-member-name,
  .team-member-bg {
    transition: color 400ms var(--ease-out-quad),
      height 400ms var(--ease-out-quad);
  }

  .member-images-details {
    transition: opacity 400ms var(--ease-out-quad);
  }

  .team-member-num {
    transition: opacity 200ms var(--ease-out-quad);
  }

  /* The name is dark and the backdrop is 0% tall at rest, by the design's
     own hand, so only the hovered row needs stating. */
  [data-team-member]:hover .team-member-name {
    color: var(--_colors---text-color--light);
  }

  [data-team-member]:hover .team-member-bg {
    height: 100%;
  }

  /* The portrait and the number DO need a yield rule: member one's are
     showing at rest, and pointing at member three has to put them away. */
  .team_wrapper:has([data-team-member]:hover) .member-images-details,
  .team_wrapper:has([data-team-member]:hover) .team-member-num {
    opacity: 0;
  }

  .team_wrapper:has([data-team-member="1"]:hover) .member-images-details._01,
  .team_wrapper:has([data-team-member="2"]:hover) .member-images-details._02,
  .team_wrapper:has([data-team-member="3"]:hover) .member-images-details._03,
  .team_wrapper:has([data-team-member="4"]:hover) .member-images-details._04,
  .team_wrapper:has([data-team-member="5"]:hover) .member-images-details._05,
  .team_wrapper:has([data-team-member="1"]:hover) .team-member-num._01,
  .team_wrapper:has([data-team-member="2"]:hover) .team-member-num._02,
  .team_wrapper:has([data-team-member="3"]:hover) .team-member-num._03,
  .team_wrapper:has([data-team-member="4"]:hover) .team-member-num._04,
  .team_wrapper:has([data-team-member="5"]:hover) .team-member-num._05 {
    opacity: 1;
  }
}

/* =================================================================== FAQ
   `a-37` / `a-38`, bound to MOUSE_CLICK and MOUSE_SECOND_CLICK on the whole
   `.faq-item` row: the answer's height goes 0 -> auto over 350ms, its
   paragraph slides down from -10px, and the plus icon closes into a minus.

   The answer collapses to a zero GRID ROW rather than to `height: 0`,
   because `height: auto` is not animatable and measuring it in script would
   put the closed state behind the first paint. `minmax(0, 0fr)` and not a
   bare `0fr`: a bare one does not collapse a row whose content has a
   minimum size, which is how an earlier conversion shipped an accordion that
   never closed. */
.faq-answer {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows 350ms linear;
}

/* `1fr` and not `minmax(0, 1fr)`. A grid container with an indefinite
   height sizes an `fr` track from its content -- but only when the track's
   MINIMUM is `auto`. Writing the open state as `minmax(0, 1fr)` pins the
   minimum to zero, the free space in an auto-height container is zero, and
   the row stays collapsed: the accordion reports `aria-expanded="true"` and
   opens to nothing. (The CLOSED state does need the explicit `minmax(0,
   0fr)` above -- a bare `0fr` leaves the row at its content's minimum.) */
.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-para {
  transform: translate3d(0, -10px, 0);
  transition: transform 350ms linear;
}

.faq-item.is-open .faq-para {
  transform: translate3d(0, 0, 0);
}

/* The plus-to-minus icon, transcribed from `White-Plus-to-minus.json`: two
   identical horizontal rules, the second rotated 90 degrees at rest, easing
   to 0 over the file's own 30 frames at 60fps -- half a second, which IX2
   plays in 350ms. The file's tangents are (0.25, 1) in and (0.75, 0) out. */
/* `.faq-toggle`, NOT `.faq-icon`. This design already owns `.faq-icon` --
   it is the big decorative parenthesis beside the FAQ heading, sized
   6.1rem -- and naming the inline SVG the same thing blew that image up to
   the full width of its section on six pages. Every class this file invents
   is checked against the design's own 507 names by audit_css; this one got
   through because the check only looked at the classes the build RENAMES. */
.faq-toggle {
  width: 100%;
  height: 100%;
}

.faq-toggle-cross {
  transform: rotate(90deg);
  transform-origin: 50% 50%;
  transition: transform 350ms cubic-bezier(0.75, 0, 0.25, 1);
}

.faq-item.is-open .faq-toggle-cross {
  transform: rotate(0deg);
}

/* The question is a <button> now, and the whole row is still the click
   target the published site has -- so the row keeps its `cursor: pointer`
   from the design sheet and the button stretches to fill its own column. */
.faq-question {
  cursor: pointer;
  width: 100%;
}

/* ================================================================= navbar
   `data-collapse="all"`: the panel is closed at every width and the
   hamburger that opens it is shown at every width. main.js moves `.nav-menu`
   into an overlay it appends to the bar, exactly as the runtime did, so
   `top: 100%` measures from the bottom of the bar rather than from the top
   of the page.

   The panel slides down from behind the bar over 400ms -- `data-duration`
   and `data-easing="ease"` on the navbar, which is Webflow's "default"
   animation. main.js sets `--nav-height` to the panel's own height so the
   closed position is exactly one panel above its open one. */
.nav-menu {
  transition: transform 400ms ease;
}

[data-nav-menu-open] {
  transform: translate3d(0, calc(var(--nav-height, 100%) * -1), 0);
}

[data-nav-menu-open].is-open {
  transform: translate3d(0, 0, 0);
}

/* `a-9` / `a-10` "Menu Opens / Closes": the two rules of the "+" rotate to
   +45 and -45 degrees and shift 3px down / 4.2px up, making a cross. 250ms,
   outQuad. */
.hamburger-line {
  transition: transform 250ms var(--ease-out-quad);
}

[data-nav="toggle"][aria-expanded="true"] .hamburger-line.horizontal {
  transform: translate3d(0, 3px, 0) rotate(45deg);
}

[data-nav="toggle"][aria-expanded="true"] .hamburger-line.vertical {
  transform: translate3d(0, -4.2px, 0) rotate(-45deg);
}

/* ================================================================ sliders
   Two "slide" sliders with `data-infinite="true"`, `data-duration="500"` and
   `data-easing="ease"`. Webflow moves EVERY slide by the same translation --
   measured on the published site, where four taps on the blog rail's arrow
   left all six at `translateX(-1920px)`, four times the 480px step -- and
   main.js does the same, writing `--slider-offset` on the slider.

   The transition goes on the SLIDE, which is the element being transformed.
   Putting it on the mask is a mistake this series has made before: the mask
   never moves, so nothing ever eases. */
.testimonial-slide,
.blogs-slide {
  transform: translate3d(var(--slider-offset, 0px), 0, 0);
  transition: transform 500ms ease;
}

/* While main.js re-orders the slides for a seamless wrap it sets this class
   for one frame, so the jump back is not animated. */
.is-jumping .testimonial-slide,
.is-jumping .blogs-slide {
  transition: none;
}

/* =============================================================== lightbox
   Webflow's own lightbox is a runtime-built overlay driven by a JSON payload
   inside every gallery link. main.js builds this one from
   `data-lightbox-src`; the markup below is created once, on first open. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  background: rgba(0, 48, 32, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms var(--ease-out-quad), visibility 250ms;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-image {
  max-width: 100%;
  max-height: calc(100vh - 6rem);
  object-fit: contain;
  border: 6px solid var(--_colors---text-color--light);
}

.lightbox-control {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--_sizes---border-radius--radius-circle);
  background: var(--_colors---text-color--light);
  color: var(--_colors---background-color--dark);
  cursor: pointer;
  transition: background-color 250ms var(--ease-out-quad),
    color 250ms var(--ease-out-quad);
}

.lightbox-control:hover {
  background: var(--_colors---text-color--primary);
  color: var(--_colors---text-color--light);
}

.lightbox-control svg {
  width: 1.25rem;
  height: 1.25rem;
}

.lightbox-prev {
  left: 1.5rem;
}

.lightbox-next {
  right: 1.5rem;
}

.lightbox-close {
  top: 1.5rem;
  right: 1.5rem;
}

.lightbox-count {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-family--rubik);
  font-weight: var(--font-weight--heavy);
  color: var(--_colors---text-color--light);
  text-transform: uppercase;
}@media screen and (max-width: 767px) {

  .lightbox {
    padding: 1.5rem;
  }

  .lightbox-prev {
    left: 0.5rem;
  }

  .lightbox-next {
    right: 0.5rem;
  }

  .lightbox-close {
    top: 0.5rem;
    right: 0.5rem;
  }}


/* The gallery thumbnails are <button>s now, so they take the framework
   reset in section 2b and then the design's own `.project-lightbox`. */
.project-lightbox {
  cursor: zoom-in;
  display: block;
}

/* ================================================================== forms
   The contact form and the 401 password box. Webflow POSTed both to its own
   endpoint and swapped in the success block itself; main.js shows the same
   two blocks in the page, and the password box always answers with the
   export's own "Incorrect password" line, which is the honest behaviour for
   a static file. */
.success-message[hidden],
.error-message[hidden] {
  display: none;
}

/* ================================================================= scrubs
   Five SCROLLING_IN_VIEW lists. main.js writes `--scrub` (0..1) on the
   section from the section's own progress through the viewport; every
   scrubbed element runs a PAUSED 1s animation seeked to that number, so the
   payload's keyframe percentages survive as literal CSS percentages. */
/* `a-25` "process-items scrolling animate", `main, medium` only: three
   stacked cards, offset 0 / 0.62 / 1.24rem and scaled 0.9 at rest, that
   grow to 1 and then fan out to -100rem and +100rem. Below 768px the cards
   are a plain column and the list does not run, so neither does the gate
   below -- and without it the cards would sit frozen at 10%. */
@media screen and (min-width: 768px) {
  @keyframes scrub-process-01 {
    0%,
    10% {
      transform: translate3d(0, 0, 0) scale(0.9);
    }
    40%,
    100% {
      transform: translate3d(-100rem, 0, 0) scale(1);
    }
  }

  @keyframes scrub-process-02 {
    0%,
    10% {
      transform: translate3d(0.62rem, 0.62rem, 0) scale(0.9);
    }
    40% {
      transform: translate3d(0.62rem, 0.62rem, 0) scale(1);
    }
    70%,
    100% {
      transform: translate3d(100rem, 0.62rem, 0) scale(1);
    }
  }

  @keyframes scrub-process-03 {
    0%,
    10% {
      transform: translate3d(1.24rem, 1.24rem, 0) scale(0.9);
    }
    40% {
      transform: translate3d(1.24rem, 1.24rem, 0) scale(1);
    }
    70%,
    100% {
      transform: translate3d(1.24rem, 1.24rem, 0) scale(1);
    }
  }

  [data-scrub="process"] .process_item._01 {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state: paused;
    animation-delay: calc(var(--scrub, 0) * -1s);
    animation-name: scrub-process-01;
  }

  [data-scrub="process"] .process_item._02 {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state: paused;
    animation-delay: calc(var(--scrub, 0) * -1s);
    animation-name: scrub-process-02;
  }

  [data-scrub="process"] .process_item._03 {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state: paused;
    animation-delay: calc(var(--scrub, 0) * -1s);
    animation-name: scrub-process-03;
  }

}@media screen and (min-width: 992px) {

  /* `a-39` "cta scrolling animate": the two hanging photographs travel in from
     -100rem / +100rem to -11rem / +10rem between 5% and 67% of the section's
     pass, keeping their -4.538 / 9.007 degree tilts throughout. */
  @keyframes scrub-cta-left {
    0%,
    5% {
      transform: translate3d(-100rem, -7.5rem, 0) rotate(-4.538deg);
    }
    67%,
    100% {
      transform: translate3d(-11rem, -7.5rem, 0) rotate(-4.538deg);
    }
  }  @keyframes scrub-cta-right {

    0%,
    5% {
      transform: translate3d(100rem, -12rem, 0) rotate(9.007deg);
    }
    67%,
    100% {
      transform: translate3d(10rem, -12rem, 0) rotate(9.007deg);
    }  }


  [data-scrub="cta"] .cta-image.left {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state: paused;
    animation-delay: calc(var(--scrub, 0) * -1s);
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state: paused;
    animation-delay: calc(var(--scrub, 0) * -1s);
    animation-name: scrub-cta-left;
  }

  [data-scrub="cta"] .cta-image.right {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state: paused;
    animation-delay: calc(var(--scrub, 0) * -1s);
    animation-name: scrub-cta-right;
  }}


/* `a-42` "functional counters scrolling animate", `main, medium` only: the
   three statistics take turns. Each has a 1.25rem rule beside it that grows
   from 8.75rem to the tall state while the other two sit at 3.75rem, the
   red fill inside it rises from 0% to 100%, and the matching counter block
   fades in. The changeovers are at 31% and 57%. */
@media screen and (min-width: 768px) {
  @keyframes scrub-counter-block-01 {
    0%,
    30% {
      width: 1.25rem;
      height: 8.75rem;
    }
    31%,
    100% {
      width: 1.25rem;
      height: 3.75rem;
    }
  }

  @keyframes scrub-counter-block-02 {
    0%,
    30% {
      width: 1.25rem;
      height: 3.75rem;
    }
    31%,
    56% {
      width: 1.25rem;
      height: 8.75rem;
    }
    57%,
    100% {
      width: 1.25rem;
      height: 3.75rem;
    }
  }

  @keyframes scrub-counter-block-03 {
    0%,
    56% {
      width: 1.25rem;
      height: 3.75rem;
    }
    57%,
    100% {
      width: 1.25rem;
      height: 8.75rem;
    }
  }

  @keyframes scrub-counter-line-01 {
    0%,
    5% {
      height: 0%;
    }
    30%,
    100% {
      height: 100%;
    }
  }

  @keyframes scrub-counter-line-02 {
    0%,
    31% {
      height: 0%;
    }
    56%,
    100% {
      height: 100%;
    }
  }

  @keyframes scrub-counter-line-03 {
    0%,
    56% {
      height: 0%;
    }
    75%,
    100% {
      height: 100%;
    }
  }

  @keyframes scrub-counter-fade-01 {
    0%,
    30% {
      opacity: 1;
    }
    31%,
    100% {
      opacity: 0;
    }
  }

  @keyframes scrub-counter-fade-02 {
    0%,
    30% {
      opacity: 0;
    }
    31%,
    56% {
      opacity: 1;
    }
    57%,
    100% {
      opacity: 0;
    }
  }

  @keyframes scrub-counter-fade-03 {
    0%,
    56% {
      opacity: 0;
    }
    57%,
    100% {
      opacity: 1;
    }
  }

  [data-scrub="counters"] .functional-line-block._01 {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state: paused;
    animation-delay: calc(var(--scrub, 0) * -1s);
    animation-name: scrub-counter-block-01;
  }

  [data-scrub="counters"] .functional-line-block._02 {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state: paused;
    animation-delay: calc(var(--scrub, 0) * -1s);
    animation-name: scrub-counter-block-02;
  }

  [data-scrub="counters"] .functional-line-block._03 {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state: paused;
    animation-delay: calc(var(--scrub, 0) * -1s);
    animation-name: scrub-counter-block-03;
  }

  [data-scrub="counters"] .functional-animate-line._01 {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state: paused;
    animation-delay: calc(var(--scrub, 0) * -1s);
    animation-name: scrub-counter-line-01;
  }

  [data-scrub="counters"] .functional-animate-line._02 {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state: paused;
    animation-delay: calc(var(--scrub, 0) * -1s);
    animation-name: scrub-counter-line-02;
  }

  [data-scrub="counters"] .functional-animate-line._03 {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state: paused;
    animation-delay: calc(var(--scrub, 0) * -1s);
    animation-name: scrub-counter-line-03;
  }

  [data-scrub="counters"] .functional-counter-block._01 {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state: paused;
    animation-delay: calc(var(--scrub, 0) * -1s);
    animation-name: scrub-counter-fade-01;
  }

  [data-scrub="counters"] .functional-counter-block._02 {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state: paused;
    animation-delay: calc(var(--scrub, 0) * -1s);
    animation-name: scrub-counter-fade-02;
  }

  [data-scrub="counters"] .functional-counter-block._03 {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state: paused;
    animation-delay: calc(var(--scrub, 0) * -1s);
    animation-name: scrub-counter-fade-03;
  }
}@media screen and (min-width: 992px) {

  /* `a-57` "about-images-scrolling animation": six framed photographs travel
     in from +/-70rem and +/-100rem to 0 between 0% and 64%, while the hero
     paragraph fades out at 26% and back in at 40%. */
  @keyframes scrub-about-in-left {
    0% {
      transform: translate3d(-70rem, 0, 0);
    }
    64%,
    100% {
      transform: translate3d(0, 0, 0);
    }
  }  @keyframes scrub-about-in-right {

    0% {
      transform: translate3d(70rem, 0, 0);
    }
    64%,
    100% {
      transform: translate3d(0, 0, 0);
    }  }
  @keyframes scrub-about-in-left-far {

    0% {
      transform: translate3d(-100rem, 0, 0);
    }
    64%,
    100% {
      transform: translate3d(0, 0, 0);
    }  }
  @keyframes scrub-about-in-right-far {

    0% {
      transform: translate3d(100rem, 0, 0);
    }
    64%,
    100% {
      transform: translate3d(0, 0, 0);
    }  }
  @keyframes scrub-about-desp {

    0%,
    26% {
      opacity: 0;
    }
    40%,
    100% {
      opacity: 1;
    }  }


  [data-scrub="about-images"] .about_image-block._01,
  [data-scrub="about-images"] .about_image-block._03 {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state: paused;
    animation-delay: calc(var(--scrub, 0) * -1s);
    animation-name: scrub-about-in-left;
  }

  [data-scrub="about-images"] .about_image-block._02,
  [data-scrub="about-images"] .about_image-block._04 {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state: paused;
    animation-delay: calc(var(--scrub, 0) * -1s);
    animation-name: scrub-about-in-right;
  }

  [data-scrub="about-images"] .about_image-block._05 {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state: paused;
    animation-delay: calc(var(--scrub, 0) * -1s);
    animation-name: scrub-about-in-left-far;
  }

  [data-scrub="about-images"] .about_image-block._06 {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state: paused;
    animation-delay: calc(var(--scrub, 0) * -1s);
    animation-name: scrub-about-in-right-far;
  }

  [data-scrub="about-images"] .about_hero-desp {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state: paused;
    animation-delay: calc(var(--scrub, 0) * -1s);
    animation-name: scrub-about-desp;
  }}
@media screen and (min-width: 992px) {

  /* `a-59` "service_hero-scrolling animation": three tilted cards slide in
     from -60rem / -120rem / +60rem to 0 by 46%, holding the design's own -15
     degree tilt the whole way. */
  @keyframes scrub-service-hero-01 {
    0% {
      transform: translate3d(-60rem, 0, 0) rotate(-15deg);
    }
    46%,
    100% {
      transform: translate3d(0, 0, 0) rotate(-15deg);
    }
  }  @keyframes scrub-service-hero-02 {

    0% {
      transform: translate3d(-120rem, 0, 0) rotate(-15deg);
    }
    46%,
    100% {
      transform: translate3d(0, 0, 0) rotate(-15deg);
    }  }
  @keyframes scrub-service-hero-03 {

    0% {
      transform: translate3d(60rem, 0, 0) rotate(-15deg);
    }
    46%,
    100% {
      transform: translate3d(0, 0, 0) rotate(-15deg);
    }  }


  [data-scrub="service-hero"] .service_hero-card._01 {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state: paused;
    animation-delay: calc(var(--scrub, 0) * -1s);
    animation-name: scrub-service-hero-01;
  }

  [data-scrub="service-hero"] .service_hero-card._02 {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state: paused;
    animation-delay: calc(var(--scrub, 0) * -1s);
    animation-name: scrub-service-hero-02;
  }

  [data-scrub="service-hero"] .service_hero-card._03 {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-play-state: paused;
    animation-delay: calc(var(--scrub, 0) * -1s);
    animation-name: scrub-service-hero-03;
  }}


/* =================================================================== IX3
   Two GSAP interactions, both re-authored without GSAP.

   `i-bda4aa1b` (home page): `.about-title` is split into WORDS and each one
   scrubs from `rgba(0, 48, 32, 0.4)` to `#003020` as the heading passes the
   viewport, with a 0.05s stagger and ScrollTrigger's own `start: top 60%`,
   `end: 60% top`, `scrub: 0.8`. main.js does the split (walking TEXT NODES,
   not innerHTML) and writes `--scrub`; the stagger is a per-word delay
   expressed as a share of the same 1s animation.

   `i-aca43c51` (about page): `.about_image-block` fades in from opacity 0 on
   LOAD, 1s, 0.1s stagger, ease 9 (`power2.out` in GSAP's table). That is a
   load animation and not a scroll one, so it is a transition main.js starts
   on the next frame.

   The export's own pre-hide <style> blocks --
   `html.w-mod-js:not(.w-mod-ix3) :is(.about-title) { visibility: hidden }` --
   are dropped with the rest of the head; the rest states below replace them
   and are gated on `.js` the same way. */
:where(.js) .about-title .split-word {
  color: rgba(0, 48, 32, 0.4);
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-play-state: paused;
  animation-name: scrub-split-word;
  animation-delay: calc(
    (var(--scrub, 0) - var(--split-delay, 0)) * -1s
  );
}@keyframes scrub-split-word {

  from {
    color: rgba(0, 48, 32, 0.4);
  }
  to {
    color: #003020;
  }}


:where(.js) .about_image-block {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1)
    var(--enter-delay, 0ms);
}

:where(.js) .about_image-block.is-shown {
  opacity: 1;
}

/* ================================================================ ribbons
   The four running headlines on a curved path. The export animated the
   `startOffset` attribute with GSAP over 60 seconds; SMIL and CSS cannot
   animate that attribute, so the whole `<text>` is translated instead by one
   repeat of its own phrase, which main.js measures and writes into
   `--wave-shift`. Same distance, same period, no library. */
[data-wave] {
  animation: wave-run 60s linear infinite;
}@keyframes wave-run {

  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--wave-shift, -1200px));
  }}


/* ================================================================== arrow
   The hand-drawn arrow on the projects and blog heroes. The export measured
   both paths with `getTotalLength()` and drew them in over two seconds when
   the SVG scrolled into view; main.js writes the measured length into
   `--draw-length` and the CSS does the rest.

   `power2.inOut` is GSAP's; its curve is cubic-bezier(0.645, 0.045, 0.355,
   1). */
[data-draw] .arrow-path {
  stroke-dasharray: var(--draw-length, 0);
  stroke-dashoffset: var(--draw-length, 0);
}

/* THE TRANSITION IS SWITCHED ON ONLY AFTER THE LENGTH IS MEASURED. Both
   properties fall back to 0 -- a fully drawn arrow -- until main.js writes
   `--draw-length`, so a transition that is already live plays that first
   jump BACKWARDS: the arrow un-draws itself over two seconds on load and
   then draws back in on scroll. main.js commits the measured offset and
   then adds `.is-measured`. */
[data-draw].is-measured .arrow-path {
  transition: stroke-dashoffset 2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

[data-draw].is-drawn .arrow-path {
  stroke-dashoffset: 0;
}

/* =============================================================== cookies
   `a-78` ("cookies-button[click in]"): the banner's only button hides the
   `.cookies` parent. main.js remembers the choice in `localStorage` so it
   stays hidden, which the runtime never did. */
.cookies[hidden] {
  display: none;
}

/* ================================================== no JavaScript at all
   Every rest state this file writes is gated on `html.js`, which the one
   line at the top of each <head> adds -- so a visitor with scripting off
   never meets an `opacity: 0` nothing will ever clear. Two families cannot
   be gated that way and are undone here instead, because both are written
   as the ABSENCE of something rather than as a class:

     * a scrub is a PAUSED animation seeked by `--scrub`, and with no script
       to write that property it rests at its 0% keyframe -- the CTA
       photographs a hundred rems off the page, the about images and the
       service hero cards likewise. Turning the animation off rests them
       where the design sheet puts them, which is where the export rests
       them with its own runtime disabled.
     * the FAQ answers collapse to a zero grid row, and the button that
       opens them needs a script. Left alone, a reader with scripting off
       gets ten questions and no answers; the export, whose runtime writes
       that collapse at load, shows them all open.

   `html:not(.js)` scores (0,1,1) and each rule below adds one more class or
   attribute, so every one of them outranks the state it is undoing. */
html:not(.js) [data-scrub] * {
  animation-name: none;
}

html:not(.js) .faq-answer {
  grid-template-rows: 1fr;
}

html:not(.js) .faq-para {
  transform: none;
}

/* ======================================================= reduced motion
   Everything above is decoration. A visitor who has asked for less of it
   gets the finished state immediately: no marquees, no spins, no scrubs,
   and reveals that simply are. */
@media (prefers-reduced-motion: reduce) {
  :where(.js) .reveal,
  :where(.js) .home-hero_icon.one,
  :where(.js) .home-hero_icon._02,
  :where(.js) .home-hero_card._01,
  :where(.js) .home-hero_card._02,
  :where(.js) .director-dot,
  :where(.js) .about_image-block {
    opacity: 1;
  }

  :where(.js) .director-icon {
    transform: scale(1);
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}