/* VISONARIA - 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  Visonaria design
   4  components -- vanilla replacements for the Webflow runtime and
      for its IX2 and IX3 interactions

   Fonts: assets/fonts/fonts.css -- Poppins and Archivo Expanded,
   both self-hosted woff2, both SIL Open Font License 1.1. The
   export's display face was PP Monument Extended Black, a
   commercial Pangram Pangram typeface that may not be redistributed
   with a template that is sold; Archivo Expanded stands in for it,
   and the substitution is made once, in the `--primary-font`
   variable at the top of section 3. */

/* ======================================================================
   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, .wf-select {
  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, .wf-select::placeholder {
  color: #999;
}
.wf-input:focus, .wf-select:focus {
  border-color: #3898EC;
  outline: 0;
}
.wf-input[disabled], .wf-select[disabled], .wf-input[readonly], .wf-select[readonly], fieldset[disabled] .wf-input, fieldset[disabled] .wf-select {
  cursor: not-allowed;
}.wf-input[readonly], .wf-select[readonly] {
  background-color: #eeeeee;
}

textarea.wf-input, textarea.wf-select {
  height: auto;
}
.wf-select {
  background-color: #f3f3f3;
}
.wf-select[multiple] {
  height: auto;
}
.wf-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
}
.wf-container:before, .wf-container:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.wf-container:after {
  clear: both;
}@media screen and (max-width: 991px) {

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

  .wf-container {
    max-width: none;
  }}

.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.wf-richtext-figure-type-image, .richtext figure[data-rt-type="image"] {
  display: table;
}
.richtext figure.wf-richtext-figure-type-image > div, .richtext figure[data-rt-type="image"] > div {
  display: inline-block;
}
.richtext figure.wf-richtext-figure-type-image > figcaption, .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%;
}

.richtext figure.wf-richtext-align-fullwidth {
  width: 100%;
  max-width: 100%;
  text-align: center;
  clear: both;
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.richtext figure.wf-richtext-align-fullwidth > div {
  display: inline-block;
  
  padding-bottom: inherit;
}
.richtext figure.wf-richtext-align-fullwidth > figcaption {
  display: block;
}
.tabset-pane.is-active {
  display: block;
}@keyframes spin {

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


/* ======================================================================
   2b. Framework geometry (hand-written)
   ======================================================================

   build_css drops the rules in Webflow's base sheet that existed only so its
   runtime could drive them -- the navbar's collapse behaviour, its overlay,
   and the slider widget. Several of those rules were also carrying real
   GEOMETRY that the design sheet never restates, because it never had to.
   This file puts that geometry back, keyed on this design's own class names.

   It is emitted BETWEEN the framework and the design sheet, which is the
   whole point: every rule here can still be overridden by the design exactly
   as the rule it replaces was. Where the original beat the design on
   SPECIFICITY rather than on order -- `.w-nav[data-collapse='medium']
   .w-nav-menu` scores (0,3,0) against a bare `.nav-menu` -- the replacement
   has to score above the design too, so it is written as a descendant of
   `.navbar` and the reason is noted on the rule.

   Everything here was read off `probe_widget_css.py` (what the design says
   about each element that wore a dropped class) and checked against the
   published site in a browser. `audit_dropped.py` re-derives the difference
   on every build and fails if a NEW property goes missing.
   ---------------------------------------------------------------------- */


/* ---- navbar ----------------------------------------------------------
   `.w-nav` was `position: relative; z-index: 1000; background: #dddddd`.
   The design sets the background (transparent) and the padding; the
   positioning it does not, and both halves matter -- `position: relative` is
   what the open mobile menu resolves its `top: 100%` against, and the
   z-index is what keeps the navbar over the hero photograph.

   Its `:before` / `:after` clearfix pair is deliberately NOT reproduced.
   They exist to contain the floats the widget used for its brand and menu;
   `.nav-inner` here is `display: flex`, so nothing floats and a pair of
   `display: table` pseudo-elements would only add height. (On an earlier
   conversion they were transcribed onto a FLEX container and became flex
   items with real height of their own.) */
.navbar {
  position: relative;
  z-index: 1000;
}

/* `.w-nav-brand` was `position: relative; float: left; text-decoration: none;
   color: #333`. The design gives it `display: flex` and its size, and
   `.nav-inner` is a flex container so the float never applied; what is left
   is the stacking context and the underline reset. */
.brand-logo-link {
  position: relative;
  text-decoration: none;
}

/* `.w-nav-menu` was `position: relative; float: right` -- again a float
   inside a flex row. `position: relative` stays because the design's
   `border-radius` + `backdrop-filter` pill needs its own stacking context to
   sit above the hero. */
.nav-menu {
  position: relative;
}

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

   The design restates the colour and the padding. `display: inline-block` is
   moot -- every one of these links is a flex item of `.nav-link-wrap`, which
   blockifies it -- but it is transcribed anyway so a link lifted out of that
   wrapper still behaves, and because `text-decoration: none` has to come
   from somewhere: without it every navigation link ships underlined. */
.nav-link {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-align: left;
  text-decoration: none;
}

/* The hamburger. `.w-nav-button` was `float: right; padding: 18px;
   font-size: 24px; display: none; cursor: pointer`, and
   `.w-nav[data-collapse='medium'] .w-nav-button { display: block }` turned it
   on at 991px. The padding and font-size never render -- the button is hidden
   above 991px and the design zeroes its padding below -- but the two DISPLAY
   rules are the entire desktop/mobile switch and have to be exact.

   `<button>` also arrives with the UA's own form-control styling, which the
   `<div>` this used to be did not have: background, border, and a font that
   does not inherit. All three are reset here rather than in the design sheet,
   because the retag is this build's doing and not the design's. */
.menu-button {
  position: relative;
  display: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* ---- the 991px collapse ----------------------------------------------
   Written as descendants of `.navbar` on purpose. The rules being replaced
   were `.w-nav[data-collapse='medium'] .w-nav-menu/.w-nav-button`, scoring
   (0,3,0); the design's own `.nav-menu { display: flex }` scores (0,1,0) and
   lives in a LATER sheet. A bare `.nav-menu { display: none }` here would
   lose to it and every page would ship its desktop menu at 375px. */
@media screen and (max-width: 991px) {
  .navbar .nav-menu {
    display: none;
  }

  .navbar .menu-button {
    display: block;
  }

  /* The open panel. Webflow moved the menu into a generated
     `.w-nav-overlay` and styled it through `[data-nav-menu-open]`:
     `display: block !important; position: absolute; top: 100%; left: 0;
     right: 0; overflow: visible; min-width: 200px`, plus a grey background
     the design overrides.

     `display: BLOCK` is not a typo and not a shortcut. The design asks for
     `flex` with `align-items: center`, but the runtime's `!important` won on
     the published site, so the single child `.nav-link-wrap` is a block that
     fills the panel's 329px rather than a flex item shrink-wrapped to its
     widest link. Reproducing the design's intent instead would narrow the
     panel's contents on every page below 992px. The centring the design was
     after is there anyway: `.nav-link-wrap` is itself a column flex with
     `align-items: center`.

     No overlay element is reproduced. The runtime's had `overflow: hidden`
     and an inline height of the whole document, so it never clipped
     anything; the panel is positioned against `.navbar` directly. */
  .navbar .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 200px;
    overflow: visible;
  }

  .navbar.is-open .nav-menu {
    display: block;
  }
}


/* ---- slider ----------------------------------------------------------
   The team carousel on the about page. Its whole widget layer is dropped and
   re-authored in components.hand.css + main.js; what follows is only the
   geometry the design does not restate.

   NOTE: the section this lives in carries the design's own `.hide`
   (`display: none`) in the export, so none of it renders as shipped. It is
   transcribed in full regardless -- the markup, the content and five real
   photographs are all there, and a buyer who deletes one class should get a
   working carousel rather than a broken one. */

/* `.w-slider` was `position: relative; height: 300px; text-align: center;
   background: #dddddd; clear: both`. The design overrides the height and the
   background. `position: relative` is what the two arrows are absolutely
   positioned against. */
.slider {
  position: relative;
}

/* `.w-slider-mask` had no design class at all, so every one of its
   properties is transcribed. `white-space: nowrap` + the slides'
   `inline-block` is how Webflow laid a track out; that is kept rather than
   swapped for flex, so the design's own measurements still hold. */
.slider-mask {
  position: relative;
  display: block;
  z-index: 1;
  left: 0;
  right: 0;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
}

/* `.w-slide` -- likewise no design rules of its own. */
.team-slide {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height: 100%;
  white-space: normal;
  text-align: left;
}

/* `.w-slider-arrow-left` / `-right` were `position: absolute; width: 80px;
   top: 0; right: 0; bottom: 0; left: 0; margin: auto; cursor: pointer;
   overflow: hidden; color: white; font-size: 40px`, then `z-index: 3;
   right: auto` and `z-index: 4; left: auto` to pin one to each edge. The
   design supplies only `aspect-ratio: 1; width: 30px`, so without the
   absolute positioning both arrows would sit in flow under the slides.

   Retagged to `<button>` here, so the same UA form reset the hamburger
   needs applies. */
.team-slide-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 0;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

.team-slide-arrow.is-prev {
  left: 0;
  right: auto;
  z-index: 3;
}

.team-slide-arrow.is-next {
  right: 0;
  left: auto;
  z-index: 4;
}

/* ======================================================================
   3. Visonaria design
   ====================================================================== */
:root {
  --color--aureolin: #ffe900;
  --_typography---font-family--secondary-font: Poppins, sans-serif;
  --color--grey: #636363;
  --_typography---text-default--font-size: 16px;
  --_typography---text-medium--line-height: 1.2em;
  --_typography---font-weight--semi-bold: 600;
  --_typography---text-default--letter-spacing: var(--_typography---letter-spacing--medium);
  --_typography---font-family--primary-font: "Archivo Expanded", "Arial Black", Arial, sans-serif;
  --_typography---h1--font-size: 67px;
  --_typography---h1--line-height: 1.12em;
  --_typography---h1--font-weight: var(--_typography---font-weight--black);
  --_typography---h1--letter-spacing: var(--_typography---letter-spacing--xx-large);
  --_responsive---element-spacing--spacing-zero: 0px;
  --_typography---h2--font-size: 60px;
  --_typography---h2--line-height: .92em;
  --_typography---h2--font-weight: var(--_typography---font-weight--black);
  --_typography---h2--letter-spacing: var(--_typography---letter-spacing--x-large);
  --_typography---h3--font-size: 40px;
  --_typography---h3--line-height: 1.12em;
  --_typography---h3--font-weight: var(--_typography---font-weight--black);
  --_typography---h3--letter-spacing: var(--_typography---letter-spacing--xx-large);
  --_typography---h4--font-size: 25px;
  --_typography---h4--line-height: 1.2em;
  --_typography---h4--font-weight: var(--_typography---font-weight--black);
  --_typography---h4--letter-spacing: var(--_typography---letter-spacing--xx-large);
  --_typography---h5--font-size: 20px;
  --_typography---h5--line-height: 1.5em;
  --_typography---h5--font-weight: var(--_typography---font-weight--black);
  --_typography---h5--letter-spacing: var(--_typography---letter-spacing--medium);
  --_typography---h6--font-size: 20px;
  --_typography---h6--line-height: 1.2em;
  --_typography---h6--font-weight: var(--_typography---font-weight--bold);
  --_typography---h6--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---text-medium--letter-spacing: var(--_typography---letter-spacing--medium);
  --full-size: 100%;
  --color--warm: #fff5de;
  --_typography---text-medium--font-size: 20px;
  --_typography---font-weight--medium: 500;
  --_typography---text-default--line-height: 1.4em;
  --_typography---font-weight--regular: 400;
  --color--dark: #2b2b2b;
  --_typography---text-small--font-size: 14px;
  --_typography---text-small--line-height: 1.4em;
  --_responsive---padding--padding-124-px\<deleted\|variable-782a0208-0c4c-12ec-f120-df745dc3e1c9\>: 124px;
  --_responsive---element-spacing--spacing-massive: 80px;
  --_responsive---element-spacing--spacing-xlarge: 40px;
  --_responsive---element-spacing--spacing-normal: 32px;
  --_responsive---element-spacing--spacing-slim: 20px;
  --_responsive---border-radius--radius-large: 20px;
  --color--white: white;
  --color--smooth-blue: #078ad2;
  --color--medium-green: #3a9059;
  --color--violet-punk: #9e6efe;
  --color--green-light: #74de41;
  --_responsive---element-spacing--spacing-xxxlarge: 48px;
  --_responsive---34-px\<deleted\|variable-7e30a8d3-7687-4a52-d404-74d261b5dc62\>: 34px;
  --_responsive---element-spacing--spacing-medium: 24px;
  --_responsive---element-spacing--spacing-regular: 30px;
  --_responsive---element-spacing--spacing-xsmall: 12px;
  --_responsive---14-px\<deleted\|variable-6e27546b-22fd-9515-9505-a788ebe0bc82\>: 14px;
  --_responsive---margin--margin-60-px\<deleted\|variable-81f6ae22-b512-06c2-5961-4d195e4def69\>: 60px;
  --_responsive---10-px\<deleted\|variable-7cc3a4c8-b72f-1d6a-a3c6-33f67efa54a1\>: 10px;
  --_responsive---element-spacing--spacing-big: 52px;
  --_typography---text-large--font-size: 24px;
  --_typography---text-large--line-height: 1.33em;
  --_typography---text-large--font-weight: var(--_typography---font-weight--semi-bold);
  --_typography---text-large--letter-spacing: var(--_typography---letter-spacing--xx-large);
  --color--transparent: #0000;
  --_responsive---section-padding--banner-padding: 140px;
  --_responsive---section-padding--medium: 80px;
  --color--black: #000;
  --_typography---display-02--font-size: 120px;
  --_typography---display-02--line-height: 1.2em;
  --_typography---display-02--font-weight: var(--_typography---font-weight--bold);
  --_typography---display-02--letter-spacing: var(--_typography---letter-spacing--small);
  --_responsive---section-padding--large: 120px;
  --_responsive---border-radius--radius-round: 50%;
  --_responsive---border-radius--radius-xxlarge: 30px;
  --_responsive---border-radius--radius-xxxlarge: 40px;
  --color--warm-lite: #fdf3eb;
  --color--matte-dark-green: #265b39;
  --_typography---display-01--font-size: 200px;
  --_typography---display-01--line-height: 1.2em;
  --_typography---display-01--font-weight: var(--_typography---font-weight--bold);
  --_typography---display-01--letter-spacing: var(--_typography---letter-spacing--small);
  --_typography---hero-text: 13.844vw;
  --_responsive---border-radius--radius-jumbo: 50px;
  --_typography---text-medium--font-weight: var(--_typography---font-weight--medium);
  --_responsive---border-radius--radius-regular: 16px;
  --_responsive---border-radius--radius-xlarge: 24px;
  --_responsive---section-padding--xlarge: 140px;
  --color--violet-dark: #7c42f1;
  --_responsive---border-radius--radius-xsmall: 8px;
  --_responsive---border-radius--radius-small: 10px;
  --_responsive---section-padding--default: 60px;
  --_responsive---element-spacing--spacing-tiny: 4px;
  --_responsive---element-spacing--spacing-xxsmall: 8px;
  --_responsive---element-spacing--spacing-small: 16px;
  --_responsive---element-spacing--spacing-medium-rare: 28px;
  --_responsive---element-spacing--spacing-large: 36px;
  --_responsive---element-spacing--spacing-xxlarge: 44px;
  --_responsive---element-spacing--spacing-xbig: 56px;
  --_responsive---element-spacing--spacing-xxbig: 60px;
  --_responsive---element-spacing--spacing-xxxbig: 64px;
  --_responsive---element-spacing--spacing-jumbo: 68px;
  --_responsive---element-spacing--spacing-xjumbo: 72px;
  --_responsive---element-spacing--spacing-xxjumbo: 76px;
  --_responsive---element-spacing--spacing-giant: 90px;
  --_responsive---element-spacing--spacing-immense: 100px;
  --_responsive---element-spacing--spacing-colossal: 120px;
  --_responsive---border-radius--radius-tiny: 4px;
  --_responsive---border-radius--radius-xxsmall: 6px;
  --_responsive---border-radius--radius-medium: 12px;
  --_responsive---border-radius--radius-circle: 100%;
  --_typography---text-default--font-weight: var(--_typography---font-weight--medium);
  --_typography---text-small--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---text-small--font-weight: var(--_typography---font-weight--medium);
  --_typography---tag--font-size: 16px;
  --_typography---tag--line-height: 1.2em;
  --_typography---tag--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---tag--font-weight: var(--_typography---font-weight--medium);
  --_typography---button-text--font-size: 16px;
  --_typography---button-text--line-height: 1.2em;
  --_typography---button-text--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---button-text--font-weight: var(--_typography---font-weight--medium);
  --_typography---font-weight--light: 300;
  --_typography---font-weight--bold: 700;
  --_typography---font-weight--extra-bold: 800;
  --_typography---font-weight--black: 900;
  --_typography---letter-spacing--none: 0em;
  --_typography---letter-spacing--tiny: .01em;
  --_typography---letter-spacing--small: -.01em;
  --_typography---letter-spacing--default: -.02em;
  --_typography---letter-spacing--medium: -.03em;
  --_typography---letter-spacing--large: -.04em;
  --_typography---letter-spacing--x-large: -.05em;
  --_typography---letter-spacing--xx-large: -.06em;
}
.wf-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}@media screen and (max-width: 991px) {

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

  .wf-layout-blockcontainer {
    max-width: none;
  }}

