/* FORMIX - 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  Formix design, including the renamed commerce layout
   4  components -- vanilla replacements for the Webflow runtime,
      its IX2 interactions and its two IX3 split-text timelines

   Fonts: assets/fonts/fonts.css -- Inter Tight, self-hosted woff2.
   The export pulled it from Google at runtime through webfont.js. The
   design's other family is the system stack Arial / Helvetica Neue /
   Helvetica on h3 and h4, which downloads nothing and is untouched.
   No family in this template is licensed and none ships as a binary. */

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

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

.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[data-rt-type="image"] {
  display: table;
}
.richtext figure[data-rt-type="image"] > div {
  display: inline-block;
}
.richtext figure[data-rt-type="image"] > figcaption {
  display: table-caption;
  caption-side: bottom;
}
.richtext figure[data-rt-type="video"] {
  width: 60%;
  height: 0;
}
.richtext figure[data-rt-type="video"] iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.richtext figure[data-rt-type="video"] > div {
  width: 100%;
}

.tabset {
  position: relative;
}
.tabset:before, .tabset:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.tabset:after {
  clear: both;
}
.tabset-menu {
  position: relative;
}
.tabset-link {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  padding: 9px 30px;
  text-align: left;
  cursor: pointer;
  color: #222222;
  background-color: #dddddd;
}
.tabset-link[aria-current="page"], .tabset-link.is-active {
  background-color: #C8C8C8;
}
.tabset-link:focus {
  outline: 0;
}
.tabset-content {
  position: relative;
  display: block;
  overflow: hidden;
}
.tabset-pane {
  position: relative;
  display: none;
}
.tabset-pane.is-active {
  display: block;
}@media screen and (max-width: 479px) {

  .tabset-link {
    display: block;
  }}