body {
  background-color: var(--color--aureolin);
  font-family: var(--_typography---font-family--secondary-font);
  color: var(--color--grey);
  font-size: var(--_typography---text-default--font-size);
  line-height: var(--_typography---text-medium--line-height);
  font-weight: var(--_typography---font-weight--semi-bold);
  letter-spacing: var(--_typography---text-default--letter-spacing);
  --_responsive---element-spacing--spacing-zero: 0px;
  --_responsive---padding--padding-124-px\<deleted\|variable-782a0208-0c4c-12ec-f120-df745dc3e1c9\>: 124px;
  --_responsive---element-spacing--spacing-massive: 80px;
  --_responsive---element-spacing--spacing-xlarge: 40px;
  --_responsive---element-spacing--spacing-normal: 32px;
  --_responsive---element-spacing--spacing-slim: 20px;
  --_responsive---border-radius--radius-large: 20px;
  --_responsive---element-spacing--spacing-xxxlarge: 48px;
  --_responsive---34-px\<deleted\|variable-7e30a8d3-7687-4a52-d404-74d261b5dc62\>: 34px;
  --_responsive---element-spacing--spacing-medium: 24px;
  --_responsive---element-spacing--spacing-regular: 30px;
  --_responsive---element-spacing--spacing-xsmall: 12px;
  --_responsive---14-px\<deleted\|variable-6e27546b-22fd-9515-9505-a788ebe0bc82\>: 14px;
  --_responsive---margin--margin-60-px\<deleted\|variable-81f6ae22-b512-06c2-5961-4d195e4def69\>: 60px;
  --_responsive---10-px\<deleted\|variable-7cc3a4c8-b72f-1d6a-a3c6-33f67efa54a1\>: 10px;
  --_responsive---element-spacing--spacing-big: 52px;
  --_responsive---section-padding--banner-padding: 140px;
  --_responsive---section-padding--medium: 80px;
  --_responsive---section-padding--large: 120px;
  --_responsive---border-radius--radius-round: 50%;
  --_responsive---border-radius--radius-xxlarge: 30px;
  --_responsive---border-radius--radius-xxxlarge: 40px;
  --_responsive---border-radius--radius-jumbo: 50px;
  --_responsive---border-radius--radius-regular: 16px;
  --_responsive---border-radius--radius-xlarge: 24px;
  --_responsive---section-padding--xlarge: 140px;
  --_responsive---border-radius--radius-xsmall: 8px;
  --_responsive---border-radius--radius-small: 10px;
  --_responsive---section-padding--default: 60px;
  --_responsive---element-spacing--spacing-tiny: 4px;
  --_responsive---element-spacing--spacing-xxsmall: 8px;
  --_responsive---element-spacing--spacing-small: 16px;
  --_responsive---element-spacing--spacing-medium-rare: 28px;
  --_responsive---element-spacing--spacing-large: 36px;
  --_responsive---element-spacing--spacing-xxlarge: 44px;
  --_responsive---element-spacing--spacing-xbig: 56px;
  --_responsive---element-spacing--spacing-xxbig: 60px;
  --_responsive---element-spacing--spacing-xxxbig: 64px;
  --_responsive---element-spacing--spacing-jumbo: 68px;
  --_responsive---element-spacing--spacing-xjumbo: 72px;
  --_responsive---element-spacing--spacing-xxjumbo: 76px;
  --_responsive---element-spacing--spacing-giant: 90px;
  --_responsive---element-spacing--spacing-immense: 100px;
  --_responsive---element-spacing--spacing-colossal: 120px;
  --_responsive---border-radius--radius-tiny: 4px;
  --_responsive---border-radius--radius-xxsmall: 6px;
  --_responsive---border-radius--radius-medium: 12px;
  --_responsive---border-radius--radius-circle: 100%;
  --color--aureolin: #ffe900;
  --color--grey: #636363;
  --full-size: 100%;
  --color--warm: #fff5de;
  --color--dark: #2b2b2b;
  --color--white: white;
  --color--smooth-blue: #078ad2;
  --color--medium-green: #3a9059;
  --color--violet-punk: #9e6efe;
  --color--green-light: #74de41;
  --color--transparent: #0000;
  --color--black: #000;
  --color--warm-lite: #fdf3eb;
  --color--matte-dark-green: #265b39;
  --color--violet-dark: #7c42f1;
  --_typography---font-family--secondary-font: Poppins, sans-serif;
  --_typography---text-default--font-size: 16px;
  --_typography---text-medium--line-height: 1.2em;
  --_typography---font-weight--semi-bold: 600;
  --_typography---text-default--letter-spacing: var(--_typography---letter-spacing--medium);
  --_typography---font-family--primary-font: "Archivo Expanded", "Arial Black", Arial, sans-serif;
  --_typography---h1--font-size: 67px;
  --_typography---h1--line-height: 1.12em;
  --_typography---h1--font-weight: var(--_typography---font-weight--black);
  --_typography---h1--letter-spacing: var(--_typography---letter-spacing--xx-large);
  --_typography---h2--font-size: 60px;
  --_typography---h2--line-height: .92em;
  --_typography---h2--font-weight: var(--_typography---font-weight--black);
  --_typography---h2--letter-spacing: var(--_typography---letter-spacing--x-large);
  --_typography---h3--font-size: 40px;
  --_typography---h3--line-height: 1.12em;
  --_typography---h3--font-weight: var(--_typography---font-weight--black);
  --_typography---h3--letter-spacing: var(--_typography---letter-spacing--xx-large);
  --_typography---h4--font-size: 25px;
  --_typography---h4--line-height: 1.2em;
  --_typography---h4--font-weight: var(--_typography---font-weight--black);
  --_typography---h4--letter-spacing: var(--_typography---letter-spacing--xx-large);
  --_typography---h5--font-size: 20px;
  --_typography---h5--line-height: 1.5em;
  --_typography---h5--font-weight: var(--_typography---font-weight--black);
  --_typography---h5--letter-spacing: var(--_typography---letter-spacing--medium);
  --_typography---h6--font-size: 20px;
  --_typography---h6--line-height: 1.2em;
  --_typography---h6--font-weight: var(--_typography---font-weight--bold);
  --_typography---h6--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---text-medium--letter-spacing: var(--_typography---letter-spacing--medium);
  --_typography---text-medium--font-size: 20px;
  --_typography---font-weight--medium: 500;
  --_typography---text-default--line-height: 1.4em;
  --_typography---font-weight--regular: 400;
  --_typography---text-small--font-size: 14px;
  --_typography---text-small--line-height: 1.4em;
  --_typography---text-large--font-size: 24px;
  --_typography---text-large--line-height: 1.33em;
  --_typography---text-large--font-weight: var(--_typography---font-weight--semi-bold);
  --_typography---text-large--letter-spacing: var(--_typography---letter-spacing--xx-large);
  --_typography---display-02--font-size: 120px;
  --_typography---display-02--line-height: 1.2em;
  --_typography---display-02--font-weight: var(--_typography---font-weight--bold);
  --_typography---display-02--letter-spacing: var(--_typography---letter-spacing--small);
  --_typography---display-01--font-size: 200px;
  --_typography---display-01--line-height: 1.2em;
  --_typography---display-01--font-weight: var(--_typography---font-weight--bold);
  --_typography---display-01--letter-spacing: var(--_typography---letter-spacing--small);
  --_typography---hero-text: 13.844vw;
  --_typography---text-medium--font-weight: var(--_typography---font-weight--medium);
  --_typography---text-default--font-weight: var(--_typography---font-weight--medium);
  --_typography---text-small--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---text-small--font-weight: var(--_typography---font-weight--medium);
  --_typography---tag--font-size: 16px;
  --_typography---tag--line-height: 1.2em;
  --_typography---tag--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---tag--font-weight: var(--_typography---font-weight--medium);
  --_typography---button-text--font-size: 16px;
  --_typography---button-text--line-height: 1.2em;
  --_typography---button-text--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---button-text--font-weight: var(--_typography---font-weight--medium);
  --_typography---font-weight--light: 300;
  --_typography---font-weight--bold: 700;
  --_typography---font-weight--extra-bold: 800;
  --_typography---font-weight--black: 900;
  --_typography---letter-spacing--none: 0em;
  --_typography---letter-spacing--tiny: .01em;
  --_typography---letter-spacing--small: -.01em;
  --_typography---letter-spacing--default: -.02em;
  --_typography---letter-spacing--medium: -.03em;
  --_typography---letter-spacing--large: -.04em;
  --_typography---letter-spacing--x-large: -.05em;
  --_typography---letter-spacing--xx-large: -.06em;
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  font-family: var(--_typography---font-family--primary-font);
  font-size: var(--_typography---h1--font-size);
  line-height: var(--_typography---h1--line-height);
  font-weight: var(--_typography---h1--font-weight);
  letter-spacing: var(--_typography---h1--letter-spacing);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
}
h2:where(:not([class*="heading-scale-"])), :where(.heading-scale-2) {
  margin-top: var(--_responsive---element-spacing--spacing-zero);
  margin-bottom: var(--_responsive---element-spacing--spacing-zero);
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h2--font-size);
  line-height: var(--_typography---h2--line-height);
  font-weight: var(--_typography---h2--font-weight);
  letter-spacing: var(--_typography---h2--letter-spacing);
  text-transform: uppercase;
}
h3:where(:not([class*="heading-scale-"])), :where(.heading-scale-3) {
  margin-top: var(--_responsive---element-spacing--spacing-zero);
  margin-bottom: var(--_responsive---element-spacing--spacing-zero);
  font-family: var(--_typography---font-family--primary-font);
  font-size: var(--_typography---h3--font-size);
  line-height: var(--_typography---h3--line-height);
  font-weight: var(--_typography---h3--font-weight);
  letter-spacing: var(--_typography---h3--letter-spacing);
  text-transform: uppercase;
}
h4:where(:not([class*="heading-scale-"])), :where(.heading-scale-4) {
  margin-top: var(--_responsive---element-spacing--spacing-zero);
  margin-bottom: var(--_responsive---element-spacing--spacing-zero);
  font-family: var(--_typography---font-family--primary-font);
  font-size: var(--_typography---h4--font-size);
  line-height: var(--_typography---h4--line-height);
  font-weight: var(--_typography---h4--font-weight);
  letter-spacing: var(--_typography---h4--letter-spacing);
  text-transform: uppercase;
}
h5:where(:not([class*="heading-scale-"])), :where(.heading-scale-5) {
  margin-top: var(--_responsive---element-spacing--spacing-zero);
  margin-bottom: var(--_responsive---element-spacing--spacing-zero);
  font-family: var(--_typography---font-family--primary-font);
  font-size: var(--_typography---h5--font-size);
  line-height: var(--_typography---h5--line-height);
  font-weight: var(--_typography---h5--font-weight);
  letter-spacing: var(--_typography---h5--letter-spacing);
  text-transform: uppercase;
}
h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-6) {
  margin-top: var(--_responsive---element-spacing--spacing-zero);
  margin-bottom: var(--_responsive---element-spacing--spacing-zero);
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h6--font-size);
  line-height: var(--_typography---h6--line-height);
  font-weight: var(--_typography---h6--font-weight);
  letter-spacing: var(--_typography---h6--letter-spacing);
  text-transform: uppercase;
}
p {
  margin-top: var(--_responsive---element-spacing--spacing-zero);
  margin-bottom: var(--_responsive---element-spacing--spacing-zero);
  line-height: var(--_typography---text-medium--line-height);
  letter-spacing: var(--_typography---text-medium--letter-spacing);
}
img {
  width: var(--full-size);
  height: var(--full-size);
  object-fit: cover;
  display: inline-block;
}
.utility-page-wrap {
  background-color: var(--color--warm);
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}
.utility-page-content {
  width: var(--full-size);
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
}
.utility-page-form {
  width: var(--full-size);
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
}
.page-wrapper {
  position: relative;
}
.container {
  width: var(--full-size);
  max-width: 1380px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.container.is-work-main {
  max-width: 1420px;
}
.container.is-cta {
  height: 100%;
}
.heading-02 {
  margin-top: var(--_responsive---element-spacing--spacing-zero);
  margin-bottom: var(--_responsive---element-spacing--spacing-zero);
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h2--font-size);
  line-height: var(--_typography---h2--line-height);
  font-weight: var(--_typography---h2--font-weight);
  letter-spacing: var(--_typography---h2--letter-spacing);
  text-transform: uppercase;
}
.heading-03 {
  font-family: var(--_typography---font-family--primary-font);
  font-size: var(--_typography---h3--font-size);
  line-height: var(--_typography---h3--line-height);
  font-weight: var(--_typography---h3--font-weight);
  letter-spacing: var(--_typography---h3--letter-spacing);
  text-transform: uppercase;
}
.heading-04 {
  font-family: var(--_typography---font-family--primary-font);
  font-size: var(--_typography---h4--font-size);
  line-height: var(--_typography---h4--line-height);
  font-weight: var(--_typography---h4--font-weight);
  letter-spacing: var(--_typography---h4--letter-spacing);
  text-transform: uppercase;
}
.heading-05 {
  font-family: var(--_typography---font-family--primary-font);
  font-size: var(--_typography---h5--font-size);
  line-height: var(--_typography---h5--line-height);
  font-weight: var(--_typography---h5--font-weight);
  letter-spacing: var(--_typography---h5--letter-spacing);
  text-transform: uppercase;
}
.heading-06 {
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h6--font-size);
  line-height: var(--_typography---h6--line-height);
  font-weight: var(--_typography---h6--font-weight);
  letter-spacing: var(--_typography---h6--letter-spacing);
  text-transform: uppercase;
}
.text-medium {
  font-size: var(--_typography---text-medium--font-size);
  line-height: var(--_typography---text-medium--line-height);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---text-medium--letter-spacing);
}
.text-default {
  font-size: var(--_typography---text-default--font-size);
  line-height: var(--_typography---text-default--line-height);
  font-weight: var(--_typography---font-weight--regular);
  letter-spacing: var(--_typography---text-medium--letter-spacing);
}
.text-default.text-dark {
  color: var(--color--dark);
}
.text-small {
  font-size: var(--_typography---text-small--font-size);
  line-height: var(--_typography---text-small--line-height);
  font-weight: var(--_typography---font-weight--regular);
  letter-spacing: var(--_typography---text-medium--letter-spacing);
}
.style-guide {
  padding-top: var(--_responsive---padding--padding-124-px\<deleted\|variable-782a0208-0c4c-12ec-f120-df745dc3e1c9\>);
  padding-bottom: var(--_responsive---padding--padding-124-px\<deleted\|variable-782a0208-0c4c-12ec-f120-df745dc3e1c9\>);
  background-color: var(--color--warm);
}
.style-guide-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-massive);
  grid-row-gap: var(--_responsive---element-spacing--spacing-massive);
  flex-flow: column;
  display: flex;
}
.color-wrap, .typography-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.components-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  flex-flow: row;
  justify-content: space-between;
  display: flex;
}
.style-guide-box-title {
  color: var(--color--dark);
}
.color-block-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-normal);
  grid-row-gap: var(--_responsive---element-spacing--spacing-normal);
  flex-flow: column;
  display: flex;
}
.color-block-inner-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-slim);
  grid-row-gap: var(--_responsive---element-spacing--spacing-slim);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.color-thumbnail {
  border-radius: var(--_responsive---border-radius--radius-large);
  height: 200px;
  color: var(--color--dark);
  justify-content: center;
  align-items: center;
  display: flex;
}
.color-thumbnail.is-dark {
  background-color: var(--color--dark);
  color: var(--color--white);
}
.color-thumbnail.is-aureolin {
  background-color: var(--color--aureolin);
}
.color-thumbnail.is-smooth-blue {
  background-color: var(--color--smooth-blue);
  color: var(--color--white);
}
.color-thumbnail.is-medium-green {
  background-color: var(--color--medium-green);
  color: var(--color--white);
}
.color-thumbnail.is-violet-punk {
  background-color: var(--color--violet-punk);
  color: var(--color--white);
}
.color-thumbnail.is-green-light {
  background-color: var(--color--green-light);
}
.color-thumbnail.is-white {
  background-color: var(--color--white);
}
.color-thumbnail.is-grey {
  background-color: var(--color--grey);
  color: var(--color--white);
}
.color-thumbnail.is-warm {
  border: 1px solid var(--color--dark);
  background-color: var(--color--warm);
}
.color-block-main-wrap {
  width: var(--full-size);
  grid-column-gap: var(--_responsive---element-spacing--spacing-xxxlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xxxlarge);
  flex-flow: column;
  max-width: 890px;
  display: flex;
}
.typography-box-wrap {
  width: var(--full-size);
  grid-column-gap: var(--_responsive---element-spacing--spacing-normal);
  grid-row-gap: var(--_responsive---element-spacing--spacing-normal);
  flex-flow: column;
  max-width: 890px;
  display: flex;
}
.typography-box-inner-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-medium);
  grid-row-gap: var(--_responsive---element-spacing--spacing-medium);
  flex-flow: column;
  display: flex;
}
.text-block {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xsmall);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xsmall);
  border-bottom: 1px solid var(--color--dark);
  color: var(--color--dark);
  flex-flow: row;
  justify-content: space-between;
  padding-bottom: 20px;
  display: flex;
}
.components-main-wrap {
  width: var(--full-size);
  grid-column-gap: var(--_responsive---element-spacing--spacing-xxxlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xxxlarge);
  flex-flow: column;
  max-width: 890px;
  display: flex;
}
.button-item-main-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-normal);
  grid-row-gap: var(--_responsive---element-spacing--spacing-normal);
  flex-flow: column;
  display: flex;
}
.button-item-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-normal);
  grid-row-gap: var(--_responsive---element-spacing--spacing-normal);
  display: flex;
}
.button-text-wrap {
  max-height: 21px;
  overflow: hidden;
}
.button {
  background-color: var(--color--green-light);
  color: var(--color--dark);
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  padding: 18px 24px;
  text-decoration: none;
  display: flex;
  position: relative;
}
.button:where(.button-compact) {
  padding: 8px 24px;
}
.button:where(.button-white) {
  background-color: var(--color--white);
}
.button-05-line {
  width: var(--full-size);
  background-color: var(--color--dark);
  height: 1px;
}
.button-05 {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}
.footer-copytight-block {
  width: var(--full-size);
  max-width: var(--full-size);
  border-top: 1px solid var(--color--dark);
  color: var(--color--dark);
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  display: flex;
}
.foooter-link-widget-wrap {
  width: var(--full-size);
  margin-bottom: var(--_responsive---element-spacing--spacing-big);
  grid-column-gap: 80px;
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-template-rows: auto;
  grid-template-columns: 137px 219px 183px 1.5fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  display: grid;
}
.footer-link-widget {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  flex-flow: column;
  display: flex;
}
.footer-link-widget.is-social {
  margin-left: auto;
}
.footer-link-list-wrap {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.text-large {
  font-size: var(--_typography---text-large--font-size);
  line-height: var(--_typography---text-large--line-height);
  font-weight: var(--_typography---text-large--font-weight);
  letter-spacing: var(--_typography---text-large--letter-spacing);
}
.header-section {
  z-index: 999;
  position: absolute;
  inset: 0% 0% auto;
}
.navbar {
  width: var(--full-size);
  background-color: var(--color--transparent);
  padding-top: 30px;
  padding-bottom: 30px;
}
.brand-logo-link {
  color: #fff;
  width: 100%;
  max-width: 54px;
  display: flex;
}
.brand-logo-link:where(.header-v2) {
  filter: invert();
}
.nav-button-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex: none;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}
.nav-inner {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.nav-menu {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: #ffffff4d;
  border-radius: 60px;
  justify-content: space-between;
  align-items: center;
  padding: 7px;
  display: flex;
}
.nav-menu:where(.header-v2) {
  background-color: #0000004d;
}
.nav-link {
  color: var(--color--white);
  border-radius: 40px;
  padding: 8px 10px;
  transition: all .3s;
}
.nav-link:hover, .nav-link[aria-current="page"], .nav-link.is-active {
  background-color: var(--color--white);
  color: var(--color--dark);
}
.utility-content-block {
  grid-row-gap: 36px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 848px;
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
  display: flex;
}
.text-dark {
  color: var(--color--dark);
  text-decoration: none;
}
.utility-list-block {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}
.utility-section {
  padding-top: var(--_responsive---section-padding--banner-padding);
  padding-bottom: var(--_responsive---section-padding--medium);
  background-color: var(--color--warm);
}
.utility-section.is-error {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
}
.terms-link {
  color: var(--color--grey);
  font-weight: var(--_typography---font-weight--medium);
  transition: color .3s;
}
.terms-link:hover {
  color: var(--color--black);
}
.utility-text-wrap {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.instruction-list {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 20px;
}
.utility-content-wrap {
  grid-row-gap: 44px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}
.display-02 {
  font-family: var(--_typography---font-family--primary-font);
  font-size: var(--_typography---display-02--font-size);
  line-height: var(--_typography---display-02--line-height);
  font-weight: var(--_typography---display-02--font-weight);
  letter-spacing: var(--_typography---display-02--letter-spacing);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
}
.utility-title-block {
  grid-row-gap: 32px;
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 625px;
  margin-bottom: 140px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.utility-title-block.is-instruction {
  max-width: 690px;
  margin-bottom: var(--_responsive---section-padding--large);
}
.accordion {
  width: 100%;
}
.heading-01 {
  font-family: var(--_typography---font-family--primary-font);
  font-size: var(--_typography---h1--font-size);
  line-height: var(--_typography---h1--line-height);
  font-weight: var(--_typography---h1--font-weight);
  letter-spacing: var(--_typography---h1--letter-spacing);
  text-transform: uppercase;
}
.hero-section {
  background-image: url('../images/hero-background-1.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  flex-flow: column;
  height: 100vh;
  display: flex;
  overflow: hidden;
}
.hero-text-wrap {
  width: var(--full-size);
  background-image: linear-gradient(#0d0d0d00, #0d0d0d99);
  margin-top: auto;
  padding: 60px 6px 30px;
}
.home-about {
  z-index: 2;
  padding-top: var(--_responsive---section-padding--medium);
  background-color: var(--color--aureolin);
  opacity: 0;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}
.home-about.is-about {
  opacity: 1;
  position: static;
}
.home-about-text {
  max-width: 1160px;
  color: var(--color--dark);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.home-about-image {
  z-index: 1;
  object-fit: cover;
  object-position: 50% 0%;
  margin-top: -6%;
  position: relative;
}
.animated-section {
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  background-image: url('../images/animated-image.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  flex-flow: column;
  height: 100vh;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}
.animated-text-block {
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}
.animated-logo-wrap {
  aspect-ratio: 1;
  border-radius: var(--_responsive---border-radius--radius-round);
  background-color: var(--color--aureolin);
  justify-content: center;
  align-items: center;
  max-width: 100px;
  padding: 23px;
  display: flex;
}
.animated-text-wrap {
  grid-column-gap: 17px;
  grid-row-gap: 17px;
  color: var(--color--white);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.animated-large-text {
  margin-top: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.work-section {
  padding-top: var(--_responsive---section-padding--medium);
  padding-bottom: var(--_responsive---section-padding--medium);
  background-color: var(--color--warm);
  background-image: url('../images/work-section-background.webp');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
}
.section-title-block {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 593px;
  margin-bottom: 93px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.section-title-block.is-service {
  max-width: 630px;
}
.section-title-block.is-message {
  max-width: 1160px;
}
.section-title-block.is-blog {
  color: var(--color--white);
  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 50px;
  margin-left: 0;
}
.section-title-block.is-work {
  margin-bottom: 0;
}
.work-card-block {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 1134px;
  height: 100vh;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: sticky;
  top: 0;
}
.work-card {
  border-radius: 30px;
  justify-content: space-between;
  display: flex;
}
.work-card-left {
  width: var(--full-size);
  height: var(--full-size);
  grid-column-gap: 295px;
  grid-row-gap: 295px;
  aspect-ratio: 1;
  border-radius: var(--_responsive---border-radius--radius-xxlarge);
  background-color: var(--color--smooth-blue);
  color: var(--color--white);
  flex-flow: column;
  justify-content: space-between;
  padding: 30px 25px 25px;
  text-decoration: none;
  display: flex;
}
.work-card-left.one {
  color: var(--color--black);
}
.work-card-left.two {
  background-color: var(--color--aureolin);
  color: var(--color--dark);
}
.work-card-left.three {
  background-color: var(--color--medium-green);
  color: var(--color--black);
}
.work-card-right {
  width: var(--full-size);
  height: var(--full-size);
  aspect-ratio: 1;
  border-radius: 30px;
  flex: none;
  overflow: hidden;
}
.work-tag-wrap {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: wrap;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.work-tag {
  grid-column-gap: 10px;
  background-color: var(--color--white);
  color: var(--color--dark);
  border-radius: 10000px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  display: flex;
}
.work-card-title-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}
.work-card-column {
  width: var(--full-size);
  aspect-ratio: 1;
  border-radius: var(--_responsive---border-radius--radius-xxlarge);
  max-width: 570px;
  overflow: hidden;
}
.work-card-column.right {
  flex-flow: column;
  justify-content: flex-end;
  display: flex;
}
.service-section {
  padding-top: var(--_responsive---section-padding--medium);
  padding-bottom: var(--_responsive---section-padding--medium);
  overflow: hidden;
}
.message-section {
  padding: 40px 20px;
}
.message-image-wrap {
  z-index: -1;
  margin-top: -20%;
  position: relative;
}
.message-content-block {
  z-index: 1;
  padding-top: var(--_responsive---section-padding--medium);
  border-radius: var(--_responsive---border-radius--radius-xxxlarge);
  background-color: var(--color--warm-lite);
  position: relative;
  overflow: hidden;
}
.achievement-section {
  padding: 20px;
}
.achievement-content-block {
  padding-top: var(--_responsive---section-padding--medium);
  padding-bottom: var(--_responsive---section-padding--medium);
  border-radius: var(--_responsive---border-radius--radius-xxxlarge);
  background-color: var(--color--warm);
}
.achievement-card {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  max-width: 280px;
  color: var(--color--dark);
  flex-flow: column;
  display: flex;
}
.achievement-card.four {
  margin-left: auto;
  margin-right: auto;
}
.achievement-card.three {
  margin-top: 118px;
  margin-left: 100px;
}
.achievement-card.two {
  margin-top: 24px;
}
.achievement-image-wrap {
  border-radius: var(--_responsive---border-radius--radius-xxlarge);
  overflow: hidden;
}
.achievement-card-block {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  color: var(--color--dark);
  flex-flow: column;
  display: flex;
  position: sticky;
  top: 0;
}
.achievement-card-row {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.cta-section {
  background-color: var(--color--warm);
  height: 400vh;
  position: relative;
}
.cta-content-block {
  height: var(--full-size);
  justify-content: center;
  align-items: stretch;
  display: flex;
}
.cta-text-block {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  background-color: var(--color--matte-dark-green);
  border-radius: 30px;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 50%;
  padding: 50px;
  display: flex;
}
.cta-text-wrap {
  grid-row-gap: 20px;
  width: 100%;
  max-width: 460px;
  color: var(--color--green-light);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}
.cta-image-wrap {
  grid-column-gap: 434px;
  grid-row-gap: 434px;
  background-color: var(--color--medium-green);
  border-radius: 30px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 50%;
  overflow: hidden;
}
.footer {
  padding-top: var(--_responsive---section-padding--medium);
  padding-bottom: 54px;
  position: relative;
  overflow: hidden;
}
.footer-link {
  height: 30px;
  color: var(--color--dark);
  font-size: var(--_typography---h5--font-size);
  line-height: var(--_typography---h5--line-height);
  font-weight: var(--_typography---h5--font-weight);
  text-transform: uppercase;
  text-shadow: 0 30px 0 var(--color--dark);
  text-decoration: none;
  overflow: hidden;
}
.footer-link-title {
  color: var(--color--dark);
}
.copyright-link {
  color: var(--color--dark);
  text-decoration: none;
  transition: all .3s;
}
.copyright-link:hover {
  border-bottom: 1px solid var(--color--dark);
  color: var(--color--dark);
}
.footer-top-block {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  flex-flow: column;
  margin-bottom: 50px;
  display: flex;
}
.footer-line {
  width: var(--full-size);
  background-color: var(--color--dark);
  height: 1px;
}
.footer-logo-block {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.footer-logo-link {
  width: var(--full-size);
  max-width: 97px;
}
.achievement-stats-no-wrap {
  grid-row-gap: 20px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 434px;
  text-decoration: none;
  display: flex;
}
.achievement-stats-block {
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  border-radius: var(--_responsive---border-radius--radius-xxxlarge);
  -webkit-backdrop-filter: blur(134px);
  backdrop-filter: blur(134px);
  max-width: 800px;
  color: var(--color--white);
  background-color: #2b2b2b99;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding: 80px;
  display: flex;
}
.achievement-stats-widget {
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 456px;
  display: flex;
}
.display-01 {
  font-family: var(--_typography---font-family--primary-font);
  font-size: var(--_typography---display-01--font-size);
  line-height: var(--_typography---display-01--line-height);
  font-weight: var(--_typography---display-01--font-weight);
  letter-spacing: var(--_typography---display-01--letter-spacing);
}
.hero-large-text {
  color: var(--color--aureolin);
  font-size: 12.5vw;
}
.hero-text {
  font-size: var(--_typography---hero-text);
  white-space: nowrap;
  word-break: keep-all;
}
.about-banner-text-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1340px;
  text-decoration: none;
  display: flex;
}
.about-banner-section {
  padding-top: var(--_responsive---section-padding--banner-padding);
  background-color: var(--color--warm);
  background-image: url('../images/banner-background-particle.webp');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
}
.about-banner-image-wrap {
  border-radius: var(--_responsive---border-radius--radius-xxlarge);
  overflow: hidden;
}
.about-banner-image-block {
  padding: 20px;
}
.banner-title-wrap {
  max-width: 880px;
  color: var(--color--dark);
}
.banner-description {
  max-width: 336px;
}
.banner-description.is-blog {
  max-width: 750px;
}
.stats-section {
  padding-top: var(--_responsive---section-padding--medium);
  padding-bottom: var(--_responsive---section-padding--medium);
  background-color: var(--color--white);
  overflow: hidden;
}
.stats-content-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.stats-title-wrap {
  max-width: 460px;
  color: var(--color--dark);
  padding-bottom: 100px;
}
.stats-card {
  border-radius: var(--_responsive---border-radius--radius-xxlarge);
  background-color: var(--color--aureolin);
  min-height: 430px;
  color: var(--color--dark);
  flex-flow: column;
  justify-content: space-between;
  padding: 50px;
  display: flex;
}
.stats-card.two {
  background-color: var(--color--smooth-blue);
  color: var(--color--white);
}
.stats-card.three {
  background-color: var(--color--medium-green);
  color: var(--color--white);
}
.stats-card.four {
  background-color: var(--color--green-light);
}
.stats-card.five {
  background-color: var(--color--violet-punk);
  color: var(--color--white);
}
.stats-card-description {
  max-width: 426px;
}
.creative-section {
  min-height: 100vh;
  padding-top: var(--_responsive---section-padding--large);
  background-image: linear-gradient(#0000004d, #0000004d), url('../images/creative-background.webp');
  background-position: 0 0, 0 0;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  padding-bottom: 40px;
}
.creative-content-block {
  grid-column-gap: 68px;
  grid-row-gap: 68px;
  border-radius: var(--_responsive---border-radius--radius-jumbo);
  background-color: var(--color--violet-punk);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  padding: 50px 20px 20px;
  display: flex;
}
.creative-text-block {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  max-width: 470px;
  color: var(--color--white);
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.aureolin {
  color: var(--color--aureolin);
}
.creative-image-wrap {
  border-radius: var(--_responsive---border-radius--radius-xxxlarge);
  overflow: hidden;
}
.team-section {
  background-color: var(--color--medium-green);
  background-image: url('../images/work-section-background.webp');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 60px;
}
.team-section-title {
  grid-row-gap: 15px;
  width: 100%;
  max-width: 593px;
  color: var(--color--white);
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.slider {
  background-color: var(--color--transparent);
  height: auto;
}
.team-slide-image {
  max-width: 1067px;
  margin-left: auto;
  margin-right: auto;
}
.team-slide-content {
  max-width: 1067px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.team-slide-text-wrap {
  z-index: -1;
  color: var(--color--white);
  text-align: center;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 90px;
  display: flex;
  position: absolute;
  inset: 0%;
}
.team-slide-arrow {
  aspect-ratio: 1;
  width: 30px;
}
.hide {
  display: none;
}
.testimonial-section {
  padding-top: var(--_responsive---section-padding--medium);
  padding-bottom: var(--_responsive---section-padding--medium);
  background-color: var(--color--warm);
}
.testimonial-section.effect {
  overflow: hidden;
}
.testimonial-title {
  max-width: 709px;
  color: var(--color--dark);
  margin-bottom: 80px;
}
.testimonial-card-block {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: flex;
}
.testimonial-card-block.card-container {
  justify-content: center;
  min-height: 50vh;
  position: relative;
}
.testimonial-card {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  border-radius: var(--_responsive---border-radius--radius-xxlarge);
  background-color: var(--color--white);
  flex-flow: column;
  flex: none;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 400px;
  min-height: 430px;
  padding: 30px;
  display: flex;
}
.testimonial-card.is-highlighted {
  background-color: var(--color--aureolin);
}
.testimonial-card.card {
  margin-left: -7.5%;
  margin-right: -7.5%;
}
.star {
  display: flex;
}
.testimonial-icon-wrap {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  display: flex;
}
.testimonial-card-top {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  color: var(--color--dark);
  flex-flow: column;
  display: flex;
}
.testimonial-author-image-wrap {
  border-radius: 50%;
  max-width: 60px;
  overflow: hidden;
}
.testimonial-author-block {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.testimonial-author-info {
  flex-flow: column;
  display: flex;
}
.testimonial-sticky {
  overflow: visible;
}
.value-section {
  padding-top: var(--_responsive---section-padding--medium);
  padding-bottom: var(--_responsive---section-padding--medium);
}
.value-title-block {
  grid-row-gap: 15px;
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 593px;
  margin-bottom: 80px;
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
  display: flex;
}
.value-card-block {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto auto;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.value-card {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  border-radius: var(--_responsive---border-radius--radius-xxxlarge);
  background-color: var(--color--matte-dark-green);
  min-height: 322px;
  color: var(--color--green-light);
  flex-flow: column;
  justify-content: space-between;
  padding: 30px;
  display: flex;
}
.value-card.warm-background {
  background-color: var(--color--warm);
  color: var(--color--dark);
}
.value-card-body {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  flex-flow: column;
  display: flex;
}
.banner-section {
  z-index: 1;
  background-color: var(--color--black);
  background-image: url('../images/hero-background.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
}
.banner-image-wrap {
  z-index: -1;
  position: absolute;
  inset: 0%;
}
.banner-image-overlay {
  background-color: #0009;
  position: absolute;
  inset: 0%;
}
.banner-text-block {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  width: 100%;
  max-width: 590px;
  color: var(--color--white);
  text-align: center;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.banner-text-block.is-blog {
  max-width: 960px;
}
.work-main-section {
  padding-top: var(--_responsive---section-padding--medium);
  padding-bottom: var(--_responsive---section-padding--medium);
  background-color: var(--color--warm);
  background-image: url('../images/work-main-background.webp');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
}
.work-main-card-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.work-main-card {
  z-index: 1;
  width: var(--full-size);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  aspect-ratio: 1;
  background-color: var(--color--black);
  color: var(--color--white);
  border-radius: 50px;
  flex-flow: column;
  justify-content: space-between;
  padding: 50px;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}
.work-main-card.is-odd {
  max-height: 692px;
}
.work-main-card-image {
  position: absolute;
  inset: 0%;
}
.work-main-card-overlay {
  background-color: #00000073;
  position: absolute;
  inset: 0%;
}
.work-main-card-image-block {
  z-index: -1;
  pointer-events: none;
  position: absolute;
  inset: 0%;
}
.work-main-card-top {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}
.work-main-tag-wrap {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: wrap;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.work-main-tag {
  grid-column-gap: 10px;
  background-color: var(--color--white);
  color: var(--color--dark);
  border-radius: 10000px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  display: flex;
}
.work-details-section {
  padding-top: var(--_responsive---section-padding--banner-padding);
  padding-bottom: var(--_responsive---section-padding--medium);
  background-color: var(--color--warm);
}
.work-details-title-block {
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 780px;
  margin-bottom: 40px;
  display: flex;
}
.work-details-image-wrap {
  border-radius: var(--_responsive---border-radius--radius-jumbo);
  margin-bottom: 40px;
  overflow: hidden;
}
.work-details-content-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.work-details-left {
  grid-row-gap: 20px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 300px;
  display: flex;
  position: sticky;
  top: 40px;
}
.work-details-info-wrap {
  grid-row-gap: 4px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.work-details-text-block {
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}
.work-details-right {
  width: var(--full-size);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  max-width: 800px;
  display: flex;
}
.work-gallery-image-wrap {
  border-radius: var(--_responsive---border-radius--radius-jumbo);
  margin-bottom: 20px;
  overflow: hidden;
}
.work-rich-text h2:where(:not([class*="heading-scale-"])), .work-rich-text :where(.heading-scale-2) {
  font-family: var(--_typography---font-family--primary-font);
  color: var(--color--dark);
  font-size: var(--_typography---h5--font-size);
  line-height: var(--_typography---h5--line-height);
  font-weight: var(--_typography---h5--font-weight);
  margin-bottom: 10px;
}
.work-rich-text p {
  font-size: var(--_typography---text-medium--font-size);
  line-height: var(--_typography---text-large--line-height);
  font-weight: var(--_typography---text-medium--font-weight);
  letter-spacing: var(--_typography---text-medium--letter-spacing);
  margin-bottom: 20px;
}
.empty-state {
  border-radius: var(--_responsive---border-radius--radius-regular);
  background-color: var(--color--dark);
  color: var(--color--white);
  text-align: center;
  padding: 16px;
}
.step-section {
  padding-top: var(--_responsive---section-padding--medium);
  padding-bottom: var(--_responsive---section-padding--medium);
  background-color: var(--color--warm);
}
.step-title-block {
  grid-row-gap: 15px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 565px;
  margin-bottom: 80px;
  text-decoration: none;
  display: flex;
}
.step-card-block {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  flex-flow: column;
  display: flex;
}
.step-card {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  border-radius: var(--_responsive---border-radius--radius-xxlarge);
  background-color: var(--color--aureolin);
  color: var(--color--dark);
  justify-content: space-between;
  padding: 20px;
  display: flex;
  position: sticky;
  top: 40px;
}
.step-card.two {
  background-color: var(--color--medium-green);
  color: var(--color--white);
}
.step-card.three {
  background-color: var(--color--smooth-blue);
  color: var(--color--white);
}
.step-card.four {
  background-color: var(--color--violet-punk);
  color: var(--color--white);
}
.step-card-left {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  justify-content: space-between;
  max-width: 400px;
  padding: 30px;
  display: flex;
}
.step-card-right {
  border-radius: var(--_responsive---border-radius--radius-xxxlarge);
  max-width: 880px;
  overflow: hidden;
}
.step-card-title-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}
.step-no {
  color: #2b2b2ba8;
}
.step-no.two {
  color: #ffffffd6;
}
.step-no.three {
  color: #ffffffd9;
}
.step-no.four {
  color: #ffffffe6;
}
.award-section {
  padding-top: var(--_responsive---section-padding--medium);
  background-color: var(--color--medium-green);
}
.award-title-block {
  max-width: 800px;
  color: var(--color--white);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.award-card-block {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.award-card {
  z-index: 5;
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  border-radius: var(--_responsive---border-radius--radius-xxlarge);
  background-color: var(--color--aureolin);
  height: 660px;
  color: var(--color--dark);
  flex-flow: column;
  justify-content: space-between;
  padding: 50px;
  display: flex;
  position: relative;
}
.award-card.two {
  z-index: 4;
  background-color: var(--color--white);
  position: absolute;
  inset: 0%;
}
.award-card.three {
  z-index: 3;
  background-color: var(--color--violet-punk);
  color: var(--color--white);
  position: absolute;
  inset: auto 0% 0%;
}
.award-card.four {
  z-index: 2;
  background-color: var(--color--green-light);
  position: absolute;
  inset: auto 0% 0%;
}
.award-card.five {
  z-index: 1;
  background-color: var(--color--smooth-blue);
  color: var(--color--white);
  position: absolute;
  inset: auto 0% 0%;
}
.award-card-body {
  grid-row-gap: 20px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.partner-section {
  background-color: var(--color--warm);
  height: 300vh;
}
.partner-sticky {
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}
.partner-title-wrap {
  color: var(--color--dark);
  text-align: center;
  overflow: visible;
}
.partner-logo-block {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: center stretch;
  display: grid;
  position: absolute;
  inset: 0%;
}
.partner-logo-wrap {
  width: var(--full-size);
  background-color: var(--color--white);
  border-radius: 90px;
  justify-content: center;
  align-items: center;
  max-width: 290px;
  height: 110px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 35px;
  padding-right: 35px;
  display: flex;
}
.partner-logo-wrap.two {
  background-color: var(--color--green-light);
  transform: translate(0, 200px)rotate(9deg);
}
.partner-logo-wrap.three {
  background-color: var(--color--smooth-blue);
  transform: rotate(-7deg);
}
.partner-logo-wrap.four {
  background-color: var(--color--violet-punk);
  transform: rotate(-7deg);
}
.partner-logo-wrap.five {
  background-color: var(--color--aureolin);
  transform: translate(42px, 200px)rotate(15deg);
}
.partner-logo-wrap.six {
  background-color: var(--color--medium-green);
  transform: rotate(12.7deg);
}
.partner-logo-wrap.one {
  transform: rotate(-11deg);
}
.blog-section {
  padding-top: var(--_responsive---section-padding--medium);
  padding-bottom: var(--_responsive---section-padding--medium);
  background-color: var(--color--smooth-blue);
}
.blog-card-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.blog-card {
  height: var(--full-size);
  border-radius: var(--_responsive---border-radius--radius-xxlarge);
  background-color: var(--color--white);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
  display: flex;
}
.blog-card-image-wrap {
  width: var(--full-size);
  border-radius: var(--_responsive---border-radius--radius-xlarge);
  margin-bottom: 25px;
  overflow: hidden;
}
.blog-card-body {
  width: var(--full-size);
  grid-row-gap: 10px;
  color: var(--color--dark);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 38px;
  display: flex;
}
.particle-section {
  padding-bottom: var(--_responsive---section-padding--xlarge);
  background-color: var(--color--black);
}
.pricing-section {
  padding-top: var(--_responsive---section-padding--banner-padding);
  padding-bottom: var(--_responsive---section-padding--medium);
  background-image: url('../images/pricing-background.webp');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
}
.pricing-card {
  grid-row-gap: 30px;
  border-radius: var(--_responsive---border-radius--radius-xxlarge);
  background-color: var(--color--violet-punk);
  color: var(--color--white);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 50px;
  text-decoration: none;
  display: flex;
}
.pricing-card.two {
  background-color: var(--color--white);
  color: var(--color--dark);
}
.pricing-card-content {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.pricing-card-top {
  grid-row-gap: 35px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.pricing-card-icon {
  aspect-ratio: 1;
  object-fit: fill;
  max-width: 42px;
  height: auto;
  overflow: hidden;
}
.pricing-card-title-wrap {
  grid-row-gap: 15px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.price-block {
  grid-row-gap: 13px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.pricing-card-list-block {
  grid-row-gap: 20px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}
.pricing-card-list {
  grid-row-gap: 15px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}
.pricing-card-list-item {
  grid-column-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.pricing-card-block {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.pricing-list-icon {
  display: flex;
}
.pricing-card-button-wrap {
  width: var(--full-size);
  flex-flow: column;
  max-width: 255px;
  display: flex;
}
.pricing-title-block {
  max-width: 960px;
  color: var(--color--dark);
  margin-bottom: 50px;
}
.contact-section {
  padding-top: var(--_responsive---section-padding--banner-padding);
  background-color: var(--color--warm);
  background-image: url('../images/contact-background.webp');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 30px;
}
.contact-content-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border-radius: var(--_responsive---border-radius--radius-xxlarge);
  background-color: var(--color--violet-punk);
  justify-content: space-between;
  padding: 30px;
  display: flex;
}
.contact-left {
  width: var(--full-size);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  justify-content: space-between;
  max-width: 590px;
  padding: 20px;
  display: flex;
}
.contact-right {
  width: var(--full-size);
  border-radius: var(--_responsive---border-radius--radius-xxxlarge);
  max-width: 640px;
  overflow: hidden;
}
.contact-title-block {
  grid-row-gap: 15px;
  width: 100%;
  max-width: 550px;
  color: var(--color--white);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.contact-link-block {
  grid-row-gap: 16px;
  border-radius: var(--_responsive---border-radius--radius-xxlarge);
  background-color: var(--color--violet-dark);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 550px;
  padding: 40px 90px 40px 40px;
  display: flex;
}
.contact-link-widget {
  grid-column-gap: 18px;
  width: 100%;
  color: var(--color--white);
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.contact-link-icon-wrap {
  aspect-ratio: 1;
  border-radius: var(--_responsive---border-radius--radius-xsmall);
  background-color: #fff;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 30px;
  display: flex;
  overflow: hidden;
}
.contact-link-icon {
  object-fit: cover;
  max-width: 16px;
  height: auto;
  overflow: hidden;
}
.contact-link-wrap {
  grid-row-gap: 5px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 203px;
  text-decoration: none;
  display: flex;
}
.contact-link {
  width: 100%;
  color: var(--color--white);
  margin-top: 0;
  margin-bottom: 0;
  text-decoration: none;
}
.contact-form-section {
  padding-top: var(--_responsive---section-padding--medium);
  padding-bottom: var(--_responsive---section-padding--medium);
}
.contact-form-title-block {
  grid-row-gap: 15px;
  width: 100%;
  max-width: 593px;
  color: var(--color--dark);
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 80px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.contact-form-block {
  width: var(--full-size);
  max-width: 948px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}
.contact-field-label {
  color: var(--color--dark);
  font-size: var(--_typography---h4--font-size);
  line-height: var(--_typography---h4--line-height);
  font-weight: var(--_typography---h4--font-weight);
  letter-spacing: var(--_typography---h4--letter-spacing);
  margin-bottom: 20px;
}
.contact-input-field {
  border-radius: var(--_responsive---border-radius--radius-small);
  background-color: var(--color--warm);
  height: auto;
  color: var(--color--dark);
  border: 1px #000;
  margin-bottom: 0;
  padding: 25px 15px;
}
.contact-input-field::placeholder {
  color: var(--color--grey);
}
.contact-input-field.text-area {
  height: 72px;
}
.contact-input-wrapper {
  grid-column-gap: 28px;
  grid-row-gap: 35px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.select-field {
  background-color: var(--color--transparent);
  height: auto;
  color: var(--color--dark);
  border: 1px #000;
  margin-bottom: 0;
  padding: 0;
}
.submit-button {
  z-index: 5;
  opacity: 0;
  position: absolute;
  inset: 0%;
}
.div-block {
  color: var(--color--dark);
  text-align: center;
  margin-bottom: 50px;
}
.license-card-block {
  grid-row-gap: 20px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  text-decoration: none;
  display: flex;
}
.license-card {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  background-color: var(--color--white);
  color: var(--color--dark);
  border-radius: 50px;
  justify-content: space-between;
  align-items: flex-start;
  padding: 40px;
  display: flex;
}
.license-link-block {
  width: var(--full-size);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border-radius: var(--_responsive---border-radius--radius-xxlarge);
  background-color: var(--color--green-light);
  max-width: 600px;
  min-height: 300px;
  color: var(--color--dark);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}
.license-link-block.is-icon {
  background-color: var(--color--aureolin);
}
.license-link-block.is-font {
  background-color: var(--color--warm);
}
.license-logo {
  object-fit: cover;
  border-radius: 10px;
  max-width: 97px;
  height: auto;
}
.license-title-block {
  grid-row-gap: 15px;
  width: 100%;
  max-width: 620px;
  color: var(--color--dark);
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.changelog-content-block {
  grid-row-gap: 20px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 1340px;
  display: flex;
}
.changelog-card {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  background-color: var(--color--white);
  border-radius: 50px;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding: 50px;
  text-decoration: none;
  display: flex;
}
.changelog-card-title-block {
  grid-row-gap: 15px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}
.changelog-list {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  margin-bottom: 0;
  padding-left: 20px;
  display: flex;
}
.changelog-list-block {
  width: var(--full-size);
  grid-row-gap: 15px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 602px;
  text-decoration: none;
  display: flex;
}
.error-content-block {
  grid-row-gap: 30px;
  width: 100%;
  max-width: 620px;
  color: var(--color--dark);
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.password-input {
  border: 1px solid var(--color--grey);
  background-color: var(--color--transparent);
  height: auto;
  color: var(--color--dark);
  border-radius: 50px;
  padding: 20px;
}
.password-input:focus {
  border-color: var(--color--green-light);
}
.password-title {
  color: var(--color--dark);
  margin-bottom: 30px;
}
.password-input-wrap {
  width: var(--full-size);
  flex-flow: column;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.error-message {
  width: var(--full-size);
  border-radius: var(--_responsive---border-radius--radius-regular);
  background-color: var(--color--dark);
  max-width: 520px;
  color: var(--color--white);
  margin-left: auto;
  margin-right: auto;
  padding: 16px;
}
.success-message {
  border-radius: var(--_responsive---border-radius--radius-regular);
  background-color: var(--color--green-light);
  color: var(--color--dark);
  padding: 16px;
}
.blog-details-section {
  padding-top: var(--_responsive---section-padding--banner-padding);
  padding-bottom: var(--_responsive---section-padding--large);
  background-color: var(--color--warm);
}
.blog-details-title-block {
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 50px;
  text-decoration: none;
  display: flex;
}
.blog-details-info-block {
  grid-column-gap: 20px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 50px;
  text-decoration: none;
  display: grid;
}
.blog-details-info-wrap {
  max-width: var(--full-size);
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  min-width: 120px;
  text-decoration: none;
  display: flex;
}
.blog-details-image-wrap {
  border-radius: 50px;
  margin-bottom: 70px;
  overflow: hidden;
}
.blog-rich-text {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.blog-rich-text p {
  font-size: var(--_typography---text-medium--font-size);
  line-height: var(--_typography---text-medium--line-height);
  font-weight: var(--_typography---text-medium--font-weight);
  margin-top: -20px;
  margin-bottom: 40px;
}
.blog-rich-text h2:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-2) {
  font-family: var(--_typography---font-family--primary-font);
  color: var(--color--dark);
  font-size: var(--_typography---h5--font-size);
  line-height: var(--_typography---h5--line-height);
  font-weight: var(--_typography---h5--font-weight);
  letter-spacing: var(--_typography---h5--letter-spacing);
  margin-top: 40px;
  margin-bottom: 30px;
}
.related-blog {
  padding-bottom: var(--_responsive---section-padding--medium);
  background-color: var(--color--warm);
}
.related-blog-title {
  color: var(--color--dark);
  text-align: center;
  margin-bottom: 80px;
}
.blog-card-title {
  color: var(--color--dark);
  text-decoration: none;
}
.hero-wrap {
  height: 600vh;
}
.hero-sticky {
  height: 100vh;
  position: sticky;
  top: 0;
}
.animated-overlay-block {
  flex: none;
  justify-content: space-between;
  width: 100%;
  height: 100vh;
  display: flex;
  position: absolute;
  inset: 0%;
}
.animated-overlay-part {
  background-color: var(--color--aureolin);
  width: 25%;
  height: 100%;
  position: absolute;
  transform: translate(0);
}
.animated-overlay-part.one {
  background-image: none;
  position: absolute;
}
.animated-overlay-part.two {
  background-image: none;
  left: 25%;
}
.animated-overlay-part.three {
  left: 50%;
}
.animated-overlay-part.four {
  left: 75%;
}
.animated-logo {
  height: auto;
}
.work-card-block-wrap {
  height: 300vh;
}
.collection-list-wrapper {
  aspect-ratio: 1;
  height: 100%;
}
.service-title {
  font-size: var(--_typography---h3--font-size);
  line-height: var(--_typography---h3--line-height);
}
.service-title.gradient {
  position: absolute;
  inset: 0%;
}
.service-title.gradient.one.description, .service-title.gradient.two.description, .service-title.gradient.three.description, .service-title.solid.one.description, .service-title.solid.two.description, .service-title.solid.three.description {
  font-size: var(--_typography---text-default--font-size);
}
.service-link {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  color: var(--color--dark);
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
  position: relative;
}
.service-link-block {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  flex-flow: column;
  display: flex;
}
.gradient {
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(#9c9008, #e8d40000);
  -webkit-background-clip: text;
  background-clip: text;
}
.service-image-wrap {
  pointer-events: none;
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
  position: absolute;
  inset: 0%;
}
.service-image-wrap.one {
  justify-content: flex-end;
  align-items: flex-start;
}
.service-image {
  aspect-ratio: 1;
  border: 8px solid var(--color--white);
  border-radius: var(--_responsive---border-radius--radius-large);
  max-width: 170px;
  height: auto;
  box-shadow: 0 17px 14px -9px #0003;
}
.tag-text {
  color: var(--color--white);
  flex: none;
  margin-right: 8px;
}
.tag-text-wrap {
  background-color: var(--color--dark);
  flex: none;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
  display: flex;
}
.tag-text-row {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.tag-text-row.left {
  position: absolute;
  inset: 0%;
  transform: rotate(7deg);
}
.tag-text-row.right {
  transform: rotate(-7deg);
}
.tag-text-block {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-left: -100px;
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
  position: relative;
}
.achievement-title {
  font-family: var(--_typography---font-family--primary-font);
  font-size: var(--_typography---h1--font-size);
  line-height: var(--_typography---h1--line-height);
  font-weight: var(--_typography---h1--font-weight);
  letter-spacing: var(--_typography---h1--letter-spacing);
  text-transform: uppercase;
}
.cta-animated-text-block {
  pointer-events: none;
  background-image: url('../images/creative-background.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
  position: absolute;
  inset: 0%;
}
.cta-animated-text-wrap {
  background-color: var(--color--black);
  mix-blend-mode: multiply;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}
.cta-sticky {
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 20px;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}
.work-collection-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}
.blog-card-button-wrap {
  margin-top: auto;
}
.award-card-sticky {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
  position: sticky;
  top: 0;
}
.award-sticky-wrap {
  height: 300vh;
}
.award-section-particle {
  padding-bottom: var(--_responsive---section-padding--medium);
  background-color: var(--color--aureolin);
}
.partner-title {
  font-family: var(--_typography---font-family--primary-font);
  font-size: 10vw;
  line-height: 100vh;
  font-weight: var(--_typography---h1--font-weight);
  letter-spacing: var(--_typography---h1--letter-spacing);
  text-transform: uppercase;
}
.partner-logo {
  object-fit: contain;
}
.nav-link-wrap {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.price-text {
  font-family: var(--_typography---font-family--primary-font);
  font-size: var(--_typography---h1--font-size);
  line-height: var(--_typography---h1--line-height);
  font-weight: var(--_typography---h1--font-weight);
  letter-spacing: var(--_typography---h1--letter-spacing);
  text-transform: uppercase;
}
.blog-title {
  max-width: 400px;
}
.related-work-section {
  padding-top: var(--_responsive---section-padding--medium);
  padding-bottom: var(--_responsive---section-padding--medium);
  background-color: var(--color--warm);
}
.text-black {
  color: var(--color--black);
}
.stats-no-wrap {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.about-buton-wrap {
  z-index: 2;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  display: flex;
  position: relative;
}
.work-button-wrap {
  margin-top: 60px;
}
.service-title-block {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  max-width: 347px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}
.service-description-wrap {
  position: relative;
}
.service-link-divider {
  background-color: var(--color--dark);
  height: 1px;
}
.service-no-wrap {
  position: relative;
}
.service-no {
  font-size: var(--_typography---h4--font-size);
}@media screen and (max-width: 991px) {

  body {
    --_responsive---element-spacing--spacing-zero: 0px;
    --_responsive---padding--padding-124-px\<deleted\|variable-782a0208-0c4c-12ec-f120-df745dc3e1c9\>: 100px;
    --_responsive---element-spacing--spacing-massive: 60px;
    --_responsive---element-spacing--spacing-xlarge: 36px;
    --_responsive---element-spacing--spacing-normal: 28px;
    --_responsive---element-spacing--spacing-slim: 20px;
    --_responsive---border-radius--radius-large: 16px;
    --_responsive---element-spacing--spacing-xxxlarge: 40px;
    --_responsive---34-px\<deleted\|variable-7e30a8d3-7687-4a52-d404-74d261b5dc62\>: 34px;
    --_responsive---element-spacing--spacing-medium: 20px;
    --_responsive---element-spacing--spacing-regular: 24px;
    --_responsive---element-spacing--spacing-xsmall: 12px;
    --_responsive---14-px\<deleted\|variable-6e27546b-22fd-9515-9505-a788ebe0bc82\>: 14px;
    --_responsive---margin--margin-60-px\<deleted\|variable-81f6ae22-b512-06c2-5961-4d195e4def69\>: 50px;
    --_responsive---10-px\<deleted\|variable-7cc3a4c8-b72f-1d6a-a3c6-33f67efa54a1\>: 10px;
    --_responsive---element-spacing--spacing-big: 44px;
    --_responsive---section-padding--banner-padding: 120px;
    --_responsive---section-padding--medium: 80px;
    --_responsive---section-padding--large: 100px;
    --_responsive---border-radius--radius-round: 50%;
    --_responsive---border-radius--radius-xxlarge: 24px;
    --_responsive---border-radius--radius-xxxlarge: 24px;
    --_responsive---border-radius--radius-jumbo: 40px;
    --_responsive---border-radius--radius-regular: 12px;
    --_responsive---border-radius--radius-xlarge: 16px;
    --_responsive---section-padding--xlarge: 100px;
    --_responsive---border-radius--radius-xsmall: 8px;
    --_responsive---border-radius--radius-small: 8px;
    --_responsive---section-padding--default: 60px;
    --_responsive---element-spacing--spacing-tiny: 4px;
    --_responsive---element-spacing--spacing-xxsmall: 8px;
    --_responsive---element-spacing--spacing-small: 16px;
    --_responsive---element-spacing--spacing-medium-rare: 24px;
    --_responsive---element-spacing--spacing-large: 32px;
    --_responsive---element-spacing--spacing-xxlarge: 40px;
    --_responsive---element-spacing--spacing-xbig: 48px;
    --_responsive---element-spacing--spacing-xxbig: 48px;
    --_responsive---element-spacing--spacing-xxxbig: 52px;
    --_responsive---element-spacing--spacing-jumbo: 52px;
    --_responsive---element-spacing--spacing-xjumbo: 52px;
    --_responsive---element-spacing--spacing-xxjumbo: 52px;
    --_responsive---element-spacing--spacing-giant: 60px;
    --_responsive---element-spacing--spacing-immense: 60px;
    --_responsive---element-spacing--spacing-colossal: 80px;
    --_responsive---border-radius--radius-tiny: 4px;
    --_responsive---border-radius--radius-xxsmall: 6px;
    --_responsive---border-radius--radius-medium: 8px;
    --_responsive---border-radius--radius-circle: 100%;
    --_typography---font-family--secondary-font: Poppins, sans-serif;
    --_typography---text-default--font-size: 16px;
    --_typography---text-medium--line-height: 1.2em;
    --_typography---font-weight--semi-bold: 600;
    --_typography---text-default--letter-spacing: var(--_typography---letter-spacing--medium);
    --_typography---font-family--primary-font: "Archivo Expanded", "Arial Black", Arial, sans-serif;
    --_typography---h1--font-size: 52px;
    --_typography---h1--line-height: 1.12em;
    --_typography---h1--font-weight: var(--_typography---font-weight--black);
    --_typography---h1--letter-spacing: var(--_typography---letter-spacing--xx-large);
    --_typography---h2--font-size: 48px;
    --_typography---h2--line-height: .92em;
    --_typography---h2--font-weight: var(--_typography---font-weight--black);
    --_typography---h2--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---h3--font-size: 36px;
    --_typography---h3--line-height: 1.12em;
    --_typography---h3--font-weight: var(--_typography---font-weight--black);
    --_typography---h3--letter-spacing: var(--_typography---letter-spacing--xx-large);
    --_typography---h4--font-size: 24px;
    --_typography---h4--line-height: 1.2em;
    --_typography---h4--font-weight: var(--_typography---font-weight--black);
    --_typography---h4--letter-spacing: var(--_typography---letter-spacing--xx-large);
    --_typography---h5--font-size: 20px;
    --_typography---h5--line-height: 1.5em;
    --_typography---h5--font-weight: var(--_typography---font-weight--black);
    --_typography---h5--letter-spacing: var(--_typography---letter-spacing--medium);
    --_typography---h6--font-size: 20px;
    --_typography---h6--line-height: 1.2em;
    --_typography---h6--font-weight: var(--_typography---font-weight--bold);
    --_typography---h6--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---text-medium--letter-spacing: var(--_typography---letter-spacing--medium);
    --_typography---text-medium--font-size: 18px;
    --_typography---font-weight--medium: 500;
    --_typography---text-default--line-height: 1.4em;
    --_typography---font-weight--regular: 400;
    --_typography---text-small--font-size: 14px;
    --_typography---text-small--line-height: 1.4em;
    --_typography---text-large--font-size: 24px;
    --_typography---text-large--line-height: 1.33em;
    --_typography---text-large--font-weight: var(--_typography---font-weight--semi-bold);
    --_typography---text-large--letter-spacing: var(--_typography---letter-spacing--xx-large);
    --_typography---display-02--font-size: 78px;
    --_typography---display-02--line-height: 1.2em;
    --_typography---display-02--font-weight: var(--_typography---font-weight--bold);
    --_typography---display-02--letter-spacing: var(--_typography---letter-spacing--small);
    --_typography---display-01--font-size: 78px;
    --_typography---display-01--line-height: 1.2em;
    --_typography---display-01--font-weight: var(--_typography---font-weight--bold);
    --_typography---display-01--letter-spacing: var(--_typography---letter-spacing--small);
    --_typography---hero-text: 13.844vw;
    --_typography---text-medium--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-default--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-small--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---text-small--font-weight: var(--_typography---font-weight--medium);
    --_typography---tag--font-size: 16px;
    --_typography---tag--line-height: 1.2em;
    --_typography---tag--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---tag--font-weight: var(--_typography---font-weight--medium);
    --_typography---button-text--font-size: 16px;
    --_typography---button-text--line-height: 1.2em;
    --_typography---button-text--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---button-text--font-weight: var(--_typography---font-weight--medium);
    --_typography---font-weight--light: 300;
    --_typography---font-weight--bold: 700;
    --_typography---font-weight--extra-bold: 800;
    --_typography---font-weight--black: 900;
    --_typography---letter-spacing--none: 0em;
    --_typography---letter-spacing--tiny: .01em;
    --_typography---letter-spacing--small: -.01em;
    --_typography---letter-spacing--default: -.02em;
    --_typography---letter-spacing--medium: -.03em;
    --_typography---letter-spacing--large: -.04em;
    --_typography---letter-spacing--x-large: -.05em;
    --_typography---letter-spacing--xx-large: -.06em;
  }
  .color-wrap, .typography-wrap, .components-wrap {
    flex-flow: column;
  }
  .color-thumbnail {
    height: 150px;
  }
  .button-item-wrap {
    grid-row-gap: var(--_responsive---14-px\<deleted\|variable-6e27546b-22fd-9515-9505-a788ebe0bc82\>);
    flex-flow: wrap;
  }
  .foooter-link-widget-wrap {
    grid-column-gap: var(--_responsive---element-spacing--spacing-regular);
    grid-template-columns: 137px 200px 183px 1.5fr;
  }
  .navbar {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .brand-logo-link {
    max-width: 48px;
  }
  .hamburger-line-middle {
    background-color: var(--color--white);
    border-radius: 16px;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 2px;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
  }
  .hamburger-line-middle:where(.header-v2) {
    background-color: var(--color--dark);
  }
  .hamburger-line-top {
    background-color: var(--color--white);
    border-radius: 16px;
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }
  .hamburger-line-top:where(.header-v2) {
    background-color: var(--color--dark);
  }
  .hamburger-line-bottom {
    background-color: var(--color--white);
    border-radius: 16px;
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }
  .hamburger-line-bottom:where(.header-v2) {
    background-color: var(--color--dark);
  }
  .menu-button {
    padding: 0;
  }
  .menu-button.is-open {
    background-color: #0000;
  }
  .nav-button-wrapper {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    justify-content: flex-end;
    align-items: center;
  }
  .hamburger {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    display: flex;
  }
  .nav-menu {
    background-color: var(--color--dark);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-radius: 8px;
    flex-flow: column;
  }
  .utility-content-wrap {
    grid-row-gap: 32px;
  }
  .animated-logo-wrap {
    max-width: 90px;
    padding: 20px;
  }
  .section-title-block {
    margin-bottom: 60px;
  }
  .work-card-left {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .work-tag {
    padding: 8px 16px;
  }
  .message-section {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .achievement-content-block {
    padding-bottom: 20px;
  }
  .achievement-image-wrap {
    border-radius: 24px;
  }
  .cta-section {
    padding-left: 0;
    padding-right: 0;
  }
  .cta-content-block {
    flex-flow: column;
  }
  .cta-text-block {
    border-radius: 24px;
    width: 100%;
    padding: 32px;
  }
  .cta-image-wrap {
    border-radius: 24px;
    width: 100%;
  }
  .footer {
    padding-bottom: 40px;
  }
  .footer-top-block {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    margin-bottom: 40px;
  }
  .footer-logo-block {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .footer-logo-link {
    max-width: 80px;
  }
  .about-banner-text-block {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  .about-banner-image-wrap {
    border-radius: 24px;
  }
  .banner-description.is-about {
    max-width: none;
  }
  .stats-card {
    border-radius: 24px;
    padding: 32px;
  }
  .creative-content-block {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    padding-top: 40px;
  }
  .creative-text-block {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .testimonial-title {
    margin-bottom: 60px;
  }
  .testimonial-card-block.card-container {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .testimonial-card.card {
    margin-left: 0%;
    margin-right: 0%;
  }
  .testimonial-card-top {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .value-title-block {
    margin-bottom: 60px;
  }
  .value-card-block {
    grid-template-columns: 1.3fr 1fr;
  }
  .value-card {
    min-height: 260px;
  }
  .banner-section.is-service, .banner-section.is-work, .banner-section.is-blog {
    min-height: 560px;
  }
  .work-main-card-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .work-main-card {
    border-radius: 32px;
    padding: 24px;
  }
  .work-main-card.is-odd {
    max-height: 400px;
  }
  .work-main-card-top {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .work-details-title-block {
    margin-bottom: 32px;
  }
  .work-details-left {
    max-width: 148px;
  }
  .step-title-block {
    margin-bottom: 60px;
  }
  .step-card {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .step-card-left {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    padding: 20px;
  }
  .step-card-title-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .award-title-block {
    margin-bottom: 60px;
  }
  .award-card {
    height: 500px;
    padding: 32px;
  }
  .partner-logo-wrap {
    height: 100px;
    padding: 24px;
  }
  .blog-card-block {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    grid-template-columns: 1fr 1fr;
  }
  .blog-card-body {
    grid-row-gap: 8px;
    margin-bottom: 32px;
  }
  .pricing-card {
    padding: 32px;
  }
  .pricing-card-content {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .pricing-card-title-wrap, .price-block {
    grid-row-gap: 12px;
  }
  .pricing-card-list-block {
    grid-row-gap: 16px;
  }
  .pricing-card-list {
    grid-row-gap: 12px;
  }
  .contact-content-block {
    padding: 24px;
  }
  .contact-left {
    padding: 10px;
  }
  .contact-link-block {
    padding: 32px;
  }
  .contact-form-title-block {
    margin-bottom: 60px;
  }
  .contact-field-label {
    margin-bottom: 16px;
  }
  .contact-input-field {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .contact-input-field.text-area {
    height: auto;
  }
  .contact-input-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 32px;
  }
  .div-block {
    margin-bottom: 40px;
  }
  .license-card {
    border-radius: 40px;
    padding: 32px;
  }
  .license-title-block {
    margin-bottom: 40px;
  }
  .changelog-card {
    border-radius: 40px;
    padding: 32px;
  }
  .error-content-block, .blog-details-title-block, .blog-details-info-block {
    margin-bottom: 40px;
  }
  .blog-details-image-wrap {
    border-radius: 40px;
    margin-bottom: 60px;
  }
  .blog-rich-text p {
    margin-bottom: 36px;
  }
  .blog-rich-text h2:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-2) {
    margin-top: 32px;
  }
  .related-blog-title {
    margin-bottom: 40px;
  }
  .service-link {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .service-link-block {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .service-image {
    border-radius: 16px;
    max-width: 170px;
  }
  .tag-text-block {
    margin-left: -30px;
  }
  .nav-link-wrap {
    flex-flow: column;
  }
  .work-button-wrap {
    margin-top: 40px;
  }
  .service-title-block {
    max-width: 300px;
  }}
@media screen and (max-width: 767px) {

  body {
    --_responsive---element-spacing--spacing-zero: 0px;
    --_responsive---padding--padding-124-px\<deleted\|variable-782a0208-0c4c-12ec-f120-df745dc3e1c9\>: 80px;
    --_responsive---element-spacing--spacing-massive: 48px;
    --_responsive---element-spacing--spacing-xlarge: 24px;
    --_responsive---element-spacing--spacing-normal: 24px;
    --_responsive---element-spacing--spacing-slim: 16px;
    --_responsive---border-radius--radius-large: 12px;
    --_responsive---element-spacing--spacing-xxxlarge: 36px;
    --_responsive---34-px\<deleted\|variable-7e30a8d3-7687-4a52-d404-74d261b5dc62\>: 34px;
    --_responsive---element-spacing--spacing-medium: 16px;
    --_responsive---element-spacing--spacing-regular: 20px;
    --_responsive---element-spacing--spacing-xsmall: 12px;
    --_responsive---14-px\<deleted\|variable-6e27546b-22fd-9515-9505-a788ebe0bc82\>: 14px;
    --_responsive---margin--margin-60-px\<deleted\|variable-81f6ae22-b512-06c2-5961-4d195e4def69\>: 40px;
    --_responsive---10-px\<deleted\|variable-7cc3a4c8-b72f-1d6a-a3c6-33f67efa54a1\>: 10px;
    --_responsive---element-spacing--spacing-big: 40px;
    --_responsive---section-padding--banner-padding: 110px;
    --_responsive---section-padding--medium: 60px;
    --_responsive---section-padding--large: 80px;
    --_responsive---border-radius--radius-round: 50%;
    --_responsive---border-radius--radius-xxlarge: 20px;
    --_responsive---border-radius--radius-xxxlarge: 20px;
    --_responsive---border-radius--radius-jumbo: 30px;
    --_responsive---border-radius--radius-regular: 8px;
    --_responsive---border-radius--radius-xlarge: 12px;
    --_responsive---section-padding--xlarge: 80px;
    --_responsive---border-radius--radius-xsmall: 4px;
    --_responsive---border-radius--radius-small: 6px;
    --_responsive---section-padding--default: 60px;
    --_responsive---element-spacing--spacing-tiny: 4px;
    --_responsive---element-spacing--spacing-xxsmall: 8px;
    --_responsive---element-spacing--spacing-small: 12px;
    --_responsive---element-spacing--spacing-medium-rare: 20px;
    --_responsive---element-spacing--spacing-large: 24px;
    --_responsive---element-spacing--spacing-xxlarge: 36px;
    --_responsive---element-spacing--spacing-xbig: 40px;
    --_responsive---element-spacing--spacing-xxbig: 40px;
    --_responsive---element-spacing--spacing-xxxbig: 40px;
    --_responsive---element-spacing--spacing-jumbo: 44px;
    --_responsive---element-spacing--spacing-xjumbo: 44px;
    --_responsive---element-spacing--spacing-xxjumbo: 48px;
    --_responsive---element-spacing--spacing-giant: 48px;
    --_responsive---element-spacing--spacing-immense: 60px;
    --_responsive---element-spacing--spacing-colossal: 60px;
    --_responsive---border-radius--radius-tiny: 4px;
    --_responsive---border-radius--radius-xxsmall: 4px;
    --_responsive---border-radius--radius-medium: 6px;
    --_responsive---border-radius--radius-circle: 100%;
    --_typography---font-family--secondary-font: Poppins, sans-serif;
    --_typography---text-default--font-size: 16px;
    --_typography---text-medium--line-height: 1.2em;
    --_typography---font-weight--semi-bold: 600;
    --_typography---text-default--letter-spacing: var(--_typography---letter-spacing--medium);
    --_typography---font-family--primary-font: "Archivo Expanded", "Arial Black", Arial, sans-serif;
    --_typography---h1--font-size: 48px;
    --_typography---h1--line-height: 1.12em;
    --_typography---h1--font-weight: var(--_typography---font-weight--black);
    --_typography---h1--letter-spacing: var(--_typography---letter-spacing--xx-large);
    --_typography---h2--font-size: 44px;
    --_typography---h2--line-height: .92em;
    --_typography---h2--font-weight: var(--_typography---font-weight--black);
    --_typography---h2--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---h3--font-size: 32px;
    --_typography---h3--line-height: 1.12em;
    --_typography---h3--font-weight: var(--_typography---font-weight--black);
    --_typography---h3--letter-spacing: var(--_typography---letter-spacing--xx-large);
    --_typography---h4--font-size: 22px;
    --_typography---h4--line-height: 1.2em;
    --_typography---h4--font-weight: var(--_typography---font-weight--black);
    --_typography---h4--letter-spacing: var(--_typography---letter-spacing--xx-large);
    --_typography---h5--font-size: 18px;
    --_typography---h5--line-height: 1.5em;
    --_typography---h5--font-weight: var(--_typography---font-weight--black);
    --_typography---h5--letter-spacing: var(--_typography---letter-spacing--medium);
    --_typography---h6--font-size: 18px;
    --_typography---h6--line-height: 1.2em;
    --_typography---h6--font-weight: var(--_typography---font-weight--bold);
    --_typography---h6--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---text-medium--letter-spacing: var(--_typography---letter-spacing--medium);
    --_typography---text-medium--font-size: 16px;
    --_typography---font-weight--medium: 500;
    --_typography---text-default--line-height: 1.4em;
    --_typography---font-weight--regular: 400;
    --_typography---text-small--font-size: 14px;
    --_typography---text-small--line-height: 1.4em;
    --_typography---text-large--font-size: 24px;
    --_typography---text-large--line-height: 1.33em;
    --_typography---text-large--font-weight: var(--_typography---font-weight--semi-bold);
    --_typography---text-large--letter-spacing: var(--_typography---letter-spacing--xx-large);
    --_typography---display-02--font-size: 54px;
    --_typography---display-02--line-height: 1.2em;
    --_typography---display-02--font-weight: var(--_typography---font-weight--bold);
    --_typography---display-02--letter-spacing: var(--_typography---letter-spacing--small);
    --_typography---display-01--font-size: 54px;
    --_typography---display-01--line-height: 1.2em;
    --_typography---display-01--font-weight: var(--_typography---font-weight--bold);
    --_typography---display-01--letter-spacing: var(--_typography---letter-spacing--small);
    --_typography---hero-text: 13.844vw;
    --_typography---text-medium--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-default--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-small--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---text-small--font-weight: var(--_typography---font-weight--medium);
    --_typography---tag--font-size: 16px;
    --_typography---tag--line-height: 1.2em;
    --_typography---tag--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---tag--font-weight: var(--_typography---font-weight--medium);
    --_typography---button-text--font-size: 16px;
    --_typography---button-text--line-height: 1.2em;
    --_typography---button-text--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---button-text--font-weight: var(--_typography---font-weight--medium);
    --_typography---font-weight--light: 300;
    --_typography---font-weight--bold: 700;
    --_typography---font-weight--extra-bold: 800;
    --_typography---font-weight--black: 900;
    --_typography---letter-spacing--none: 0em;
    --_typography---letter-spacing--tiny: .01em;
    --_typography---letter-spacing--small: -.01em;
    --_typography---letter-spacing--default: -.02em;
    --_typography---letter-spacing--medium: -.03em;
    --_typography---letter-spacing--large: -.04em;
    --_typography---letter-spacing--x-large: -.05em;
    --_typography---letter-spacing--xx-large: -.06em;
  }
  .utility-page-content, .container {
    padding-left: 18px;
    padding-right: 18px;
  }
  .color-block-inner-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .color-thumbnail {
    height: 130px;
  }
  .text-block, .button-item-wrap {
    flex-flow: wrap;
  }
  .button {
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .foooter-link-widget-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .footer-link-widget {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
  .footer-link-widget.is-social {
    margin-left: 0;
  }
  .footer-link-list-wrap {
    grid-column-gap: 2px;
    grid-row-gap: 2px;
  }
  .navbar {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .brand-logo-link {
    max-width: 44px;
  }
  .nav-button-wrapper {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
  .hamburger {
    width: 44px;
    height: 44px;
  }
  .utility-content-wrap {
    grid-row-gap: 24px;
  }
  .animated-logo-wrap {
    max-width: 80px;
    padding: 16px;
  }
  .section-title-block, .section-title-block.is-blog {
    margin-bottom: 40px;
  }
  .work-card {
    flex-flow: column;
  }
  .work-card-left {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    aspect-ratio: auto;
    padding: 24px 20px 20px;
  }
  .work-tag {
    padding: 6px 12px;
  }
  .work-card-column {
    height: var(--full-size);
    max-width: 370px;
  }
  .message-section {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .achievement-card.three {
    margin-top: 60px;
    margin-left: 40px;
  }
  .achievement-image-wrap {
    border-radius: 20px;
  }
  .cta-text-block {
    height: var(--full-size);
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    border-radius: 20px;
    padding: 24px;
  }
  .cta-image-wrap {
    height: var(--full-size);
    border-radius: 20px;
  }
  .cta-image {
    object-position: 50% 0%;
  }
  .footer {
    padding-bottom: 32px;
  }
  .footer-top-block {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    margin-bottom: 32px;
  }
  .footer-logo-block {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .footer-logo-link {
    max-width: 70px;
  }
  .achievement-stats-block {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    padding: 32px;
  }
  .achievement-stats-widget {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }
  .about-banner-text-block {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .about-banner-image-wrap {
    border-radius: 20px;
  }
  .about-banner-image-block {
    padding: 18px;
  }
  .stats-content-block {
    grid-template-columns: 1fr;
  }
  .stats-title-wrap {
    padding-bottom: 24px;
  }
  .stats-card {
    border-radius: 20px;
    min-height: 320px;
    padding: 24px;
  }
  .creative-content-block {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .creative-text-block {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .team-section-title {
    margin-bottom: 24px;
  }
  .testimonial-title {
    margin-bottom: 40px;
  }
  .testimonial-card-block.card-container {
    grid-template-columns: 1fr;
  }
  .testimonial-card {
    max-width: none;
    min-height: 350px;
  }
  .testimonial-card.is-highlighted, .testimonial-card.is-highlighted.card {
    max-width: none;
  }
  .testimonial-card.card {
    margin-left: 0%;
  }
  .testimonial-card-top {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .value-title-block {
    margin-bottom: 40px;
    position: sticky;
    top: 40px;
  }
  .value-card-block {
    grid-template-columns: 1.3fr;
  }
  .value-card {
    box-shadow: 0 2px 5px 0 var(--color--aureolin);
    position: sticky;
    top: 180px;
  }
  .banner-section.is-service, .banner-section.is-work, .banner-section.is-blog {
    min-height: 500px;
  }
  .work-main-card-block {
    grid-template-columns: 1fr;
  }
  .work-main-card {
    border-radius: 24px;
    padding: 20px;
  }
  .work-main-card-top {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
  .work-details-content-block {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-flow: column;
  }
  .work-details-left {
    flex-flow: wrap;
    max-width: none;
    position: static;
  }
  .work-details-info-wrap {
    width: auto;
    max-width: var(--full-size);
    flex: 1;
    min-width: 120px;
  }
  .step-title-block {
    margin-bottom: 40px;
  }
  .step-card {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .step-card-left {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    padding: 10px;
  }
  .step-card-title-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
  .award-title-block {
    margin-bottom: 40px;
  }
  .award-card {
    padding: 24px;
  }
  .partner-logo-wrap {
    height: 80px;
    padding: 20px;
  }
  .blog-card-block {
    grid-template-columns: 1fr;
  }
  .blog-card-body {
    grid-row-gap: 6px;
    margin-bottom: 24px;
  }
  .pricing-card {
    padding: 24px;
  }
  .pricing-card-content {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .pricing-card-title-wrap, .price-block {
    grid-row-gap: 8px;
  }
  .pricing-card-list-block {
    grid-row-gap: 12px;
  }
  .pricing-card-list {
    grid-row-gap: 8px;
  }
  .pricing-card-block {
    grid-template-columns: 1fr;
  }
  .contact-content-block {
    flex-flow: column;
  }
  .contact-left, .contact-right {
    max-width: none;
  }
  .contact-form-title-block {
    margin-bottom: 40px;
  }
  .contact-field-label {
    margin-bottom: 12px;
  }
  .contact-input-wrapper {
    grid-row-gap: 24px;
    grid-template-columns: 1fr;
  }
  .div-block {
    margin-bottom: 32px;
  }
  .license-card {
    border-radius: 32px;
    flex-flow: column;
    padding: 24px;
  }
  .license-title-block {
    margin-bottom: 32px;
  }
  .changelog-card {
    border-radius: 32px;
    flex-flow: column;
    padding: 24px;
  }
  .error-content-block, .blog-details-title-block {
    margin-bottom: 32px;
  }
  .blog-details-info-block {
    margin-bottom: 32px;
    display: flex;
  }
  .blog-details-info-wrap {
    flex: 1;
  }
  .blog-details-image-wrap {
    border-radius: 32px;
    margin-bottom: 50px;
  }
  .blog-rich-text p {
    margin-bottom: 32px;
  }
  .blog-rich-text h2:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-2) {
    margin-top: 24px;
    margin-bottom: 34px;
  }
  .related-blog-title {
    margin-bottom: 32px;
  }
  .service-title.gradient {
    display: none;
  }
  .service-link-block {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .service-image-wrap, .service-image-wrap.one {
    justify-content: flex-end;
    align-items: flex-start;
  }
  .service-image {
    max-width: 90px;
    transform: rotate(-10deg)translate(0, -25px);
  }
  .tag-text-block {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .collection-list, .collection-item {
    height: var(--full-size);
  }
  .work-button-wrap {
    margin-top: 24px;
  }}
@media screen and (max-width: 479px) {

  body {
    --_responsive---element-spacing--spacing-zero: 0px;
    --_responsive---padding--padding-124-px\<deleted\|variable-782a0208-0c4c-12ec-f120-df745dc3e1c9\>: 60px;
    --_responsive---element-spacing--spacing-massive: 40px;
    --_responsive---element-spacing--spacing-xlarge: 24px;
    --_responsive---element-spacing--spacing-normal: 24px;
    --_responsive---element-spacing--spacing-slim: 16px;
    --_responsive---border-radius--radius-large: 12px;
    --_responsive---element-spacing--spacing-xxxlarge: 32px;
    --_responsive---34-px\<deleted\|variable-7e30a8d3-7687-4a52-d404-74d261b5dc62\>: 34px;
    --_responsive---element-spacing--spacing-medium: 16px;
    --_responsive---element-spacing--spacing-regular: 20px;
    --_responsive---element-spacing--spacing-xsmall: 12px;
    --_responsive---14-px\<deleted\|variable-6e27546b-22fd-9515-9505-a788ebe0bc82\>: 14px;
    --_responsive---margin--margin-60-px\<deleted\|variable-81f6ae22-b512-06c2-5961-4d195e4def69\>: 30px;
    --_responsive---10-px\<deleted\|variable-7cc3a4c8-b72f-1d6a-a3c6-33f67efa54a1\>: 10px;
    --_responsive---element-spacing--spacing-big: 36px;
    --_responsive---section-padding--banner-padding: 100px;
    --_responsive---section-padding--medium: 50px;
    --_responsive---section-padding--large: 50px;
    --_responsive---border-radius--radius-round: 50%;
    --_responsive---border-radius--radius-xxlarge: 20px;
    --_responsive---border-radius--radius-xxxlarge: 20px;
    --_responsive---border-radius--radius-jumbo: 20px;
    --_responsive---border-radius--radius-regular: 8px;
    --_responsive---border-radius--radius-xlarge: 12px;
    --_responsive---section-padding--xlarge: 60px;
    --_responsive---border-radius--radius-xsmall: 4px;
    --_responsive---border-radius--radius-small: 6px;
    --_responsive---section-padding--default: 50px;
    --_responsive---element-spacing--spacing-tiny: 4px;
    --_responsive---element-spacing--spacing-xxsmall: 8px;
    --_responsive---element-spacing--spacing-small: 12px;
    --_responsive---element-spacing--spacing-medium-rare: 20px;
    --_responsive---element-spacing--spacing-large: 24px;
    --_responsive---element-spacing--spacing-xxlarge: 32px;
    --_responsive---element-spacing--spacing-xbig: 36px;
    --_responsive---element-spacing--spacing-xxbig: 36px;
    --_responsive---element-spacing--spacing-xxxbig: 36px;
    --_responsive---element-spacing--spacing-jumbo: 40px;
    --_responsive---element-spacing--spacing-xjumbo: 40px;
    --_responsive---element-spacing--spacing-xxjumbo: 40px;
    --_responsive---element-spacing--spacing-giant: 40px;
    --_responsive---element-spacing--spacing-immense: 50px;
    --_responsive---element-spacing--spacing-colossal: 60px;
    --_responsive---border-radius--radius-tiny: 4px;
    --_responsive---border-radius--radius-xxsmall: 4px;
    --_responsive---border-radius--radius-medium: 6px;
    --_responsive---border-radius--radius-circle: 100%;
    --_typography---font-family--secondary-font: Poppins, sans-serif;
    --_typography---text-default--font-size: 16px;
    --_typography---text-medium--line-height: 1.2em;
    --_typography---font-weight--semi-bold: 600;
    --_typography---text-default--letter-spacing: var(--_typography---letter-spacing--medium);
    --_typography---font-family--primary-font: "Archivo Expanded", "Arial Black", Arial, sans-serif;
    --_typography---h1--font-size: 40px;
    --_typography---h1--line-height: 1.12em;
    --_typography---h1--font-weight: var(--_typography---font-weight--black);
    --_typography---h1--letter-spacing: var(--_typography---letter-spacing--xx-large);
    --_typography---h2--font-size: 36px;
    --_typography---h2--line-height: .92em;
    --_typography---h2--font-weight: var(--_typography---font-weight--black);
    --_typography---h2--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---h3--font-size: 26px;
    --_typography---h3--line-height: 1.12em;
    --_typography---h3--font-weight: var(--_typography---font-weight--black);
    --_typography---h3--letter-spacing: var(--_typography---letter-spacing--xx-large);
    --_typography---h4--font-size: 22px;
    --_typography---h4--line-height: 1.2em;
    --_typography---h4--font-weight: var(--_typography---font-weight--black);
    --_typography---h4--letter-spacing: var(--_typography---letter-spacing--xx-large);
    --_typography---h5--font-size: 18px;
    --_typography---h5--line-height: 1.5em;
    --_typography---h5--font-weight: var(--_typography---font-weight--black);
    --_typography---h5--letter-spacing: var(--_typography---letter-spacing--medium);
    --_typography---h6--font-size: 16px;
    --_typography---h6--line-height: 1.2em;
    --_typography---h6--font-weight: var(--_typography---font-weight--bold);
    --_typography---h6--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---text-medium--letter-spacing: var(--_typography---letter-spacing--medium);
    --_typography---text-medium--font-size: 16px;
    --_typography---font-weight--medium: 500;
    --_typography---text-default--line-height: 1.4em;
    --_typography---font-weight--regular: 400;
    --_typography---text-small--font-size: 14px;
    --_typography---text-small--line-height: 1.4em;
    --_typography---text-large--font-size: 24px;
    --_typography---text-large--line-height: 1.33em;
    --_typography---text-large--font-weight: var(--_typography---font-weight--semi-bold);
    --_typography---text-large--letter-spacing: var(--_typography---letter-spacing--xx-large);
    --_typography---display-02--font-size: 40px;
    --_typography---display-02--line-height: 1.2em;
    --_typography---display-02--font-weight: var(--_typography---font-weight--bold);
    --_typography---display-02--letter-spacing: var(--_typography---letter-spacing--small);
    --_typography---display-01--font-size: 40px;
    --_typography---display-01--line-height: 1.2em;
    --_typography---display-01--font-weight: var(--_typography---font-weight--bold);
    --_typography---display-01--letter-spacing: var(--_typography---letter-spacing--small);
    --_typography---hero-text: 13.735vw;
    --_typography---text-medium--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-default--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-small--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---text-small--font-weight: var(--_typography---font-weight--medium);
    --_typography---tag--font-size: 16px;
    --_typography---tag--line-height: 1.2em;
    --_typography---tag--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---tag--font-weight: var(--_typography---font-weight--medium);
    --_typography---button-text--font-size: 16px;
    --_typography---button-text--line-height: 1.2em;
    --_typography---button-text--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---button-text--font-weight: var(--_typography---font-weight--medium);
    --_typography---font-weight--light: 300;
    --_typography---font-weight--bold: 700;
    --_typography---font-weight--extra-bold: 800;
    --_typography---font-weight--black: 900;
    --_typography---letter-spacing--none: 0em;
    --_typography---letter-spacing--tiny: .01em;
    --_typography---letter-spacing--small: -.01em;
    --_typography---letter-spacing--default: -.02em;
    --_typography---letter-spacing--medium: -.03em;
    --_typography---letter-spacing--large: -.04em;
    --_typography---letter-spacing--x-large: -.05em;
    --_typography---letter-spacing--xx-large: -.06em;
  }
  .utility-page-content, .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .style-guide-wrap {
    grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
    grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  }
  .color-block-inner-wrap {
    grid-column-gap: var(--_responsive---element-spacing--spacing-normal);
    grid-row-gap: var(--_responsive---element-spacing--spacing-normal);
    grid-template-columns: 1fr;
  }
  .color-thumbnail {
    height: 120px;
  }
  .typography-box-wrap {
    grid-column-gap: var(--_responsive---34-px\<deleted\|variable-7e30a8d3-7687-4a52-d404-74d261b5dc62\>);
    grid-row-gap: var(--_responsive---34-px\<deleted\|variable-7e30a8d3-7687-4a52-d404-74d261b5dc62\>);
  }
  .typography-box-inner-wrap {
    grid-column-gap: var(--_responsive---element-spacing--spacing-regular);
    grid-row-gap: var(--_responsive---element-spacing--spacing-regular);
  }
  .footer-copytight-block {
    margin-top: var(--_responsive---margin--margin-60-px\<deleted\|variable-81f6ae22-b512-06c2-5961-4d195e4def69\>);
    grid-column-gap: var(--_responsive---element-spacing--spacing-slim);
    grid-row-gap: var(--_responsive---10-px\<deleted\|variable-7cc3a4c8-b72f-1d6a-a3c6-33f67efa54a1\>);
    flex-flow: wrap;
    justify-content: center;
  }
  .foooter-link-widget-wrap {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: flex-start;
    display: grid;
  }
  .navbar {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .hamburger {
    width: 40px;
    height: 40px;
  }
  .home-about-image {
    margin-top: -35%;
  }
  .animated-section {
    background-position: 70%;
  }
  .animated-logo-wrap {
    max-width: 70px;
  }
  .work-card {
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .message-section {
    padding: 16px 10px;
  }
  .achievement-section {
    padding: 10px;
  }
  .achievement-card {
    width: var(--full-size);
    max-width: none;
  }
  .achievement-card.three {
    width: var(--full-size);
    max-width: none;
    margin-top: 0;
    margin-left: 0;
  }
  .achievement-card.two {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    max-width: none;
  }
  .achievement-image-wrap {
    border-radius: 16px;
  }
  .achievement-card-block {
    margin-bottom: 32px;
    position: static;
  }
  .achievement-card-row {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    flex-flow: column;
  }
  .cta-text-block {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    border-radius: 16px;
    padding: 16px;
  }
  .cta-image-wrap {
    border-radius: 16px;
  }
  .footer {
    padding-bottom: 24px;
  }
  .footer-logo-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .footer-logo-link {
    max-width: 60px;
  }
  .achievement-stats-block {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    padding: 20px;
  }
  .achievement-stats-widget {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .about-banner-text-block {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .about-banner-image-wrap {
    border-radius: 16px;
  }
  .about-banner-image-block {
    padding: 16px;
  }
  .stats-section {
    overflow: visible;
  }
  .stats-content-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .stats-title-wrap {
    max-width: 370px;
  }
  .stats-card {
    border-radius: 16px;
    min-height: 240px;
    padding: 20px 16px;
    position: sticky;
    top: 40px;
  }
  .creative-content-block {
    padding: 32px 16px 16px;
  }
  .testimonial-section.effect {
    overflow: visible;
  }
  .testimonial-card-block.card-container {
    grid-template-columns: 1fr;
  }
  .testimonial-card {
    padding: 20px;
    position: sticky;
    top: 40px;
  }
  .value-card {
    padding: 20px 16px;
    top: 190px;
  }
  .banner-section.is-service, .banner-section.is-work, .banner-section.is-blog {
    min-height: 440px;
  }
  .work-main-card {
    aspect-ratio: auto;
    min-height: 350px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .step-card {
    flex-flow: column;
    padding: 20px 16px;
  }
  .award-card {
    padding-left: 20px;
    padding-right: 20px;
  }
  .partner-logo-wrap {
    border-radius: 40px;
    height: 50px;
    padding: 10px;
  }
  .blog-card, .pricing-card {
    padding: 16px;
  }
  .pricing-card-content {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .contact-content-block {
    padding: 16px;
  }
  .contact-left {
    padding: 0;
  }
  .contact-link-block {
    padding: 16px;
  }
  .contact-link-widget {
    grid-column-gap: 8px;
  }
  .contact-link-icon-wrap {
    width: 24px;
  }
  .contact-link-icon {
    max-width: 12px;
  }
  .contact-field-label {
    margin-bottom: 10px;
  }
  .contact-input-field {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .contact-input-wrapper {
    grid-row-gap: 20px;
  }
  .license-card {
    border-radius: 20px;
  }
  .changelog-card {
    border-radius: 20px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .blog-details-info-block {
    flex-flow: wrap;
  }
  .blog-details-info-wrap {
    max-width: var(--full-size);
  }
  .blog-details-image-wrap {
    border-radius: 20px;
  }
  .collection-list-wrapper {
    width: var(--full-size);
  }
  .service-link-block {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .service-image {
    border-width: 5px;
    border-radius: 12px;
    max-width: 60px;
  }
  .tag-text-row.left {
    transform: rotate(10deg);
  }
  .tag-text-row.right {
    transform: rotate(-10deg);
  }
  .tag-text-block {
    margin-left: -15px;
  }
  .achievement-title {
    font-size: var(--_typography---h3--font-size);
  }
  .blog-title {
    max-width: none;
  }}

#node-_89b55ce9-5109-f822-7b0c-e334eb14346c-17030648, #node-eb815ee5-a167-fb7c-72a0-a0d515ac51a6-17030648 {
  grid-area: span 1 / span 4 / span 1 / span 4;
}
#node-dcdddadc-0b6b-e9ba-7b13-bfbea135ebc6-17030648 {
  grid-area: span 1 / span 5 / span 1 / span 5;
}
#node-_86f8e20c-c2dc-cd19-2d87-930d4625aae0-17030648 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}
#node-_62132782-d358-5ded-bbba-37ab618b8e47-17030648, #node-a1378fc4-02f0-d447-2239-c07c23b29d16-17030648 {
  grid-area: span 1 / span 4 / span 1 / span 4;
}
#node-_6345c4df-f14c-b75a-649f-0788e5ab531c-17030648 {
  grid-area: span 2 / span 1 / span 2 / span 1;
}
#node-_598917e3-fdb6-ee73-1114-28314b25f38a-17030648, #node-_0be52cc8-62c1-5d53-e788-2a54fadb7ba5-17030648, #node-_81989c55-a9b6-17a5-eb38-639c7edbe98c-17030648, #node-_6f5b3957-4b89-0ba0-7d5f-1e1d73b946c5-17030648 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}
#node-_8ade86a2-3c3a-d9f9-90ee-5eeb7acfc179-17030649, #node-b67fa269-8cef-57ae-55ae-bb576a1ec269-1703064d, #node-_14b6000c-c90c-d50e-de72-3a8a08898432-17030652 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}@media screen and (max-width: 991px) {

  #node-dcdddadc-0b6b-e9ba-7b13-bfbea135ebc6-17030648, #node-_86f8e20c-c2dc-cd19-2d87-930d4625aae0-17030648 {
    grid-area: span 1 / span 4 / span 1 / span 4;
  }
  #node-_82c54d5d-a5e7-19b5-d3bc-dc8d5e834abf-1703064d, #node-_75fce80b-86c7-cbbc-a5ec-881e8c588607-1703064d {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }}
@media screen and (max-width: 767px) {

  #node-f0e0095e-c480-522b-4383-a792e93d5013-e93d5007, #node-_89b55ce9-5109-f822-7b0c-e334eb14346c-17030648, #node-eb815ee5-a167-fb7c-72a0-a0d515ac51a6-17030648, #node-dcdddadc-0b6b-e9ba-7b13-bfbea135ebc6-17030648, #node-_86f8e20c-c2dc-cd19-2d87-930d4625aae0-17030648, #node-_62132782-d358-5ded-bbba-37ab618b8e47-17030648, #node-a1378fc4-02f0-d447-2239-c07c23b29d16-17030648 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
  #node-_6345c4df-f14c-b75a-649f-0788e5ab531c-17030648 {
    grid-area: span 2 / span 1 / span 2 / span 1;
  }
  #node-_82c54d5d-a5e7-19b5-d3bc-dc8d5e834abf-1703064d, #node-_75fce80b-86c7-cbbc-a5ec-881e8c588607-1703064d, #node-b67fa269-8cef-57ae-55ae-bb576a1ec269-1703064d {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }}
@media screen and (max-width: 479px) {

  #node-eb815ee5-a167-fb7c-72a0-a0d515ac51a6-17030648, #node-_8ade86a2-3c3a-d9f9-90ee-5eeb7acfc179-17030649, #node-_14b6000c-c90c-d50e-de72-3a8a08898432-17030652 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }}


/* ======================================================================
   4. Components (hand-written)
   ======================================================================

   Everything Webflow's runtime used to do, done in CSS. Nothing here is
   guessed: every duration, offset, easing and colour is transcribed from the
   export's own IX2 payload (`ix2.json`, 98 events over 33 action lists) and
   IX3 payload (`ix3.json`, 15 interactions over 14 timelines), both decoded
   out of `js/webflow.js` by `dump_ix2.js` / `dump_ix3.js`. The tables in
   `build_ix2_map.py` say which list became which hook; `audit_scrubs.py`
   re-derives the keyframes below from the payload on every build.

   Two easing tables are in play, and they do not agree with each other.

   IX2 names its easings (`outQuart`, `outBack`, `easeInOut`, `ease`) and an
   EMPTY name means LINEAR -- not `ease`, which is the CSS default and which
   an earlier conversion assumed and got wrong.

   IX3 stores an INDEX into a fixed list of GSAP eases, which is in
   `webflow.js` and reads: 0 none, 1 power1.in, 2 power1.out, 3 power1.inOut,
   4 power2.in, 5 power2.out, 6 power2.inOut, 7 power3.in, 8 power3.out, and
   so on in threes. GSAP's `power1` is quadratic, `power2` cubic, `power3`
   quartic -- so index 8 is easeOutQuart and index 7 is easeInQuart, which is
   not what either number looks like it should mean.

       --ease-out-quad   power1.out   IX2 (unnamed)   / IX3 2
       --ease-out-cubic  power2.out   IX3 5
       --ease-out-quart  power3.out   IX2 `outQuart`  / IX3 8
       --ease-in-quart   power3.in    IX3 7
       --ease-in-out     power1.inOut IX2 `easeInOut` / IX3 3
       --ease-out-back   back.out     IX2 `outBack`
       --ease-hero       the hero's own CustomEase, see below
   ---------------------------------------------------------------------- */

:root {
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* The hero wordmark's easing is a Webflow CustomEase, stored as an SVG path
     in a 160x160 box with the Y axis inverted:
         M0,160 C54.4,-89.6 102.4,0 160,0
     Normalising each point to 0..1 and flipping Y gives the control points
     below. It overshoots -- the second Y is 1.56 -- which is why each letter
     of VISONARIA lands slightly past its resting size and settles back. */
  --ease-hero: cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ---- page furniture --------------------------------------------------- */

/* The wrapper add_landmarks introduces. Every page lays its sections out
   from <body> itself, so the wrapper must not become the layout item. */
main {
  display: contents;
}

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

/* Off-screen until focused, then over everything -- including the navbar,
   which is `z-index: 999`. */
.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 10000;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--color--dark);
  color: var(--color--white);
  font-size: 15px;
  text-decoration: none;
  transition: top 0.2s var(--ease-out-quad);
}

.skip-link:focus {
  top: 16px;
}

/* A visible focus ring everywhere. Webflow's own `:focus` styling went with
   its runtime, and several of the controls this build introduces are
   `<button>`s that had none to begin with. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}


/* ======================================================================
   Scroll reveals  --  IX2 presets slideInBottom / slideInTop / shrinkIn /
   growIn, plus a-53, a-73 and a-74
   ======================================================================

   main.js watches every `.reveal` with one IntersectionObserver, adds
   `.is-revealed` when it enters, and swaps that for `.is-shown` on
   `animationend`.

   THE HANDOVER IS WHY EVERY END STATE IS RESTATED ON `.is-shown`.
   `animation-fill-mode: both` pins `transform` and `opacity` forever, which
   freezes anything the element is ALSO hovered or scrubbed on -- so the
   animation has to be taken off once it has played. The moment it is, the
   element falls back to whatever the rules below say, and an end state that
   lived only in the `@keyframes` is undone. On an earlier conversion that
   shipped a hero heading which faded in and then vanished a second later, on
   every page, and a 168/168 pixel-parity sweep could not see it because the
   harness forces reveals visible. `audit_reveals.py` now fails the build if
   any `.is-revealed` selector here has no `.is-shown` partner.

   The rest state is gated on `.js`: with scripting off nothing ever adds
   `.is-revealed`, so an ungated `opacity: 0` is a blank page. */

:where(.js) .reveal {
  opacity: 0;
}

/* ...except the two that do not fade. a-73 and a-74 move and rotate the
   about page's project cards and never touch opacity, so hiding them at rest
   would invent a fade the published site does not have. */
:where(.js) .reveal-from-left,
:where(.js) .reveal-from-right {
  opacity: 1;
}

.reveal.is-revealed {
  animation-duration: 1000ms;
  animation-timing-function: var(--ease-out-quart);
  animation-fill-mode: both;
  animation-delay: var(--reveal-delay, 0ms);
}

/* The end state, restated. `transform: none` rather than a per-class value
   because every one of these animations ends at the identity. */
.reveal.is-shown {
  opacity: 1;
  transform: none;
  filter: none;
}

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

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

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

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

/* a-53 "Fade In 0.2S" -- the only reveal in the payload that blurs, and the
   only one with a delay. 1200ms after 200ms, not the preset's 1000ms. */
.reveal-blur.is-revealed {
  animation-name: reveal-blur;
  animation-duration: 1200ms;
  animation-delay: calc(var(--reveal-delay, 0ms) + 200ms);
}

/* a-73 / a-74 -- 300ms, and linear: the payload leaves the easing empty. */
.reveal-from-right.is-revealed {
  animation-name: reveal-from-right;
  animation-duration: 300ms;
  animation-timing-function: linear;
}

.reveal-from-left.is-revealed {
  animation-name: reveal-from-left;
  animation-duration: 300ms;
  animation-timing-function: linear;
}@keyframes reveal-up {

  from { opacity: 0; transform: translateY(100px); }
  to { opacity: 1; transform: translateY(0); }}
@keyframes reveal-down {

  from { opacity: 0; transform: translateY(-100px); }
  to { opacity: 1; transform: translateY(0); }}
@keyframes reveal-shrink {

  from { opacity: 0; transform: scale(1.25); }
  to { opacity: 1; transform: scale(1); }}
@keyframes reveal-grow {

  from { opacity: 0; transform: scale(0.75); }
  to { opacity: 1; transform: scale(1); }}
@keyframes reveal-blur {

  from { opacity: 0; transform: translateY(50px); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }}
@keyframes reveal-from-right {

  from { transform: translateX(100px) rotate(10deg); }
  to { transform: translateX(0) rotate(0deg); }}
@keyframes reveal-from-left {

  from { transform: translateX(-100px) rotate(-10deg); }
  to { transform: translateX(0) rotate(0deg); }}



/* ======================================================================
   Split text  --  IX3
   ======================================================================

   Four of this template's signature moves split a heading into characters
   and animate them one at a time. main.js does the splitting (see
   `splitChars`), wrapping each character in a `.split-char` inline-block and
   each WORD in a `.split-word` inline-block around them.

   THE WORD WRAPPER IS NOT DECORATION. A bare run of inline-blocks breaks
   between any two of them, so a per-character split lets a line wrap
   mid-word: on an earlier conversion a heading came out reading
   "make rea / l estate ... more rewardi / ng" at 479px, and the pixel-parity
   numbers were clean because the paragraph happened to be the same height.
   Grouping the characters into words and leaving the spaces as text nodes
   keeps the line breaks where the browser would have put them anyway.

   `--i` is the character's index and `--n` the count; main.js sets both, and
   the per-character delay is computed here so the stagger is one line of CSS
   rather than N inline styles. */

.split-word {
  display: inline-block;
  white-space: nowrap;
}

.split-char {
  display: inline-block;
  will-change: transform, opacity;
}

/* `mask: "chars"` in the payload means each character is clipped to its own
   box, so it rises out of nothing rather than sliding over its neighbours.
   Three of the four splits ask for it. */
.split-mask .split-word {
  overflow: hidden;
  /* An inline-block with `overflow: hidden` baselines on its bottom margin
     edge instead of its text baseline, which drops every masked word by its
     own descender depth. Restated explicitly so the line sits where the
     unsplit heading did. */
  vertical-align: bottom;
}

/* Until main.js has split it, a heading that is about to animate is hidden.
   The export does the same thing with
   `html:not(.w-mod-ix3) :is(.heading-01, ...) { visibility: hidden }`, so that
   the un-split text never flashes at its final size before the characters
   take over.

   KEYED ON THE ATTRIBUTE transform ACTUALLY WRITES, and on the class main.js
   actually adds. An earlier draft of this rule read `[data-split-pending]`,
   which nothing anywhere writes -- so it matched no element, every heading on
   every page flashed unsplit before the animation started, and nothing in the
   suite could see it: an attribute selector that matches nothing is valid
   CSS, breaks no layout and fails no audit. `audit_hooks.py` now fails the
   build on any selector in this file keyed on an attribute or a state class
   that neither the markup nor main.js ever produces.

   Gated on `.js` for the same reason the reveals are: with scripting off
   nothing ever adds `.is-split`, and an ungated rule here would hide seven
   headings per page permanently. */
:where(.js) [data-split]:not(.is-split) {
  visibility: hidden;
}

/* ---- t-2e11b4e2: `.heading-01`, on load ------------------------------
   opacity 0 -> 1 and rotationX -80deg -> 0, stagger `amount: 0.8` (the total
   spread, divided between the characters), ease 8 = power3.out. Masked. */
.split-heading .split-char {
  animation: split-heading-in 800ms var(--ease-out-quart) both;
  animation-delay: calc(var(--i) / max(var(--n) - 1, 1) * 800ms);
}@keyframes split-heading-in {

  from { opacity: 0; transform: perspective(600px) rotateX(-80deg); }
  to { opacity: 1; transform: perspective(600px) rotateX(0deg); }}


/* ---- t-abeb3f55: `.banner-description-text`, on load -----------------
   opacity 0 -> 1 and yPercent 100 -> 0, stagger `amount: 0.5`, ease 7 =
   power3.in. Masked. The `to` half is `null` in the payload, which means
   "whatever the element already is" -- the identity. */
.split-lede .split-char {
  animation: split-lede-in 600ms var(--ease-in-quart) both;
  animation-delay: calc(var(--i) / max(var(--n) - 1, 1) * 500ms);
}@keyframes split-lede-in {

  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }}


/* ---- t-2a41017a: `.hero-large-text`, on load, home page only ---------
   opacity 0 -> 1, x 40px -> 0, y 40px -> 0, scale 0.6 -> 1, stagger
   `each: 0.1` (per character, not spread), and the CustomEase above. */
.split-hero .split-char {
  animation: split-hero-in 900ms var(--ease-hero) both;
  animation-delay: calc(var(--i) * 100ms);
}@keyframes split-hero-in {

  from { opacity: 0; transform: translate(40px, 40px) scale(0.6); }
  to { opacity: 1; transform: translate(0, 0) scale(1); }}


/* ---- t-62da4fad: `[data-section-title="animated"]`, on scroll --------
   opacity 0 -> 1, x -10px -> 0, y 30px -> 0, scale 1.2 -> 1, and
   autoAlpha 50% -> 100% (which is opacity again, so the two multiply out to
   the same fade). Stagger `amount: 0.6` FROM RANDOM -- main.js gives each
   character a shuffled `--i` for this one, which is why the order looks
   scattered rather than left-to-right. Ease 3 = power1.inOut.

   Driven by the same observer as the reveals, so it waits for the heading to
   reach the viewport rather than firing at load. */
:where(.js) .split-title .split-char {
  opacity: 0;
}

.split-title.is-revealed .split-char,
.split-title.is-shown .split-char {
  animation: split-title-in 700ms var(--ease-in-out) both;
  animation-delay: calc(var(--i) / max(var(--n) - 1, 1) * 600ms);
}@keyframes split-title-in {

  from { opacity: 0; transform: translate(-10px, 30px) scale(1.2); }
  to { opacity: 1; transform: translate(0, 0) scale(1); }}


/* ---- t-1b6f7f5f: `.footer-link`, on hover ---------------------------
   Each character rolls up 100% of its own height, `stagger: { each: 0.05 }`,
   no easing named. The design already gives `.footer-link` a fixed 30px
   height, so the roll needs no extra clipping of its own -- but the
   characters do, or the outgoing copy is visible above the box. */
.footer-link {
  overflow: hidden;
}

.roll-link .split-char {
  transition: transform 300ms linear;
  transition-delay: calc(var(--i) * 50ms);
}

.roll-link:hover .split-char,
.roll-link:focus-visible .split-char {
  transform: translateY(-100%);
}

/* ---- t-9586323f: `.home-about-text`, scrubbed -----------------------
   The one split that is not a transition at all: the characters go from 30%
   to 100% opacity as the hero section scrolls, `stagger: { each: 0.5 }`, and
   main.js drives `--p` (0..1) from the scroll position. Each character's own
   progress is its index's share of the total, clamped. */
.split-scrub .split-char {
  opacity: clamp(0.3, calc(0.3 + (var(--p, 0) * max(var(--n), 1) - var(--i)) * 0.7), 1);
}


/* ======================================================================
   Navbar
   ====================================================================== */

/* The panel slides down from behind the navbar. Webflow's runtime animated
   `transform: translateY(-<height>px)` -> 0 over 400ms with its
   `data-animation="default"`; the same gesture is a percentage here, which
   needs no measurement. */
@media screen and (max-width: 991px) {
  .navbar .nav-menu {
    transform: translateY(-100%);
    transition: transform 400ms var(--ease-out-quad),
                visibility 0s linear 400ms;
    visibility: hidden;
  }

  .navbar.is-open .nav-menu {
    transform: translateY(0);
    visibility: visible;
    transition: transform 400ms var(--ease-out-quad),
                visibility 0s linear 0s;
  }
}

/* a-71 / a-72 "Nav Menu Open" / "Nav Menu Close". The middle bar's WIDTH
   goes to 0 and the outer two rotate -/+45 degrees while moving +/-8px to
   meet in the middle. 300ms each, no easing named -> linear.

   `width` and not `opacity`, and `translate` before `rotate`: the payload's
   move and rotate are separate actions on the same element and Webflow
   composes them in that order. Reversing them swings the bars around the
   wrong centre. */
.hamburger-line-top,
.hamburger-line-middle,
.hamburger-line-bottom {
  transition: transform 300ms linear, width 300ms linear;
}

.navbar.is-open .hamburger-line-top {
  transform: translateY(8px) rotate(-45deg);
}

.navbar.is-open .hamburger-line-bottom {
  transform: translateY(-8px) rotate(45deg);
}

.navbar.is-open .hamburger-line-middle {
  width: 0;
}


/* ======================================================================
   Buttons  --  IX2 a-6 / a-8 / a-58 / a-59
   ======================================================================

   Every button holds its label twice inside a `.button-text-wrap` the design
   clips to one line (`max-height: 21px; overflow: hidden`). Hovering rolls
   the pair up by 100%, so the second copy takes the first one's place.
   500ms, `ease`. */
[data-roll="button"] .button-text-wrap {
  display: flex;
  flex-direction: column;
}

[data-roll="button"] .button-text {
  transition: transform 500ms ease;
}

[data-roll="button"]:hover .button-text,
[data-roll="button"]:focus-visible .button-text {
  transform: translateY(-100%);
}


/* ======================================================================
   Services  --  IX2 a-62 / a-63 / a-64
   ======================================================================

   Three rows. Each holds a `.solid` and a `.gradient` copy of its number,
   title and description stacked in the same box, and its own photograph in an
   absolutely positioned `.service-image-wrap`. Hovering a row shows that
   row's photograph and its solid label and puts the other two back to their
   gradient outline.

   THE REST STATE IS NOT IN THE DESIGN SHEET, AND ASSUMING IT WAS SHIPPED THE
   SECTION BROKEN. `a-62` carries `useFirstGroupAsInitialState: true`, which
   means Webflow writes its group 0 onto the page AT LOAD rather than on the
   first hover -- and that group is the whole section's resting appearance:
   row one solid with its photograph, rows two and three in outline with
   theirs hidden. The design sheet says nothing about any of it. Reading "the
   sheet already covers this" off the sheet alone left every row solid AND
   every row's photograph visible at once, three pictures stacked down the
   page where there should be one. Nothing but a screenshot could see it: the
   layout is identical either way, because all three images are
   `position: absolute`.

   The payload authors the hover as three lists of nine `opacity` actions
   each, all at 300ms (one is 500ms -- `.service-title.gradient.two`, in every
   one of the three lists, which is a designer changing one field and not the
   other two; it is not reproduced as a separate duration).

   ALL OF IT IS GATED AT 768px, and that gate is load-bearing rather than
   tidy. Below it the design sets `.service-title.gradient { display: none }`,
   so the outline copy does not exist -- and the rest state below hides the
   SOLID copy on rows two and three. Ungated, that would leave two of the
   three services with no visible title at all on every phone. The payload
   gates all six events at `main, medium` for the same reason. */
@media screen and (min-width: 768px) {
  /* THE ROW RESERVES TWO LINES FOR ITS TITLE -- ABOVE 768px ONLY.

     Every row of the services list is 159px tall at 1440px and 150px from
     768 to 991px, because at those widths all three titles wrap to two lines
     in PP Monument Extended Black. Archivo Expanded is 9% narrower (see
     build_fonts.py), so "UI/UX DESIGN" now fits on one -- and the row
     collapsed around a photograph that is a fixed 170x170 box, absolutely
     positioned, and MEANT to stand 11px proud of its row. At 115px it stood
     55px proud and crossed the divider into the row below.

     GATED AT 768px, AND THAT NUMBER IS MEASURED, NOT TIDY. Below it the
     export's own middle row is ONE line too -- 141/106/141 at 767px and
     128/99/128 at 479px -- and the photograph shrinks to 104px and then
     70px, which puts it comfortably INSIDE the row. So there is nothing to
     fix down there, and reserving two lines would make the build taller than
     the source instead. The export was sampled at 768, 820, 900, 960, 991,
     1024 and 1200 to find the boundary; it is exactly the design's own
     breakpoint, which is also where `.service-title.gradient` turns off and
     where the payload gates the hover.

     Expressed in the design's own tokens rather than as 90px, so it follows
     the type between the two breakpoints it covers: `1.12em` resolves
     against the element's own font-size, which is the h3 size for that width.

     Scoped to `.service-title-block` so it reaches the two titles and not the
     two `<p class="service-title ... description">` paragraphs beside them. */
  .service-title-block .service-title {
    min-height: calc(2 * var(--_typography---h3--line-height));
  }

  .service-title,
  .service-image-wrap {
    transition: opacity 300ms linear;
  }

  /* ---- rest: row one is the active one ------------------------------ */
  .service-title.solid.two,
  .service-title.solid.three,
  .service-image-wrap.two,
  .service-image-wrap.three {
    opacity: 0;
  }

  .service-title.gradient.one {
    opacity: 0;
  }

  .service-title.solid.one,
  .service-title.gradient.two,
  .service-title.gradient.three,
  .service-image-wrap.one {
    opacity: 1;
  }

  /* ---- hover: the pointed-at row becomes the active one -------------
     `:has()` is what connects a row to its siblings. Its specificity is its
     argument's, so `.service-link-block:has(...)` scores (0,2,0) and beats
     the rest state above on the same element. */
  .service-link-block:has([data-service-hover]:hover) .service-link:not(:hover) .service-title.solid,
  .service-link-block:has([data-service-hover]:hover) .service-link:not(:hover) .service-image-wrap {
    opacity: 0;
  }

  .service-link-block:has([data-service-hover]:hover) .service-link:not(:hover) .service-title.gradient {
    opacity: 1;
  }

  [data-service-hover]:hover .service-title.solid,
  [data-service-hover]:hover .service-image-wrap {
    opacity: 1;
  }

  [data-service-hover]:hover .service-title.gradient {
    opacity: 0;
  }
}


/* ======================================================================
   Tag marquee  --  IX2 a-66
   ======================================================================

   `.tag-text-wrap` travels x 0 -> -100% over FIFTY SECONDS and group 1 snaps
   it back to 0 in 0ms, which is Webflow's way of writing an infinite loop.
   Two rails per row, each holding two copies of the phrase, so the pair is
   seamless: the second is exactly where the first started.

   The direction is the DESIGN's, not the payload's -- `.tag-text-row.right`
   is laid out `row-reverse` -- so both rails run the same animation. */
[data-marquee="tags"] .tag-text-wrap {
  animation: marquee-tags 50s linear infinite;
}@keyframes marquee-tags {

  from { transform: translateX(0); }
  to { transform: translateX(-100%); }}


/* The row must not shrink its rails to fit; `flex: none` is already on
   `.tag-text-wrap` in the design, and the row itself needs to overflow
   rather than wrap. */
.tag-text-row {
  flex-wrap: nowrap;
}


/* ======================================================================
   Card hovers  --  IX3 t-b77ac391 / t-77eb7c31 / t-69783154 / t-5d9c04a2
   ======================================================================

   Two of the same gesture: the photograph inside a card scales to 1.2 while
   the card is hovered. The work card's pair names ease 8 (power3.out) and
   gives no duration, so it takes GSAP's default 0.5s; the blog card's
   "leave" half names no ease at all and its "enter" half names ease 1
   (power1.in).

   Neither card clips its own image in the design -- `.blog-card-image-wrap`
   does (`overflow: hidden`), and `.work-main-card-image-block` does not, so
   the work card's clip comes from `.work-main-card`'s own `border-radius`
   plus the `overflow: hidden` restated here. Without it the enlarged
   photograph spills over the card's rounded corner. */
.work-main-card-image-block {
  overflow: hidden;
}

.work-main-card-image {
  transition: transform 500ms var(--ease-out-quart);
}

.work-main-card:hover .work-main-card-image,
.work-main-card:focus-visible .work-main-card-image {
  transform: scale(1.2);
}

.blog-card-image {
  transition: transform 500ms var(--ease-out-quad);
}

.blog-card-image-wrap:hover .blog-card-image,
.blog-card-image-wrap:focus-visible .blog-card-image {
  transform: scale(1.2);
}

/* ---- t-6d491108: `.work-main-card` on scroll ------------------------
   opacity 20% -> (its own), yPercent 30% -> (its own), ease 5 =
   power2.out. A reveal in everything but name, so it rides the same
   observer and the same two-class handover as the rest. */
:where(.js) .card-rise {
  opacity: 0.2;
}

.card-rise.is-revealed {
  animation: card-rise 800ms var(--ease-out-cubic) both;
}

.card-rise.is-shown {
  opacity: 1;
  transform: none;
}@keyframes card-rise {

  from { opacity: 0.2; transform: translateY(30%); }
  to { opacity: 1; transform: translateY(0); }}



/* ======================================================================
   Team carousel  --  the slider widget, plus IX2 a-68 / a-69
   ======================================================================

   `data-animation="cross"`, `data-duration="600"`. The slides are stacked
   and cross-faded rather than tracked, so the mask holds one slide's height
   and the rest are absolutely positioned over it.

   NOTE the section carrying this is `<section class="team-section hide">` in
   the export and `.hide` is `display: none`, so none of it renders as
   shipped. Written in full anyway: the markup, five photographs and five
   names are all there, and deleting one class should give a buyer a working
   carousel. */
.slider-mask > .team-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms var(--ease-out-quad);
  pointer-events: none;
}

/* The first slide stays in flow so the mask has a height to hold. */
.slider-mask > .team-slide:first-child {
  position: relative;
}

.slider-mask > .team-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* a-68 "Team Slide In" / a-69 "Team Slide Out". The photograph fades over
   300ms and the name rolls down from -100% over 600ms; the "out" list is the
   same pair in reverse, which is why one rule with two states covers both. */
[data-slide-anim="team"] .team-slide-image {
  opacity: 0;
  transition: opacity 300ms linear;
}

[data-slide-anim="team"] .team-slide-text-wrap {
  transform: translateY(-100%);
  transition: transform 600ms linear;
}

[data-slide-anim="team"].is-active .team-slide-image {
  opacity: 1;
}

[data-slide-anim="team"].is-active .team-slide-text-wrap {
  transform: translateY(0);
}


/* ======================================================================
   Scroll scrubs
   ======================================================================

   Nine sections whose motion is tied to scroll position rather than to time.
   main.js sets `--p` (0 at the section's start, 1 at its end) on the hook
   element and every rule below reads it; nothing here is a transition, so
   scrubbing backwards is exactly as smooth as scrubbing forwards.

   ## The rule that is easy to get wrong, and was got wrong

   **A property holds its FIRST keyframe's value everywhere before that
   keyframe, and its last one everywhere after.** It does NOT rest at the
   identity and animate in from there.

   Webflow makes this visible: IX2 writes the first keyframe of every
   continuous property onto the element INLINE at load, and reading those
   inline values off the running export is how each of the numbers below was
   checked. Six of them were wrong in the first build of this file, and every
   one of the six looked like a section that "shows by default and should
   appear later":

     .cta-text-block        rests at x  +50%,  not 0   (first keyframe is 50%)
     .cta-image-wrap        rests at x  -50%,  not 0
     .cta-animated-text-block  rests at opacity 1, not 0
     .animated-text-wrap    rests at scale 0,   not 1   (first keyframe is 50%)
     .work-card-left.three  rests at y -100%,   not 0   (first keyframe is 55%)
     .award-card.*          the five windows are 0.2 wide, not 0.4

   The helper form below is
       clamp(0, calc((var(--p) - <start>) / (<end> - <start>)), 1)
   which is 0 before <start>, 1 after <end>, and linear between. A property
   whose first keyframe is NOT at the section's start is therefore written as
   `<first value> + segment * <distance>`, never as `segment * <distance>`.

   The percentages in each comment are the payload's own keyframe positions.
   Every rest state below was read off the export with its own runtime
   running, and three mid-scroll positions were sampled to confirm the
   windows. */

/* ---- a-60 "Hero Scrolling" -------------------------------------------
   The home page's whole opening, over six viewport heights of scroll. Three
   sections are stacked in `.hero-sticky` and handed off one to the next:

     15%  the hero wordmark holds at 0vh; `.home-about` starts fading in from
          0 and its text sits 100vh below
     25%  the wordmark leaves upward to -100vh, the about text arrives at 0,
          `.animated-section` waits at 100vh and opacity 0
     30%  `.home-about` is fully in; the four overlay panels sit at 0
     40%  `.animated-section` arrives at 0; overlay panel one leaves upward
     50%  the section is opaque; panel two leaves upward; the wordmark block
          GROWS FROM scale 0 -- it is invisible until here
     60%  panel three leaves DOWNWARD and panel four upward; the block
          reaches scale 1; the large text starts 20vh low
     75%  the large text settles at 0 */
[data-scrub="hero"] {
  --seg-15-25: clamp(0, calc((var(--p, 0) - 0.15) / 0.1), 1);
  --seg-15-30: clamp(0, calc((var(--p, 0) - 0.15) / 0.15), 1);
  --seg-25-40: clamp(0, calc((var(--p, 0) - 0.25) / 0.15), 1);
  --seg-25-50: clamp(0, calc((var(--p, 0) - 0.25) / 0.25), 1);
  --seg-30-40: clamp(0, calc((var(--p, 0) - 0.3) / 0.1), 1);
  --seg-30-50: clamp(0, calc((var(--p, 0) - 0.3) / 0.2), 1);
  --seg-30-60: clamp(0, calc((var(--p, 0) - 0.3) / 0.3), 1);
  --seg-50-60: clamp(0, calc((var(--p, 0) - 0.5) / 0.1), 1);
  --seg-60-75: clamp(0, calc((var(--p, 0) - 0.6) / 0.15), 1);
}

[data-scrub="hero"] .hero-large-text.hero-text {
  transform: translateY(calc(var(--seg-15-25) * -100vh));
}

[data-scrub="hero"] .home-about {
  opacity: var(--seg-15-30);
}

[data-scrub="hero"] .home-about-text {
  transform: translateY(calc((1 - var(--seg-15-25)) * 100vh));
}

[data-scrub="hero"] .animated-section {
  opacity: var(--seg-25-50);
  transform: translateY(calc((1 - var(--seg-25-40)) * 100vh));
}

[data-scrub="hero"] .animated-overlay-part.one {
  transform: translateY(calc(var(--seg-30-40) * -100vh));
}

[data-scrub="hero"] .animated-overlay-part.two {
  transform: translateY(calc(var(--seg-30-50) * -100vh));
}

/* Panel three is the one that goes DOWN. */
[data-scrub="hero"] .animated-overlay-part.three {
  transform: translateY(calc(var(--seg-30-60) * 100vh));
}

[data-scrub="hero"] .animated-overlay-part.four {
  transform: translateY(calc(var(--seg-30-60) * -100vh));
}

/* scale 0 -> 1 between 50% and 60%, and scale 0 BEFORE 50%: the brand
   lockup is not on the page at all until the overlay panels have cleared.
   Measured on the running export, whose rest state is `matrix(0,0,0,0,0,0)`. */
[data-scrub="hero"] .animated-text-wrap {
  transform: scale(var(--seg-50-60));
}

[data-scrub="hero"] .animated-large-text {
  transform: translateY(calc((1 - var(--seg-60-75)) * 20vh));
}

/* ---- a-61 "Work Card Scrolling" --------------------------------------
   Two columns of three cards travelling in opposite directions through a
   sticky viewport.

     25%  five of the six cards at 0 -- `.work-card-left.three` is NOT among
          them, and that is the whole subtlety: its first keyframe is at 55%,
          so it rests at -100% and is already off the top when the section
          starts. The export's inline rest state for it is y = -146.297px,
          which is -100% of its own 146.297px height.
     50%  left one and two at -100%, right one and two at +100%
     55%  left three at -100%, right three at +100%
     75%  left two and three at -200%, right two and three at +200% */
[data-scrub="work-cards"] {
  --seg-25-50: clamp(0, calc((var(--p, 0) - 0.25) / 0.25), 1);
  --seg-25-55: clamp(0, calc((var(--p, 0) - 0.25) / 0.3), 1);
  --seg-55-75: clamp(0, calc((var(--p, 0) - 0.55) / 0.2), 1);
}

[data-scrub="work-cards"] .work-card-left.one {
  transform: translateY(calc(var(--seg-25-50) * -100%));
}

[data-scrub="work-cards"] .work-card-left.two {
  transform: translateY(calc(var(--seg-25-50) * -100% + var(--seg-55-75) * -100%));
}

[data-scrub="work-cards"] .work-card-left.three {
  transform: translateY(calc(-100% + var(--seg-55-75) * -100%));
}

[data-scrub="work-cards"] .work-card-right.one {
  transform: translateY(calc(var(--seg-25-50) * 100%));
}

[data-scrub="work-cards"] .work-card-right.two {
  transform: translateY(calc(var(--seg-25-50) * 100% + var(--seg-55-75) * 100%));
}

[data-scrub="work-cards"] .work-card-right.three {
  transform: translateY(calc(var(--seg-25-55) * 100% + var(--seg-55-75) * 100%));
}

/* ---- a-67 "Achievement Scrolling" ------------------------------------
   One rail, 0% -> -30% over the whole section. Gated at `main, medium,
   small` in the payload -- so it does NOT run below 480px, where the row is
   a column. */
@media screen and (min-width: 480px) {
  [data-scrub="achievement"] .achievement-card-row {
    transform: translateY(calc(var(--p, 0) * -30%));
  }
}

/* ---- a-70 "CTA Scrolling" --------------------------------------------
   The footer call to action, and the section that made this whole rule
   explicit. The black wordmark panel is a `multiply` blend over the
   photograph; it grows fifty times while the two content panels, WHICH START
   PUSHED APART, close over it.

     rest the two panels are already at x +50% and -50% and the wordmark is
          already opaque -- their first keyframes are at 50%, so that is
          where they sit for the whole first half of the section. (Measured:
          the export writes `translateX(335px)` and `translateX(-335px)`
          inline on load, which is +/-50% of each panel's 670px width.)
     25%  wrap at scale 1, x 0
     50%  wrap at scale 50 and x -25%
     70%  the wordmark fades out and both panels arrive at x 0 */
[data-scrub="cta"] {
  --seg-25-50: clamp(0, calc((var(--p, 0) - 0.25) / 0.25), 1);
  --seg-50-70: clamp(0, calc((var(--p, 0) - 0.5) / 0.2), 1);
}

[data-scrub="cta"] .cta-animated-text-wrap {
  transform: translateX(calc(var(--seg-25-50) * -25%))
             scale(calc(1 + var(--seg-25-50) * 49));
}

[data-scrub="cta"] .cta-animated-text-block {
  opacity: calc(1 - var(--seg-50-70));
}

[data-scrub="cta"] .cta-text-block {
  transform: translateX(calc((1 - var(--seg-50-70)) * 50%));
}

[data-scrub="cta"] .cta-image-wrap {
  transform: translateX(calc((1 - var(--seg-50-70)) * -50%));
}

/* ---- IX3 t-64ffc729: `.award-sticky-wrap` (service page) --------------
   Five award cards stacked in a 300vh sticky section, each leaving upward to
   -100vh as the section scrubs.

   THIS ONE HAS ITS OWN SCROLL RANGE. Its ScrollTrigger is
   `start: "top top", end: "bottom center"` -- the scrub begins when the
   section's top reaches the top of the viewport, not the bottom -- so
   main.js measures it differently from every other hook here, keyed on
   `data-scrub-range`.

   Each card's action has no duration, so it takes GSAP's default of 0.5, and
   their timeline positions are 0, 0.5, 1, 1.5 and 2. The timeline is
   therefore 2.5 long and each card owns exactly ONE FIFTH of the scrub:

     card one    0.0 -> 0.2      card four   0.6 -> 0.8
     card two    0.2 -> 0.4      card five   0.8 -> 1.0
     card three  0.4 -> 0.6      the block   0.0 -> 0.8  (duration 2 of 2.5)

   Verified rather than assumed: at scroll progress 0.25 the export has card
   one finished, card two at 0.2489 of its own travel and cards three to five
   untouched; at 0.5, card three is at exactly 0.5 and the block at 0.625,
   which is 0.5/0.8. An earlier draft gave every card a 0.4-wide window and
   the stack came apart.

   The transform order is GSAP's own -- translate, then rotate, then scale --
   which is what the export's matrices decompose to. */
[data-scrub="awards"] {
  --card-1: clamp(0, calc(var(--p, 0) / 0.2), 1);
  --card-2: clamp(0, calc((var(--p, 0) - 0.2) / 0.2), 1);
  --card-3: clamp(0, calc((var(--p, 0) - 0.4) / 0.2), 1);
  --card-4: clamp(0, calc((var(--p, 0) - 0.6) / 0.2), 1);
  --card-5: clamp(0, calc((var(--p, 0) - 0.8) / 0.2), 1);
}

[data-scrub="awards"] .award-card.one {
  transform: translateY(calc(var(--card-1) * -100vh))
             rotate(calc(var(--card-1) * -5deg))
             scale(calc(0.9 + var(--card-1) * 0.1));
}

[data-scrub="awards"] .award-card.two {
  transform: translateY(calc(5vh + var(--card-2) * -105vh))
             rotate(calc(var(--card-2) * 5deg))
             scale(calc(0.85 + var(--card-2) * 0.15));
}

[data-scrub="awards"] .award-card.three {
  transform: translateY(calc(10vh + var(--card-3) * -110vh))
             rotate(calc(var(--card-3) * -7deg))
             scale(calc(0.8 + var(--card-3) * 0.2));
}

[data-scrub="awards"] .award-card.four {
  transform: translateY(calc(15vh + var(--card-4) * -115vh))
             scale(calc(0.75 + var(--card-4) * 0.25));
}

[data-scrub="awards"] .award-card.five {
  transform: translateY(calc(20vh + var(--card-5) * -120vh))
             rotate(calc(var(--card-5) * 8deg))
             scale(calc(0.7 + var(--card-5) * 0.3));
}

[data-scrub="awards"] .award-card-block {
  transform: scale(calc(0.8 + clamp(0, calc(var(--p, 0) / 0.8), 1) * 0.2));
}

/* ---- IX3 t-caf61641: `.step-card` (service page) ---------------------
   Each card shrinks to 0.9 as it leaves. One action, position 0, no duration
   -- so it is the whole timeline and runs over the card's whole scrub. Its
   ScrollTrigger is the ordinary `top bottom` -> `bottom top`. */
[data-scrub="step"] {
  transform: scale(calc(1 - var(--p, 0) * 0.1));
}

/* ---- IX3 t-46e88d82: `.partner-section` (service page) ---------------
   The longest timeline on the site. The title's characters rise from
   yPercent 90 (handled by `.split-scrub-up` below), the logo grid travels
   y 100% -> -100%, and six logo tiles each rotate to their resting angle at
   their own moment.

   The action positions and durations are 0/1, 0.5/5, 1.77/1.21, 2.92/1.21,
   2.92/1.21, 2.98/0.5, 3.7/1.21 and 3.7/1.21, so the timeline ends at
   0.5 + 5 = 5.5 and every window below is that action's span divided by 5.5.

   The DESIGN gives five of the six tiles a base `transform` that already
   includes a rotation, and IX3 REPLACES that rotation rather than adding to
   it -- so each tile's transform is restated here with the scrub's own start
   angle and the design's translate kept. Confirmed against the export's rest
   states: tile one sits at -9deg and tile two at +9deg with y 200px, which
   are the scrub's first keyframes and not the sheet's values. */
[data-scrub="partners"] {
  --logo-block: clamp(0, calc((var(--p, 0) - 0.0909) / 0.9091), 1);
  --logo-1: clamp(0, calc((var(--p, 0) - 0.5418) / 0.0909), 1);
  --logo-2: clamp(0, calc((var(--p, 0) - 0.3218) / 0.22), 1);
  --logo-3: clamp(0, calc((var(--p, 0) - 0.5309) / 0.22), 1);
  --logo-5: clamp(0, calc((var(--p, 0) - 0.6727) / 0.22), 1);
}

[data-scrub="partners"] .partner-logo-block {
  transform: translateY(calc(100% - var(--logo-block) * 200%));
}

/* ta-d4f7fb84: -9deg -> 2deg, position 2.98 of 5.5. */
[data-scrub="partners"] .partner-logo-wrap.one {
  transform: rotate(calc(-9deg + var(--logo-1) * 11deg));
}

/* ta-313743d2: 9deg -> 0deg over 1.21 units from 1.77. The design's own
   translate is kept; only its rotation is replaced. */
[data-scrub="partners"] .partner-logo-wrap.two {
  transform: translate(0, 200px) rotate(calc(9deg - var(--logo-2) * 9deg));
}

/* ta-26182fc9 and ta-c3e7186f: both 9deg -> 0deg, both from 2.92. */
[data-scrub="partners"] .partner-logo-wrap.three,
[data-scrub="partners"] .partner-logo-wrap.four {
  transform: rotate(calc(9deg - var(--logo-3) * 9deg));
}

/* ta-f97a90a4 and ta-6920aef1: 9deg -> 0deg from 3.7. */
[data-scrub="partners"] .partner-logo-wrap.five {
  transform: translate(42px, 200px) rotate(calc(9deg - var(--logo-5) * 9deg));
}

[data-scrub="partners"] .partner-logo-wrap.six {
  transform: rotate(calc(9deg - var(--logo-5) * 9deg));
}

/* ta-823e5d99: the title's characters, yPercent 90 -> 0, `each: 0.3` over a
   1-unit action at position 0 of 5.5 -- so the whole roll is done by 18% of
   the scrub. */
.split-scrub-up .split-char {
  transform: translateY(calc(
      (1 - clamp(0, calc((var(--p, 0) * 5.5 - var(--i) * 0.3) / 1), 1)) * 90%));
}


/* ======================================================================
   Counters
   ======================================================================

   `[data-count]` on the about page's four statistics. The export drove these
   with GSAP and a ScrollTrigger at `top 85%`, formatting with
   `toLocaleString("id-ID")` -- an Indonesian locale on an English template,
   which puts a FULL STOP where a reader of this copy expects a comma. None
   of the four numbers reaches 1,000, so the separator never actually shows;
   main.js uses the document's own locale rather than reproducing the bug.

   Nothing here but the reserved space: a number counting from 0 to 300
   changes width as it goes, and without a floor the sentence beside it moves
   on every frame. */
[data-count] {
  font-variant-numeric: tabular-nums;
}


/* ======================================================================
   Testimonial card spread  --  the export's second inline GSAP script
   ======================================================================

   Desktop only (`min-width: 1024px and (hover: hover)`), on the about page.
   At rest each card is nudged by a small random offset and angle; hovering
   one brings it upright and scaled to 1.1 and pushes its neighbours aside by
   15% of the container's width, angled 10 degrees away and scaled to 0.95.

   The randomness is real -- the export computes it once per load with
   `Math.random()` -- so main.js keeps it, writing the three values as custom
   properties. Everything else is CSS, because a transition does the same job
   as four `gsap.to` calls and survives a page the script never reaches. */
@media screen and (min-width: 1024px) and (hover: hover) {
  [data-card-spread] > [data-card] {
    transform: translate(var(--card-x, 0px), var(--card-y, 0px))
               rotate(var(--card-rot, 0deg))
               scale(var(--card-scale, 1));
    transition: transform 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
    will-change: transform;
  }

  /* The hovered card. 400ms in, 600ms out -- the export uses two durations
     and the shorter one belongs to the hovered state. */
  [data-card-spread] > [data-card]:hover {
    --card-x: 0px;
    --card-y: 0px;
    --card-rot: 0deg;
    --card-scale: 1.1;
    transition-duration: 400ms;
    z-index: 2;
  }

  /* Its neighbours. `--card-push` is -1 for the cards before the hovered one
     and +1 for those after; main.js sets it on hover, because which side a
     card is on is not knowable in CSS. */
  [data-card-spread][data-card-hovered] > [data-card]:not(:hover) {
    --card-x: calc(var(--card-push, 0) * 15%);
    --card-y: 0px;
    --card-rot: calc(var(--card-push, 0) * 10deg);
    --card-scale: 0.95;
    transition-duration: 400ms;
  }
}


/* ======================================================================
   Forms
   ====================================================================== */

/* Webflow swapped these in itself. main.js unhides one of the two. */
[data-demo-form] .form-success[hidden],
[data-demo-form] .form-error[hidden] {
  display: none;
}

[data-demo-form] .form-success,
[data-demo-form] .form-error {
  display: block;
}


/* ======================================================================
   Reduced motion
   ======================================================================

   Everything above is decoration. A visitor who has asked for less of it
   gets the end state immediately: reveals resolved, marquees still, scrubs
   pinned wherever they are, split characters at full opacity. The scrubs
   keep working -- they are driven by scroll position, not by time, and
   freezing them would leave the home page's three stacked sections on top of
   one another. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-revealed,
  .reveal.is-shown,
  .card-rise,
  .card-rise.is-revealed,
  .split-title .split-char,
  .split-heading .split-char,
  .split-lede .split-char,
  .split-hero .split-char {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  [data-marquee="tags"] .tag-text-wrap {
    animation: none;
  }

  .roll-link .split-char,
  [data-roll="button"] .button-text,
  .work-main-card-image,
  .blog-card-image,
  .service-title,
  .service-image-wrap,
  [data-card-spread] > [data-card],
  .slider-mask > .team-slide,
  [data-slide-anim="team"] .team-slide-image,
  [data-slide-anim="team"] .team-slide-text-wrap,
  .navbar .nav-menu,
  .hamburger-line-top,
  .hamburger-line-middle,
  .hamburger-line-bottom {
    transition-duration: 1ms;
  }
}