@keyframes spin {

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


/* ======================================================================
   2b. Widget geometry, re-keyed on this design's own classes
   ======================================================================

   build_css drops the rules in Webflow's framework sheet that existed only to
   be driven by its runtime -- the nav overlay, the dropdown's open state, the
   slider track, the lightbox. Some of those rules were carrying real LAYOUT,
   and the elements they styled are still on the page under this design's own
   class names, so the layout has to come from somewhere.

   It comes from here, and this file is emitted BETWEEN the framework and the
   design sheets. That position is the whole point: every declaration below
   used to lose to the design's own rule at the same specificity by SOURCE
   ORDER, and it still does. Emitting it after the design instead would silently
   invert twenty cascade decisions -- which is what `audit_cascade.py` fails the
   build on.

   The corollary: anything the design does NOT know about -- an open state, a
   reveal, a transform this build invents -- does NOT belong in this file. It
   goes in components.hand.css, after the design. A previous conversion put an
   accordion's collapse here and shipped every FAQ permanently open.

   What is transcribed and what is not was decided by MEASUREMENT, not by
   reading: `audit_dropped.py` lists, for every dropped widget class, the
   properties it declared minus everything the design and these two files
   supply, and every survivor is accounted for in its ACCEPTED table.
   ---------------------------------------------------------------------- */

/* ---- the navbar ------------------------------------------------------ */

/* `.w-nav`. The design supplies the border, the background and the padding;
   the stacking context is what is missing. `background: #dddddd` is NOT
   transcribed -- the design sets `background-color: #0000` at the same
   specificity and would have won anyway.

   `.w-nav:before` / `:after` are not transcribed either, and that is a
   decision rather than an oversight: they are a clearfix (`display: table`),
   and `.navbar` is a block box here, so they contribute nothing. On a FLEX
   parent they would be two real flex items with real height -- which is how
   they cost an earlier conversion its navbar height. */
.navbar {
  position: relative;
  z-index: 1000;
}

/* `.w-nav-menu`. `float: right` is dropped with the float layout it belonged
   to -- the design lays this out with flex -- but the positioning context is
   load-bearing below 992px, where components.hand.css drops the panel out of
   flow underneath the header. */
.nav-menu {
  position: relative;
}

/* `.w-nav-link`. The design already sets `color`, `text-decoration` and
   `padding`, and cancels `margin-left`; what is left is the inline-block box
   the links are laid out as.

   `margin-right: auto` IS transcribed. In a `display: flex` row every item
   carrying it absorbs the free space to its right, and `.nav-link-wrap` is
   exactly that row -- so dropping it would collapse the menu's spacing to the
   24px gap alone. It is not scaffolding; it is the layout.

   Its `margin-left: auto` twin is NOT transcribed, and that asymmetry is
   deliberate: the design sets `margin-left: 0` on `.nav-link` explicitly, so
   a line here would be dead weight that reads as though it did something. */
.nav-link {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin-right: auto;
  text-align: left;
}

/* `.w-nav-button`, on an element this build retags from <div> to <button>.
   Two jobs at once:

   1. the framework's own geometry -- `display: none` above 991px is what
      hides the hamburger on desktop, and components.hand.css turns it back on
      below;
   2. undoing the UA's form-control reset. A <button> gets the browser's own
      font, border, background and padding, and `font: inherit` does NOT bring
      back the inherited `letter-spacing`, `word-spacing` or `text-transform`
      that a <div> had -- those are reset separately and have to be restored by
      name. */
.menu-button {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: none;
  margin: 0;
  padding: 18px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  font-size: 24px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

/* ---- the FAQ accordion ---------------------------------------------- */

/* `.w-dropdown`. The design cancels `display: inline-block` and
   `position: relative` outright (`display: flex; position: static`), so only
   the stacking order and the text direction are left. */
.accordion {
  z-index: 900;
  text-align: left;
}

/* `.w-dropdown-toggle` plus the shared `.w-dropdown-btn, .w-dropdown-toggle,
   .w-dropdown-link` rule, on an element this build retags from <div> to
   <button> -- so the same UA reset has to be undone here.

   `white-space: nowrap` is deliberately NOT transcribed. It is the widget's
   assumption that a toggle is a short label on one line, and these toggles
   hold full questions ("What makes Formix different from other design
   agencies?") inside a `justify-content: space-between` flex row. The export
   inherits it and the questions still wrap, because the flex ITEM inside is
   what sets the width -- but transcribing it onto a <button> whose intrinsic
   width the UA computes differently is a risk with nothing to gain.

   `padding` and `padding-right: 40px` are not transcribed either: the design
   sets `padding: 0 0 16px` at the same specificity, later in the sheet. */
.accordion-title-wrap {
  -webkit-appearance: none;
  appearance: none;
  margin-left: auto;
  margin-right: auto;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

/* `.w-dropdown-list`. The design cancels the position (`position: static`)
   and, in the open state, the `#dddddd` background; `min-width: 100%` is
   redundant beside the design's own `width: 100%`.

   That leaves `display: none` -- the CLOSED state, and the single most
   important declaration in this file. It is transcribed here rather than in
   components.hand.css on purpose: the design DOES know about this element and
   sets `position`/`overflow` on it, so the pair have to keep their original
   order. components.hand.css supplies the OPEN state, which the design knows
   nothing about. */
.accordion-description-wrap {
  display: none;
}

/* ---- the testimonial slider ----------------------------------------- */

/* `.w-slider`. The design overrides the width, background, height and
   position; `text-align: center` is the only geometry left, and the slides
   below reset it to `left` exactly as the framework did. */
.testimonial-two-slider {
  text-align: center;
}

/* `.w-slider-mask`. The design gives it `height: auto` and nothing else, so
   the box itself comes from here. `white-space: nowrap` is dropped with the
   inline-block track it existed for: components.hand.css stacks these slides
   in one grid cell to cross-fade them, which is what `data-animation="cross"`
   asks for, so there is no line of inline-blocks to keep from wrapping. */
.testimonial-two-mask {
  position: relative;
  display: block;
  z-index: 1;
  left: 0;
  right: 0;
  overflow: hidden;
}

/* `.w-slide`. The design says nothing at all about this element, so all of it
   is transcribed except the two properties that belonged to the inline-block
   track (`display: inline-block`, `vertical-align: top`) -- see the mask
   above. */
.testimonial-two-slide {
  position: relative;
  width: 100%;
  white-space: normal;
  text-align: left;
}

/* `.w-slider-nav`, plus `.w-round`'s `border-radius: 100%` on the dots it
   holds. The design supplies the strip's own background, size, radius, layout
   AND `position: absolute` -- so what is left is the four OFFSETS and the auto
   margin that actually place it: `top: auto` with `bottom: 0` pins it to the
   bottom of the slider, and `left: 0; right: 0; margin: auto` would centre it
   horizontally if the design did not then override the left margin with its
   own `margin-left: 60px`. Dropping these leaves an absolutely positioned
   element with no offsets at all, which lands at its static position.

   ...and the dots themselves, which the runtime generated and main.js now
   writes into the markup. `.w-slider-dot`'s own geometry comes with them. */
.testimonial-two-slide-nav {
  z-index: 2;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.testimonial-two-slide-nav .slider-dot {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0 3px;
  padding: 0;
  border: 0;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, .4);
  cursor: pointer;
  transition: background-color 100ms, color 100ms;
}

.testimonial-two-slide-nav .slider-dot.is-active {
  background-color: #fff;
}

.testimonial-two-slide-nav .slider-dot:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ---- retags elsewhere in the build ---------------------------------- */

/* Every other <a> or <div> this build turns into a <button> -- the five tab
   sets' links, the lightbox opener, the cart's own controls. Same UA reset,
   same restoration, and `:where()` so this scores ZERO and cannot outrank the
   design rule that was styling the element before the retag. A previous
   conversion wrote this as a plain class list, which out-scored the framework
   class it stood in for and threw a slider arrow across the page. */
:where(button.tabset-link, button.accordion-title-wrap, button.lightbox-open,
       button.cart-open, button.cart-close, button.slider-dot) {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  cursor: pointer;
}

/* ======================================================================
   3. Formix design
   ====================================================================== */
:root {
  --_typography---font-family--global-font: "Inter Tight", sans-serif;
  --_colors---primary-colors--primary: #171b1a;
  --_typography---font-size--paragraphs--text-default: 16px;
  --_typography---line-height--paragraphs--text-default: 1.4em;
  --_typography---font-weight--regular: 400;
  --_typography---font-size--headings--h1: 170px;
  --_typography---line-height--headings--h1: 1em;
  --_typography---letter-spacing--headings--h1: -.02em;
  --_typography---font-size--headings--h2: 92px;
  --_typography---line-height--headings--h2: 1em;
  --_typography---letter-spacing--headings--h2: -.02em;
  --_typography---font-family--heading-font: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --_typography---font-size--headings--h3: 54px;
  --_typography---line-height--headings--h3: 1.2em;
  --_typography---font-weight--medium: 500;
  --_typography---letter-spacing--headings--h3: -.02em;
  --_typography---font-size--headings--h4: 36px;
  --_typography---line-height--headings--h4: 1.2em;
  --_typography---letter-spacing--headings--h4: -.02em;
  --_typography---font-size--headings--h5: 24px;
  --_typography---line-height--headings--h5: 1.3em;
  --_typography---letter-spacing--headings--h5: -.02em;
  --_typography---font-size--headings--h6: 20px;
  --_typography---line-height--headings--h6: 1.2em;
  --_typography---letter-spacing--headings--h6: 0em;
  --font-size--h6-tablet: 20px;
  --font-size--h6-mobile: 20px;
  --line-height--h6: 1.4em;
  --full-size: 100%;
  --container: 1400px;
  --_typography---letter-spacing--paragraphs--text-default: 0em;
  --_typography---font-size--paragraphs--text-small: 14px;
  --_typography---line-height--paragraphs--text-small: 1.4em;
  --_typography---letter-spacing--paragraphs--text-small: 0em;
  --_colors---primary-colors--background: #c1c5c4;
  --_colors---primary-colors--ashy-gray: #2b2f2e;
  --_colors---primary-colors--white: #fff;
  --_colors---primary-colors--silver-gray: #f4f8f7;
  --_spacing---section-padding--padding-xxxlarge: 180px;
  --section-padding--tablet: 80px;
  --section-padding--mobile-portrait: 60px;
  --section-padding--mobile: 40px;
  --colors--primary: #ff464f;
  --_colors---primary-colors--secondary: #cc4101;
  --_colors---primary-colors--pele: #e6eae9;
  --_typography---font-size--paragraphs--text-large: 20px;
  --_typography---line-height--paragraphs--text-large: 1.4em;
  --_typography---letter-spacing--paragraphs--text-large: -.01em;
  --_spacing---section-padding--padding-large: 120px;
  --_colors---primary-colors--dark-gray: #717574;
  --_colors---primary-colors--white-smoke: #f4f8f7;
  --_spacing---section-padding--padding-default: 100px;
  --_spacing---section-padding--padding-small: 80px;
  --_typography---font-size--paragraphs--text-medium: 18px;
  --_typography---line-height--paragraphs--text-medium: 1.4em;
  --_typography---letter-spacing--paragraphs--text-medium: 0em;
  --_spacing---section-padding--padding-xxlarge: 160px;
  --_spacing---section-padding--padding-xlarge: 150px;
  --_colors---primary-colors--transparent: transparent;
  --_typography---font-size--headings--display: 170px;
  --_typography---font-weight--bold: 700;
  --_typography---font-size--buttons--button-large: 20px;
  --_typography---font-size--buttons--button-default: 18px;
  --_typography---font-size--buttons--button-small: 16px;
  --_typography---line-height--headings--display: 1.2em;
  --_typography---line-heightbuttons--button-large: 1em;
  --_typography---line-heightbuttons--button-default: 1em;
  --_typography---line-heightbuttons--button-small: 1em;
  --_typography---letter-spacing--headings--display: 0em;
  --_colors---colors--background--main-background: #fff7e5;
  --_typography---font-weight--semi-bold: 600;
  --_typography---font-weight--light: 300;
}
.wf-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.wf-commerce-commercecartwrapper {
  display: inline-block;
  position: relative;
}
.wf-commerce-commercecartopenlink {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: flex;
}
.wf-commerce-commercecartopenlinkcount {
  color: #3898ec;
  text-align: center;
  background-color: #fff;
  border-radius: 9px;
  min-width: 18px;
  height: 18px;
  margin-left: 8px;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  display: inline-block;
}
.wf-commerce-commercecartcontainerwrapper {
  z-index: 1001;
  background-color: #000c;
  position: fixed;
  inset: 0;
}
.wf-commerce-commercecartcontainerwrapper--cartType-modal {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.wf-commerce-commercecartcontainer {
  background-color: #fff;
  flex-direction: column;
  width: 100%;
  min-width: 320px;
  max-width: 480px;
  display: flex;
  overflow: auto;
  box-shadow: 0 5px 25px #00000040;
}
.wf-commerce-commercecartheader {
  border-bottom: 1px solid #e6e6e6;
  flex: none;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  display: flex;
  position: relative;
}
.wf-commerce-commercecartheading {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}
.wf-commerce-commercecartcloselink {
  width: 16px;
  height: 16px;
}
.wf-commerce-commercecartformwrapper {
  flex-direction: column;
  flex: 1;
  display: flex;
}
.wf-commerce-commercecartform {
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  display: flex;
}
.wf-commerce-commercecartlist {
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: 12px 24px;
  overflow: auto;
}
.wf-commerce-commercecartitem {
  align-items: flex-start;
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
}
.wf-commerce-commercecartitemimage {
  width: 60px;
  height: 0%;
}
.wf-commerce-commercecartiteminfo {
  flex-direction: column;
  flex: 1;
  margin-left: 16px;
  margin-right: 16px;
  display: flex;
}
.wf-commerce-commercecartproductname {
  font-weight: 700;
}
.wf-commerce-commercecartoptionlist {
  margin-bottom: 0;
  padding-left: 0;
  text-decoration: none;
  list-style-type: none;
}
.wf-commerce-commercecartquantity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 60px;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 6px 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecartquantity::placeholder {
  color: #999;
}
.wf-commerce-commercecartquantity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecartfooter {
  border-top: 1px solid #e6e6e6;
  flex-direction: column;
  flex: none;
  padding: 16px 24px 24px;
  display: flex;
}
.wf-commerce-commercecartlineitem {
  flex: none;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  display: flex;
}
.wf-commerce-commercecartordervalue {
  font-weight: 700;
}
.wf-commerce-commercecartcheckoutbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  text-align: center;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 2px;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: block;
}
.wf-commerce-commercecartemptystate {
  flex: 1;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
}
.wf-commerce-commercecarterrorstate {
  background-color: #ffdede;
  flex: none;
  margin: 0 24px 24px;
  padding: 10px;
}
.wf-commerce-commerceaddtocartform {
  margin: 0 0 15px;
}
.wf-commerce-commerceaddtocartoptionpillgroup {
  margin-bottom: 10px;
  display: flex;
}
.wf-commerce-commerceaddtocartoptionpill {
  color: #000;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #000;
  margin-right: 10px;
  padding: 8px 15px;
}
.wf-commerce-commerceaddtocartoptionpill.is-selected {
  color: #fff;
  background-color: #000;
}
.wf-commerce-commerceaddtocartoptionpill.is-disabled {
  color: #666;
  cursor: not-allowed;
  background-color: #e6e6e6;
  border-color: #e6e6e6;
  outline-style: none;
}
.wf-commerce-commerceaddtocartbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: flex;
}
.wf-commerce-commerceaddtocartbutton.is-disabled {
  color: #666;
  cursor: not-allowed;
  background-color: #e6e6e6;
  border-color: #e6e6e6;
  outline-style: none;
}
.wf-commerce-commerceaddtocartoutofstock {
  background-color: #ddd;
  margin-top: 10px;
  padding: 10px;
}
.wf-commerce-commerceaddtocarterror {
  background-color: #ffdede;
  margin-top: 10px;
  padding: 10px;
}
.wf-commerce-commercecheckoutformcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
.wf-commerce-commercelayoutcontainer {
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.wf-commerce-commercelayoutmain {
  flex: 0 800px;
  margin-right: 20px;
}
.wf-commerce-commercecheckoutcustomerinfowrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutblockheader {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 20px;
  display: flex;
}
.wf-commerce-commercecheckoutblockcontent {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 20px;
}
.wf-commerce-commercecheckoutlabel {
  margin-bottom: 8px;
}
.wf-commerce-commercecheckoutemailinput {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutemailinput::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutemailinput:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingaddresswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutshippingfullname {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingfullname::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingfullname:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstreetaddress {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstreetaddress::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstreetaddress:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutrow {
  margin-left: -8px;
  margin-right: -8px;
  display: flex;
}
.wf-commerce-commercecheckoutcolumn {
  flex: 1;
  padding-left: 8px;
  padding-right: 8px;
}
.wf-commerce-commercecheckoutshippingcity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingcity::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingcity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstateprovince {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstateprovince::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstateprovince:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingzippostalcode {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingzippostalcode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingzippostalcode:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingcountryselector {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingcountryselector::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingcountryselector:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingmethodswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutshippingmethodslist {
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}
.wf-commerce-commercecheckoutshippingmethoditem {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  flex-direction: row;
  align-items: baseline;
  margin-bottom: 0;
  padding: 16px;
  font-weight: 400;
  display: flex;
}
.wf-commerce-commercecheckoutshippingmethoddescriptionblock {
  flex-direction: column;
  flex-grow: 1;
  margin-left: 12px;
  margin-right: 12px;
  display: flex;
}
.wf-commerce-commerceboldtextblock {
  font-weight: 700;
}
.wf-commerce-commercecheckoutshippingmethodsemptystate {
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 64px 16px;
}
.wf-commerce-commercecheckoutpaymentinfowrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutcardnumber {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardnumber::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardnumber:focus, .wf-commerce-commercecheckoutcardnumber.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutcardexpirationdate {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardexpirationdate::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardexpirationdate:focus, .wf-commerce-commercecheckoutcardexpirationdate.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutcardsecuritycode {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardsecuritycode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardsecuritycode:focus, .wf-commerce-commercecheckoutcardsecuritycode.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingaddresstogglewrapper {
  flex-direction: row;
  display: flex;
}
.wf-commerce-commercecheckoutbillingaddresstogglecheckbox {
  margin-top: 4px;
}
.wf-commerce-commercecheckoutbillingaddresstogglelabel {
  margin-left: 8px;
  font-weight: 400;
}
.wf-commerce-commercecheckoutbillingaddresswrapper {
  margin-top: 16px;
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutbillingfullname {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingfullname::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingfullname:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstreetaddress {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstreetaddress::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstreetaddress:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingcity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingcity::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingcity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstateprovince {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstateprovince::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstateprovince:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingzippostalcode {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingzippostalcode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingzippostalcode:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingcountryselector {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingcountryselector::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingcountryselector:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutorderitemswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutsummaryblockheader {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 20px;
  display: flex;
}
.wf-commerce-commercecheckoutorderitemslist {
  margin-bottom: -20px;
}
.wf-commerce-commercecheckoutorderitem {
  margin-bottom: 20px;
  display: flex;
}
.wf-commerce-commercecheckoutorderitemdescriptionwrapper {
  flex-grow: 1;
  margin-left: 16px;
  margin-right: 16px;
}
.wf-commerce-commercecheckoutorderitemquantitywrapper {
  white-space: pre-wrap;
  display: flex;
}
.wf-commerce-commercecheckoutorderitemoptionlist {
  margin-bottom: 0;
  padding-left: 0;
  text-decoration: none;
  list-style-type: none;
}
.wf-commerce-commercelayoutsidebar {
  flex: 0 0 320px;
  position: sticky;
  top: 20px;
}
.wf-commerce-commercecheckoutordersummarywrapper {
  margin-bottom: 20px;
}.wf-commerce-commercecheckoutsummarylineitem {
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 8px;
  display: flex;
}

.wf-commerce-commercecheckoutsummarytotal {
  font-weight: 700;
}
.wf-commerce-commercecheckoutplaceorderbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  text-align: center;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 3px;
  align-items: center;
  margin-bottom: 20px;
  padding: 9px 15px;
  text-decoration: none;
  display: block;
}
.wf-commerce-commercecheckouterrorstate {
  background-color: #ffdede;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 10px 16px;
}
.wf-commerce-commercepaypalcheckoutformcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
.wf-commerce-commercecheckoutcustomerinfosummarywrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutsummaryitem, .wf-commerce-commercecheckoutsummarylabel {
  margin-bottom: 8px;
}
.wf-commerce-commercecheckoutsummaryflexboxdiv {
  flex-direction: row;
  justify-content: flex-start;
  display: flex;
}
.wf-commerce-commercecheckoutsummarytextspacingondiv {
  margin-right: .33em;
}
.wf-commerce-commercecheckoutpaymentsummarywrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercepaypalcheckouterrorstate {
  background-color: #ffdede;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 10px 16px;
}
.wf-commerce-commerceorderconfirmationcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
.wf-commerce-commercecheckoutshippingsummarywrapper {
  margin-bottom: 20px;
}@media screen and (max-width: 991px) {

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

  .wf-layout-blockcontainer {
    max-width: none;
  }
  .wf-commerce-commercelayoutcontainer {
    flex-direction: column;
    align-items: stretch;
  }
  .wf-commerce-commercelayoutmain {
    flex-basis: auto;
    margin-right: 0;
  }
  .wf-commerce-commercelayoutsidebar {
    flex-basis: auto;
  }}
@media screen and (max-width: 479px) {

  .wf-commerce-commercecartcontainerwrapper--cartType-modal {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }  .wf-commerce-commercecartquantity, .wf-commerce-commercecheckoutemailinput, .wf-commerce-commercecheckoutshippingfullname, .wf-commerce-commercecheckoutshippingstreetaddress, .wf-commerce-commercecheckoutshippingstreetaddressoptional {
    font-size: 16px;
  }

  .wf-commerce-commercecheckoutrow {
    flex-direction: column;
  }
  .wf-commerce-commercecheckoutshippingcity, .wf-commerce-commercecheckoutshippingstateprovince, .wf-commerce-commercecheckoutshippingzippostalcode, .wf-commerce-commercecheckoutshippingcountryselector, .wf-commerce-commercecheckoutcardnumber, .wf-commerce-commercecheckoutcardexpirationdate, .wf-commerce-commercecheckoutcardsecuritycode, .wf-commerce-commercecheckoutbillingfullname, .wf-commerce-commercecheckoutbillingstreetaddress, .wf-commerce-commercecheckoutbillingstreetaddressoptional, .wf-commerce-commercecheckoutbillingcity, .wf-commerce-commercecheckoutbillingstateprovince, .wf-commerce-commercecheckoutbillingzippostalcode, .wf-commerce-commercecheckoutbillingcountryselector {
    font-size: 16px;
  }}

body {
  font-family: var(--_typography---font-family--global-font);
  color: var(--_colors---primary-colors--primary);
  font-size: var(--_typography---font-size--paragraphs--text-default);
  line-height: var(--_typography---line-height--paragraphs--text-default);
  font-weight: var(--_typography---font-weight--regular);
  --_typography---font-family--global-font: "Inter Tight", sans-serif;
  --_typography---font-size--paragraphs--text-default: 16px;
  --_typography---line-height--paragraphs--text-default: 1.4em;
  --_typography---font-weight--regular: 400;
  --_typography---font-size--headings--h1: 120px;
  --_typography---line-height--headings--h1: 1em;
  --_typography---letter-spacing--headings--h1: -.02em;
  --_typography---font-size--headings--h2: 72px;
  --_typography---line-height--headings--h2: 1em;
  --_typography---letter-spacing--headings--h2: -.02em;
  --_typography---font-family--heading-font: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --_typography---font-size--headings--h3: 44px;
  --_typography---line-height--headings--h3: 1.2em;
  --_typography---font-weight--medium: 500;
  --_typography---letter-spacing--headings--h3: -.02em;
  --_typography---font-size--headings--h4: 32px;
  --_typography---line-height--headings--h4: 1.2em;
  --_typography---letter-spacing--headings--h4: -.02em;
  --_typography---font-size--headings--h5: 24px;
  --_typography---line-height--headings--h5: 1.3em;
  --_typography---letter-spacing--headings--h5: -.02em;
  --_typography---font-size--headings--h6: 20px;
  --_typography---line-height--headings--h6: 1.2em;
  --_typography---letter-spacing--headings--h6: 0em;
  --_typography---letter-spacing--paragraphs--text-default: 0em;
  --_typography---font-size--paragraphs--text-small: 14px;
  --_typography---line-height--paragraphs--text-small: 1.4em;
  --_typography---letter-spacing--paragraphs--text-small: 0em;
  --_typography---font-size--paragraphs--text-large: 20px;
  --_typography---line-height--paragraphs--text-large: 1.4em;
  --_typography---letter-spacing--paragraphs--text-large: -.01em;
  --_typography---font-size--paragraphs--text-medium: 18px;
  --_typography---line-height--paragraphs--text-medium: 1.4em;
  --_typography---letter-spacing--paragraphs--text-medium: 0em;
  --_typography---font-size--headings--display: 170px;
  --_typography---font-weight--bold: 700;
  --_typography---font-size--buttons--button-large: 20px;
  --_typography---font-size--buttons--button-default: 18px;
  --_typography---font-size--buttons--button-small: 16px;
  --_typography---line-height--headings--display: 1.2em;
  --_typography---line-heightbuttons--button-large: 1em;
  --_typography---line-heightbuttons--button-default: 1em;
  --_typography---line-heightbuttons--button-small: 1em;
  --_typography---letter-spacing--headings--display: 0em;
  --_typography---font-weight--semi-bold: 600;
  --_typography---font-weight--light: 300;
  --_spacing---section-padding--padding-xxxlarge: 180px;
  --_spacing---section-padding--padding-large: 120px;
  --_spacing---section-padding--padding-default: 100px;
  --_spacing---section-padding--padding-small: 80px;
  --_spacing---section-padding--padding-xxlarge: 160px;
  --_spacing---section-padding--padding-xlarge: 150px;
  --font-size--h6-tablet: 20px;
  --font-size--h6-mobile: 20px;
  --line-height--h6: 1.4em;
  --full-size: 100%;
  --container: 1400px;
  --section-padding--tablet: 80px;
  --section-padding--mobile-portrait: 60px;
  --section-padding--mobile: 40px;
  --colors--primary: #ff464f;
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  font-size: var(--_typography---font-size--headings--h1);
  line-height: var(--_typography---line-height--headings--h1);
  font-weight: var(--_typography---font-weight--regular);
  letter-spacing: var(--_typography---letter-spacing--headings--h1);
  margin-top: 0;
  margin-bottom: 0;
}
h2:where(:not([class*="heading-scale-"])), :where(.heading-scale-2) {
  font-size: var(--_typography---font-size--headings--h2);
  line-height: var(--_typography---line-height--headings--h2);
  font-weight: var(--_typography---font-weight--regular);
  letter-spacing: var(--_typography---letter-spacing--headings--h2);
  margin-top: 0;
  margin-bottom: 0;
}
h3:where(:not([class*="heading-scale-"])), :where(.heading-scale-3) {
  font-family: var(--_typography---font-family--heading-font);
  font-size: var(--_typography---font-size--headings--h3);
  line-height: var(--_typography---line-height--headings--h3);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---letter-spacing--headings--h3);
  margin-top: 0;
  margin-bottom: 0;
}
h4:where(:not([class*="heading-scale-"])), :where(.heading-scale-4) {
  font-family: var(--_typography---font-family--heading-font);
  font-size: var(--_typography---font-size--headings--h4);
  line-height: var(--_typography---line-height--headings--h4);
  letter-spacing: var(--_typography---letter-spacing--headings--h4);
  margin-top: 0;
  margin-bottom: 0;
}
h5:where(:not([class*="heading-scale-"])), :where(.heading-scale-5) {
  font-size: var(--_typography---font-size--headings--h5);
  line-height: var(--_typography---line-height--headings--h5);
  letter-spacing: var(--_typography---letter-spacing--headings--h5);
  margin-top: 0;
  margin-bottom: 0;
}
h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-6) {
  font-size: var(--_typography---font-size--headings--h6);
  line-height: var(--_typography---line-height--headings--h6);
  letter-spacing: var(--_typography---letter-spacing--headings--h6);
  margin-top: 0;
  margin-bottom: 0;
}
p {
  margin-bottom: 0;
}
ul {
  margin-top: 4px;
  margin-bottom: 10px;
  padding-left: 40px;
}
ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}
li {
  margin-bottom: 0;
}
img {
  width: var(--full-size);
  height: var(--full-size);
  display: inline-block;
}
strong {
  font-weight: bold;
}
blockquote {
  border-left: 5px solid #e2e2e2;
  margin-bottom: 10px;
  padding: 10px 20px;
  font-size: 18px;
  line-height: 22px;
}
.container {
  width: var(--full-size);
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.container.is-footer {
  padding-left: 40px;
  padding-right: 40px;
}
.text-default {
  letter-spacing: var(--_typography---letter-spacing--paragraphs--text-default);
}
.text-default.medium {
  font-weight: var(--_typography---font-weight--medium);
}
.text-small {
  font-size: var(--_typography---font-size--paragraphs--text-small);
  line-height: var(--_typography---line-height--paragraphs--text-small);
  letter-spacing: var(--_typography---letter-spacing--paragraphs--text-small);
}
.footer-main {
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: flex;
}
.testimonial-body-text:where(.testimonial-card-v2) {
  max-width: 389px;
}
.testimonial-info-block {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  display: flex;
}
.testimonial-author-image {
  object-fit: cover;
  border-radius: 10px;
  max-width: 52px;
}
.testimonial-author-image:where(.testimonial-card-v2) {
  border-radius: 50%;
}
.testimonial-designation {
  color: var(--_colors---primary-colors--background);
}
.testimonial-designation:where(.testimonial-card-v2) {
  color: var(--_colors---primary-colors--primary);
}
.testimonial-author-block {
  grid-column-gap: 18px;
  grid-row-gap: 18px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
}
.testimonial-card {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  border: 2px solid var(--_colors---primary-colors--primary);
  background-color: var(--_colors---primary-colors--ashy-gray);
  max-width: 392px;
  min-height: 500px;
  color: var(--_colors---primary-colors--white);
  border-radius: 16px;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 32px;
  display: flex;
}
.testimonial-card:where(.testimonial-card-v2) {
  height: var(--full-size);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  background-color: var(--_colors---primary-colors--silver-gray);
  max-width: 555px;
  min-height: 440px;
  color: var(--_colors---primary-colors--primary);
  border-style: none;
  border-radius: 0;
  padding: 40px;
}
.error-section {
  min-height: 100vh;
  padding-top: var(--_spacing---section-padding--padding-xxxlarge);
  padding-bottom: var(--_spacing---section-padding--padding-xxxlarge);
  background-color: var(--_colors---primary-colors--primary);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.error-image {
  grid-column-gap: 45px;
  grid-row-gap: 45px;
  object-fit: cover;
  max-width: 200px;
}
.error-content-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.error-title-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  color: var(--_colors---primary-colors--background);
  flex-flow: column;
  display: flex;
}
.error-content-wrap {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  text-align: center;
  flex-flow: column;
  max-width: 725px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.badge-horizontal-line {
  border-top: 2px solid var(--colors--primary);
  width: 64px;
  height: 9px;
}
.badge-text {
  text-transform: uppercase;
  line-height: 1.6em;
}
.team-card {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  display: flex;
}
.team-card-image-wrap {
  border-radius: 8px;
  overflow: hidden;
}
.team-card-body {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: row;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}
.team-card-image {
  object-fit: cover;
}
.button-text {
  z-index: 3;
  position: relative;
}
.social-link-list-item {
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 12px;
  transition: all .3s;
  display: flex;
  box-shadow: inset 0 0 0 1px #d0d0d0;
}
.social-link-list-item:hover {
  background-color: #ff510e;
}
.footer-link-widget {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  min-width: 130px;
  display: flex;
}
.footer-link-widget.is-newsletter {
  width: var(--full-size);
  max-width: 440px;
}
.copyright-link {
  color: var(--_colors---primary-colors--secondary);
  text-decoration: none;
  transition: color .4s;
}
.copyright-link:hover {
  color: var(--_colors---primary-colors--white);
}
.footer-link-title {
  color: var(--_colors---primary-colors--background);
}
.footer-content-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  place-items: flex-start stretch;
  display: flex;
}
.footer-content-block {
  z-index: 5;
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  margin-bottom: 60px;
  display: flex;
  position: relative;
}
.footer {
  background-color: var(--_colors---primary-colors--primary);
  padding-top: 60px;
  padding-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.text-dark {
  color: var(--_colors---primary-colors--primary);
}
.copyright-block {
  border-top: 1px solid var(--_colors---primary-colors--ashy-gray);
  color: var(--_colors---primary-colors--background);
  text-align: center;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  display: flex;
}
.accordion-icon {
  width: 24px;
  height: 24px;
}
.accordion-icon.minus {
  position: absolute;
  inset: 0%;
}
.accordion-icon-wrapper {
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  display: flex;
  position: relative;
}
.section-title-block-2 {
  text-align: center;
  margin-bottom: 56px;
}
.footer-link-list {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.footer-link-list-item {
  color: var(--_colors---primary-colors--white);
  text-decoration: none;
  transition: color .3s;
}
.footer-link-list-item:hover {
  color: var(--_colors---primary-colors--secondary);
}
.footer-logo-link {
  max-width: 123px;
}
.sg-content-block {
  grid-column-gap: 120px;
  grid-row-gap: 120px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 1156px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.sg-button-wrap {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.heading-04 {
  font-size: var(--_typography---font-size--headings--h4);
  line-height: var(--_typography---line-height--headings--h4);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---letter-spacing--headings--h4);
}
.heading-04:where(.work-card-v2) {
  color: var(--_colors---primary-colors--primary);
}
.sg-typography-details-wrap {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.sg-typography-text-block {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  border-bottom: 1px solid var(--_colors---primary-colors--pele);
  text-align: left;
  flex-flow: column;
  padding-bottom: 40px;
  display: flex;
}
.sg-content-wrap {
  width: var(--full-size);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  max-width: 740px;
  display: flex;
}
.text-large {
  font-size: var(--_typography---font-size--paragraphs--text-large);
  line-height: var(--_typography---line-height--paragraphs--text-large);
  letter-spacing: var(--_typography---letter-spacing--paragraphs--text-large);
}
.text-large:where(.testimonial-card-v2) {
  font-weight: var(--_typography---font-weight--medium);
}
.style-guide-section {
  padding-top: var(--_spacing---section-padding--padding-large);
  padding-bottom: var(--_spacing---section-padding--padding-large);
}
.sg-typography-details-block {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: wrap;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.sg-content-wrapper {
  width: var(--full-size);
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.heading-01 {
  font-size: var(--_typography---font-size--headings--h1);
  line-height: var(--_typography---line-height--headings--h1);
  letter-spacing: var(--_typography---letter-spacing--headings--h1);
}
.color-widget-thumbnail {
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 178px;
  display: flex;
}
.color-widget-thumbnail.primary {
  background-color: var(--_colors---primary-colors--primary);
}
.color-widget-thumbnail.black-02 {
  background-color: var(--_colors---primary-colors--ashy-gray);
}
.color-widget-thumbnail.dark-gray {
  background-color: var(--_colors---primary-colors--dark-gray);
}
.color-widget-thumbnail.background {
  background-color: var(--_colors---primary-colors--background);
}
.color-widget-thumbnail.pele {
  background-color: var(--_colors---primary-colors--pele);
}
.color-widget-thumbnail.silver-gray {
  background-color: var(--_colors---primary-colors--silver-gray);
}
.color-widget-thumbnail.white-smoke {
  background-color: var(--_colors---primary-colors--white-smoke);
}
.color-widget-thumbnail.white {
  background-color: var(--_colors---primary-colors--white);
  box-shadow: inset 0 0 0 1px #0003;
}
.color-widget-thumbnail.secondary {
  background-color: var(--_colors---primary-colors--secondary);
}
.sg-title-block {
  width: var(--full-size);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  color: #e4e4e4;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  max-width: 300px;
  display: flex;
  position: sticky;
  top: 40px;
}
.sg-color-widget-block {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  text-align: center;
  flex-flow: row;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: flex-start;
  display: grid;
}
.utility-banner {
  padding-top: var(--_spacing---section-padding--padding-default);
  padding-bottom: var(--_spacing---section-padding--padding-default);
  background-color: var(--_colors---primary-colors--primary);
}
.heading-05 {
  font-size: var(--_typography---font-size--headings--h5);
  line-height: var(--_typography---line-height--headings--h5);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---letter-spacing--headings--h5);
}
.heading-05:where(.blog-card-v2) {
  font-size: var(--_typography---font-size--headings--h4);
  line-height: var(--_typography---line-height--headings--h5);
}
.changelog-section {
  padding-top: var(--_spacing---section-padding--padding-small);
  padding-bottom: var(--_spacing---section-padding--padding-small);
  overflow: hidden;
}
.changelog-content-block {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1114px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.changelog-version-wrap {
  grid-column-gap: 18px;
  grid-row-gap: 18px;
  flex-flow: column;
  width: 100%;
  max-width: 1114px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.heading-03 {
  font-size: var(--_typography---font-size--headings--h3);
  line-height: var(--_typography---line-height--headings--h3);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---letter-spacing--headings--h3);
}
.utility-tect-block {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-direction: column;
  display: flex;
}
.sub-title {
  text-transform: uppercase;
}
.heading-6 {
  letter-spacing: -.03em;
  font-size: 94px;
  font-weight: 400;
  line-height: 1.2em;
}
.utility-section {
  padding-top: var(--_spacing---section-padding--padding-default);
  padding-bottom: var(--_spacing---section-padding--padding-default);
}
.navbar {
  border-bottom: 1px solid var(--_colors---primary-colors--ashy-gray);
  background-color: #0000;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-top: 16px;
  padding-bottom: 16px;
}
.nav-link {
  color: var(--_colors---primary-colors--white);
  margin-left: 0;
  padding: 0;
  text-decoration: none;
  transition: all .3s;
}
.nav-link:hover, .nav-link[aria-current="page"], .nav-link.is-active {
  color: var(--_colors---primary-colors--secondary);
}
.nav-link.show-phone {
  display: none;
}
.nav-button-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  display: flex;
}
.brand-logo-link {
  width: var(--full-size);
  color: #fff;
  justify-content: center;
  align-items: center;
  max-width: 83px;
  display: flex;
}
.header-section {
  z-index: 2147483647;
  background-color: var(--_colors---primary-colors--primary);
}
.nav-link-wrap {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.button-3 {
  z-index: 1;
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  background-color: #000;
  border-color: #0000;
  justify-content: center;
  align-items: center;
  padding: 18px 30px;
  font-weight: 500;
  text-decoration: none;
  transition: all .7s;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}
.button-3:hover {
  box-shadow: none;
  color: #002c15;
  background-color: #e3e9e4;
}
.button-3:active {
  background-color: #002c15;
}
.button-3:focus {
  outline-offset: 2px;
  outline: 2px solid #3b82f6;
}
.button-3:disabled {
  opacity: .5;
  pointer-events: none;
  cursor: not-allowed;
}
.nav-button-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex: none;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}
.nav-content-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  display: grid;
}
.nav-menu {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  text-align: center;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.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;
}
.utility-text-wrap {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  border-top: 1px solid var(--_colors---primary-colors--pele);
  border-bottom: 1px solid var(--_colors---primary-colors--pele);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-top: 24px;
  padding-bottom: 24px;
  text-decoration: none;
  display: flex;
}
.utility-content-wrap {
  grid-row-gap: 44px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}
.terms-link {
  border-bottom: 1px solid var(--_colors---primary-colors--primary);
  color: var(--_colors---primary-colors--primary);
  font-weight: var(--_typography---font-weight--medium);
  text-decoration: none;
  transition: all .3s;
}
.terms-link:hover {
  border-bottom-color: var(--_colors---primary-colors--secondary);
}
.button-primary {
  z-index: 1;
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  background-color: var(--_colors---primary-colors--ashy-gray);
  color: var(--_colors---primary-colors--white);
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  text-decoration: none;
  transition: all .5s;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}
.button-primary:where(.button-white) {
  background-color: var(--_colors---primary-colors--white);
  color: var(--_colors---primary-colors--primary);
}
.button-primary:where(.button-black) {
  background-color: var(--_colors---primary-colors--pele);
  color: var(--_colors---primary-colors--primary);
}
.button-primary:hover {
  background-color: var(--_colors---primary-colors--secondary);
}
.button-primary:hover:where(.button-black), .button-primary:hover:where(.button-white) {
  color: var(--_colors---primary-colors--white);
}
.utility-page-wrap {
  background-color: var(--_colors---primary-colors--primary);
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}
.utility-page-content {
  text-align: center;
  flex-direction: column;
  display: flex;
}
.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
}
.text-medium {
  font-size: var(--_typography---font-size--paragraphs--text-medium);
  line-height: var(--_typography---line-height--paragraphs--text-medium);
  letter-spacing: var(--_typography---letter-spacing--paragraphs--text-medium);
}
.heading-06 {
  font-size: var(--_typography---font-size--headings--h6);
  line-height: var(--_typography---line-height--headings--h6);
  letter-spacing: var(--_typography---letter-spacing--headings--h6);
}
.heading-02 {
  font-size: var(--_typography---font-size--headings--h2);
  line-height: var(--_typography---line-height--headings--h2);
  letter-spacing: var(--_typography---letter-spacing--headings--h2);
}
.hero-section {
  height: auto;
}
.hero-content-block {
  margin-bottom: var(--_spacing---section-padding--padding-default);
  padding-top: var(--_spacing---section-padding--padding-xxxlarge);
  position: relative;
}
.hero-title-wrap {
  color: var(--_colors---primary-colors--white);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 90px;
}
.hero-top {
  z-index: 5;
  color: var(--_colors---primary-colors--background);
  justify-content: space-between;
  align-items: center;
  margin-bottom: -25px;
  display: flex;
  position: relative;
}
.hero-bottom-text {
  max-width: 365px;
  color: var(--_colors---primary-colors--background);
}
.hero-bottom {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  border-bottom: 1px solid var(--_colors---primary-colors--ashy-gray);
  justify-content: space-between;
  padding-bottom: 22px;
  display: flex;
}
.button-dot {
  aspect-ratio: 1;
  background-color: var(--_colors---primary-colors--secondary);
  border-radius: 50%;
  width: 8px;
}
.button-dot.is-contact {
  background-color: var(--_colors---primary-colors--white);
}
.hero-image {
  width: var(--full-size);
  object-fit: cover;
  max-width: 300px;
}
.hero-title-block {
  position: relative;
}
.story-section {
  padding-top: var(--_spacing---section-padding--padding-small);
  padding-bottom: var(--_spacing---section-padding--padding-small);
}
.story-widget-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.story-descritpion-wrap {
  max-width: 880px;
}
.story-top {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  display: flex;
}
.story-title-wrap {
  max-width: 276px;
}
.story-widget {
  grid-row-gap: 30px;
  opacity: .3;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}
.story-widget:hover {
  opacity: 1;
}
.story-widget-title {
  grid-row-gap: 8px;
  border-bottom: 1px solid var(--_colors---primary-colors--dark-gray);
  width: 100%;
  color: var(--_colors---primary-colors--primary);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-bottom: 8px;
  display: flex;
  position: relative;
}
.story-widget-body {
  grid-row-gap: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}
.story-content-block {
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  flex-flow: column;
  display: flex;
}
.home-about-section {
  height: 300vh;
}
.home-about-sticky {
  z-index: 1;
  flex-flow: column;
  justify-content: space-between;
  height: 100vh;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}
.home-about-background {
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}
.home-about-image {
  object-fit: cover;
}
.home-about-bottom {
  z-index: 2;
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  border-top: 1px solid var(--_colors---primary-colors--white);
  color: var(--_colors---primary-colors--white);
  justify-content: space-between;
  margin-top: auto;
  padding-top: 24px;
  padding-bottom: 100px;
  display: flex;
  position: relative;
}
.home-about-title {
  max-width: 430px;
}
.home-about-description {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 460px;
  display: flex;
}
.home-about-overlay {
  background-color: #00000080;
  position: absolute;
  inset: 0%;
}
.about-decorative-title {
  font-size: var(--_typography---font-size--headings--h2);
  line-height: var(--_typography---line-height--headings--h2);
  letter-spacing: var(--_typography---letter-spacing--headings--h2);
  flex: none;
}
.home-about-decorative-text {
  z-index: -1;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}
.work-section {
  padding-top: var(--_spacing---section-padding--padding-large);
  padding-bottom: var(--_spacing---section-padding--padding-large);
}
.work-section-title {
  justify-content: center;
  align-items: center;
  margin-bottom: 60px;
  display: flex;
  position: sticky;
  top: 20px;
}
.work-card {
  width: var(--full-size);
  border-radius: 30px;
  min-height: 698px;
  padding: 50px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.work-card:where(.work-card-v2) {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  border-radius: 0;
  flex-flow: column;
  min-height: auto;
  padding: 0;
  display: flex;
}
.work-text-block {
  z-index: 2;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  color: var(--_colors---primary-colors--white);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
}
.work-text-block:where(.work-card-v2) {
  order: 9999;
  position: static;
}
.work-card-image-wrap {
  background-image: linear-gradient(#000, #000);
  position: absolute;
  inset: 0%;
}
.work-card-image-wrap:where(.work-card-v2) {
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}
.work-card-image {
  object-fit: cover;
}
.work-card-button-wrapper {
  background-image: linear-gradient(#00000080, #00000080);
  justify-content: center;
  align-items: center;
  position: absolute;
  inset: 0%;
}
.work-card-button-wrapper:where(.work-card-v2) {
  background-image: linear-gradient(#00000080, #00000080);
}
.work-card-button {
  z-index: 5;
  grid-column-gap: 12px;
  background-color: var(--_colors---primary-colors--white);
  width: 100px;
  height: 100px;
  color: var(--_colors---primary-colors--primary);
  cursor: pointer;
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  text-decoration: none;
  transition: all .3s;
  display: flex;
  position: relative;
}
.work-card-button:hover {
  background-color: var(--_colors---primary-colors--secondary);
  color: var(--_colors---primary-colors--white);
}
.work-card-button-wrap {
  width: var(--full-size);
  height: var(--full-size);
  justify-content: center;
  align-items: center;
  display: flex;
}
.work-card-wrap.one {
  position: sticky;
  top: 40px;
}
.work-card-wrap.two {
  position: sticky;
  top: 120px;
}
.service-section {
  padding-top: var(--_spacing---section-padding--padding-small);
  padding-bottom: var(--_spacing---section-padding--padding-small);
  background-color: var(--_colors---primary-colors--primary);
}
.service-section-title {
  max-width: 340px;
  color: var(--_colors---primary-colors--white);
  margin-bottom: 80px;
}
.service-widget {
  border-top: 0px solid var(--_colors---primary-colors--ashy-gray);
  border-bottom: 1px solid var(--_colors---primary-colors--ashy-gray);
  width: 100%;
  color: var(--_colors---primary-colors--white);
  padding-top: 40px;
  padding-bottom: 40px;
  text-decoration: none;
}
.service-widget-inner {
  grid-column-gap: 158px;
  grid-row-gap: 158px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-end;
  max-width: 1130px;
  display: flex;
}
.service-widget-title {
  width: var(--full-size);
  grid-column-gap: 131px;
  grid-row-gap: 131px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}
.service-tag-wrapper {
  grid-column-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.service-tag-wrap {
  grid-column-gap: 10px;
  background-color: var(--_colors---primary-colors--ashy-gray);
  border-radius: 8px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  text-decoration: none;
  display: flex;
}
.service-widget-description-block {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 325px;
  display: flex;
}
.service-widget-image-block {
  overflow: hidden;
}
.service-widget-image {
  object-fit: cover;
  max-height: 183px;
}
.service-widget-description {
  color: var(--_colors---primary-colors--dark-gray);
  padding-top: 16px;
  padding-bottom: 16px;
}
.client-section {
  padding-top: var(--_spacing---section-padding--padding-default);
  padding-bottom: var(--_spacing---section-padding--padding-xxlarge);
}
.client-content-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}
.client-widget-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: grid;
}
.client-widget {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  border-top: 1px solid var(--_colors---primary-colors--primary);
  width: 100%;
  color: var(--_colors---primary-colors--dark-gray);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 24px;
  display: flex;
}
.client-logo {
  object-fit: cover;
  width: auto;
  overflow: hidden;
}
.image {
  max-width: 18px;
}
.client-title {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.testimonial-section {
  background-color: var(--_colors---primary-colors--primary);
  height: 400vh;
}
.testimonial-sticky {
  height: 100vh;
  padding-top: var(--_spacing---section-padding--padding-xxlarge);
  padding-bottom: var(--_spacing---section-padding--padding-xxlarge);
  justify-content: center;
  align-items: center;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}
.testimonial-title {
  z-index: -1;
  color: var(--_colors---primary-colors--white);
  text-align: center;
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}
.testimonial-card-block {
  display: flex;
}
.testimonial-card-wrap {
  flex: none;
}
.testimonial-card-wrap.one {
  position: relative;
  left: 100px;
}
.testimonial-card-wrap.two {
  position: relative;
  left: -100px;
}
.testimonial-card-wrap.three {
  position: relative;
  left: -200px;
}
.testimonial-card-wrap.four {
  position: relative;
  left: -350px;
}
.testimonial-content-block {
  position: relative;
}
.blog-section {
  padding-top: var(--_spacing---section-padding--padding-xlarge);
  padding-bottom: var(--_spacing---section-padding--padding-xlarge);
}
.section-title-left {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 575px;
  display: flex;
}
.sub-title-wrap {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  border: 1px solid var(--_colors---primary-colors--background);
  border-radius: 8px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  display: flex;
}
.section-title-row {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 80px;
  display: flex;
}
.section-title-row.is-pricing {
  margin-bottom: 30px;
}
.blog-card {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  color: var(--_colors---primary-colors--primary);
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  text-decoration: none;
  display: flex;
}
.blog-card:where(.blog-card-v2) {
  width: var(--full-size);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: row;
  max-width: 1015px;
}
.blog-card-image-wrap {
  aspect-ratio: 1;
  border-radius: 16px;
  transition: all .3s;
  overflow: hidden;
}
.blog-card-image-wrap:where(.blog-card-v2) {
  width: var(--full-size);
  aspect-ratio: auto;
  max-width: 670px;
}
.blog-card-image-wrap:hover {
  border-radius: 200px;
}
.blog-card-body {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.blog-card-body:where(.blog-card-v2) {
  width: var(--full-size);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 300px;
}
.blog-card-info-wrap {
  grid-column-gap: 14px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-card-info-wrap:where(.blog-card-v2) {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.blog-card-block {
  grid-column-gap: 20px;
  grid-row-gap: 30px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.text-black-three {
  color: var(--_colors---primary-colors--dark-gray);
}
.text-black-three.is-main {
  color: var(--_colors---primary-colors--pele);
}
.blog-card-title:hover {
  text-decoration: underline;
}
.pricing-section {
  padding-bottom: var(--_spacing---section-padding--padding-xlarge);
}
.pricing-section.is-main {
  background-color: var(--_colors---primary-colors--primary);
}
.pricing-card {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  background-color: var(--_colors---primary-colors--white);
  border-radius: 16px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  padding: 30px;
  text-decoration: none;
  display: flex;
}
.pricing-card.is-elite {
  background-color: var(--_colors---primary-colors--transparent);
}
.pricing-card.is-main {
  background-color: var(--_colors---primary-colors--primary);
}
.pricing-card-head {
  grid-row-gap: 30px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.pricing-badge {
  grid-column-gap: 10px;
  background-color: var(--_colors---primary-colors--ashy-gray);
  color: var(--_colors---primary-colors--white);
  border-radius: 12px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 6px 12px;
  display: flex;
}
.pricing-badge.is-elite {
  background-color: var(--_colors---primary-colors--secondary);
}
.pricing-description-block {
  grid-row-gap: 22px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 200px;
  display: flex;
}
.pricing-description-block.v2 {
  max-width: 330px;
}
.price-wrap {
  grid-column-gap: 12px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}
.price-wrap.is-main {
  color: var(--_colors---primary-colors--white);
}
.pricing-list-block {
  grid-row-gap: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.pricing-list {
  grid-row-gap: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}
.pricing-list.is-main {
  color: var(--_colors---primary-colors--background);
}
.pricing-list-item {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.pricing-card-button {
  background-color: var(--_colors---primary-colors--ashy-gray);
  min-height: 56px;
  color: var(--_colors---primary-colors--white);
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  padding: 10px 30px;
  text-decoration: none;
  display: flex;
}
.pricing-card-button.v2 {
  background-color: var(--_colors---primary-colors--secondary);
}
.pricing-card-button.v2.button-primary:hover {
  background-color: var(--_colors---primary-colors--primary);
}
.pricing-card-button.button-primary:hover {
  background-color: var(--_colors---primary-colors--secondary);
}
.pricing-list-wrapper {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  background-color: var(--_colors---primary-colors--silver-gray);
  border-radius: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1.25fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  padding: 20px;
  display: flex;
}
.pricing-list-wrapper.is-main {
  background-color: #7175741a;
  grid-template-columns: 1fr 1fr 1.4fr;
}
.secondary-color {
  color: var(--_colors---primary-colors--secondary);
}
.pricing-tabs {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-end;
  margin-top: -70px;
  display: flex;
}
.pricing-tabs.is-main {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0;
  display: flex;
}
.pricing-tabs-menu {
  background-color: var(--_colors---primary-colors--white);
  border-radius: 12px;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 30px;
  padding: 4px;
  display: flex;
}
.pricing-tab-link {
  background-color: var(--_colors---primary-colors--transparent);
  padding: 10px;
}
.pricing-tab-link[aria-current="page"], .pricing-tab-link.is-active {
  background-color: var(--_colors---primary-colors--ashy-gray);
  color: var(--_colors---primary-colors--white);
  border-radius: 10px;
}
.section-title-wrap {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  color: #191919;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 385px;
  margin-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.accordion {
  flex-flow: column;
  width: 100%;
  display: flex;
  position: static;
  overflow: hidden;
}
.faq-section {
  padding-bottom: var(--_spacing---section-padding--padding-xlarge);
}
.faq-section:where(.faq-section-v2) {
  padding-top: var(--_spacing---section-padding--padding-default);
  margin-left: auto;
  margin-right: auto;
}
.accordion-title {
  font-size: var(--_typography---font-size--headings--h5);
  line-height: var(--_typography---line-height--headings--h5);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---letter-spacing--headings--h5);
  white-space: normal;
  margin-top: 0;
  margin-bottom: 0;
}
.accordion-text-wrap {
  max-width: 584px;
  color: var(--_colors---primary-colors--dark-gray);
}
.accordion-title-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 0 16px;
  display: flex;
  position: static;
}
.accordion-description-wrap {
  width: 100%;
  position: static;
}
.accordion-description-wrap.is-open {
  background-color: #0000;
  position: static;
  overflow: hidden;
}
.faq-accordion-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  width: 100%;
  max-width: 670px;
  display: flex;
}
.faq-content-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.faq-content-block:where(.faq-section-v2) {
  max-width: 1130px;
  margin-left: auto;
  margin-right: auto;
}
.faq-title-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}
.footer-particle {
  width: var(--full-size);
  background-color: var(--_colors---primary-colors--ashy-gray);
  max-width: 40px;
  height: 60px;
  position: absolute;
  inset: 0% auto auto 0%;
}
.footer-social-link {
  color: var(--_colors---primary-colors--background);
  text-decoration: none;
  transition: color .3s;
}
.footer-social-link:hover {
  color: var(--_colors---primary-colors--secondary);
}
.footer-social-block {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.newsletter-title-wrap {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  color: var(--_colors---primary-colors--white);
  flex-flow: column;
  margin-bottom: 18px;
  display: flex;
}
.newsletter-input {
  background-color: var(--_colors---primary-colors--ashy-gray);
  height: auto;
  color: var(--_colors---primary-colors--white);
  border: 1px solid #0000;
  border-radius: 10px;
  margin-bottom: 0;
  padding: 10px 0 10px 16px;
}
.newsletter-input:focus {
  border-color: var(--_colors---primary-colors--dark-gray);
}
.newsletter-input::placeholder {
  color: var(--_colors---primary-colors--background);
}
.newsletter-input-wrap {
  position: relative;
}
.newsletter-button-wrap {
  background-color: var(--_colors---primary-colors--white);
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  padding: 2px 16px 0;
  display: flex;
  position: absolute;
  inset: 0% 0% 0% auto;
}
.newsletter-button-wrap:hover {
  background-color: var(--_colors---primary-colors--white);
}
.newsletter-button-wrap.button-primary:hover {
  background-color: var(--_colors---primary-colors--primary);
}
.newsletter-form-block {
  margin-bottom: 0;
}
.success-message {
  z-index: 1;
  background-color: var(--_colors---primary-colors--primary);
  color: var(--_colors---primary-colors--white);
  text-align: center;
  border-radius: 10px;
  padding: 10px 15px;
  position: relative;
  overflow: hidden;
}
.error-message {
  background-color: var(--_colors---primary-colors--silver-gray);
  color: var(--_colors---primary-colors--primary);
  text-align: center;
  border-radius: 10px;
  padding: 10px 15px;
}
.footer-link-widget-wrap {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  display: flex;
}
.footer-contact-block {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  border-radius: 10px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: grid;
  overflow: hidden;
}
.footern-contact-link {
  grid-row-gap: 10px;
  background-color: var(--_colors---primary-colors--ashy-gray);
  width: 100%;
  color: var(--_colors---primary-colors--white);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 24px;
  text-decoration: none;
  transition: all .3s;
  display: flex;
}
.footern-contact-link:hover {
  box-shadow: inset 0 2px 10px 0 var(--_colors---primary-colors--dark-gray);
  border-radius: 10px;
}
.text-black-four {
  color: var(--_colors---primary-colors--background);
}
.footer-marquee-block {
  color: var(--_colors---primary-colors--white);
  text-transform: uppercase;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}
.footer-marquee-text {
  font-size: var(--_typography---font-size--headings--h1);
  line-height: var(--_typography---line-height--headings--h1);
  letter-spacing: var(--_typography---letter-spacing--headings--h1);
  flex: none;
  margin-right: 10px;
}
.footer-contact-button-wrap {
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}
.work-details-section {
  padding-bottom: var(--_spacing---section-padding--padding-xlarge);
}
.work-details-top {
  padding-top: var(--_spacing---section-padding--padding-xlarge);
  background-color: var(--_colors---primary-colors--primary);
  padding-bottom: 60px;
}
.work-info-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  border-bottom: 1px solid var(--_colors---primary-colors--ashy-gray);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
  padding-bottom: 60px;
  display: flex;
}
.work-info-wrap {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  min-width: 210px;
  display: flex;
}
.work-details-header {
  color: var(--_colors---primary-colors--white);
}
.work-details-image {
  object-fit: cover;
  max-height: 744px;
}
.work-rich-text {
  max-width: 670px;
}
.work-rich-text h2:where(:not([class*="heading-scale-"])), .work-rich-text :where(.heading-scale-2) {
  color: var(--_colors---primary-colors--ashy-gray);
  font-size: var(--_typography---font-size--headings--h3);
  line-height: var(--_typography---line-height--headings--h3);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---letter-spacing--headings--h3);
  margin-bottom: 40px;
}
.work-rich-text h3:where(:not([class*="heading-scale-"])), .work-rich-text :where(.heading-scale-3) {
  color: var(--_colors---primary-colors--dark-gray);
  font-size: var(--_typography---font-size--paragraphs--text-default);
  line-height: var(--_typography---line-height--paragraphs--text-default);
  letter-spacing: var(--_typography---letter-spacing--paragraphs--text-default);
  margin-bottom: 12px;
}
.work-rich-text p {
  font-size: var(--_typography---font-size--paragraphs--text-large);
  line-height: var(--_typography---line-height--paragraphs--text-large);
  letter-spacing: var(--_typography---letter-spacing--paragraphs--text-large);
  margin-bottom: 30px;
}
.work-rich-text blockquote {
  font-size: var(--_typography---font-size--paragraphs--text-large);
  line-height: var(--_typography---line-height--paragraphs--text-large);
  font-weight: var(--_typography---font-weight--medium);
  border-left-style: none;
  margin-bottom: 30px;
  padding: 0;
}
.work-rich-text ol {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  font-size: var(--_typography---font-size--paragraphs--text-large);
  line-height: var(--_typography---line-height--paragraphs--text-large);
  flex-flow: column;
  margin-bottom: 0;
  padding-left: 25px;
  display: flex;
}
.work-rich-text.right-align {
  margin-left: auto;
}
.work-gallery {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.work-gallery-image {
  border-radius: 16px;
  overflow: hidden;
}
.work-details {
  flex-flow: column;
  display: flex;
}
.work-details-block {
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  flex-flow: column;
  padding-top: 60px;
  display: flex;
}
.blog-card-description:where(.work-card-v2) {
  color: var(--_colors---primary-colors--ashy-gray);
}
.work-main-section {
  padding-bottom: var(--_spacing---section-padding--padding-large);
}
.work-main-title-block {
  background-color: var(--_colors---primary-colors--primary);
  color: var(--_colors---primary-colors--white);
  padding-top: 180px;
  padding-bottom: 80px;
}
.work-main-title-wrap {
  text-transform: uppercase;
  max-width: 900px;
  padding-bottom: 80px;
}
.work-main-title-line {
  width: var(--full-size);
  background-color: var(--_colors---primary-colors--ashy-gray);
  height: 1px;
}
.collection-list {
  grid-column-gap: 20px;
  grid-row-gap: 40px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.empty-state {
  background-color: var(--_colors---primary-colors--dark-gray);
  color: var(--_colors---primary-colors--white);
  text-align: center;
  border-radius: 16px;
  padding: 20px;
}
.work-main-card-block {
  padding-top: 50px;
}
.blog-card-description-wrap:where(.work-card-v2) {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  padding-left: 8px;
  display: flex;
}
.blog-card-dot {
  display: none;
}
.blog-card-dot:where(.work-card-v2) {
  aspect-ratio: 1;
  background-color: var(--_colors---primary-colors--ashy-gray);
  border-radius: 50%;
  flex: none;
  width: 6px;
  max-width: 6px;
  display: block;
}
.brand-logo-link-wrap {
  justify-content: center;
  align-items: center;
  display: flex;
}
.work-title {
  font-size: var(--_typography---font-size--headings--h4);
  line-height: var(--_typography---line-height--headings--h4);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---letter-spacing--headings--h4);
}
.work-title:where(.work-card-v2) {
  color: var(--_colors---primary-colors--primary);
  font-size: var(--_typography---font-size--headings--h3);
  line-height: var(--_typography---line-height--headings--h3);
  letter-spacing: var(--_typography---letter-spacing--headings--h3);
}
.hero-title {
  font-size: var(--_typography---font-size--headings--display);
}
.hero-title.one {
  color: var(--_colors---primary-colors--background);
  margin-bottom: -20px;
}
.hero-title.two {
  z-index: 2147483647;
  mix-blend-mode: difference;
  position: relative;
}
.scroll-link {
  color: var(--_colors---primary-colors--background);
  text-decoration: none;
  transition: color .3s;
}
.scroll-link:hover {
  color: var(--_colors---primary-colors--white);
}
.collaboration-section {
  padding-bottom: var(--_spacing---section-padding--padding-xlarge);
}
.collaboration-content-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  background-color: var(--_colors---primary-colors--silver-gray);
  border-radius: 16px;
  justify-content: space-between;
  padding: 30px;
  display: flex;
}
.collaboration-title-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 684px;
  margin-bottom: 130px;
  display: flex;
}
.collaboration-sub-title {
  grid-column-gap: 9px;
  grid-row-gap: 9px;
  background-color: var(--_colors---primary-colors--white);
  border-radius: 12px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding: 12px 16px;
  display: flex;
}
.collaboration-subtitle-dot {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 11px;
  height: 11px;
  text-decoration: none;
  display: flex;
}
.collaboration-title-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}
.collaboration-contact-block {
  grid-row-gap: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 513px;
  display: flex;
}
.collaboration-image-wrap {
  width: var(--full-size);
  border-radius: 16px;
  max-width: 578px;
  overflow: hidden;
}
.collaboration-image {
  object-fit: cover;
}
.collaboration-link {
  color: var(--_colors---primary-colors--primary);
  font-size: var(--_typography---font-size--headings--h5);
  line-height: var(--_typography---font-size--headings--h5);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---letter-spacing--headings--h5);
  text-decoration: none;
}
.collaboration-title {
  max-width: 450px;
}
.pricing-main-section {
  padding-top: var(--_spacing---section-padding--padding-xxxlarge);
  background-color: var(--_colors---primary-colors--primary);
  padding-bottom: 40px;
}
.pricing-main-title {
  max-width: 1039px;
  color: var(--_colors---primary-colors--white);
  text-transform: uppercase;
}
.pricing-main-title-wrap {
  border-bottom: 1px solid var(--_colors---primary-colors--ashy-gray);
  margin-bottom: 80px;
  padding-bottom: 80px;
}
.blog-tab-link {
  background-color: var(--_colors---primary-colors--pele);
  border-radius: 10px;
  padding: 12px 16px;
}
.blog-tab-link[aria-current="page"], .blog-tab-link.is-active {
  background-color: var(--_colors---primary-colors--primary);
  color: var(--_colors---primary-colors--white);
}
.blog-tabs-menu {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 50px;
  display: flex;
}
.blog-main-top {
  padding-top: var(--_spacing---section-padding--padding-xxxlarge);
  padding-bottom: var(--_spacing---section-padding--padding-small);
  background-color: var(--_colors---primary-colors--primary);
}
.blog-main-title-block {
  padding-bottom: var(--_spacing---section-padding--padding-small);
  border-bottom: 1px solid var(--_colors---primary-colors--ashy-gray);
  color: var(--_colors---primary-colors--white);
  text-transform: uppercase;
}
.blog-main-title-wrap {
  max-width: 800px;
}
.blog-tab-wrap {
  padding-top: var(--_spacing---section-padding--padding-small);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}
.blog-details-top {
  padding-top: var(--_spacing---section-padding--padding-xlarge);
  padding-bottom: var(--_spacing---section-padding--padding-small);
  background-color: var(--_colors---primary-colors--primary);
}
.blog-details-title-block {
  padding-bottom: var(--_spacing---section-padding--padding-small);
  border-bottom: 1px solid var(--_colors---primary-colors--ashy-gray);
  color: var(--_colors---primary-colors--white);
  margin-bottom: 50px;
}
.blog-details-title-wrap {
  text-transform: capitalize;
  max-width: 975px;
}
.blog-info-block {
  justify-content: space-between;
  max-width: 555px;
  display: flex;
}
.blog-info-wrap {
  width: var(--full-size);
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  color: var(--_colors---primary-colors--white);
  flex-flow: column;
  display: flex;
}
.blog-details-image {
  max-height: 634px;
}
.blog-details-block {
  padding-top: 20px;
}
.blog-rich-text h2:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-2) {
  font-size: var(--_typography---font-size--headings--h4);
  line-height: var(--_typography---line-height--headings--h4);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---letter-spacing--headings--h4);
  margin-top: 60px;
  margin-bottom: 16px;
}
.blog-rich-text p {
  font-size: var(--_typography---font-size--paragraphs--text-large);
  line-height: var(--_typography---line-height--paragraphs--text-large);
  letter-spacing: var(--_typography---letter-spacing--paragraphs--text-large);
  margin-bottom: 60px;
}
.blog-rich-text h3:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-3) {
  color: var(--_colors---primary-colors--primary);
  font-size: var(--_typography---font-size--headings--h5);
  line-height: var(--_typography---line-height--headings--h5);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---letter-spacing--headings--h5);
  margin-bottom: 16px;
}
.blog-rich-text blockquote {
  background-color: var(--_colors---primary-colors--pele);
  font-size: var(--_typography---font-size--headings--h4);
  line-height: var(--_typography---line-height--headings--h4);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---letter-spacing--headings--h4);
  border-left-style: none;
  border-radius: 16px;
  padding: 40px;
}
.blog-rich-text ol {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  font-size: var(--_typography---font-size--paragraphs--text-large);
  line-height: var(--_typography---line-height--paragraphs--text-large);
  letter-spacing: var(--_typography---letter-spacing--paragraphs--text-large);
  flex-flow: column;
  padding-left: 20px;
  display: flex;
}
.blog-rich-text ul {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  font-size: var(--_typography---font-size--paragraphs--text-large);
  line-height: var(--_typography---line-height--paragraphs--text-large);
  letter-spacing: var(--_typography---letter-spacing--paragraphs--text-large);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 0;
  margin-bottom: 40px;
  padding-left: 25px;
  display: flex;
}
.blog-rich-text li {
  padding-left: 0;
}
.blog-quote-block {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  background-color: var(--_colors---primary-colors--pele);
  border-radius: 16px;
  flex-flow: column;
  margin-top: 20px;
  padding: 40px;
  display: flex;
}
.blog-details-content-wrap {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.collection-list-2 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: flex;
}
.featured-blog-section {
  height: 300vh;
}
.collection-item {
  flex: none;
}
.featured-blog-title {
  max-width: 420px;
  margin-bottom: 50px;
}
.featured-blog-sticky {
  height: 100vh;
  padding-top: var(--_spacing---section-padding--padding-xlarge);
  padding-bottom: var(--_spacing---section-padding--padding-xlarge);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}
.career-top {
  padding-top: var(--_spacing---section-padding--padding-xlarge);
  background-color: var(--_colors---primary-colors--primary);
  padding-bottom: 60px;
}
.career-top-text-block {
  border-bottom: 1px solid var(--_colors---primary-colors--ashy-gray);
  padding-bottom: 32px;
}
.career-title-wrap {
  max-width: 740px;
  color: var(--_colors---primary-colors--white);
  margin-bottom: 60px;
}
.career-description-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  color: var(--_colors---primary-colors--background);
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.career-description-wrap {
  max-width: 403px;
}
.career-bottom {
  padding-top: var(--_spacing---section-padding--padding-large);
  padding-bottom: var(--_spacing---section-padding--padding-xlarge);
}
.career-bottom-content {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.career-bottom-right {
  max-width: 785px;
}
.career-bottom-icon {
  max-width: 18px;
}
.career-bottom-left {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  max-width: 200px;
  display: flex;
}
.career-feature-title {
  max-width: 420px;
  margin-bottom: 48px;
}
.career-feature-section {
  padding-bottom: var(--_spacing---section-padding--padding-xlarge);
}
.career-feature-right {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  display: flex;
}
.career-feature-details-top {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  max-width: 446px;
  color: var(--_colors---primary-colors--dark-gray);
  flex-flow: column;
  padding-right: 40px;
  display: flex;
}
.career-feature-image-wrap {
  width: var(--full-size);
  border-radius: 8px;
  max-width: 379px;
  overflow: hidden;
}
.career-feature-details-bottom {
  width: var(--full-size);
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  border-radius: 8px;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 110px;
  margin-left: auto;
  display: flex;
  overflow: hidden;
}
.career-feature-details {
  width: var(--full-size);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  justify-content: space-between;
  padding-top: 24px;
  display: flex;
}
.job-section {
  padding-top: var(--_spacing---section-padding--padding-small);
  padding-bottom: var(--_spacing---section-padding--padding-small);
  background-color: var(--_colors---primary-colors--primary);
}
.job-title-block {
  margin-bottom: var(--_spacing---section-padding--padding-small);
  padding-bottom: var(--_spacing---section-padding--padding-small);
  border-bottom: 1px solid var(--_colors---primary-colors--ashy-gray);
}
.job-title-wrap {
  max-width: 460px;
  color: var(--_colors---primary-colors--white);
}
.job-card {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  border-bottom: 1px solid var(--_colors---primary-colors--ashy-gray);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1.1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  place-items: end start;
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
  display: grid;
}
.job-card-badge {
  grid-column-gap: 10px;
  background-color: var(--_colors---primary-colors--ashy-gray);
  color: var(--_colors---primary-colors--white);
  border-radius: 8px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  margin-bottom: auto;
  padding: 12px 16px;
  display: flex;
}
.job-card-title-wrap {
  grid-row-gap: 24px;
  width: 100%;
  max-width: 501px;
  color: var(--_colors---primary-colors--background);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.text-white {
  color: var(--_colors---primary-colors--white);
}
.career-story-section {
  padding-top: var(--_spacing---section-padding--padding-large);
  padding-bottom: var(--_spacing---section-padding--padding-large);
  overflow: hidden;
}
.career-gallery-image-wrap {
  border-radius: 8px;
  flex: none;
  width: 360px;
  margin-right: 20px;
  overflow: hidden;
}
.career-gallery-image-row {
  flex: none;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.career-gallery-image-row-wrap {
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.career-details-top {
  padding-top: var(--_spacing---section-padding--padding-xlarge);
  padding-bottom: var(--_spacing---section-padding--padding-large);
  background-color: var(--_colors---primary-colors--primary);
}
.career-details-title {
  color: var(--_colors---primary-colors--white);
  margin-bottom: 60px;
}
.career-details-info-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  border-top: 1px solid var(--_colors---primary-colors--ashy-gray);
  flex-flow: wrap;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  padding-top: 50px;
  text-decoration: none;
  display: flex;
}
.career-details-info {
  width: var(--full-size);
  grid-row-gap: 6px;
  max-width: 210px;
  color: var(--_colors---primary-colors--background);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.career-details-bottom {
  padding-top: 60px;
  padding-bottom: var(--_spacing---section-padding--padding-large);
}
.career-details-rich-text {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.career-details-rich-text h2:where(:not([class*="heading-scale-"])), .career-details-rich-text :where(.heading-scale-2) {
  font-size: var(--_typography---font-size--headings--h4);
  line-height: var(--_typography---line-height--headings--h4);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---letter-spacing--headings--h4);
  margin-top: 60px;
  margin-bottom: 16px;
}
.career-details-rich-text p {
  font-size: var(--_typography---font-size--paragraphs--text-large);
  line-height: var(--_typography---line-height--paragraphs--text-large);
  letter-spacing: var(--_typography---letter-spacing--paragraphs--text-large);
  margin-bottom: 10px;
}
.career-details-rich-text strong {
  font-weight: var(--_typography---font-weight--medium);
}
.career-details-rich-text ul {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  font-size: var(--_typography---font-size--paragraphs--text-large);
  line-height: var(--_typography---line-height--paragraphs--text-large);
  letter-spacing: var(--_typography---letter-spacing--paragraphs--text-large);
  flex-flow: column;
  margin-top: 0;
  margin-bottom: 16px;
  padding-left: 30px;
  display: flex;
}
.career-tabs {
  border-top: 1px solid var(--_colors---primary-colors--background);
  padding-top: 60px;
  display: flex;
}
.career-tabs-content {
  width: var(--full-size);
}
.career-tab-menu {
  width: var(--full-size);
  flex-flow: column;
  max-width: 300px;
  margin-top: auto;
  margin-right: 40px;
  display: flex;
}
.career-tab-link {
  border-bottom: 1px solid var(--_colors---primary-colors--pele);
  background-color: var(--_colors---primary-colors--transparent);
  color: var(--_colors---primary-colors--dark-gray);
  justify-content: flex-start;
  align-items: center;
  padding: 16px 0;
  display: flex;
}
.career-tab-link[aria-current="page"], .career-tab-link.is-active {
  background-color: var(--_colors---primary-colors--transparent);
  color: var(--_colors---primary-colors--primary);
}
.career-feature-image {
  overflow: hidden;
}
.career-tab-link-icon {
  font-size: var(--_typography---font-size--headings--h5);
  line-height: var(--_typography---line-height--headings--h5);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---letter-spacing--headings--h5);
  margin-right: 6px;
  overflow: hidden;
}
.career-tab-link-icon:where(.blog-card-v2) {
  font-size: var(--_typography---font-size--headings--h4);
  line-height: var(--_typography---line-height--headings--h5);
}
.job-card-button-wrap {
  justify-content: flex-end;
  align-items: flex-end;
  margin-left: auto;
  display: flex;
}
.tab-pane-tab-1 {
  width: var(--full-size);
}
.career-details-button-wrap {
  max-width: 900px;
  margin-top: 6px;
  margin-left: auto;
  margin-right: auto;
}
.pricing-collection-list {
  width: var(--full-size);
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  max-width: 754px;
  display: grid;
}
.pricing-collection-list-elite {
  width: var(--full-size);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  max-width: 566px;
  display: grid;
}
.pricing-tabs-content {
  width: var(--full-size);
}
.pricing-list-icon {
  max-width: 16px;
}
.pricing-collection {
  width: var(--full-size);
  max-width: 754px;
}
.pricing-collection-two {
  width: var(--full-size);
  max-width: 490px;
}
.pricing-details-content-block {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 1130px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.pricing-details-title-block {
  grid-row-gap: 50px;
  border-bottom: 1px solid var(--_colors---primary-colors--ashy-gray);
  width: 100%;
  color: var(--_colors---primary-colors--white);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-bottom: 60px;
  display: flex;
}
.pricing-details {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}
.pricing-details-left {
  grid-row-gap: 40px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 555px;
  text-decoration: none;
  display: flex;
}
.pricing-details-block {
  grid-row-gap: 16px;
  width: 100%;
  color: var(--_colors---primary-colors--pele);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.pricing-details-list-block {
  grid-row-gap: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.pricing-list-title {
  grid-column-gap: 10px;
  width: 100%;
  color: var(--_colors---primary-colors--white);
  text-align: left;
  background-color: #2b2f2e;
  justify-content: center;
  align-items: center;
  padding: 7px 12px;
}
.pricing-details-list {
  grid-row-gap: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 277px;
  text-decoration: none;
  display: flex;
}
.pricing-details-list-item {
  grid-column-gap: 8px;
  color: var(--_colors---primary-colors--background);
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.pricing-details-right {
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  max-width: 555px;
  text-decoration: none;
  display: flex;
  position: sticky;
  top: 40px;
}
.add-to-card-block {
  grid-column-gap: 10px;
  background-color: var(--_colors---primary-colors--ashy-gray);
  border-radius: 16px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 555px;
  padding: 30px;
  text-decoration: none;
}
.add-to-cart-inner {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.add-to-cart-details {
  grid-row-gap: 30px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.pricing-details-badge {
  grid-column-gap: 10px;
  background-color: var(--_colors---primary-colors--secondary);
  color: var(--_colors---primary-colors--white);
  border-radius: 12px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 6px 12px;
  display: flex;
}
.add-to-cart-text-block {
  grid-column-gap: 22px;
  grid-row-gap: 22px;
  width: 100%;
  color: var(--_colors---primary-colors--white);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.pricing-details-price {
  grid-column-gap: 12px;
  color: var(--_colors---primary-colors--pele);
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}
.add-to-card-button {
  grid-column-gap: 10px;
  background-color: var(--_colors---primary-colors--secondary);
  width: 100%;
  height: 56px;
  color: var(--_colors---primary-colors--white);
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  padding: 10px 30px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.pricing-details-section {
  padding-top: var(--_spacing---section-padding--padding-xlarge);
  padding-bottom: var(--_spacing---section-padding--padding-xlarge);
  background-color: var(--_colors---primary-colors--primary);
}
.button-group {
  background-color: var(--_colors---primary-colors--ashy-gray);
  border-radius: 12px;
  margin-bottom: 24px;
  padding: 4px;
}
.option-button {
  background-color: var(--_colors---primary-colors--transparent);
  color: var(--_colors---primary-colors--white);
  border-style: none;
  border-radius: 10px;
  margin-right: 0;
  padding: 10px;
}
.option-button.is-selected {
  background-color: var(--_colors---primary-colors--white);
  color: var(--_colors---primary-colors--primary);
  border-style: none;
}
.add-to-cart {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.default-state {
  width: var(--full-size);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 0;
  display: flex;
}
.add-to-cart-button {
  z-index: 5;
  opacity: 0;
  position: absolute;
  inset: 0%;
}
.nav-left {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.cart-button {
  background-color: var(--_colors---primary-colors--transparent);
  padding: 0;
}
.cart-quantity {
  background-color: var(--_colors---primary-colors--transparent);
  height: auto;
  color: var(--_colors---primary-colors--white);
  font-size: var(--_typography---font-size--paragraphs--text-default);
  line-height: var(--_typography---line-height--paragraphs--text-default);
  font-weight: var(--_typography---font-weight--regular);
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
}
.pricing-details-description {
  max-width: 350px;
}
.contact-section {
  padding-top: var(--_spacing---section-padding--padding-xxxlarge);
  padding-bottom: var(--_spacing---section-padding--padding-xlarge);
  background-color: var(--_colors---primary-colors--primary);
}
.contact-title-block {
  margin-bottom: var(--_spacing---section-padding--padding-small);
  padding-bottom: var(--_spacing---section-padding--padding-small);
  border-bottom: 1px solid var(--_colors---primary-colors--ashy-gray);
  color: var(--_colors---primary-colors--white);
}
.contact-title-wrap {
  text-transform: uppercase;
  max-width: 1000px;
}
.contact-form-block {
  width: var(--full-size);
  background-color: var(--_colors---primary-colors--ashy-gray);
  border-radius: 16px;
  max-width: 894px;
  margin-bottom: 0;
  padding: 30px;
}
.contact-link-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 244px;
  margin-right: auto;
  text-decoration: none;
  display: flex;
}
.contact-link-title {
  grid-column-gap: 10px;
  background-color: #2b2f2e;
  border-radius: 12px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 6px 12px;
  text-decoration: none;
  display: flex;
}
.text {
  color: #fff;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  text-decoration: none;
}
.contact-link-wrapper {
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.contact-link-wrap {
  grid-row-gap: 8px;
  width: 100%;
  color: var(--_colors---primary-colors--background);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.contact-form-wrapper {
  grid-column-gap: 54px;
  grid-row-gap: 54px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.input-field {
  border-style: none none solid;
  border-width: 1px;
  border-color: black black var(--_colors---primary-colors--dark-gray);
  background-color: var(--_colors---primary-colors--transparent);
  color: var(--_colors---primary-colors--white);
  margin-bottom: 0;
  padding: 8px 0;
}
.input-field:focus {
  border-bottom-color: var(--_colors---primary-colors--secondary);
}
.input-field::placeholder {
  color: var(--_colors---primary-colors--dark-gray);
}
.input-field.text-area {
  min-height: 176px;
}
.field-label {
  color: var(--_colors---primary-colors--white);
  font-weight: var(--_typography---font-weight--regular);
  margin-bottom: 12px;
}
.input-field-wrapper {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.contact-link {
  color: var(--_colors---primary-colors--white);
  text-decoration: none;
}
.service-main-top {
  padding-top: var(--_spacing---section-padding--padding-xlarge);
  background-color: var(--_colors---primary-colors--primary);
  padding-bottom: 60px;
}
.service-main-title {
  max-width: 850px;
  color: var(--_colors---primary-colors--white);
  text-transform: uppercase;
  margin-bottom: 48px;
}
.service-main-description {
  max-width: 410px;
  color: var(--_colors---primary-colors--background);
}
.service-main-description-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  border-bottom: 1px solid var(--_colors---primary-colors--ashy-gray);
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 24px;
  display: flex;
}
.service-main-bottom {
  padding-top: var(--_spacing---section-padding--padding-default);
  padding-bottom: var(--_spacing---section-padding--padding-large);
}
.service-main-bottom-title {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  max-width: 270px;
  display: flex;
  position: sticky;
  top: 40px;
}
.service-main-content {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.service-main-card-block {
  width: var(--full-size);
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
  display: flex;
}
.service-main-card {
  grid-row-gap: 24px;
  perspective-origin: 50% 0;
  transform-origin: 50% 0;
  width: 100%;
  max-width: 359px;
  color: var(--_colors---primary-colors--primary);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}
.service-main-card.one {
  margin-top: 215px;
}
.service-main-card.two {
  max-width: 577px;
}
.service-main-card.five {
  max-width: 778px;
}
.service-main-card-image {
  object-fit: cover;
}
.service-main-card-body {
  grid-row-gap: 8px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.service-main-card-image-wrap {
  width: var(--full-size);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.service-main-button-wrap {
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}
.service-main-button {
  aspect-ratio: 1;
  background-color: var(--_colors---primary-colors--white);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 100px;
  transition: background-color .3s;
  display: flex;
}
.service-main-button:hover {
  background-color: var(--_colors---primary-colors--secondary);
}
.service-main-button-wrapper {
  background-image: linear-gradient(#0000, #0003);
  position: absolute;
  inset: 0%;
}
.service-main-card-wrapper {
  width: var(--full-size);
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.trust-section {
  height: 300vh;
  padding-top: var(--_spacing---section-padding--padding-small);
  padding-bottom: var(--_spacing---section-padding--padding-small);
  background-color: var(--_colors---primary-colors--primary);
}
.trust-title {
  max-width: 650px;
  color: var(--_colors---primary-colors--white);
}
.trust-card-row {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.trust-card {
  z-index: 1;
  width: 100%;
  max-width: 400px;
  min-height: 478px;
  color: var(--_colors---primary-colors--background);
  background-color: #ffffff08;
  border-radius: 8px;
  flex-direction: column;
  flex: none;
  justify-content: space-between;
  align-items: flex-start;
  padding: 32px;
  display: flex;
  position: relative;
}
.trust-card-body {
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.trust-card-icon {
  aspect-ratio: 1;
  max-width: 80px;
}
.trust-card-title-block {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.trust-card-background {
  z-index: -1;
  background-color: var(--_colors---primary-colors--secondary);
  pointer-events: none;
  position: absolute;
  inset: 0%;
}
.trust-title-block {
  border-bottom: 1px solid var(--_colors---primary-colors--ashy-gray);
  margin-bottom: 48px;
  padding-bottom: 48px;
}
.trust-sticky {
  justify-content: flex-start;
  align-items: center;
  height: 100vh;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}
.process-section {
  padding-top: var(--_spacing---section-padding--padding-default);
  padding-bottom: var(--_spacing---section-padding--padding-xlarge);
}
.process-title {
  border-bottom: 1px solid var(--_colors---primary-colors--background);
  margin-bottom: 40px;
  padding-bottom: 40px;
}
.process-widget-block {
  flex-flow: column;
  display: flex;
}
.process-widget {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  display: flex;
}
.process-widget-description {
  max-width: 238px;
}
.process-widget-no-wrap {
  width: var(--full-size);
  flex: none;
  justify-content: flex-start;
  align-items: center;
  max-width: 240px;
  display: flex;
  position: relative;
}
.process-widget-title-wrap {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.process-widget-image-wrap {
  aspect-ratio: 1;
  border-radius: 8px;
  max-width: 110px;
  overflow: hidden;
}
.process-widget-no {
  font-size: var(--_typography---font-size--headings--h5);
  line-height: var(--_typography---line-height--headings--h5);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---letter-spacing--headings--h5);
}
.process-widget-no:where(.blog-card-v2) {
  font-size: var(--_typography---font-size--headings--h4);
  line-height: var(--_typography---line-height--headings--h5);
}
.process-widget-no.absolute {
  position: absolute;
  inset: 0% auto auto 0%;
}
.process-widget-divider {
  background-color: var(--_colors---primary-colors--background);
  height: 1px;
}
.drag-wrap {
  cursor: none;
  position: relative;
  overflow: hidden;
}
.drag-track {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  justify-content: center;
  align-items: center;
  width: auto;
  display: flex;
}
.drag-item {
  cursor: grab;
  flex: none;
  width: 1130px;
  display: flex;
}
.service-details-top {
  padding-top: var(--_spacing---section-padding--padding-xlarge);
  background-color: var(--_colors---primary-colors--primary);
}
.service-details-title-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  color: var(--_colors---primary-colors--white);
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
  display: flex;
}
.service-details-title {
  max-width: 760px;
}
.service-details-image {
  object-fit: cover;
  max-height: 744px;
}
.service-introduction {
  padding-top: var(--_spacing---section-padding--padding-xlarge);
  padding-bottom: var(--_spacing---section-padding--padding-xlarge);
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  justify-content: space-between;
  display: flex;
}
.introoduction-iocn {
  max-width: 18px;
}
.introduction-sub-title {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.service-image-one {
  object-fit: cover;
}
.service-introduction-left {
  width: var(--full-size);
  grid-column-gap: 100px;
  grid-row-gap: 100px;
  flex-flow: column;
  max-width: 447px;
  display: flex;
}
.service-introduction-right {
  width: var(--full-size);
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  flex-flow: column;
  max-width: 865px;
  display: flex;
}
.service-include-title {
  max-width: 709px;
  margin-bottom: 55px;
}
.service-include-card-block {
  padding-bottom: var(--_spacing---section-padding--padding-xlarge);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.service-include-card {
  z-index: 1;
  background-color: var(--_colors---primary-colors--silver-gray);
  border-radius: 8px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 500px;
  padding: 10px 24px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.service-include-card-inner {
  width: var(--full-size);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 385px;
  display: flex;
}
.service-include-card-icon {
  max-width: 80px;
  margin-left: auto;
  margin-right: auto;
}
.service-include-card-text {
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}
.service-include-card-background {
  z-index: -1;
  background-color: var(--_colors---primary-colors--secondary);
  pointer-events: none;
  position: absolute;
  inset: 0%;
}
.service-include-card-description {
  font-size: var(--_typography---font-size--paragraphs--text-medium);
  line-height: var(--_typography---line-height--paragraphs--text-medium);
  letter-spacing: var(--_typography---letter-spacing--paragraphs--text-medium);
  overflow: hidden;
}
.service-include-card-description-wrap {
  overflow: hidden;
}
.service-include-card-title {
  font-size: var(--_typography---font-size--headings--h4);
  line-height: var(--_typography---line-height--headings--h4);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---letter-spacing--headings--h4);
}
.service-include-card-title:where(.work-card-v2) {
  color: var(--_colors---primary-colors--primary);
}
.service-include-card-title.static {
  max-width: 200px;
  height: 30px;
  font-size: var(--_typography---font-size--headings--h5);
  line-height: var(--_typography---line-height--headings--h5);
  margin-bottom: 24px;
  position: absolute;
}
.service-include-card-title.hover {
  font-size: var(--_typography---font-size--headings--h5);
  line-height: var(--_typography---line-height--headings--h5);
  letter-spacing: var(--_typography---letter-spacing--headings--h5);
  margin-bottom: 24px;
}
.service-process-title-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  border-bottom: 1px solid var(--_colors---primary-colors--pele);
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
  padding-bottom: 24px;
  display: flex;
}
.service-process-title {
  max-width: 487px;
}
.service-process-block {
  height: 500vh;
}
.service-process-image-wrap {
  width: var(--full-size);
  position: relative;
}
.service-process {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: center;
  display: flex;
  overflow: hidden;
}
.service-process-step-block {
  width: var(--full-size);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}
.service-process-step-icon {
  max-width: 18px;
}
.service-process-step {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.service-process-step-wrap {
  color: var(--_colors---primary-colors--dark-gray);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.service-process-right {
  width: var(--full-size);
  grid-column-gap: 140px;
  grid-row-gap: 140px;
  flex-flow: column;
  max-width: 756px;
  display: flex;
}
.service-process-details {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  background-color: var(--_colors---primary-colors--white);
  max-width: 487px;
  height: 135px;
  color: var(--_colors---primary-colors--dark-gray);
  flex-flow: column;
  display: flex;
  overflow: hidden;
}
.service-process-details.one {
  z-index: 5;
  padding-top: 5px;
  padding-bottom: 5px;
  position: relative;
}
.service-process-details.two {
  z-index: 4;
  position: absolute;
  inset: 0% auto auto 0%;
}
.service-process-details.three {
  z-index: 3;
  position: absolute;
  inset: 0% auto auto 0%;
}
.service-process-details.four {
  z-index: 2;
  position: absolute;
  inset: 0% auto auto 0%;
}
.service-process-details.five {
  z-index: 1;
  position: absolute;
  inset: 0% auto auto 0%;
}
.testimonial-two {
  padding-top: var(--_spacing---section-padding--padding-large);
  padding-bottom: var(--_spacing---section-padding--padding-large);
  background-color: var(--_colors---primary-colors--primary);
  overflow: hidden;
}
.testimonial-two-title {
  color: var(--_colors---primary-colors--background);
  text-transform: uppercase;
  flex: none;
  margin-right: 24px;
}
.testimonial-two-slider-block {
  z-index: 1;
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: flex-end;
  max-width: 1220px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}
.testimonial-two-slider {
  width: var(--full-size);
  background-color: var(--_colors---primary-colors--transparent);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 677px;
  height: auto;
  position: relative;
}
.testimonial-two-image-wrap {
  width: var(--full-size);
  border-radius: 8px;
  max-width: 430px;
  overflow: hidden;
}
.testimonial-two-slide-nav {
  background-color: var(--_colors---primary-colors--ashy-gray);
  width: auto;
  max-width: 100px;
  height: 48px;
  font-size: var(--_typography---font-size--paragraphs--text-small);
  border-radius: 80px;
  justify-content: center;
  align-items: center;
  margin-left: 60px;
  padding-top: 18px;
  padding-left: 16px;
  padding-right: 16px;
  display: inline-block;
  position: absolute;
}
.testimonial-two-text-wrap {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  color: var(--_colors---primary-colors--white);
  flex-flow: column;
  display: flex;
}
.testimonial-two-mask {
  height: auto;
}
.testimonial-two-content {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 401.5px;
  display: flex;
}
.testimonial-two-video {
  aspect-ratio: 1;
  background-color: var(--_colors---primary-colors--ashy-gray);
  width: 48px;
  color: var(--_colors---primary-colors--white);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  padding: 12px;
  transition: all .3s;
  display: flex;
  overflow: hidden;
}
.testimonial-two-video:hover {
  background-color: var(--_colors---primary-colors--white);
  color: var(--_colors---primary-colors--primary);
}
.image-2 {
  object-fit: cover;
}
.testimonial-two-title-wrap {
  justify-content: flex-start;
  align-items: center;
  margin-bottom: -47px;
  display: flex;
}
.about-banner {
  padding-top: var(--_spacing---section-padding--padding-xxxlarge);
  padding-bottom: var(--_spacing---section-padding--padding-default);
  background-color: var(--_colors---primary-colors--primary);
}
.about-banner-title {
  max-width: 630px;
  color: var(--_colors---primary-colors--white);
}
.about-banner-top {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 142px;
  display: flex;
}
.about-banner-image-wrap {
  max-width: 435px;
}
.about-banner-description {
  max-width: 365px;
  color: var(--_colors---primary-colors--background);
}
.about-banner-bottom {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  border-bottom: 1px solid var(--_colors---primary-colors--ashy-gray);
  justify-content: space-between;
  align-items: center;
  padding-bottom: 22px;
  display: flex;
}
.about-section {
  padding-top: var(--_spacing---section-padding--padding-default);
  padding-bottom: var(--_spacing---section-padding--padding-xxlarge);
}
.about-top {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  margin-bottom: 80px;
  display: flex;
}
.about-description {
  width: var(--full-size);
  min-width: 760px;
  max-width: 785px;
}
.about-bottom-details {
  width: var(--full-size);
  grid-row-gap: 20px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  min-width: 760px;
  max-width: 785px;
  text-decoration: none;
  display: flex;
}
.approach-widget-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.approach-widget {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.about-bottom {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.about-bottom-line {
  width: var(--full-size);
  background-color: var(--_colors---primary-colors--secondary);
  max-width: 520px;
  height: 1px;
  margin-top: 8px;
}
.about-sub-title {
  width: var(--full-size);
  max-width: 520px;
}
.approach-title-wrap {
  width: var(--full-size);
  max-width: 190px;
  color: var(--_colors---primary-colors--dark-gray);
  text-decoration: none;
  transition: color .3s;
}
.approach-title-wrap:hover {
  color: var(--_colors---primary-colors--primary);
}
.approach-description {
  max-width: 440px;
}
.purpose-section {
  height: 300vh;
}
.purpose-title-wrap {
  z-index: 5;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}
.purpose-sticky {
  height: 100vh;
  padding-top: var(--_spacing---section-padding--padding-xlarge);
  position: sticky;
  top: 0;
  overflow: hidden;
}
.purpose-image-block {
  pointer-events: none;
  position: absolute;
  inset: 10% 0% 0%;
}
.purpose-image {
  object-fit: cover;
  border-radius: 16px;
  max-width: 176px;
  height: auto;
  position: absolute;
  inset: 0% 200px auto auto;
  overflow: hidden;
}
.purpose-image.one {
  max-width: 210px;
  inset: 0% auto auto 200px;
}
.purpose-image.three {
  max-width: 181px;
  inset: 242px auto auto 120px;
  transform: rotate(-15deg);
}
.purpose-image.four {
  inset: 215px 20px auto auto;
}
.purpose-image.five {
  max-width: 325px;
  inset: auto auto 0% 30%;
  transform: rotate(-15deg);
}
.purpose-image.six {
  max-width: 325px;
  inset: auto 30% 0% auto;
}
.award-section {
  background-color: var(--_colors---primary-colors--pele);
  height: 300vh;
}
.award-sticky {
  height: 100vh;
  padding-top: var(--_spacing---section-padding--padding-xlarge);
  padding-bottom: var(--_spacing---section-padding--padding-xlarge);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}
.award-card-wrapper {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}
.award-card {
  width: var(--full-size);
  grid-column-gap: 150px;
  grid-row-gap: 150px;
  background-color: var(--_colors---primary-colors--white);
  text-align: center;
  flex-flow: column;
  flex: none;
  max-width: 325px;
  padding: 20px;
  display: flex;
}
.award-card-button-wrap {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}
.award-card-block {
  justify-content: flex-end;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}
.mission-section {
  padding-top: var(--_spacing---section-padding--padding-xlarge);
  padding-bottom: var(--_spacing---section-padding--padding-xlarge);
}
.mission-title {
  max-width: 305px;
  margin-bottom: 60px;
}
.mission-image-wrap {
  border-radius: 16px;
  overflow: hidden;
}
.mission-text-block {
  grid-row-gap: 40px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 440px;
  text-decoration: none;
  display: flex;
}
.mission-text-wrap {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.founder-image-wrap {
  border-radius: 16px;
  max-width: 300px;
  position: absolute;
  inset: 0% -76px auto auto;
  overflow: hidden;
}
.mission-right {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 180px;
  display: flex;
}
.mission-content-block {
  grid-column-gap: 100px;
  grid-row-gap: 100px;
  justify-content: space-between;
  display: flex;
}
.mission-left {
  max-width: 770px;
  position: relative;
}
.founder-info-wrap {
  z-index: 1;
  grid-row-gap: 4px;
  background-color: var(--_colors---primary-colors--primary);
  color: var(--_colors---primary-colors--pele);
  border-radius: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 16px;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}
.founder-info-block {
  justify-content: flex-end;
  align-items: flex-end;
  padding: 8px;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}
.founder-info-background {
  z-index: -1;
  background-color: var(--_colors---primary-colors--secondary);
  position: absolute;
  inset: 0%;
}
.team-section {
  padding-top: var(--_spacing---section-padding--padding-default);
}
.team-card-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.medium {
  font-weight: var(--_typography---font-weight--medium);
}
.team-title-block {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  max-width: 500px;
  margin-bottom: 50px;
  display: flex;
}
.team-card-title-block {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  flex-flow: column;
  display: flex;
}
.team-social-link {
  background-color: var(--_colors---primary-colors--pele);
  max-width: 30px;
  color: var(--_colors---primary-colors--primary);
  border-radius: 4px;
  padding: 7px;
  transition: opacity .3s;
}
.team-social-link:hover {
  background-color: var(--_colors---primary-colors--secondary);
  color: var(--_colors---primary-colors--white);
}
.password-field-label {
  font-weight: var(--_typography---font-weight--regular);
}
.password-title-wrap {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  color: var(--_colors---primary-colors--background);
  text-align: center;
  flex-flow: column;
  margin-bottom: 48px;
  display: flex;
}
.password-input {
  border: 1px solid var(--_colors---primary-colors--dark-gray);
  background-color: var(--_colors---primary-colors--transparent);
  height: auto;
  color: var(--_colors---primary-colors--white);
  border-radius: 100px;
  margin-bottom: 0;
  padding: 16px 20px;
}
.password-input:focus {
  border-color: var(--_colors---primary-colors--secondary);
}
.password-input::placeholder {
  color: var(--_colors---primary-colors--background);
}
.password-submit-buton-wrap {
  background-color: var(--_colors---primary-colors--secondary);
  color: var(--_colors---primary-colors--white);
  border-radius: 100px;
  padding: 21px;
  position: relative;
}
.password-input-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}
.password-submit-buton {
  background-color: var(--_colors---primary-colors--secondary);
  opacity: 0;
  color: var(--_colors---primary-colors--white);
  border-radius: 100px;
  padding: 21px;
  position: absolute;
  inset: 0%;
}
.password-button-icon {
  max-width: 25px;
}
.password-button-inner {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.utility-banner-title-block {
  grid-column-gap: 26px;
  grid-row-gap: 26px;
  max-width: 482px;
  color: var(--_colors---primary-colors--background);
  text-align: center;
  flex-flow: column;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.changelog-list {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 30px;
}
.license-section {
  padding-top: var(--_spacing---section-padding--padding-xxlarge);
  padding-bottom: var(--_spacing---section-padding--padding-xxlarge);
}
.license-content-block {
  background-color: #d2d2d080;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.license-link-wrapper {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.license-link-widget {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  background-color: var(--_colors---primary-colors--white);
  color: var(--_colors---primary-colors--primary);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 70px 40px 40px;
  text-decoration: none;
  display: flex;
}
.license-icon {
  width: auto;
  height: auto;
}
.license-link-block {
  z-index: 1;
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 40px;
  display: flex;
  position: relative;
}
.color-widget {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}
.color-widget-body {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.testimonial-three {
  height: 300vh;
}
.testimonial-three-title {
  margin-bottom: 40px;
}
.testimonial-card-text {
  font-size: var(--_typography---font-size--paragraphs--text-large);
  line-height: var(--_typography---line-height--paragraphs--text-large);
  letter-spacing: var(--_typography---letter-spacing--paragraphs--text-large);
}
.testimonial-card-text:where(.testimonial-card-v2) {
  font-size: var(--_typography---font-size--headings--h5);
  line-height: var(--_typography---line-height--headings--h5);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---letter-spacing--headings--h5);
}
.testimonial-three-card-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  display: flex;
}
.testimonial-three-card-wrap {
  flex: none;
}
.testimonial-three-sticky {
  height: 100vh;
  padding-bottom: var(--_spacing---section-padding--padding-xlarge);
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}
.hero-image-wrap {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  overflow: hidden;
}
.hero-sticky {
  height: 100vh;
}
.hero-image-block {
  z-index: 1;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}
.hero-content-wrap {
  background-color: var(--_colors---primary-colors--primary);
}
.service-widget-title-wrap {
  max-width: 220px;
}
.checkout-form {
  background-color: var(--_colors---primary-colors--transparent);
  padding: 0;
}
.checkout-input {
  border: 1px solid var(--_colors---primary-colors--dark-gray);
  background-color: var(--_colors---primary-colors--silver-gray);
  height: auto;
  min-height: 40px;
  line-height: var(--_typography---line-height--paragraphs--text-default);
  border-radius: 4px;
  padding: 8px;
}
.checkout-section {
  padding-top: var(--_spacing---section-padding--padding-xlarge);
  padding-bottom: var(--_spacing---section-padding--padding-xlarge);
}
.block-header {
  border-color: var(--_colors---primary-colors--background);
  padding-top: 8px;
  padding-bottom: 8px;
}
.block-content {
  border-right-color: var(--_colors---primary-colors--background);
  border-bottom-color: var(--_colors---primary-colors--background);
  border-left-color: var(--_colors---primary-colors--background);
}
.bold {
  font-weight: var(--_typography---font-weight--bold);
}
.paypal-checkout-form, .order-confirmation {
  background-color: var(--_colors---primary-colors--transparent);
  padding: 0;
}
.contact-submit-button {
  z-index: 5;
  opacity: 0;
  position: absolute;
  inset: 0%;
}
.contact-button-background, .success-message-background {
  z-index: -1;
  background-color: var(--_colors---primary-colors--secondary);
  position: absolute;
  inset: 0%;
}
.newsletter-button-text {
  z-index: 3;
  position: relative;
}
.license-link-block-background {
  z-index: -1;
  background-color: var(--_colors---primary-colors--secondary);
  pointer-events: none;
  position: absolute;
  inset: 0%;
}
.drag-indicator {
  grid-column-gap: 8px;
  text-transform: uppercase;
  background-color: #fff;
  border-radius: 50px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 4px 12px 4px 4px;
  display: flex;
}
.drag-icon-wrap {
  aspect-ratio: 1;
  background-color: var(--_colors---primary-colors--primary);
  width: 40px;
  color: var(--_colors---primary-colors--white);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}
.drag-indicator-wrap {
  pointer-events: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}
.drag-icon {
  max-width: 24px;
}
.service-collection.one {
  width: var(--full-size);
  max-width: 359px;
}
.service-collection.two {
  width: var(--full-size);
  max-width: 577px;
}
.service-collection.three {
  max-width: 368px;
}
.service-collection.four {
  width: var(--full-size);
  max-width: 517px;
}
.service-collection.five {
  max-width: 778px;
}
.service-main-tag-wrap {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  color: var(--_colors---primary-colors--dark-gray);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.checkout-button-wrap {
  flex-flow: column;
  display: flex;
}
.checkout-button {
  z-index: 5;
  opacity: 0;
  margin-bottom: 0;
  position: absolute;
  inset: 0%;
}
.password-button-text {
  flex: none;
}
.service-process-image {
  object-fit: cover;
  min-height: 500px;
}
.service-process-image.one {
  z-index: 5;
  position: relative;
}
.service-process-image.two {
  z-index: 4;
  position: absolute;
  inset: 0%;
}
.service-process-image.three {
  z-index: 3;
  position: absolute;
  inset: 0%;
}
.service-process-image.four {
  z-index: 2;
  position: absolute;
  inset: 0%;
}
.service-process-image.five {
  z-index: 1;
  position: absolute;
  inset: 0%;
}
.service-process-image-wrapper {
  width: var(--full-size);
  max-width: 500px;
  height: 500px;
  overflow: hidden;
}
.service-process-sticky {
  height: 100vh;
  padding-bottom: var(--_spacing---section-padding--padding-xlarge);
  position: sticky;
  top: 60px;
  overflow: hidden;
}
.service-step-no {
  opacity: 0;
}
.service-process-details-wrap {
  height: 135px;
  position: relative;
  overflow: hidden;
}
.testimonial-space {
  width: 80px;
  display: inline-block;
}
.checkout-actions {
  flex-flow: column;
  display: flex;
}
.apple-pay {
  border-radius: 10px;
  height: 46px;
}
.remove-button {
  color: var(--_colors---primary-colors--primary);
  display: inline-flex;
}
.cart-container {
  background-color: var(--_colors---primary-colors--pele);
}
.cart-header {
  border-bottom-color: var(--_colors---primary-colors--background);
}
.cart-footer {
  border-top-color: var(--_colors---primary-colors--background);
}
.cart-item-wrap {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 0;
  margin-right: 0;
}
.cart-item-title {
  width: var(--full-size);
  justify-content: space-between;
  display: flex;
}
.newsletter-button-background {
  background-color: var(--_colors---primary-colors--secondary);
  position: absolute;
  inset: 0%;
}
.close-button {
  cursor: pointer;
}
.work-two-title-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.work-two-title-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 80px;
  display: flex;
}
.story-widget-title-divider {
  width: var(--full-size);
  background-color: var(--_colors---primary-colors--secondary);
  height: 1px;
  position: absolute;
  inset: auto 0% -1px;
}
.work-card-image-overlay {
  pointer-events: none;
  background-color: #00000080;
  position: absolute;
  inset: 0%;
}
.work-card-image-overlay:where(.work-card-v2) {
  background-color: var(--_colors---primary-colors--transparent);
}
.light-text {
  color: var(--_colors---primary-colors--dark-gray);
}
.rich-text p {
  padding-bottom: 10px;
}
.buy-template-button {
  background-color: #7c7c7c26;
  border-top-left-radius: 1.4rem;
  border-top-right-radius: 1.4rem;
  justify-content: center;
  align-items: center;
  min-width: 20rem;
  position: fixed;
  inset: auto 0% 0% auto;
}
.buy-template-button:hover {
  box-shadow: 4px 4px 25px #0003;
}
.buy-template-button.frosted-glass {
  z-index: 1000;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 10px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: auto;
  min-width: 16rem;
  padding: 8px 12px;
  text-decoration: none;
  display: flex;
  position: relative;
  bottom: auto;
  right: auto;
}
.buy-template-button.frosted-glass:hover {
  border-width: 1px;
  border-color: #0158ff;
}
.unlock-full-access {
  color: #0158ff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2em;
}
.promo-cards {
  z-index: 10;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  display: flex;
  position: fixed;
  bottom: 20px;
  right: 20px;
}
.image-3 {
  width: 28px;
  height: 28px;
}
.circle {
  background-color: #0158ff;
  border-radius: 1000px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: -4px;
  right: -4px;
}
.promo-text {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2em;
  text-decoration: none;
}@media screen and (min-width: 1280px) {

  body {
    --_typography---font-family--global-font: "Inter Tight", sans-serif;
    --_typography---font-size--paragraphs--text-default: 16px;
    --_typography---line-height--paragraphs--text-default: 1.4em;
    --_typography---font-weight--regular: 400;
    --_typography---font-size--headings--h1: 170px;
    --_typography---line-height--headings--h1: 1em;
    --_typography---letter-spacing--headings--h1: -.02em;
    --_typography---font-size--headings--h2: 92px;
    --_typography---line-height--headings--h2: 1em;
    --_typography---letter-spacing--headings--h2: -.02em;
    --_typography---font-family--heading-font: Arial, "Helvetica Neue", Helvetica, sans-serif;
    --_typography---font-size--headings--h3: 54px;
    --_typography---line-height--headings--h3: 1.2em;
    --_typography---font-weight--medium: 500;
    --_typography---letter-spacing--headings--h3: -.02em;
    --_typography---font-size--headings--h4: 36px;
    --_typography---line-height--headings--h4: 1.2em;
    --_typography---letter-spacing--headings--h4: -.02em;
    --_typography---font-size--headings--h5: 24px;
    --_typography---line-height--headings--h5: 1.3em;
    --_typography---letter-spacing--headings--h5: -.02em;
    --_typography---font-size--headings--h6: 20px;
    --_typography---line-height--headings--h6: 1.2em;
    --_typography---letter-spacing--headings--h6: 0em;
    --_typography---letter-spacing--paragraphs--text-default: 0em;
    --_typography---font-size--paragraphs--text-small: 14px;
    --_typography---line-height--paragraphs--text-small: 1.4em;
    --_typography---letter-spacing--paragraphs--text-small: 0em;
    --_typography---font-size--paragraphs--text-large: 20px;
    --_typography---line-height--paragraphs--text-large: 1.4em;
    --_typography---letter-spacing--paragraphs--text-large: -.01em;
    --_typography---font-size--paragraphs--text-medium: 18px;
    --_typography---line-height--paragraphs--text-medium: 1.4em;
    --_typography---letter-spacing--paragraphs--text-medium: 0em;
    --_typography---font-size--headings--display: 170px;
    --_typography---font-weight--bold: 700;
    --_typography---font-size--buttons--button-large: 20px;
    --_typography---font-size--buttons--button-default: 18px;
    --_typography---font-size--buttons--button-small: 16px;
    --_typography---line-height--headings--display: 1.2em;
    --_typography---line-heightbuttons--button-large: 1em;
    --_typography---line-heightbuttons--button-default: 1em;
    --_typography---line-heightbuttons--button-small: 1em;
    --_typography---letter-spacing--headings--display: 0em;
    --_typography---font-weight--semi-bold: 600;
    --_typography---font-weight--light: 300;
  }
  .testimonial-card {
    padding: 40px;
  }
  .sg-content-wrap {
    max-width: 800px;
  }
  .hero-bottom {
    z-index: 5;
    position: relative;
  }
  .testimonial-card-wrap.four {
    left: -300px;
  }
  .section-title-left.is-blog {
    max-width: 675px;
  }
  .blog-card-body {
    max-width: 282px;
  }
  .blog-card-body:where(.blog-card-v2) {
    max-width: 325px;
  }
  .work-main-title-wrap {
    max-width: 1200px;
  }
  .hero-title.one {
    color: var(--_colors---primary-colors--background);
    margin-bottom: -24px;
  }
  .blog-main-title-wrap {
    max-width: 1040px;
  }
  .blog-details-title-wrap {
    max-width: 1216px;
  }
  .featured-blog-title {
    max-width: 460px;
  }
  .career-bottom-right {
    margin-right: 103px;
  }
  .career-feature-right {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }
  .job-card {
    grid-template-columns: 1fr 1.3fr 1fr;
  }
  .job-card-title-wrap {
    max-width: 482px;
  }
  .career-tab-menu {
    max-width: 432px;
  }
  .job-card-description {
    max-width: 420px;
  }
  .pricing-collection-two {
    max-width: 566px;
  }
  .contact-title-wrap {
    max-width: 1190px;
  }
  .service-main-title {
    max-width: 1200px;
  }
  .service-main-bottom-title {
    max-width: 300px;
  }
  .service-main-content {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    justify-content: space-between;
    align-items: flex-start;
    display: flex;
  }
  .trust-title {
    max-width: 760px;
  }
  .drag-track {
    justify-content: center;
    align-items: center;
  }
  .service-details-title {
    max-width: 865px;
  }
  .service-details-image {
    object-fit: cover;
  }
  .service-process {
    grid-column-gap: 100px;
    grid-row-gap: 100px;
  }
  .testimonial-two-title-wrap {
    margin-bottom: -64px;
  }
  .about-banner-title {
    max-width: 810px;
  }
  .about-banner-description {
    max-width: 365px;
    color: var(--_colors---primary-colors--background);
  }
  .about-bottom-line {
    max-width: 520px;
  }
  .approach-title-wrap {
    max-width: 240px;
    color: var(--_colors---primary-colors--dark-gray);
    text-decoration: none;
  }
  .purpose-title-wrap {
    max-width: 520px;
  }
  .team-title-block {
    max-width: 570px;
  }
  .hero-image-block {
    pointer-events: none;
  }
  .service-process-sticky {
    top: 40px;
  }}
@media screen and (min-width: 1440px) {

  body {
    --_typography---font-family--global-font: "Inter Tight", sans-serif;
    --_typography---font-size--paragraphs--text-default: 16px;
    --_typography---line-height--paragraphs--text-default: 1.4em;
    --_typography---font-weight--regular: 400;
    --_typography---font-size--headings--h1: 170px;
    --_typography---line-height--headings--h1: 1em;
    --_typography---letter-spacing--headings--h1: -.02em;
    --_typography---font-size--headings--h2: 92px;
    --_typography---line-height--headings--h2: 1em;
    --_typography---letter-spacing--headings--h2: -.02em;
    --_typography---font-family--heading-font: Arial, "Helvetica Neue", Helvetica, sans-serif;
    --_typography---font-size--headings--h3: 54px;
    --_typography---line-height--headings--h3: 1.2em;
    --_typography---font-weight--medium: 500;
    --_typography---letter-spacing--headings--h3: -.02em;
    --_typography---font-size--headings--h4: 36px;
    --_typography---line-height--headings--h4: 1.2em;
    --_typography---letter-spacing--headings--h4: -.02em;
    --_typography---font-size--headings--h5: 24px;
    --_typography---line-height--headings--h5: 1.3em;
    --_typography---letter-spacing--headings--h5: -.02em;
    --_typography---font-size--headings--h6: 20px;
    --_typography---line-height--headings--h6: 1.2em;
    --_typography---letter-spacing--headings--h6: 0em;
    --_typography---letter-spacing--paragraphs--text-default: 0em;
    --_typography---font-size--paragraphs--text-small: 14px;
    --_typography---line-height--paragraphs--text-small: 1.4em;
    --_typography---letter-spacing--paragraphs--text-small: 0em;
    --_typography---font-size--paragraphs--text-large: 20px;
    --_typography---line-height--paragraphs--text-large: 1.4em;
    --_typography---letter-spacing--paragraphs--text-large: -.01em;
    --_typography---font-size--paragraphs--text-medium: 18px;
    --_typography---line-height--paragraphs--text-medium: 1.4em;
    --_typography---letter-spacing--paragraphs--text-medium: 0em;
    --_typography---font-size--headings--display: 170px;
    --_typography---font-weight--bold: 700;
    --_typography---font-size--buttons--button-large: 20px;
    --_typography---font-size--buttons--button-default: 18px;
    --_typography---font-size--buttons--button-small: 16px;
    --_typography---line-height--headings--display: 1.2em;
    --_typography---line-heightbuttons--button-large: 1em;
    --_typography---line-heightbuttons--button-default: 1em;
    --_typography---line-heightbuttons--button-small: 1em;
    --_typography---letter-spacing--headings--display: 0em;
    --_typography---font-weight--semi-bold: 600;
    --_typography---font-weight--light: 300;
  }
  .testimonial-card {
    padding: 45px;
  }
  .heading-03 {
    font-weight: var(--_typography---font-weight--medium);
  }
  .testimonial-card-wrap.two {
    left: -80px;
  }
  .testimonial-card-wrap.three {
    left: -140px;
  }
  .section-title-left {
    max-width: 680px;
  }
  .work-main-title-line {
    background-color: var(--_colors---primary-colors--ashy-gray);
    height: 1px;
  }
  .career-feature-details-bottom {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    justify-content: space-between;
    display: flex;
  }
  .job-card {
    grid-template-columns: 1fr 1.25fr 1fr;
  }
  .career-feature-image {
    overflow: hidden;
  }
  .contact-form-block {
    width: var(--full-size);
    background-color: #2b2f2e80;
    border-radius: 16px;
    margin-bottom: 0;
    padding: 30px;
  }
  .contact-form-wrapper {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    justify-content: space-between;
    align-items: flex-start;
    display: flex;
  }
  .input-field {
    border-style: none none solid;
    border-width: 1px;
    border-color: black black var(--_colors---primary-colors--dark-gray);
    background-color: var(--_colors---primary-colors--transparent);
    margin-bottom: 0;
    padding: 8px 0;
  }
  .process-widget-title-wrap {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }
  .process-widget-image-wrap {
    aspect-ratio: 1;
    border-radius: 8px;
    max-width: 92px;
  }
  .password-input {
    border-style: none none solid;
    border-width: 1px;
    border-color: black black var(--_colors---primary-colors--dark-gray);
    background-color: var(--_colors---primary-colors--transparent);
    margin-bottom: 0;
  }
  .checkout-input {
    border-style: none none solid;
    border-width: 1px;
    border-color: black black var(--_colors---primary-colors--dark-gray);
    background-color: var(--_colors---primary-colors--transparent);
    margin-bottom: 0;
    padding: 8px 0;
  }}
@media screen and (max-width: 991px) {

  body {
    --font-size--h6-tablet: 20px;
    --font-size--h6-mobile: 20px;
    --line-height--h6: 1.4em;
    --full-size: 100%;
    --container: 1400px;
    --section-padding--tablet: 80px;
    --section-padding--mobile-portrait: 60px;
    --section-padding--mobile: 40px;
    --colors--primary: #ff464f;
    --_typography---font-family--global-font: "Inter Tight", sans-serif;
    --_typography---font-size--paragraphs--text-default: 16px;
    --_typography---line-height--paragraphs--text-default: 1.4em;
    --_typography---font-weight--regular: 400;
    --_typography---font-size--headings--h1: 54px;
    --_typography---line-height--headings--h1: 1em;
    --_typography---letter-spacing--headings--h1: -.02em;
    --_typography---font-size--headings--h2: 48px;
    --_typography---line-height--headings--h2: 1em;
    --_typography---letter-spacing--headings--h2: -.02em;
    --_typography---font-family--heading-font: Arial, "Helvetica Neue", Helvetica, sans-serif;
    --_typography---font-size--headings--h3: 40px;
    --_typography---line-height--headings--h3: 1.2em;
    --_typography---font-weight--medium: 500;
    --_typography---letter-spacing--headings--h3: -.02em;
    --_typography---font-size--headings--h4: 28px;
    --_typography---line-height--headings--h4: 1.2em;
    --_typography---letter-spacing--headings--h4: -.02em;
    --_typography---font-size--headings--h5: 22px;
    --_typography---line-height--headings--h5: 1.3em;
    --_typography---letter-spacing--headings--h5: -.02em;
    --_typography---font-size--headings--h6: 20px;
    --_typography---line-height--headings--h6: 1.2em;
    --_typography---letter-spacing--headings--h6: 0em;
    --_typography---letter-spacing--paragraphs--text-default: 0em;
    --_typography---font-size--paragraphs--text-small: 14px;
    --_typography---line-height--paragraphs--text-small: 1.4em;
    --_typography---letter-spacing--paragraphs--text-small: 0em;
    --_typography---font-size--paragraphs--text-large: 20px;
    --_typography---line-height--paragraphs--text-large: 1.4em;
    --_typography---letter-spacing--paragraphs--text-large: -.01em;
    --_typography---font-size--paragraphs--text-medium: 18px;
    --_typography---line-height--paragraphs--text-medium: 1.4em;
    --_typography---letter-spacing--paragraphs--text-medium: 0em;
    --_typography---font-size--headings--display: 80px;
    --_typography---font-weight--bold: 700;
    --_typography---font-size--buttons--button-large: 20px;
    --_typography---font-size--buttons--button-default: 18px;
    --_typography---font-size--buttons--button-small: 16px;
    --_typography---line-height--headings--display: 1.2em;
    --_typography---line-heightbuttons--button-large: 1em;
    --_typography---line-heightbuttons--button-default: 1em;
    --_typography---line-heightbuttons--button-small: 1em;
    --_typography---letter-spacing--headings--display: 0em;
    --_typography---font-weight--semi-bold: 600;
    --_typography---font-weight--light: 300;
    --_spacing---section-padding--padding-xxxlarge: 140px;
    --_spacing---section-padding--padding-large: 80px;
    --_spacing---section-padding--padding-default: 80px;
    --_spacing---section-padding--padding-small: 80px;
    --_spacing---section-padding--padding-xxlarge: 80px;
    --_spacing---section-padding--padding-xlarge: 80px;
  }
  h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-6) {
    font-size: var(--font-size--h6-tablet);
  }
  .container {
    max-width: none;
  }
  .container.is-footer {
    padding-left: 20px;
    padding-right: 20px;
  }
  .footer-main {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }
  .testimonial-card {
    min-height: 450px;
  }
  .testimonial-card:where(.testimonial-card-v2) {
    min-height: auto;
    padding: 32px;
  }
  .error-section {
    min-height: 70vh;
    padding-top: var(--section-padding--tablet);
    padding-bottom: var(--section-padding--tablet);
  }
  .team-card {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .footer-content-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: wrap;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .copyright-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  .section-title-block-2 {
    margin-bottom: 40px;
  }
  .sg-content-block {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
    flex-flow: column;
  }
  .sg-button-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .sg-typography-text-block {
    padding-bottom: 32px;
  }
  .sg-content-wrap {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    max-width: 675px;
  }
  .style-guide-section {
    padding-bottom: 80px;
  }
  .sg-typography-details-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    justify-content: flex-start;
  }
  .sg-title-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    max-width: 140px;
    top: 30px;
  }
  .changelog-section {
    padding-bottom: 80px;
  }
  .changelog-content-block {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .changelog-version-wrap {
    padding: 32px;
  }
  .navbar {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .nav-link {
    margin-left: 0;
    padding: 4px 0;
  }
  .nav-link.show-phone {
    display: block;
  }
  .nav-button-wrap.desktop-only {
    display: none;
  }
  .brand-logo-link {
    max-width: 75px;
  }
  .hamburger-line-bottom {
    background-color: var(--_colors---primary-colors--secondary);
    border-radius: 16px;
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }
  .header-section {
    z-index: 2147483647;
  }
  .nav-link-wrap {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    max-width: 720px;
  }
  .hamburger-line-middle {
    background-color: var(--_colors---primary-colors--secondary);
    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-top {
    background-color: var(--_colors---primary-colors--secondary);
    border-radius: 16px;
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }
  .button-3 {
    padding: 16px 24px;
    font-size: 20px;
  }
  .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(--_colors---primary-colors--ashy-gray);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
  }
  .utility-content-wrap {
    grid-row-gap: 32px;
  }
  .button-primary {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .utility-page-wrap {
    height: 70vh;
  }
  .hero-section {
    height: auto;
  }
  .hero-title-wrap {
    margin-bottom: 60px;
  }
  .hero-image {
    max-width: 240px;
    transform: none;
  }
  .hero-title-block {
    flex-flow: column;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 40px;
    display: flex;
  }
  .story-widget-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .story-top {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .story-content-block {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }
  .home-about-bottom {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    padding-top: 20px;
    padding-bottom: 80px;
  }
  .home-about-description {
    max-width: 400px;
  }
  .work-card {
    border-radius: 24px;
    min-height: 500px;
    padding: 32px;
  }
  .work-card:where(.work-card-v2) {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    min-height: auto;
    padding: 0;
  }
  .work-text-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
  .work-card-image-wrap:where(.work-card-v2) {
    border-radius: 20px;
  }
  .work-card-button {
    width: 80px;
    height: 80px;
  }
  .service-section-title {
    margin-bottom: 60px;
  }
  .service-widget-inner {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .service-widget-title {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    justify-content: space-between;
  }
  .service-tag-wrapper {
    order: 9999;
  }
  .service-tag-wrap {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .service-widget-description-block {
    max-width: none;
  }
  .service-widget-image {
    max-height: 400px;
  }
  .testimonial-section, .testimonial-sticky {
    height: auto;
  }
  .testimonial-title {
    margin-bottom: 40px;
    position: static;
    transform: none;
  }
  .testimonial-card-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .testimonial-card-wrap.one, .testimonial-card-wrap.two, .testimonial-card-wrap.three, .testimonial-card-wrap.four {
    position: static;
  }
  .section-title-left {
    max-width: 520px;
  }
  .section-title-row {
    margin-bottom: 60px;
  }
  .blog-card-block {
    grid-template-columns: 1fr 1fr;
  }
  .pricing-card {
    border-radius: 12px;
    padding: 24px;
  }
  .pricing-description-block.v2 {
    max-width: none;
  }
  .pricing-list-wrapper {
    border-radius: 16px;
    flex-flow: column;
    grid-template-columns: 1fr 1fr;
  }
  .pricing-list-wrapper.is-main {
    flex-flow: column;
  }
  .section-title-wrap {
    margin-bottom: 40px;
  }
  .accordion-text-wrap {
    padding-right: 24px;
  }
  .accordion-title-wrap {
    justify-content: space-between;
  }
  .faq-accordion-wrap {
    max-width: none;
  }
  .faq-content-block {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-flow: column;
  }
  .faq-title-wrap {
    width: var(--full-size);
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
  }
  .footer-particle {
    max-width: 20px;
  }
  .footer-social-block {
    order: -1;
  }
  .footer-contact-block {
    grid-template-columns: 1fr 1fr;
  }
  .work-details-top {
    padding-bottom: 40px;
  }
  .work-info-block {
    margin-bottom: 40px;
    padding-bottom: 40px;
  }
  .work-rich-text h2:where(:not([class*="heading-scale-"])), .work-rich-text :where(.heading-scale-2) {
    margin-bottom: 32px;
  }
  .work-rich-text h3:where(:not([class*="heading-scale-"])), .work-rich-text :where(.heading-scale-3) {
    margin-bottom: 10px;
  }
  .work-rich-text p, .work-rich-text blockquote {
    margin-bottom: 24px;
  }
  .work-rich-text.right-align {
    max-width: none;
  }
  .work-gallery {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
  .work-gallery-image {
    border-radius: 12px;
  }
  .work-details-block {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    padding-top: 40px;
  }
  .work-main-title-block {
    padding-top: 100px;
    padding-bottom: 60px;
  }
  .work-main-title-wrap {
    padding-bottom: 60px;
  }
  .work-main-card-block {
    padding-top: 40px;
  }
  .hero-title.one {
    margin-bottom: -6px;
  }
  .collaboration-content-block {
    flex-flow: column;
    padding: 24px;
  }
  .collaboration-title-block {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    margin-bottom: 80px;
  }
  .collaboration-image-wrap {
    order: -9999;
    max-width: none;
  }
  .pricing-main-title-wrap {
    text-align: center;
    margin-bottom: 60px;
    padding-bottom: 60px;
  }
  .blog-tabs-menu {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
  .blog-details-title-block {
    margin-bottom: 40px;
  }
  .blog-details-block {
    padding-top: 28px;
    padding-bottom: 20px;
  }
  .blog-rich-text h2:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-2) {
    margin-top: 40px;
    margin-bottom: 12px;
  }
  .blog-rich-text p {
    margin-bottom: 40px;
  }
  .blog-rich-text h3:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-3) {
    margin-bottom: 12px;
  }
  .blog-rich-text ul {
    grid-column-gap: 2px;
    grid-row-gap: 2px;
  }
  .blog-quote-block {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    border-radius: 12px;
    margin-top: 0;
    padding: 32px;
  }
  .collection-list-2 {
    flex-flow: column;
  }
  .featured-blog-section {
    height: auto;
  }
  .featured-blog-title {
    max-width: 360px;
    margin-bottom: 40px;
  }
  .featured-blog-sticky {
    height: auto;
    position: static;
  }
  .career-title-wrap {
    max-width: 450px;
    margin-bottom: 40px;
  }
  .career-description-block {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .career-bottom-left {
    flex: none;
  }
  .career-feature-title {
    max-width: none;
    margin-bottom: 40px;
  }
  .career-feature-right {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .career-feature-details {
    padding-top: 16px;
  }
  .job-card {
    grid-template-columns: 1fr;
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .job-card-title-wrap {
    grid-row-gap: 20px;
    max-width: none;
  }
  .job-card-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
  }
  .career-gallery-image-wrap {
    width: 280px;
    margin-right: 16px;
  }
  .career-details-title {
    margin-bottom: 40px;
  }
  .career-details-info-block {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    padding-top: 40px;
  }
  .career-details-bottom {
    padding-top: 40px;
  }
  .career-details-rich-text h2:where(:not([class*="heading-scale-"])), .career-details-rich-text :where(.heading-scale-2) {
    margin-top: 40px;
    margin-bottom: 12px;
  }
  .career-details-rich-text ul {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
  .career-tabs {
    flex-flow: column;
    padding-top: 40px;
  }
  .career-tab-menu {
    max-width: none;
    margin-bottom: 60px;
    margin-right: 0;
  }
  .career-tab-link {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .job-card-button-wrap {
    justify-content: flex-start;
    align-items: flex-end;
    margin-left: 0;
  }
  .pricing-collection-list-elite, .pricing-collection, .pricing-collection-two {
    max-width: none;
  }
  .pricing-details-title-block {
    padding-bottom: 40px;
  }
  .add-to-card-block {
    padding: 24px;
  }
  .add-to-cart-inner {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .add-to-cart-text-block {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .contact-form-block {
    padding: 24px;
  }
  .contact-link-block {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .contact-link-wrapper {
    grid-row-gap: 20px;
  }
  .contact-form-wrapper {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
  }
  .input-field.text-area {
    min-height: 140px;
  }
  .service-main-title {
    max-width: 390px;
    margin-bottom: 40px;
  }
  .service-main-description-block {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .service-main-bottom-title {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    max-width: none;
    position: static;
  }
  .service-main-content {
    flex-flow: column;
  }
  .service-main-card-block {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .service-main-card.one {
    margin-top: 100px;
  }
  .service-main-button {
    width: 80px;
  }
  .service-main-card-wrapper {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .trust-section {
    height: auto;
  }
  .trust-card-row {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .trust-card {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    min-height: auto;
    padding: 24px;
  }
  .trust-card-body {
    grid-row-gap: 20px;
  }
  .trust-card-icon {
    max-width: 70px;
  }
  .trust-card-title-block {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .trust-title-block {
    margin-bottom: 40px;
    padding-bottom: 40px;
  }
  .trust-sticky {
    height: auto;
  }
  .process-widget {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    place-items: center stretch;
    display: grid;
  }
  .process-widget-description {
    max-width: none;
  }
  .process-widget-no-wrap {
    max-width: 130px;
  }
  .process-widget-title-wrap {
    justify-content: space-between;
  }
  .process-widget-no.absolute {
    display: none;
  }
  .drag-item {
    width: 500px;
  }
  .service-details-title {
    max-width: 466px;
  }
  .service-introduction {
    flex-flow: column;
  }
  .service-introduction-left {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    max-width: none;
  }
  .service-introduction-right {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .service-include-title {
    margin-bottom: 40px;
  }
  .service-include-card {
    height: auto;
    color: var(--_colors---primary-colors--white);
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .service-include-card-inner {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .service-include-card-icon {
    max-width: 70px;
  }
  .service-include-card-title.static {
    display: none;
  }
  .service-include-card-title.hover {
    position: static;
  }
  .service-process-title {
    max-width: 360px;
  }
  .service-process-image-wrap {
    max-width: 390px;
  }
  .service-process {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .service-process-right {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
  }
  .service-process-details {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .testimonial-two-slider-block {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  .testimonial-two-slider, .testimonial-two-image-wrap {
    max-width: none;
  }
  .testimonial-two-text-wrap {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .testimonial-two-content {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .image-2 {
    object-position: 50% 0%;
    max-height: 500px;
  }
  .testimonial-two-title-wrap {
    margin-bottom: -21px;
  }
  .about-banner-title {
    max-width: 430px;
  }
  .about-banner-top {
    flex-flow: wrap;
    align-items: stretch;
    margin-bottom: 80px;
  }
  .about-banner-image-wrap {
    max-width: 100%;
  }
  .about-banner-bottom {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .about-top {
    margin-bottom: 60px;
  }
  .about-description {
    min-width: auto;
  }
  .about-bottom-details {
    min-width: 600px;
  }
  .about-bottom-line, .about-sub-title {
    max-width: 200px;
  }
  .approach-title-wrap {
    flex: none;
    max-width: 270px;
  }
  .purpose-title-wrap {
    margin-top: 100px;
  }
  .purpose-image.one {
    left: 65px;
  }
  .purpose-image.two {
    right: 65px;
  }
  .purpose-image.three {
    left: 92px;
  }
  .purpose-image.four {
    top: 230px;
  }
  .purpose-image.five {
    left: 10%;
  }
  .purpose-image.six {
    right: 9%;
  }
  .award-section {
    height: auto;
  }
  .award-sticky {
    height: auto;
    position: static;
  }
  .award-card-wrapper {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .award-card {
    grid-column-gap: 100px;
    grid-row-gap: 100px;
    max-width: none;
  }
  .award-card-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: flex-start;
    align-items: center;
    margin-top: 60px;
    display: block;
    position: static;
  }
  .mission-title {
    margin-bottom: 40px;
  }
  .mission-image-wrap {
    width: 80%;
    margin-left: auto;
  }
  .mission-text-block {
    max-width: none;
  }
  .founder-image-wrap {
    max-width: 240px;
    inset: auto auto -60px 0%;
  }
  .mission-right {
    padding-top: 0;
  }
  .mission-content-block {
    flex-flow: column;
  }
  .team-card-block {
    grid-row-gap: 32px;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .license-link-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .license-link-widget {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .testimonial-three {
    height: auto;
  }
  .testimonial-three-card-block {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .testimonial-three-sticky, .hero-sticky {
    height: auto;
  }
  .service-widget-title-wrap {
    max-width: none;
  }
  .work-two-title-wrap {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .work-two-title-block {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    margin-bottom: 60px;
  }}
@media screen and (max-width: 767px) {

  body {
    --font-size--h6-tablet: 20px;
    --font-size--h6-mobile: 20px;
    --line-height--h6: 1.4em;
    --full-size: 100%;
    --container: 1400px;
    --section-padding--tablet: 80px;
    --section-padding--mobile-portrait: 60px;
    --section-padding--mobile: 40px;
    --colors--primary: #ff464f;
    --_typography---font-family--global-font: "Inter Tight", sans-serif;
    --_typography---font-size--paragraphs--text-default: 16px;
    --_typography---line-height--paragraphs--text-default: 1.4em;
    --_typography---font-weight--regular: 400;
    --_typography---font-size--headings--h1: 40px;
    --_typography---line-height--headings--h1: 1em;
    --_typography---letter-spacing--headings--h1: -.02em;
    --_typography---font-size--headings--h2: 36px;
    --_typography---line-height--headings--h2: 1em;
    --_typography---letter-spacing--headings--h2: -.02em;
    --_typography---font-family--heading-font: Arial, "Helvetica Neue", Helvetica, sans-serif;
    --_typography---font-size--headings--h3: 32px;
    --_typography---line-height--headings--h3: 1.2em;
    --_typography---font-weight--medium: 500;
    --_typography---letter-spacing--headings--h3: -.02em;
    --_typography---font-size--headings--h4: 24px;
    --_typography---line-height--headings--h4: 1.2em;
    --_typography---letter-spacing--headings--h4: -.02em;
    --_typography---font-size--headings--h5: 20px;
    --_typography---line-height--headings--h5: 1.3em;
    --_typography---letter-spacing--headings--h5: -.02em;
    --_typography---font-size--headings--h6: 20px;
    --_typography---line-height--headings--h6: 1.2em;
    --_typography---letter-spacing--headings--h6: 0em;
    --_typography---letter-spacing--paragraphs--text-default: 0em;
    --_typography---font-size--paragraphs--text-small: 14px;
    --_typography---line-height--paragraphs--text-small: 1.4em;
    --_typography---letter-spacing--paragraphs--text-small: 0em;
    --_typography---font-size--paragraphs--text-large: 18px;
    --_typography---line-height--paragraphs--text-large: 1.4em;
    --_typography---letter-spacing--paragraphs--text-large: -.01em;
    --_typography---font-size--paragraphs--text-medium: 18px;
    --_typography---line-height--paragraphs--text-medium: 1.4em;
    --_typography---letter-spacing--paragraphs--text-medium: 0em;
    --_typography---font-size--headings--display: 60px;
    --_typography---font-weight--bold: 700;
    --_typography---font-size--buttons--button-large: 20px;
    --_typography---font-size--buttons--button-default: 18px;
    --_typography---font-size--buttons--button-small: 16px;
    --_typography---line-height--headings--display: 1.2em;
    --_typography---line-heightbuttons--button-large: 1em;
    --_typography---line-heightbuttons--button-default: 1em;
    --_typography---line-heightbuttons--button-small: 1em;
    --_typography---letter-spacing--headings--display: 0em;
    --_typography---font-weight--semi-bold: 600;
    --_typography---font-weight--light: 300;
    --_spacing---section-padding--padding-xxxlarge: 120px;
    --_spacing---section-padding--padding-large: 60px;
    --_spacing---section-padding--padding-default: 60px;
    --_spacing---section-padding--padding-small: 60px;
    --_spacing---section-padding--padding-xxlarge: 60px;
    --_spacing---section-padding--padding-xlarge: 60px;
  }
  h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-6) {
    font-size: var(--font-size--h6-mobile);
    line-height: var(--line-height--h6);
  }
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .footer-main {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .testimonial-body-text:where(.testimonial-card-v2) {
    max-width: none;
  }
  .testimonial-author-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .testimonial-card {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    max-width: none;
    min-height: auto;
  }
  .testimonial-card:where(.testimonial-card-v2) {
    min-height: auto;
    padding: 20px;
  }
  .error-section {
    padding-top: var(--section-padding--mobile-portrait);
    padding-bottom: var(--section-padding--mobile-portrait);
  }
  .badge-horizontal-line {
    width: 54px;
  }
  .team-card {
    max-width: none;
  }
  .footer-link-widget {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .footer-link-widget.is-newsletter {
    max-width: none;
  }
  .footer-content-wrapper {
    grid-column-gap: 32px;
    grid-row-gap: 24px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .footer-content-block {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
  .footer {
    padding-top: 40px;
  }
  .copyright-block {
    padding-top: 30px;
  }
  .section-title-block-2 {
    margin-bottom: 30px;
  }
  .sg-content-block {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }
  .sg-button-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
  .sg-typography-text-block {
    padding-bottom: 24px;
  }
  .sg-content-wrap {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    max-width: none;
  }
  .style-guide-section {
    padding-bottom: 60px;
  }
  .sg-content-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: column;
  }
  .sg-title-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    position: static;
  }
  .changelog-section {
    padding-bottom: 60px;
  }
  .changelog-content-block {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: column;
  }
  .changelog-version-wrap {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    padding: 24px;
  }
  .utility-tect-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .brand-logo-link {
    max-width: 65px;
  }
  .nav-link-wrap {
    max-width: 540px;
  }
  .button-3 {
    padding: 14px 20px;
    font-size: 18px;
  }
  .nav-button-wrapper {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
  .hamburger {
    width: 44px;
    height: 44px;
  }
  .nav-menu {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .utility-content-wrap {
    grid-row-gap: 24px;
  }
  .hero-bottom-text {
    max-width: 300px;
  }
  .hero-bottom {
    flex-flow: wrap;
  }
  .hero-image {
    max-width: 200px;
  }
  .story-widget-wrap {
    grid-template-columns: 1fr;
  }
  .story-top {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: column;
  }
  .story-widget {
    opacity: 1;
  }
  .story-content-block {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .home-about-section {
    height: auto;
  }
  .home-about-sticky {
    height: 60vh;
  }
  .home-about-bottom {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: column;
    padding-top: 16px;
    padding-bottom: 60px;
  }
  .home-about-description {
    max-width: none;
  }
  .work-card {
    border-radius: 20px;
    min-height: 400px;
    padding: 24px;
  }
  .work-card:where(.work-card-v2) {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    min-height: auto;
    padding: 0;
  }
  .work-text-block:where(.work-card-v2) {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
  .work-card-image-wrap:where(.work-card-v2) {
    border-radius: 16px;
  }
  .work-card-button:where(.work-card-v2) {
    width: 70px;
    height: 70px;
  }
  .work-card-wrapper {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-flow: column;
    display: flex;
  }
  .service-section-title {
    margin-bottom: 40px;
  }
  .service-widget-inner {
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
  }
  .service-widget-title {
    justify-content: space-between;
  }
  .service-tag-wrapper {
    order: 9999;
  }
  .service-tag-wrap {
    padding: 8px 12px;
  }
  .service-widget-description-block {
    max-width: none;
  }
  .service-widget-image {
    max-height: 300px;
  }
  .client-widget-block {
    grid-template-columns: 1fr 1fr;
  }
  .testimonial-card-block {
    grid-template-columns: 1fr;
  }
  .section-title-row {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
  }
  .blog-card:where(.blog-card-v2) {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .blog-card-body:where(.blog-card-v2) {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
  .pricing-card {
    border-radius: 8px;
    padding: 20px;
  }
  .pricing-card-head {
    grid-row-gap: 24px;
  }
  .pricing-badge {
    border-radius: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .pricing-card-button {
    min-height: 48px;
  }
  .pricing-list-wrapper {
    border-radius: 12px;
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .pricing-tabs-menu {
    margin-bottom: 24px;
  }
  .section-title-wrap {
    margin-bottom: 32px;
  }
  .accordion-text-wrap {
    padding-right: 0;
  }
  .footer-particle {
    height: 40px;
  }
  .footer-contact-block {
    flex-flow: wrap;
    grid-template-columns: 1fr;
    display: flex;
  }
  .footern-contact-link {
    max-width: 340px;
  }
  .work-info-block {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-bottom: 32px;
    padding-bottom: 32px;
    display: grid;
  }
  .work-info-wrap {
    min-width: auto;
  }
  .work-rich-text h2:where(:not([class*="heading-scale-"])), .work-rich-text :where(.heading-scale-2) {
    margin-bottom: 24px;
  }
  .work-rich-text h3:where(:not([class*="heading-scale-"])), .work-rich-text :where(.heading-scale-3) {
    margin-bottom: 8px;
  }
  .work-gallery {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
  .work-gallery-image {
    border-radius: 8px;
  }
  .work-details-block {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    padding-top: 32px;
  }
  .work-main-title-block {
    padding-top: 80px;
    padding-bottom: 40px;
  }
  .work-main-title-wrap {
    padding-bottom: 40px;
  }
  .collection-list {
    grid-template-columns: 1fr;
  }
  .hero-title.one {
    margin-bottom: -5px;
  }
  .collaboration-content-block {
    padding: 20px;
  }
  .collaboration-title-block {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    margin-bottom: 60px;
  }
  .collaboration-title-wrap {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
  .collaboration-image-wrap {
    border-radius: 12px;
  }
  .pricing-main-title-wrap {
    margin-bottom: 40px;
    padding-bottom: 40px;
  }
  .blog-tabs-menu {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
  .blog-details-title-block {
    margin-bottom: 32px;
  }
  .blog-details-block {
    padding-top: 8px;
    padding-bottom: 16px;
  }
  .blog-rich-text h2:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-2) {
    margin-top: 32px;
    margin-bottom: 8px;
  }
  .blog-rich-text p {
    margin-bottom: 32px;
  }
  .blog-rich-text h3:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-3) {
    margin-bottom: 8px;
  }
  .blog-rich-text ul {
    margin-bottom: 32px;
  }
  .blog-quote-block {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    border-radius: 8px;
    padding: 24px;
  }
  .featured-blog-title {
    max-width: 270px;
    margin-bottom: 32px;
  }
  .career-title-wrap {
    max-width: 310px;
    margin-bottom: 32px;
  }
  .career-description-block {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  .career-description-wrap {
    max-width: none;
  }
  .career-bottom-content {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-flow: column;
  }
  .career-feature-title {
    margin-bottom: 32px;
  }
  .career-feature-right {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: column;
  }
  .career-feature-details-top {
    max-width: none;
    padding-right: 0;
  }
  .career-feature-image-wrap {
    max-width: none;
  }
  .career-feature-details-bottom {
    order: -9999;
  }
  .career-feature-details {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    padding-top: 0;
  }
  .job-card-title-wrap {
    grid-row-gap: 16px;
  }
  .career-gallery-image-wrap {
    border-radius: 6px;
    width: 200px;
    margin-right: 12px;
  }
  .career-details-title {
    margin-bottom: 32px;
  }
  .career-details-info-block {
    grid-column-gap: 16px;
    grid-row-gap: 24px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    padding-top: 32px;
  }
  .career-details-bottom {
    padding-top: 18px;
  }
  .career-details-rich-text h2:where(:not([class*="heading-scale-"])), .career-details-rich-text :where(.heading-scale-2) {
    margin-top: 32px;
    margin-bottom: 10px;
  }
  .career-details-rich-text ul {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
  }
  .career-tabs {
    padding-top: 32px;
  }
  .career-tab-menu {
    margin-bottom: 40px;
  }
  .career-tab-link {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .pricing-collection-list {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr;
  }
  .pricing-details-title-block {
    padding-bottom: 32px;
  }
  .pricing-details {
    flex-flow: column;
  }
  .pricing-details-right {
    order: -9999;
    position: static;
  }
  .add-to-card-block {
    padding: 20px;
  }
  .add-to-cart-inner {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .add-to-cart-text-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .add-to-card-button {
    height: 48px;
  }
  .option-button {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .pricing-details-description {
    max-width: none;
  }
  .contact-form-block {
    padding: 20px;
  }
  .contact-link-block {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .contact-link-wrapper {
    grid-row-gap: 16px;
  }
  .input-field.text-area {
    min-height: 120px;
  }
  .service-main-title {
    max-width: 290px;
    margin-bottom: 32px;
  }
  .service-main-description {
    max-width: none;
  }
  .service-main-description-block {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  .service-main-bottom-title {
    max-width: none;
  }
  .service-main-content {
    flex-flow: column;
  }
  .service-main-card {
    grid-row-gap: 16px;
  }
  .service-main-card.one {
    margin-top: 60px;
  }
  .service-main-button {
    width: 70px;
  }
  .service-main-card-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .trust-card-row {
    grid-template-columns: 1fr 1fr;
  }
  .trust-card {
    max-width: none;
    padding: 20px;
  }
  .trust-card-icon {
    max-width: 60px;
  }
  .trust-card-title-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: column;
  }
  .trust-title-block {
    margin-bottom: 32px;
    padding-bottom: 32px;
  }
  .process-title {
    margin-bottom: 32px;
  }
  .drag-item {
    width: 400px;
  }
  .service-details-title-block {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  .service-details-title {
    max-width: 325px;
  }
  .service-introduction-left, .service-introduction-right {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .service-include-title {
    margin-bottom: 32px;
    position: sticky;
    top: 30px;
  }
  .service-include-card-block {
    grid-template-columns: 1fr 1fr;
  }
  .service-include-card {
    padding-top: 40px;
    padding-bottom: 40px;
    position: sticky;
    top: 140px;
  }
  .service-include-card-inner {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .service-include-card-icon {
    max-width: 60px;
  }
  .service-process-title-block {
    margin-bottom: 32px;
  }
  .service-process-title {
    max-width: 300px;
  }
  .service-process-image-wrap {
    max-width: none;
  }
  .service-process {
    flex-flow: column;
    align-items: stretch;
  }
  .service-process-step-block {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
  .service-process-right {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .service-process-details {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    max-width: none;
  }
  .testimonial-two-slide-nav {
    height: 40px;
    padding-top: 12px;
  }
  .testimonial-two-text-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .testimonial-two-content {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .testimonial-two-video {
    width: 44px;
  }
  .image-2 {
    max-height: 400px;
  }
  .testimonial-two-title-wrap {
    margin-bottom: -13px;
  }
  .about-banner-title {
    max-width: 320px;
  }
  .about-banner-top {
    margin-bottom: 60px;
  }
  .about-banner-bottom {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  .about-top {
    flex-flow: column;
    margin-bottom: 40px;
  }
  .about-bottom-details {
    min-width: auto;
  }
  .approach-widget-block {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .about-bottom {
    flex-flow: column;
  }
  .about-bottom-line {
    max-width: none;
  }
  .approach-title-wrap {
    max-width: 220px;
  }
  .approach-description {
    max-width: none;
  }
  .purpose-section {
    height: auto;
  }
  .purpose-title-wrap {
    margin-top: 0;
  }
  .purpose-sticky {
    height: auto;
    position: static;
  }
  .purpose-image-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-top: 40px;
    padding-left: 20px;
    padding-right: 20px;
    display: grid;
    position: static;
  }
  .purpose-image {
    min-height: 200px;
    max-height: 200px;
  }
  .purpose-image.one, .purpose-image.two {
    max-width: none;
    position: static;
  }
  .purpose-image.three {
    max-width: none;
    position: static;
    transform: rotate(0);
  }
  .purpose-image.four {
    max-width: none;
    position: static;
  }
  .purpose-image.five {
    max-width: none;
    position: static;
    transform: rotate(0);
  }
  .purpose-image.six {
    max-width: none;
    position: static;
  }
  .award-card {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }
  .award-card-block {
    margin-top: 40px;
  }
  .mission-title {
    margin-bottom: 32px;
  }
  .founder-image-wrap {
    max-width: 229px;
  }
  .team-title-block {
    max-width: 400px;
  }
  .password-submit-buton-wrap {
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .license-link-widget {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .license-link-block {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    padding: 32px 20px;
  }
  .testimonial-three {
    height: auto;
  }
  .testimonial-three-title {
    position: sticky;
    top: 20px;
  }
  .testimonial-three-card-block {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .testimonial-three-card-wrap {
    box-shadow: 0 -1px 4px 0 var(--_colors---primary-colors--pele);
    position: sticky;
    top: 80px;
  }
  .testimonial-three-sticky {
    height: auto;
    overflow: visible;
  }
  .service-process-image {
    min-height: 300px;
    max-height: 300px;
  }
  .service-process-image-wrapper {
    max-width: none;
    height: 300px;
  }
  .service-process-sticky {
    top: 30px;
  }
  .work-two-title-block {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
  }}
@media screen and (max-width: 479px) {

  body {
    --font-size--h6-tablet: 20px;
    --font-size--h6-mobile: 20px;
    --line-height--h6: 1.4em;
    --full-size: 100%;
    --container: 1400px;
    --section-padding--tablet: 80px;
    --section-padding--mobile-portrait: 60px;
    --section-padding--mobile: 40px;
    --colors--primary: #ff464f;
    --_typography---font-family--global-font: "Inter Tight", sans-serif;
    --_typography---font-size--paragraphs--text-default: 16px;
    --_typography---line-height--paragraphs--text-default: 1.4em;
    --_typography---font-weight--regular: 400;
    --_typography---font-size--headings--h1: 40px;
    --_typography---line-height--headings--h1: 1em;
    --_typography---letter-spacing--headings--h1: -.02em;
    --_typography---font-size--headings--h2: 36px;
    --_typography---line-height--headings--h2: 1em;
    --_typography---letter-spacing--headings--h2: -.02em;
    --_typography---font-family--heading-font: Arial, "Helvetica Neue", Helvetica, sans-serif;
    --_typography---font-size--headings--h3: 32px;
    --_typography---line-height--headings--h3: 1.2em;
    --_typography---font-weight--medium: 500;
    --_typography---letter-spacing--headings--h3: -.02em;
    --_typography---font-size--headings--h4: 24px;
    --_typography---line-height--headings--h4: 1.2em;
    --_typography---letter-spacing--headings--h4: -.02em;
    --_typography---font-size--headings--h5: 20px;
    --_typography---line-height--headings--h5: 1.3em;
    --_typography---letter-spacing--headings--h5: -.02em;
    --_typography---font-size--headings--h6: 20px;
    --_typography---line-height--headings--h6: 1.2em;
    --_typography---letter-spacing--headings--h6: 0em;
    --_typography---letter-spacing--paragraphs--text-default: 0em;
    --_typography---font-size--paragraphs--text-small: 14px;
    --_typography---line-height--paragraphs--text-small: 1.4em;
    --_typography---letter-spacing--paragraphs--text-small: 0em;
    --_typography---font-size--paragraphs--text-large: 18px;
    --_typography---line-height--paragraphs--text-large: 1.4em;
    --_typography---letter-spacing--paragraphs--text-large: -.01em;
    --_typography---font-size--paragraphs--text-medium: 18px;
    --_typography---line-height--paragraphs--text-medium: 1.4em;
    --_typography---letter-spacing--paragraphs--text-medium: 0em;
    --_typography---font-size--headings--display: 60px;
    --_typography---font-weight--bold: 700;
    --_typography---font-size--buttons--button-large: 20px;
    --_typography---font-size--buttons--button-default: 18px;
    --_typography---font-size--buttons--button-small: 16px;
    --_typography---line-height--headings--display: 1.2em;
    --_typography---line-heightbuttons--button-large: 1em;
    --_typography---line-heightbuttons--button-default: 1em;
    --_typography---line-heightbuttons--button-small: 1em;
    --_typography---letter-spacing--headings--display: 0em;
    --_typography---font-weight--semi-bold: 600;
    --_typography---font-weight--light: 300;
    --_spacing---section-padding--padding-xxxlarge: 100px;
    --_spacing---section-padding--padding-large: 40px;
    --_spacing---section-padding--padding-default: 40px;
    --_spacing---section-padding--padding-small: 40px;
    --_spacing---section-padding--padding-xxlarge: 40px;
    --_spacing---section-padding--padding-xlarge: 40px;
  }
  .container.is-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
  .testimonial-author-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
  .testimonial-card {
    border-radius: 12px;
    padding: 16px;
  }
  .error-section {
    padding-top: var(--section-padding--mobile);
    padding-bottom: var(--section-padding--mobile);
  }
  .team-card {
    background-color: var(--_colors---primary-colors--white);
    position: sticky;
    top: 200px;
  }
  .footer-link-widget {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
  .footer-content-wrapper {
    grid-column-gap: 20px;
    grid-template-columns: 1fr;
  }
  .copyright-block {
    text-align: left;
    justify-content: space-between;
    align-items: flex-start;
  }
  .sg-content-block {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .sg-button-wrap {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: wrap;
  }
  .sg-typography-text-block {
    flex: 0 auto;
  }
  .style-guide-section {
    padding-bottom: 40px;
  }
  .sg-title-block {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
  .sg-color-widget-block {
    flex-flow: wrap;
    grid-template-columns: 1fr;
  }
  .changelog-section {
    padding-bottom: 40px;
  }
  .changelog-version-wrap {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
  .utility-tect-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .nav-link[aria-current="page"], .nav-link.is-active {
    color: var(--_colors---primary-colors--secondary);
  }
  .brand-logo-link {
    max-width: 60px;
  }
  .button-3 {
    padding: 14px 20px;
    font-size: 18px;
  }
  .hamburger {
    width: 40px;
    height: 40px;
  }
  .utility-page-wrap {
    height: auto;
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .utility-page-form {
    padding-left: 16px;
    padding-right: 16px;
  }
  .hero-title-wrap {
    margin-bottom: 40px;
  }
  .hero-top {
    margin-bottom: 24px;
  }
  .hero-bottom-text {
    max-width: none;
  }
  .hero-bottom {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    text-align: center;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
  }
  .hero-image {
    max-width: 180px;
  }
  .home-about-bottom {
    padding-bottom: 40px;
  }
  .home-about-decorative-text {
    display: none;
  }
  .work-card {
    padding-left: 16px;
    padding-right: 16px;
  }
  .work-card:where(.work-card-v2) {
    min-height: auto;
    padding: 0;
  }
  .work-text-block {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
  .work-card-wrap.one, .work-card-wrap.two {
    top: 100px;
  }
  .service-widget-title {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: wrap;
  }
  .service-widget-image {
    max-height: 260px;
  }
  .testimonial-sticky {
    overflow: visible;
  }
  .testimonial-title {
    position: sticky;
    top: 25px;
  }
  .testimonial-card-wrap {
    position: sticky;
    top: 100px;
  }
  .testimonial-card-wrap.one {
    position: sticky;
    left: 0;
  }
  .testimonial-card-wrap.two {
    position: sticky;
    top: 100px;
    left: 0;
  }
  .testimonial-card-wrap.three, .testimonial-card-wrap.four {
    position: sticky;
    left: 0;
  }
  .sub-title-wrap {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .blog-card:where(.blog-card-v2) {
    flex-flow: column;
  }
  .blog-card-block {
    grid-template-columns: 1fr;
  }
  .pricing-card {
    padding: 16px;
  }
  .pricing-list-wrapper {
    padding: 10px;
  }
  .pricing-tabs {
    justify-content: flex-start;
    align-items: center;
    margin-top: 0;
  }
  .pricing-tabs-menu {
    justify-content: flex-start;
    align-items: center;
  }
  .accordion {
    height: auto;
  }
  .accordion-title {
    white-space: pre-wrap;
  }
  .accordion-title-wrap {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
  .footer-particle {
    max-width: 16px;
    height: 40px;
  }
  .footer-social-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .footern-contact-link {
    max-width: none;
  }
  .work-info-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-columns: 1.5fr 1fr;
  }
  .work-main-title-block {
    padding-top: 60px;
  }
  .hero-title.one {
    margin-bottom: -5px;
  }
  .collaboration-content-block {
    padding: 16px;
  }
  .collaboration-title-block {
    margin-bottom: 40px;
  }
  .blog-details-title-block {
    margin-bottom: 32px;
  }
  .blog-rich-text h2:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-2) {
    margin-top: 24px;
  }
  .blog-rich-text p, .blog-rich-text ul {
    margin-bottom: 24px;
  }
  .blog-quote-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    padding: 16px;
  }
  .career-feature-right {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
  }
  .career-feature-details-top {
    padding-right: 0;
  }
  .career-feature-image-wrap {
    max-width: none;
  }
  .career-gallery-image-wrap {
    width: 120px;
    margin-right: 10px;
  }
  .career-details-info-block {
    grid-column-gap: 16px;
    grid-row-gap: 20px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr .75fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .add-to-card-block {
    padding: 16px;
  }
  .add-to-cart-button {
    color: #3a1111;
  }
  .contact-form-block {
    padding: 16px;
  }
  .input-field.text-area {
    min-height: 100px;
  }
  .service-main-top {
    padding-bottom: 40px;
  }
  .service-main-card {
    max-width: none;
  }
  .service-main-card.one {
    max-width: none;
    margin-top: 0;
  }
  .service-main-card-image {
    min-height: 300px;
    max-height: 300px;
  }
  .service-main-card-wrapper {
    flex-flow: column;
    align-items: stretch;
  }
  .trust-card-row {
    grid-template-columns: 1fr;
  }
  .trust-card-icon {
    max-width: 50px;
  }
  .process-widget {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    grid-template-columns: 1fr;
  }
  .drag-item {
    width: 300px;
  }
  .service-process-title-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }
  .service-process {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .service-process-step-block {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }
  .service-process-right {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .service-process-details {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
  .image-2 {
    max-height: 300px;
  }
  .about-banner-top {
    margin-bottom: 40px;
  }
  .approach-widget {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .approach-title-wrap, .approach-description {
    max-width: none;
  }
  .purpose-image-block {
    padding-left: 16px;
    padding-right: 16px;
  }
  .purpose-image {
    min-height: 160px;
    max-height: 160px;
  }
  .award-sticky {
    overflow: visible;
  }
  .award-card-wrapper {
    grid-template-columns: 1fr;
  }
  .award-card {
    box-shadow: 0 -1px 0 0 var(--_colors---primary-colors--pele);
    position: sticky;
    top: 80px;
  }
  .mission-image-wrap {
    width: 100%;
    margin-bottom: 32px;
  }
  .founder-image-wrap {
    max-width: none;
    position: static;
  }
  .mission-content-block {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .team-card-block {
    grid-template-columns: 1fr;
  }
  .team-title-block {
    position: sticky;
    top: 25px;
  }
  .license-link-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr;
  }
  .license-link-widget {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .license-link-block {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding: 20px 16px;
  }
  .award-title {
    position: sticky;
    top: 20px;
  }
  .service-collection.one, .service-collection.two, .service-collection.three, .service-collection.four {
    max-width: none;
  }
  .service-process-image {
    min-height: 150px;
    max-height: 150px;
  }
  .service-process-image-wrapper {
    height: 150px;
  }
  .service-process-sticky {
    top: 10px;
  }}

#node-dff017cf-8a37-6067-686d-bf98f6587461-1e011869 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}
#node-_49946dae-a343-9eae-b108-dd2338212988-1e011869 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}
#node-_73951954-3e94-6b85-5395-e95de22a48f6-1e011869 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}
#node-_73951954-3e94-6b85-5395-e95de22a4938-1e011869, #node-_0e72d6a7-7c68-2b1d-1f49-6b925fffbd5f-1e011871, #node-_051a19f6-b39e-8bfa-b5ab-fa8db024c067-1e011871, #node-_8c1108b0-7a0c-1bc8-e52f-76f5ff49b796-1e011871, #node-ccd2e361-9222-0bec-2822-f44049fe34cc-1e011871 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}
#node-_82352483-f2e2-4f8c-630f-7177e7119113-1e011871, #node-dce22afd-f1f5-9c31-c987-b1be5adb7c5f-1e011871, #node-_66b9653c-e774-d56d-f3ff-456d99762cf6-5a40479b, #node-_589f6418-cd16-2c6f-4602-2cd648369cfd-5a40479b, #node-_5b7dc3f1-b4f9-248b-9402-06d2281c13b3-fed92e43 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}
#node-_5b7dc3f1-b4f9-248b-9402-06d2281c13dc-fed92e43 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}
#node-eea3382b-df2b-b67f-90f4-9fb56b87ad5e-fed92e43 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}
#node-eea3382b-df2b-b67f-90f4-9fb56b87ada0-fed92e43 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}
#node-_06f5bfee-5dfe-1613-045e-70961d1011d6-ebcc1bf8 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}
#node-_06f5bfee-5dfe-1613-045e-70961d101218-ebcc1bf8 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}
#node-_06f5bfee-5dfe-1613-045e-70961d10125c-ebcc1bf8 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}
#node-_06f5bfee-5dfe-1613-045e-70961d10129e-ebcc1bf8 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}
#node-_093dd183-f9f8-ebbf-5c4a-f1ddad38cced-828d5afc {
  grid-area: span 1 / span 2 / span 1 / span 2;
}
#node-_045e8d91-ba9f-dd56-d5bc-6d06d94ac68d-828d5afc, #node-_12154a53-a386-11b6-a58d-07273ae202e3-828d5afc, #node-_253abc46-9a96-4c48-6718-5fafbada307d-828d5afc {
  grid-area: span 1 / span 1 / span 1 / span 1;
}
#node-_451a1e46-00f5-9add-6c7b-b3a313dd3f43-828d5afc {
  grid-area: span 1 / span 2 / span 1 / span 2;
}
#node-_69fc240f-3fb9-4dc6-578e-acbb7a93279e-828d5afc {
  grid-area: span 1 / span 1 / span 1 / span 1;
}@media screen and (max-width: 991px) {

  #node-_49946dae-a343-9eae-b108-dd2338212988-1e011869, #node-_73951954-3e94-6b85-5395-e95de22a4938-1e011869, #node-_1747d6d2-e9e6-4ac7-537a-831d2e211af9-2e211ac9, #node-_5b7dc3f1-b4f9-248b-9402-06d2281c13dc-fed92e43, #node-eea3382b-df2b-b67f-90f4-9fb56b87ada0-fed92e43, #node-_699d765c-01bc-082d-fda7-95a2bb31ec5a-cecaf7e4 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
  #node-d26e49cd-1f7a-ccc7-2ec9-ecb86331b3e2-cecaf7e4 {
    grid-area: span 1 / span 3 / span 1 / span 3;
  }
  #node-e005fbef-f4c9-431a-0cf6-a507255d4f59-cecaf7e4 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
  #node-e005fbef-f4c9-431a-0cf6-a507255d4f5e-cecaf7e4 {
    grid-area: span 1 / span 3 / span 1 / span 3;
  }
  #node-_06f5bfee-5dfe-1613-045e-70961d101218-ebcc1bf8, #node-_06f5bfee-5dfe-1613-045e-70961d10129e-ebcc1bf8, #node-_093dd183-f9f8-ebbf-5c4a-f1ddad38cced-828d5afc, #node-_045e8d91-ba9f-dd56-d5bc-6d06d94ac68d-828d5afc, #node-_12154a53-a386-11b6-a58d-07273ae202e3-828d5afc, #node-_253abc46-9a96-4c48-6718-5fafbada307d-828d5afc, #node-_69fc240f-3fb9-4dc6-578e-acbb7a93279e-828d5afc {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }}
@media screen and (max-width: 767px) {

  #node-dff017cf-8a37-6067-686d-bf98f6587461-1e011869, #node-_49946dae-a343-9eae-b108-dd2338212988-1e011869, #node-_73951954-3e94-6b85-5395-e95de22a48f6-1e011869, #node-_73951954-3e94-6b85-5395-e95de22a4938-1e011869, #node-_5b7dc3f1-b4f9-248b-9402-06d2281c13b3-fed92e43, #node-_5b7dc3f1-b4f9-248b-9402-06d2281c13dc-fed92e43, #node-eea3382b-df2b-b67f-90f4-9fb56b87ad5e-fed92e43, #node-eea3382b-df2b-b67f-90f4-9fb56b87ada0-fed92e43 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
  #node-e7d69b00-333b-be86-563a-1a563ab788f4-cecaf7e4 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
  #node-e7d69b00-333b-be86-563a-1a563ab788f9-cecaf7e4 {
    grid-area: span 1 / span 3 / span 1 / span 3;
  }
  #node-_6a92ae9c-a00d-e4c7-13ab-ebbf07015e6d-cecaf7e4 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
  #node-_6a92ae9c-a00d-e4c7-13ab-ebbf07015e72-cecaf7e4 {
    grid-area: span 1 / span 3 / span 1 / span 3;
  }
  #node-_696160c4-e6db-0a70-8f10-eecc2e13e601-cecaf7e4 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
  #node-_696160c4-e6db-0a70-8f10-eecc2e13e606-cecaf7e4 {
    grid-area: span 1 / span 3 / span 1 / span 3;
  }
  #node-_06f5bfee-5dfe-1613-045e-70961d1011d6-ebcc1bf8, #node-_06f5bfee-5dfe-1613-045e-70961d101218-ebcc1bf8, #node-_06f5bfee-5dfe-1613-045e-70961d10125c-ebcc1bf8, #node-_06f5bfee-5dfe-1613-045e-70961d10129e-ebcc1bf8 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }}
@media screen and (max-width: 479px) {

  #node-_1747d6d2-e9e6-4ac7-537a-831d2e211ad0-2e211ac9, #node-b69b6ab8-a146-05d7-df81-9140b632b6be-2e211ac9, #node-_1747d6d2-e9e6-4ac7-537a-831d2e211af9-2e211ac9 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
  #node-_699d765c-01bc-082d-fda7-95a2bb31ec5a-cecaf7e4, #node-d26e49cd-1f7a-ccc7-2ec9-ecb86331b3e2-cecaf7e4, #node-e005fbef-f4c9-431a-0cf6-a507255d4f59-cecaf7e4, #node-e005fbef-f4c9-431a-0cf6-a507255d4f5e-cecaf7e4, #node-e7d69b00-333b-be86-563a-1a563ab788f4-cecaf7e4, #node-e7d69b00-333b-be86-563a-1a563ab788f9-cecaf7e4, #node-_6a92ae9c-a00d-e4c7-13ab-ebbf07015e6d-cecaf7e4, #node-_6a92ae9c-a00d-e4c7-13ab-ebbf07015e72-cecaf7e4, #node-_696160c4-e6db-0a70-8f10-eecc2e13e601-cecaf7e4, #node-_696160c4-e6db-0a70-8f10-eecc2e13e606-cecaf7e4 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }}


/* ======================================================================
   4. Components -- the Webflow runtime, IX2 and IX3, in CSS
   ======================================================================

   Everything below replaces behaviour rather than layout, so it is emitted
   AFTER the design sheet. That is the opposite of framework.hand.css and the
   distinction is load-bearing: these are states the design does not know
   about -- an open panel, a revealed element, a hovered card -- and a state
   the design has never heard of cannot be left to lose to it on source order.
   (An earlier conversion put an accordion's collapse in the pre-design sheet
   and shipped every FAQ permanently open, because the design said
   `display: block` on the same element at the same specificity.)

   The motion is transcribed from the export's own payloads, not invented:
   IX2's 65 action lists (`ix2.json`) and IX3's two timelines (`ix3.json`).
   Durations, delays, easings, distances and colours are the payload's.

   Webflow's four easings, as their cubic-beziers:
     outQuart   cubic-bezier(.165, .84, .44, 1)
     outQuad    cubic-bezier(.25, .46, .45, .94)
     outBack    cubic-bezier(.175, .885, .32, 1.275)
     inOutBack  cubic-bezier(.68, -.55, .265, 1.55)
   An EMPTY easing in the payload is LINEAR, not ease -- Webflow's default
   for an action item with no easing set is `linear`, and reading it as `ease`
   is a visible difference on a 40s marquee.
   ---------------------------------------------------------------------- */

:root {
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
  --ease-out-back: cubic-bezier(.175, .885, .32, 1.275);
  --ease-in-out-back: cubic-bezier(.68, -.55, .265, 1.55);
}

/* ---- skip link ------------------------------------------------------ */

/* Off screen until focused. Not `display: none`, which would take it out of
   the tab order and defeat the point. */
.skip-link {
  position: absolute;
  z-index: 10000;
  top: 0;
  left: 0;
  padding: 12px 20px;
  background: var(--_colors---primary-colors--primary);
  color: var(--_colors---primary-colors--white);
  font-size: 16px;
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform .2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* A heading for a screen reader and nothing else.
   transform.fix_headings writes one of these onto the four pages that carry no
   visible page title -- the three commerce pages and the 404 -- so each has a
   valid document outline. WITHOUT THIS RULE IT IS AN ORDINARY <h1>: it shipped
   as a visible 40px heading above the navbar on all four, which the layout
   parity sweep caught as a 40px offset on the header of every one of them.
   Clipped rather than `display: none`, which would take it out of the
   accessibility tree and defeat the point. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Set while a modal owns the screen -- the cart drawer and the lightbox. */
.is-locked,
.is-locked body {
  overflow: hidden;
}

/* ---- 1. reveals ----------------------------------------------------- */

/* IX2's six scroll presets. Each is an ANIMATION, never a transition.
   A `transition` shorthand on a reveal DELETES whatever transition the
   element already had -- which on this design is every card hover -- and an
   earlier conversion shipped exactly that.

   The rest state is gated on `.js`, which the <head> sets in a one-line
   inline script. With scripting off nothing ever adds `.is-revealed`, so an
   ungated rest state would leave the page permanently blank; gated, the whole
   page simply renders. */
:where(.js) .reveal {
  opacity: 0;
}

:where(.js) .reveal-rise,
:where(.js) .reveal-rise-blur {
  transform: translateY(50px);
}

:where(.js) .reveal-rise-blur {
  filter: blur(5px);
}

/* THE FOUR `slideIn*` PRESETS REST AT OPACITY 0 AND NOTHING ELSE.
   Their group 0 -- the state IX2 writes inline on load, and the export does
   write it: `style="opacity:0"` and no transform -- carries ONLY the opacity.
   The 100px translate is group 1, a zero-duration step at the START of the
   animation, so it belongs in the keyframe's `from` and not here.

   Putting it in the rest state instead was a real regression: the two hero
   titles are 1360px wide inside a 1440px viewport, and translating them
   -100px and +100px before the reveal fired pushed the home page 53px wider
   than the window. The parity harness could not see it -- it forces
   `.reveal { transform: none }` on both sides so the two are comparable --
   and neither could the overflow check that runs inside it.

   `a-27` / `a-28` / `a-29` are the opposite case and DO keep their transform
   above: their group 0 is `opacity: 0` AND `translateY(50px)`. */

/* THE ONE BREAKPOINT-GATED REVEAL, and its REST STATE gated with it.
   `data-reveal-mq="below-medium"` exists only at 767px and below; above that
   the export never hides the element at all, so the rest state has to be
   cancelled there too. Gating only the animation and not the rest state
   leaves the element invisible forever at every other width -- and the parity
   harness cannot see it, because the harness forces every reveal visible on
   both sides so the two are comparable. */
@media (min-width: 768px) {
  :where(.js) .reveal[data-reveal-mq="below-medium"] {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

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

.reveal-rise.is-revealed { animation-name: reveal-rise; }
.reveal-rise-blur.is-revealed { animation-name: reveal-rise-blur; }
.reveal-fade.is-revealed { animation-name: reveal-fade; animation-duration: 1000ms; }
.reveal-up.is-revealed { animation-name: reveal-up; animation-duration: 1000ms; }
.reveal-down.is-revealed { animation-name: reveal-down; animation-duration: 1000ms; }
.reveal-left.is-revealed { animation-name: reveal-left; animation-duration: 1000ms; }
.reveal-right.is-revealed { animation-name: reveal-right; animation-duration: 1000ms; }

/* The FINISHED state, as a plain class. `animation-fill-mode: both` pins the
   last keyframe forever and outranks every normal declaration, so an element
   that is both a reveal target and the subject of a scrub or a hover would be
   frozen the instant it faded in. main.js swaps `.is-revealed` for this on
   `animationend`, which puts `transform` back under the cascade. */
.reveal.is-shown {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
}@keyframes reveal-rise {

  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }}


/* a-29 runs its blur on a schedule of its own -- 600ms starting at 600ms,
   inside a 1200ms move -- so the blur is gone before the rise finishes. */
@keyframes reveal-rise-blur {
  from { opacity: 0; transform: translateY(50px); filter: blur(5px); }
  50% { filter: blur(5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}@keyframes reveal-fade {

  from { opacity: 0; }
  to { opacity: 1; }}
@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-left {

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

  from { opacity: 0; transform: translateX(100px); }
  to { opacity: 1; transform: translateX(0); }}
@media (prefers-reduced-motion: reduce) {

  .reveal,
  .reveal.is-revealed {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }}


/* ---- 2. the navbar -------------------------------------------------- */

/* `display: contents` so the wrapper this build inserts is free at the widths
   the menu is an inline row: without it the WRAPPER becomes the flex item in
   `.nav-left` instead of the <nav> it holds, and the menu loses its own
   alignment. Below the collapse width it becomes the clipping box Webflow's
   runtime used to create. */
.nav-overlay {
  display: contents;
}@media (max-width: 991px) {

  .nav-overlay {
    display: block;
    position: absolute;
    z-index: 900;
    top: 100%;
    left: 0;
    right: 0;
    overflow: hidden;
    pointer-events: none;
  }

  /* The panel itself. `.w-nav[data-collapse='medium'] .w-nav-menu` was
     `display: none` and `[data-nav-menu-open]` turned it back on; the same
     two states, without a runtime to write the attribute. It slides rather
     than appearing, which is what `data-animation="default"` did. */
  #nav-menu {
    display: flex;
    width: 100%;
    transform: translateY(-101%);
    transition: transform .4s ease, visibility 0s linear .4s;
    visibility: hidden;
  }

  [data-nav-open] #nav-menu {
    transform: translateY(0);
    visibility: visible;
    transition: transform .4s ease;
  }

  [data-nav-open] .nav-overlay {
    pointer-events: auto;
  }

  /* `.w-nav[data-collapse='medium'] .w-nav-button { display: block }`. */
  .menu-button {
    display: block;
  }}


/* The hamburger, from IX2's a-30 / a-31. The middle line collapses to width 0
   while the outer two travel 8px to meet it and cross at 45 degrees. The
   design gives each line `width: 24px; height: 2px` and the middle a 6px top
   margin, so 8px is exactly the distance from either outer line to the
   middle.

   This replaces TWO Lottie animations in the export -- one per navbar colour
   -- each fetched at runtime from the CDN of a different Webflow site. */
.hamburger-line-top,
.hamburger-line-middle,
.hamburger-line-bottom {
  transition: transform .4s ease, width .3s ease;
}

[data-nav-open] .hamburger-line-top {
  transform: translateY(8px) rotate(-45deg);
}

[data-nav-open] .hamburger-line-bottom {
  transform: translateY(-8px) rotate(45deg);
}

[data-nav-open] .hamburger-line-middle {
  width: 0;
}

/* ---- 3. the FAQ accordion ------------------------------------------- */

/* The inserted heading is free: `.accordion` is a flex column and this keeps
   the button and the panel as its children rather than making the <h3> the
   flex item. */
.accordion-heading {
  display: contents;
  margin: 0;
  font: inherit;
  color: inherit;
}

/* The open state. framework.hand.css supplies the CLOSED `display: none` (the
   design knows that element and sets `position`/`overflow` on it, so those
   two have to keep their original order); this is the half the design has
   never heard of.

   `grid-template-rows` animates where `height: auto` cannot, and the closed
   value is `minmax(0, 0fr)` rather than a bare `0fr` -- a bare `0fr` does NOT
   collapse the track, because the content's min-content contribution floors
   it. The child needs `min-height: 0` for the same reason. */
/* THE STATE CLASS IS `.is-open`, NOT AN ATTRIBUTE OF OUR OWN. build_css
   remaps Webflow's `.w--open` onto `.is-open`, and this design has its own
   rule on that state:

       .accordion-description-wrap.w--open {
         background-color: #0000; position: static; overflow: hidden }

   which is what cancels the framework's `background: #dddddd` on the panel.
   Marking the open row with a `data-open` attribute instead left that rule
   matching nothing, and every opened answer would have shipped on a light
   grey panel the design never intended. Reusing the design's own class costs
   nothing and keeps its three declarations working. */
.accordion-description-wrap.is-open {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows .3s ease;
}

.accordion-title-wrap[aria-expanded="true"] + .accordion-description-wrap.is-open,
.accordion-heading + .accordion-description-wrap.is-open {
  grid-template-rows: minmax(0, 1fr);
}

.accordion-description-wrap.is-open > * {
  min-height: 0;
  overflow: hidden;
}

/* The plus / minus pair cross-fades, which is a-50's group 1 and a-51's
   group 0. Both icons occupy the same cell so the row does not reflow. */
.accordion-icon-wrapper {
  display: grid;
  place-items: center;
}

.accordion-icon {
  grid-area: 1 / 1;
  transition: opacity .3s ease;
}

.accordion-icon.minus {
  opacity: 0;
}

.accordion-title-wrap[aria-expanded="true"] .accordion-icon.plus {
  opacity: 0;
}

.accordion-title-wrap[aria-expanded="true"] .accordion-icon.minus {
  opacity: 1;
}

/* ---- 4. the tab sets ------------------------------------------------ */

.tabset-pane {
  display: none;
}

.tabset-pane.is-active {
  display: block;
}

.tabset-link:focus-visible,
.accordion-title-wrap:focus-visible,
.menu-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* a-56 / a-57: the career strip's arrow grows from width 0 as its tab is
   selected. `width: auto` cannot be transitioned, so the icon animates
   between `max-width: 0` and its own measured maximum -- one character, so a
   round upper bound is exact enough and costs nothing. */
[data-tab-icon] .career-tab-link-icon {
  display: inline-block;
  overflow: hidden;
  max-width: 0;
  transition: max-width .3s var(--ease-out-quad);
}

[data-tab-icon].is-active .career-tab-link-icon {
  max-width: 2em;
}

/* ---- 5. the testimonial slider -------------------------------------- */

/* `data-animation="cross"`: the three slides share one grid cell and
   cross-fade over the widget's own 500ms. Stacking them is what makes the
   mask's height the height of the TALLEST slide, which is how the export's
   `height: auto` mask behaves once the runtime has laid the slides out. */
.testimonial-two-mask {
  display: grid;
}

.testimonial-two-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}

.testimonial-two-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease;
}

/* ---- 6. the scroll scrubs ------------------------------------------- */

/* Ten SCROLLING_IN_VIEW lists, every one of them driven the same way: main.js
   sets `--scrub` (0..1) on the section and nothing else, and the motion is a
   PAUSED animation seeked by a negative delay. `animation-duration: 1s` makes
   the delay and the progress the same number, so each keyframe percentage
   below is literally the percentage in the payload.

   Why an animation rather than `calc()` on a transform: the payload's
   keyframes are not linear ramps. `a-81` moves five different children at
   five different points between 0% and 100%, and `a-74` cross-fades six
   images in sequence -- expressing that as arithmetic per property would be
   unreadable, where keyframes are a transcription.

   `data-scrub-on` is what gates them: main.js sets it only when the hook's
   breakpoint gate matches NOW, so a desktop-only scrub leaves its elements
   completely alone at other widths rather than pinning them at progress 0. */
[data-scrub-on] .scrub-part {
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-delay: calc(var(--scrub, 0) * -1s);
}

/* a-41 -- the home page's about section. The background zooms from half size,
   the overlay blinks and the two decorative titles part left and right. */
[data-scrub="home-about"][data-scrub-on] .home-about-background {
  animation-name: scrub-home-about-background;
}
[data-scrub="home-about"][data-scrub-on] .home-about-overlay {
  animation-name: scrub-home-about-overlay;
}
[data-scrub="home-about"][data-scrub-on] .home-about-bottom {
  animation-name: scrub-home-about-bottom;
}
[data-scrub="home-about"][data-scrub-on] .about-decorative-title.one {
  animation-name: scrub-home-about-title-one;
}
[data-scrub="home-about"][data-scrub-on] .about-decorative-title.two {
  animation-name: scrub-home-about-title-two;
}@keyframes scrub-home-about-background {

  25% { transform: scale(.5); }
  50%, 100% { transform: scale(1); }}
@keyframes scrub-home-about-overlay {

  50% { opacity: 0; }
  65%, 100% { opacity: 1; }}
@keyframes scrub-home-about-bottom {

  50% { transform: translateY(100%); }
  65%, 100% { transform: translateY(0); }}
@keyframes scrub-home-about-title-one {

  25% { transform: translateX(0); }
  50%, 100% { transform: translateX(-100%); }}
@keyframes scrub-home-about-title-two {

  25% { transform: translateX(0); }
  50%, 100% { transform: translateX(100%); }}


/* a-45 -- the home page's three work cards scale down as the next one stacks
   over them. */
[data-scrub="work-cards"][data-scrub-on] .work-card-wrap.one {
  animation-name: scrub-work-card-one;
}
[data-scrub="work-cards"][data-scrub-on] .work-card-wrap.two {
  animation-name: scrub-work-card-two;
}
[data-scrub="work-cards"][data-scrub-on] .work-card-wrap.three {
  animation-name: scrub-work-card-three;
}@keyframes scrub-work-card-one {

  0% { transform: scale(1); }
  30%, 100% { transform: scale(.7); }}
@keyframes scrub-work-card-two {

  0%, 30% { transform: scale(1); }
  60%, 100% { transform: scale(.8); }}
@keyframes scrub-work-card-three {

  0%, 60% { transform: scale(1); }
  90%, 100% { transform: scale(.9); }}


/* a-48 -- four testimonial cards deal in from the right, the first and third
   landing at an angle.

   TWO THINGS THE FIRST TRANSCRIPTION OF THIS LIST GOT WRONG, AND BOTH OF THEM
   ARE READABLE STRAIGHT OFF THE PAYLOAD:

   * the unit is `vw`, not `%`. a-48 is the ONLY list in this export that uses
     it -- every other TRANSFORM_MOVE here is `%` or `px` -- so it was
     transcribed as the unit everything else uses. 100% of a 430px card is
     430px, which parks the cards ON SCREEN instead of a full viewport away,
     and the row deals itself out before the section is anywhere near sticky.
     The published site agrees: its rest state is written inline as
     `translate3d(100vw, 0px, 0px)`.
   * the TRANSFORM_ROTATE items were carried into the keyframes as
     `rotate(0deg)` at BOTH ends. The payload rotates card one to -15deg at
     30% and card three to +15deg at 60% -- the angle is the whole character
     of the effect, and without it four cards slide in flat.

   Card one's rotation shares the move's 20% -> 30% window; card three's shares
   its 20% -> 60% one, so each stays a single keyframe pair. */
[data-scrub="testimonial-cards"][data-scrub-on] .testimonial-card-wrap.one {
  animation-name: scrub-testimonial-one;
}
[data-scrub="testimonial-cards"][data-scrub-on] .testimonial-card-wrap.two {
  animation-name: scrub-testimonial-two;
}
[data-scrub="testimonial-cards"][data-scrub-on] .testimonial-card-wrap.three {
  animation-name: scrub-testimonial-three;
}
[data-scrub="testimonial-cards"][data-scrub-on] .testimonial-card-wrap.four {
  animation-name: scrub-testimonial-four;
}@keyframes scrub-testimonial-one {

  0%, 20% { transform: translateX(100vw) rotate(0deg); }
  30%, 100% { transform: translateX(0) rotate(-15deg); }}
@keyframes scrub-testimonial-two {

  0%, 20% { transform: translateX(100vw); }
  45%, 100% { transform: translateX(0); }}
@keyframes scrub-testimonial-three {

  0%, 20% { transform: translateX(100vw) rotate(0deg); }
  60%, 100% { transform: translateX(0) rotate(15deg); }}
@keyframes scrub-testimonial-four {

  0%, 20% { transform: translateX(100vw); }
  75%, 100% { transform: translateX(0); }}


/* a-54 and a-63 and a-76 -- three horizontal rails that track left as their
   section passes. Same shape, three different distances. */
/* a-54 names its target by ELEMENT ID, not by a CHILDREN selector: it moves
   the blog page's featured collection list, which carries no class of its own.
   The first version of this rule invented `.featured-blog-row`, which is in no
   page -- so the rule matched nothing. build_ix2_map plans that id as a
   per-element `scrubPart` flag instead, and the list is the only marked
   element inside its own section. */
[data-scrub="featured-blog"][data-scrub-on] .scrub-part {
  animation-name: scrub-track-55;
}
/* a-63's rail travels the same 55% as a-54's, but it STARTS FIVE PERCENT
   EARLIER (@25, not @30), so it cannot share the keyframe. */
[data-scrub="trust-cards"][data-scrub-on] .trust-card-row {
  animation-name: scrub-track-55-from-25;
}
[data-scrub="testimonial-three"][data-scrub-on] .testimonial-three-card-block {
  animation-name: scrub-track-80;
}@keyframes scrub-track-55 {

  0%, 30% { transform: translateX(0); }
  75%, 100% { transform: translateX(-55%); }}
@keyframes scrub-track-55-from-25 {

  0%, 25% { transform: translateX(0); }
  75%, 100% { transform: translateX(-55%); }}
@keyframes scrub-track-80 {

  0%, 30% { transform: translateX(0); }
  75%, 100% { transform: translateX(-80%); }}


/* a-71 -- the award row crosses right-to-left while its four cards rise from
   staggered depths. */
[data-scrub="award-cards"][data-scrub-on] .award-card-wrapper {
  animation-name: scrub-award-row;
}
[data-scrub="award-cards"][data-scrub-on] .award-card.one { animation-name: scrub-award-200; }
[data-scrub="award-cards"][data-scrub-on] .award-card.two { animation-name: scrub-award-300; }
[data-scrub="award-cards"][data-scrub-on] .award-card.three { animation-name: scrub-award-500; }
[data-scrub="award-cards"][data-scrub-on] .award-card.four { animation-name: scrub-award-600; }@keyframes scrub-award-row {

  0%, 30% { transform: translateX(100%); }
  75%, 100% { transform: translateX(-100%); }}
@keyframes scrub-award-200 {

  0%, 30% { transform: translateY(200px); }
  75%, 100% { transform: translateY(0); }}
@keyframes scrub-award-300 {

  0%, 30% { transform: translateY(300px); }
  75%, 100% { transform: translateY(0); }}
@keyframes scrub-award-500 {

  0%, 30% { transform: translateY(500px); }
  75%, 100% { transform: translateY(0); }}
@keyframes scrub-award-600 {

  0%, 30% { transform: translateY(600px); }
  75%, 100% { transform: translateY(0); }}


/* a-74 -- six purpose images cross-fade in sequence while the block rises. */
[data-scrub="purpose"][data-scrub-on] .purpose-image-block {
  animation-name: scrub-purpose-block;
}
[data-scrub="purpose"][data-scrub-on] .purpose-image.one { animation-name: scrub-purpose-one; }
[data-scrub="purpose"][data-scrub-on] .purpose-image.two { animation-name: scrub-purpose-two; }
[data-scrub="purpose"][data-scrub-on] .purpose-image.three { animation-name: scrub-purpose-three; }
[data-scrub="purpose"][data-scrub-on] .purpose-image.four { animation-name: scrub-purpose-four; }
[data-scrub="purpose"][data-scrub-on] .purpose-image.five { animation-name: scrub-purpose-five; }
[data-scrub="purpose"][data-scrub-on] .purpose-image.six { animation-name: scrub-purpose-six; }@keyframes scrub-purpose-block {

  0%, 50% { transform: translateY(0); }
  75%, 100% { transform: translateY(-100%); }}
@keyframes scrub-purpose-one {
 0%, 30% { opacity: 0; } 35%, 100% { opacity: 1; }}
@keyframes scrub-purpose-four {
 0%, 35% { opacity: 0; } 40%, 100% { opacity: 1; }}
@keyframes scrub-purpose-three {
 0%, 40% { opacity: 0; } 45%, 100% { opacity: 1; }}
@keyframes scrub-purpose-six {
 0%, 40% { opacity: 0; } 45%, 100% { opacity: 1; }}
@keyframes scrub-purpose-five {
 0%, 45% { opacity: 0; } 50%, 100% { opacity: 1; }}
@keyframes scrub-purpose-two {
 0%, 50% { opacity: 0; } 55%, 100% { opacity: 1; }}


/* a-75 -- the founder portrait parallaxes 450px down its section. */
[data-scrub="founder"][data-scrub-on] .founder-image-wrap {
  animation-name: scrub-founder;
}@keyframes scrub-founder {

  0%, 20% { transform: translateY(0); }
  75%, 100% { transform: translateY(450px); }}


/* a-81 -- the service page's five-step process reel. Each step's image and
   copy slide up out of the window as the next arrives, the step number fades
   through, and the label list moves its highlight down. */
[data-scrub="service-process"][data-scrub-on] .service-process-image.one { animation-name: scrub-step-image-1; }
[data-scrub="service-process"][data-scrub-on] .service-process-image.two { animation-name: scrub-step-image-2; }
[data-scrub="service-process"][data-scrub-on] .service-process-image.three { animation-name: scrub-step-image-3; }
[data-scrub="service-process"][data-scrub-on] .service-process-image.four { animation-name: scrub-step-image-4; }
[data-scrub="service-process"][data-scrub-on] .service-process-details.one { animation-name: scrub-step-image-1; }
[data-scrub="service-process"][data-scrub-on] .service-process-details.two { animation-name: scrub-step-image-2; }
[data-scrub="service-process"][data-scrub-on] .service-process-details.three { animation-name: scrub-step-image-3; }
[data-scrub="service-process"][data-scrub-on] .service-process-details.four { animation-name: scrub-step-image-4; }
[data-scrub="service-process"][data-scrub-on] .service-step-no.one { animation-name: scrub-step-no-1; }
[data-scrub="service-process"][data-scrub-on] .service-step-no.two { animation-name: scrub-step-no-2; }
[data-scrub="service-process"][data-scrub-on] .service-step-no.three { animation-name: scrub-step-no-3; }
[data-scrub="service-process"][data-scrub-on] .service-step-no.four { animation-name: scrub-step-no-4; }
[data-scrub="service-process"][data-scrub-on] .service-step-no.five { animation-name: scrub-step-no-5; }
[data-scrub="service-process"][data-scrub-on] .service-process-step-wrap.one { animation-name: scrub-step-label-1; }
[data-scrub="service-process"][data-scrub-on] .service-process-step-wrap.two { animation-name: scrub-step-label-2; }
[data-scrub="service-process"][data-scrub-on] .service-process-step-wrap.three { animation-name: scrub-step-label-3; }
[data-scrub="service-process"][data-scrub-on] .service-process-step-wrap.four { animation-name: scrub-step-label-4; }
[data-scrub="service-process"][data-scrub-on] .service-process-step-wrap.five { animation-name: scrub-step-label-5; }@keyframes scrub-step-image-1 {
 0%, 16% { transform: translateY(0); } 30%, 100% { transform: translateY(-100%); }}
@keyframes scrub-step-image-2 {
 0%, 30% { transform: translateY(0); } 45%, 100% { transform: translateY(-100%); }}
@keyframes scrub-step-image-3 {
 0%, 45% { transform: translateY(0); } 60%, 100% { transform: translateY(-100%); }}
@keyframes scrub-step-image-4 {
 0%, 60% { transform: translateY(0); } 75%, 100% { transform: translateY(-100%); }}


/* Each number is lit for ONE step and dark either side of it. The first
   transcription held numbers two, three and four at full opacity from their
   entrance all the way to 100% and faded them only at the very end, so by the
   last step four numbers were stacked on top of each other. The payload gives
   every one of them an explicit 0 at the keyframe where the next arrives. */
@keyframes scrub-step-no-1 { 0%, 16% { opacity: 1; } 30%, 100% { opacity: 0; } }@keyframes scrub-step-no-2 {
 0%, 16% { opacity: 0; } 30% { opacity: 1; } 45%, 100% { opacity: 0; }}
@keyframes scrub-step-no-3 {
 0%, 30% { opacity: 0; } 45% { opacity: 1; } 60%, 100% { opacity: 0; }}
@keyframes scrub-step-no-4 {
 0%, 45% { opacity: 0; } 60% { opacity: 1; } 75%, 100% { opacity: 0; }}
@keyframes scrub-step-no-5 {
 0%, 60% { opacity: 0; } 75%, 100% { opacity: 1; }}
@keyframes scrub-step-label-1 {

  0%, 16% { color: var(--_colors---primary-colors--primary); }
  30%, 100% { color: var(--_colors---primary-colors--dark-gray); }}
@keyframes scrub-step-label-2 {

  0%, 16% { color: var(--_colors---primary-colors--dark-gray); }
  30%, 45% { color: var(--_colors---primary-colors--primary); }
  100% { color: var(--_colors---primary-colors--dark-gray); }}
@keyframes scrub-step-label-3 {

  0%, 30% { color: var(--_colors---primary-colors--dark-gray); }
  45%, 60% { color: var(--_colors---primary-colors--primary); }
  100% { color: var(--_colors---primary-colors--dark-gray); }}
@keyframes scrub-step-label-4 {

  0%, 45% { color: var(--_colors---primary-colors--dark-gray); }
  60%, 75% { color: var(--_colors---primary-colors--primary); }
  100% { color: var(--_colors---primary-colors--dark-gray); }}
@keyframes scrub-step-label-5 {

  0%, 60% { color: var(--_colors---primary-colors--dark-gray); }
  75%, 100% { color: var(--_colors---primary-colors--primary); }}
@media (prefers-reduced-motion: reduce) {

  [data-scrub-on] .scrub-part {
    animation: none;
  }}


/* ---- 7. the marquees ------------------------------------------------ */

/* a-52 / a-55 / a-70. Each is a row of duplicated cells translated 100% of
   its own width, looping forever. `useFirstGroupAsInitialState` is FALSE on
   all three, so group 0 is a real step from 0 to -100% -- all three run the
   same way and differ only in duration.

   LINEAR, not `ease`: the payload's easing field is empty, and Webflow reads
   an empty easing as linear. On a 40s loop the difference is a visible pause
   at each end. */
[data-marquee] {
  overflow: hidden;
}

/* `.marquee-part`, NOT `> *`. transform.py marks exactly the elements the
   payload names, because the footer's marquee block also holds the "Let's
   Collaborate" button -- a-53's cursor-follow target -- and a running
   animation beats every normal declaration AND every inline style, so the
   button was being marquee'd instead of following the pointer. */
[data-marquee] .marquee-part {
  flex: none;
  animation: marquee var(--marquee-duration, 40s) linear infinite;
}

[data-marquee="40s"] { --marquee-duration: 40s; }
[data-marquee="30s"] { --marquee-duration: 30s; }@keyframes marquee {

  from { transform: translateX(0); }
  to { transform: translateX(-100%); }}
@media (prefers-reduced-motion: reduce) {

  [data-marquee] .marquee-part {
    animation: none;
  }}


/* ---- 8. the hovers -------------------------------------------------- */

/* Nine IX2 hover pairs. Each is written as a `:hover`/`:focus-within` rule so
   one selector plays both the [In] and the [Out] list -- and `:focus-within`
   is an ADDITION: every one of these decorates a link or a card containing
   one, and a keyboard user reaching it should see the same thing a pointer
   user does.
   Six of the nine are DESKTOP ONLY in the payload (`mediaQueries: ["main"]`),
   because below 992px these cards stack and there is no pointer to hover
   with. `data-hover-mq` carries the gate and the media query below honours
   it: a hover state that fires on a phone's tap and then sticks is one of the
   more annoying things a converted template can do. */

/* a-42 / a-43 -- the work card's round "View" button fades in. */
[data-hover="work-card"] .work-card-button-wrapper,
[data-hover="service-main-card"] .service-main-button-wrapper {
  opacity: 0;
  transition: opacity .3s ease;
}

/* a-72 / a-73 -- the team portrait scales to 1.05. */
[data-hover="team-card"] .team-card-image {
  transition: transform .3s ease;
}

/* a-82 / a-83 -- the primary button's dot grows to fill it while the label
   steps 10px left. `scale(100)` is the payload's own number: the dot is a
   1px seed the hover blows up into the button's background. */
[data-hover="button-primary"] .button-dot {
  transition: transform .3s ease;
}
[data-hover="button-primary"] .button-text {
  transition: transform .5s ease;
}

/* a-61 / a-62 -- the trust card fills and its icon inverts. */
[data-hover="trust-card"] .trust-card-background {
  opacity: 0;
  transition: opacity .3s ease;
}
[data-hover="trust-card"],
[data-hover="trust-card"] .trust-card-icon {
  transition: color .3s ease;
}

/* a-79 / a-80 -- the licence row fills and inverts. */
[data-hover="license-link"] .license-link-block-background {
  opacity: 0;
  transition: opacity .3s ease;
}
[data-hover="license-link"] {
  transition: color .3s ease;
}

/* a-84 / a-85 -- the newsletter button's background wipes in. */
[data-hover="newsletter-button"] .newsletter-button-background {
  opacity: 0;
  transition: opacity .3s ease;
}
[data-hover="newsletter-button"] .newsletter-button-text {
  transition: color .3s ease;
}

/* a-46 / a-47 -- the service row inverts and opens its image. */
[data-hover="service-widget"],
[data-hover="service-widget"] .service-tag-wrap {
  transition: background-color .3s ease, color .3s ease;
}
/* THE PAYLOAD SAYS `height: 0` -> `height: AUTO`, AND `auto` IS NOT
   ANIMATABLE. Transitioning to it snaps open with no motion at all, which is
   what shipped. `grid-template-rows: 0fr -> 1fr` -- the trick the accordion
   uses -- is wrong here too: this box has TWO children of different heights
   (a caption and an image) and an `fr` row would equalise them.

   So the open height is MEASURED. main.js writes each box's own content height
   into `--open-h` on load and on resize, and the transition runs against that
   -- exact, with no magic number, and with the design's own `overflow: hidden`
   doing the clipping. The collapse is gated on `.js`, so with scripting off
   the box is simply open rather than permanently shut. */
:where(.js) [data-hover="service-widget"] .service-widget-image-block {
  max-height: 0;
  transition: max-height .5s var(--ease-out-quad);
}

/* a-66 / a-67 -- the process card swaps its number for its copy. */
[data-hover="process-widget"] .process-widget-no.hover,
[data-hover="process-widget"] .process-widget-image-wrap,
[data-hover="process-widget"] .process-widget-description {
  opacity: 0;
  transition: opacity .3s ease;
}
[data-hover="process-widget"] .process-widget-no.absolute {
  opacity: 1;
  transition: opacity .3s ease;
}
[data-hover="process-widget"] .process-widget-title-wrap {
  transition: transform .3s ease;
}

/* a-68 / a-69 -- the "what's included" card fills, inverts and opens. */
[data-hover="service-include-card"] .service-include-card-background,
[data-hover="service-include-card"] .service-include-card-title.hover {
  opacity: 0;
  transition: opacity .3s ease;
}
[data-hover="service-include-card"] .service-include-card-title.static {
  opacity: 1;
  transition: opacity .3s ease;
}
[data-hover="service-include-card"] {
  transition: color .3s ease;
}
:where(.js) [data-hover="service-include-card"] .service-include-card-description-wrap {
  max-height: 0;
  width: 100%;
  transition: max-height .3s ease;
}@media (hover: hover) {

  [data-hover="work-card"]:hover .work-card-button-wrapper,
  [data-hover="work-card"]:focus-within .work-card-button-wrapper,
  [data-hover="service-main-card"]:hover .service-main-button-wrapper,
  [data-hover="service-main-card"]:focus-within .service-main-button-wrapper {
    opacity: 1;
  }

  [data-hover="team-card"]:hover .team-card-image,
  [data-hover="team-card"]:focus-within .team-card-image {
    transform: scale(1.05);
  }

  [data-hover="button-primary"]:hover .button-dot,
  [data-hover="button-primary"]:focus-within .button-dot {
    transform: scale(100);
  }
  [data-hover="button-primary"]:hover .button-text,
  [data-hover="button-primary"]:focus-within .button-text {
    transform: translateX(-10px);
  }

  [data-hover="trust-card"]:hover .trust-card-background,
  [data-hover="trust-card"]:focus-within .trust-card-background {
    opacity: 1;
  }
  [data-hover="trust-card"]:hover,
  [data-hover="trust-card"]:focus-within {
    color: var(--_colors---primary-colors--silver-gray);
  }
  [data-hover="trust-card"]:hover .trust-card-icon,
  [data-hover="trust-card"]:focus-within .trust-card-icon {
    color: var(--_colors---primary-colors--white);
  }

  [data-hover="license-link"]:hover .license-link-block-background,
  [data-hover="license-link"]:focus-within .license-link-block-background {
    opacity: 1;
  }
  [data-hover="license-link"]:hover,
  [data-hover="license-link"]:focus-within {
    color: var(--_colors---primary-colors--white);
  }

  [data-hover="newsletter-button"]:hover .newsletter-button-background,
  [data-hover="newsletter-button"]:focus-within .newsletter-button-background {
    opacity: 1;
  }
  [data-hover="newsletter-button"]:hover .newsletter-button-text,
  [data-hover="newsletter-button"]:focus-within .newsletter-button-text {
    color: var(--_colors---primary-colors--white);
  }}


/* The six desktop-only ones. Their `mediaQueries` is `["main"]`, so the whole
   block is inside `(min-width: 992px)` as well as `(hover: hover)`. */
@media (hover: hover) and (min-width: 992px) {
  [data-hover="service-widget"]:hover,
  [data-hover="service-widget"]:focus-within {
    background-color: var(--_colors---primary-colors--white);
    color: var(--_colors---primary-colors--primary);
  }
  [data-hover="service-widget"]:hover .service-tag-wrap,
  [data-hover="service-widget"]:focus-within .service-tag-wrap {
    background-color: var(--_colors---primary-colors--pele);
  }
  [data-hover="service-widget"]:hover .service-widget-image-block,
  [data-hover="service-widget"]:focus-within .service-widget-image-block {
    max-height: var(--open-h, 100vh);
  }

  [data-hover="process-widget"]:hover .process-widget-no.hover,
  [data-hover="process-widget"]:focus-within .process-widget-no.hover,
  [data-hover="process-widget"]:hover .process-widget-image-wrap,
  [data-hover="process-widget"]:focus-within .process-widget-image-wrap,
  [data-hover="process-widget"]:hover .process-widget-description,
  [data-hover="process-widget"]:focus-within .process-widget-description {
    opacity: 1;
  }
  [data-hover="process-widget"]:hover .process-widget-no.absolute,
  [data-hover="process-widget"]:focus-within .process-widget-no.absolute {
    opacity: 0;
  }
  [data-hover="process-widget"]:hover .process-widget-title-wrap,
  [data-hover="process-widget"]:focus-within .process-widget-title-wrap {
    transform: scale(.7);
  }

  [data-hover="service-include-card"]:hover .service-include-card-background,
  [data-hover="service-include-card"]:focus-within .service-include-card-background,
  [data-hover="service-include-card"]:hover .service-include-card-title.hover,
  [data-hover="service-include-card"]:focus-within .service-include-card-title.hover {
    opacity: 1;
  }
  [data-hover="service-include-card"]:hover .service-include-card-title.static,
  [data-hover="service-include-card"]:focus-within .service-include-card-title.static {
    opacity: 0;
  }
  [data-hover="service-include-card"]:hover,
  [data-hover="service-include-card"]:focus-within {
    color: var(--_colors---primary-colors--white);
  }
  [data-hover="service-include-card"]:hover .service-include-card-description-wrap,
  [data-hover="service-include-card"]:focus-within .service-include-card-description-wrap {
    max-height: var(--open-h, 100vh);
  }
}

/* ---- 9. the cursor-following buttons -------------------------------- */

/* Four MOUSE_MOVE lists. main.js sets `--mx` / `--my` (0..1) on the trigger
   and the ranges live here, because they differ: three of the four travel
   -50%..50% on both axes, the hero image travels -100%..100% on X, and the
   service card's Y range is -50%..65%. The `- .5` recentres the 0..1 the
   pointer gives into the -.5..+.5 the payload's percentages assume. */
[data-cursor] .work-card-button-wrap,
[data-cursor] .footer-contact-button-wrap,
[data-cursor] .service-main-button-wrap,
[data-cursor] .hero-image-wrap {
  transition: transform .2s ease-out;
  will-change: transform;
}

[data-cursor="work-card"] .work-card-button-wrap,
[data-cursor="footer-button"] .footer-contact-button-wrap {
  transform: translate(
    calc((var(--mx, .5) - .5) * 100%),
    calc((var(--my, .5) - .5) * 100%));
}

[data-cursor="service-main-card"] .service-main-button-wrap {
  transform: translate(
    calc((var(--mx, .5) - .5) * 100%),
    calc(-50% + var(--my, .5) * 115%));
}

[data-cursor="hero-image"] .hero-image-wrap {
  transform: translate(
    calc((var(--mx, .5) - .5) * 200%),
    calc((var(--my, .5) - .5) * 100%));
}@media (prefers-reduced-motion: reduce) {

  [data-cursor] .work-card-button-wrap,
  [data-cursor] .footer-contact-button-wrap,
  [data-cursor] .service-main-button-wrap,
  [data-cursor] .hero-image-wrap {
    transform: none;
  }}


/* ---- 10. the "our story" hovers ------------------------------------- */

/* a-86 / a-87 / a-88. Hovering one widget draws the divider under it and dims
   the other two -- so the state is on the shared PARENT and every widget
   reads it from there. That is the whole reason these three needed a hook at
   all: their IX2 targets are page-wide selectors rather than descendants of
   the trigger, and no CSS combinator says "dim my siblings". */
[data-story-hover] {
  transition: opacity .3s ease;
}

.story-widget-title-divider {
  width: 0;
  transition: width .3s ease;
}

[data-story-active] [data-story-hover] {
  opacity: .3;
}

[data-story-active="1"] [data-story-hover="1"],
[data-story-active="2"] [data-story-hover="2"],
[data-story-active="3"] [data-story-hover="3"] {
  opacity: 1;
}

[data-story-active="1"] [data-story-hover="1"] .story-widget-title-divider,
[data-story-active="2"] [data-story-hover="2"] .story-widget-title-divider,
[data-story-active="3"] [data-story-hover="3"] .story-widget-title-divider {
  width: 100%;
}

/* ---- 10b. the service card's scale-in ------------------------------- */

/* a-64 / a-65, and the only pair in this payload that is neither a reveal nor
   a hover: SCROLL_INTO_VIEW scales `.service-main-card` from 0.8 to 1 on the Y
   axis, and SCROLL_OUT_OF_VIEW settles it back to 0.9. A reveal would be
   wrong -- a reveal never plays backwards -- so main.js observes it both ways
   and this is the state it moves between.

   a-64 carries a 20% scroll offset, which is `data-scale-offset` on the
   element; main.js reads it as the observer's bottom rootMargin. */
[data-scale-view] {
  transform: scaleY(.8);
  transition: transform .5s var(--ease-out-quad);
}

[data-scale-view].is-in-view {
  transform: scaleY(1);
}

[data-scale-view].is-out-of-view {
  transform: scaleY(.9);
}@media (prefers-reduced-motion: reduce) {

  [data-scale-view] {
    transform: none;
    transition: none;
  }}


/* ---- 11. the home page's load animation ----------------------------- */

/* a-90, IX2's one PAGE_FINISH event: the hero image drops in from -100vh at
   1.5x over 1000ms `inOutBack`. It plays once, on load. */
/* `animation-fill-mode: both` PINS `transform` FOREVER and outranks every
   normal declaration -- and this element is ALSO the target of a-89's
   cursor-follow, so the finished load animation froze the hero image and the
   mouse-follow effect did nothing at all. Same lesson as the reveals: main.js
   swaps the class for a plain one on `animationend`, which puts `transform`
   back under the cascade. */
[data-load-drop]:not(.is-dropped) {
  animation: load-drop 1000ms var(--ease-in-out-back) both;
}@keyframes load-drop {

  from { transform: translateY(-100vh) scale(1.5); }
  to { transform: translateY(0) scale(1); }}
@media (prefers-reduced-motion: reduce) {

  [data-load-drop] {
    animation: none;
  }}


/* ---- 12. the two IX3 split-text timelines --------------------------- */

/* The export hid both classes until IX3 initialised:
     html.w-mod-js:not(.w-mod-ix3) :is(.text-scroll, .button-primary)
       { visibility: hidden !important }
   Same idea, keyed on the `.js` class the <head> sets, and cleared by main.js
   the moment it has split the text -- so a page with JavaScript off shows the
   text rather than nothing at all, which the export's version did not. */
:where(.js) .text-scroll:not(.is-split):not(.is-split-off) {
  visibility: hidden;
}

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

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

/* t-58134e16 -- the signature motion. Every character fades from 40% to 100%
   as the line scrolls from "top bottom" to "bottom center", staggered 0.1
   apart. main.js sets `--read` (0..1) and `--i` (the character's index); the
   stagger is expressed as a per-character window, which is what a 0.1 stagger
   over N characters is. */
.text-scroll.is-split .char {
  opacity: clamp(
    .4,
    calc(.4 + .6 * (var(--read, 0) * (var(--chars, 1) + 12) - var(--i, 0)) / 12),
    1);
}

/* t-5a686783 -- on hover the primary button's label flies in from x 35px,
   scale 0 and opacity 0, staggered 0.05 apart, `ease 12` (outBack). The
   animation is restarted by the class rather than by a transition, so it
   replays on every hover. */
@media (hover: hover) {
  .button-primary.is-split:hover .button-text .char {
    animation: button-char 350ms var(--ease-out-back) both;
    animation-delay: calc(var(--i, 0) * 50ms);
  }
}@keyframes button-char {

  from { opacity: 0; transform: translateX(35px) scale(0); }
  to { opacity: 1; transform: translateX(0) scale(1); }}
@media (prefers-reduced-motion: reduce) {

  .text-scroll .char,
  .button-primary .char {
    opacity: 1;
    transform: none;
    animation: none;
  }}


/* ---- 13. the video lightbox ----------------------------------------- */

.lightbox {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.lightbox[hidden] {
  display: none;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .85);
}

.lightbox-frame {
  position: relative;
  width: min(100%, 1100px);
  aspect-ratio: 16 / 9;
}

.lightbox-content,
.lightbox-content iframe,
.lightbox-content img {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  cursor: pointer;
}

.lightbox-close svg {
  width: 22px;
  height: 22px;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, .3);
}

/* ---- 13b. the product page's variant picker ------------------------- */

/* Webflow drew each variant as a `role="radio"` <div> with `tabindex="-1"`,
   which no keyboard could reach; transform.rebuild_add_to_cart makes it a real
   `<input type="radio">` with the design's pill as its <label>. The input is
   the control and the label is the pixels, so the input is taken off screen
   rather than hidden -- `display: none` would take it out of the tab order and
   put the picker back where it started.

   THIS RULE IS LOAD-BEARING AND ITS ABSENCE IS SILENT: without it every plan
   page ships two native radio buttons floating beside their pills, and no
   layout check sees it because the pills themselves do not move. */
.option-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/* THE PILL IS A <label> NOW, AND THE FRAMEWORK STYLES EVERY LABEL.
   `webflow.css` carries a bare `label { display: block; margin-bottom: 5px;
   font-weight: bold }` for form fields, and retagging Webflow's `role="radio"`
   <div> into a <label> hands the pill all three. The 5px margin made the
   option group 5px taller than the export's on every plan page, at every
   width -- which the parity sweep saw and nothing else could.

   `display: block` and `font-weight` are what the design already sets on
   `.option-button`, so only the margin has to be cancelled. */
.option-button {
  margin-bottom: 0;
}

/* The chosen pill keeps the DESIGN'S OWN rule. Webflow marked it
   `.w--ecommerce-pill-selected`, which build_css remaps to `.is-selected`, and
   `.option-button.is-selected` already carries the white fill and dark label
   the design intends -- so main.js moves that class rather than this sheet
   restating the two declarations. Writing them again here would be a second
   copy of a decision the design already made, and the two would drift. */
.option-input:focus-visible + .option-button {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ---- 14. the cart --------------------------------------------------- */

/* The drawer's closed state. The export writes it as an inline
   `style="display:none"` that the runtime cleared; transform.py turns that
   into a `hidden` attribute, which is what this styles. */
.cart-modal[hidden],
.cart-empty[hidden],
.cart-form[hidden],
.error-message[hidden],
.success-message[hidden] {
  display: none;
}

.cart-modal {
  position: fixed;
  z-index: 9000;
  inset: 0;
}

/* ---- 15. the drag rail ---------------------------------------------- */

/* The service page's horizontal work rail. main.js sets the track's transform;
   these are the states around it.

   `touch-action: pan-y` is what lets a finger drag the rail HORIZONTALLY while
   still scrolling the page vertically -- without it the browser claims the
   whole gesture and the rail cannot be dragged on a phone at all. */
.drag-wrap {
  touch-action: pan-y;
  cursor: grab;
}

.drag-wrap.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.drag-wrap:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.drag-track {
  will-change: transform;
}

/* A drag in progress must not start a native image drag as well. */
.drag-wrap.is-dragging img,
.drag-wrap.is-dragging a {
  pointer-events: none;
}