/* EGNIS - 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  Egnis design, including the renamed commerce layout
   4  components -- vanilla replacements for the Webflow runtime and
      for its IX2 and IX3 interactions

   Fonts: assets/fonts/fonts.css -- Inter and Fira Mono, self-hosted
   woff2 in the latin and latin-ext subsets. The export fetched both
   from Google at runtime through webfont.js; these are the same
   outlines, served from this folder. Both are SIL Open Font License
   1.1, so no family needed substituting and no rule in this sheet
   was rewritten for type. */

/* ======================================================================
   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;
  }}

.bg-video {
  position: relative;
  overflow: hidden;
  height: 500px;
  color: white;
}
.bg-video > video {
  background-size: cover;
  background-position: 50% 50%;
  position: absolute;
  margin: auto;
  width: 100%;
  height: 100%;
  right: -100%;
  bottom: -100%;
  top: -100%;
  left: -100%;
  object-fit: cover;
  z-index: -100;
}
.bg-video > video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
.bg-video-control {
  position: absolute;
  bottom: 1em;
  right: 1em;
  background-color: transparent;
  padding: 0;
}
.bg-video-control > [hidden] {
  display: none !important;
}
.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 the dropped framework rules were carrying
   ======================================================================

   build_css drops every rule in webflow.css whose only job was to be driven
   by the Webflow runtime -- the nav overlay, the dropdown's open state, the
   slider's track and arrows, the dyn-list empty box. Most of those rules were
   pure behaviour, but a handful were carrying real LAYOUT that this design
   never restates, because it never had to: `position: relative` on the
   navbar, `display: none` on the menu button above 991px, the absolute
   placement of the two carousel arrows.

   Those are transcribed here, re-keyed on this design's own class names, and
   this file is emitted BETWEEN the framework and the design sheets -- so
   everything below still overrides it in exactly the order it did in the
   export.

   THE MEDIA CONTEXT OF EACH SOURCE RULE WAS CHECKED, not just its
   declarations. `.w-nav-brand { padding-left: 10px }` lives inside
   `@media (max-width: 767px)` in webflow.css; transcribing it top-level, as
   an earlier conversion did, invents a 10px offset at every width. It is not
   here at all, because at 767px this design's own `.brand-logo-link` is a
   flex item whose padding the export computes as zero.

   What is NOT here, and why:
     * every `float` in the source. `.w-nav-brand`, `.w-nav-menu` and
       `.w-nav-button` all float, and all three are flex items in this design
       (`.nav-inner` and `.nav-button-wrapper` are `display: flex`), where
       `float` is ignored outright.
     * `.w-slider { height: 300px; background: #dddddd }` and
       `.w-slider-mask { height: 100% }` -- the design's `.review-slider` and
       `.mask` both say `height: auto`, and the background is transparent.
     * `.w-dropdown-list { background: #dddddd }` -- the accordion's panel is
       only ever visible in its open state, where the design says
       `background-color: #0000`.
     * `[class^="w-icon-"]`, which asked for a `webflow-icons` font on a class
       no page in this export carries. */

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

/* `.w-nav`. The z-index is what keeps the header above the hero's film, and
   the `position` is what the mobile overlay below anchors against -- the
   design gives `.navbar` neither. */
.navbar {
  position: relative;
  z-index: 1000;
}

/* `.w-nav:before` / `:after`, Webflow's clearfix. Kept because the export has
   them: `.navbar` is a block container, so both are empty table boxes of zero
   height and they change nothing -- but a re-export that makes `.navbar` a
   flex or grid container would turn them into real items, and a difference
   that only appears then is worse than two lines here. */
.navbar::before,
.navbar::after {
  content: " ";
  display: table;
  grid-area: 1 / 1 / 2 / 2;
}

.navbar::after {
  clear: both;
}

/* `.w-nav-brand` and `.w-nav-menu`. Only the positioning survives; see the
   note on floats above -- plus the brand's `text-decoration`, which nothing in
   the design supplies and which an <a> would otherwise underline. */
.brand-logo-link,
.nav-menu {
  position: relative;
}

.brand-logo-link {
  text-decoration: none;
}

/* `.w-nav-button`, and this is the whole of the responsive navbar:
   the button is hidden at every width, and the media query below shows it
   again where `data-collapse="medium"` told the runtime to collapse. */
.menu-button {
  position: relative;
  display: none;
  padding: 18px;
  font-size: 24px;
  cursor: pointer;
}

/* ------------------------------------------------------------ the overlay
   Webflow built the mobile menu's container AT RUNTIME: it created a
   `.w-nav-overlay` <div>, moved the <nav> into it, and animated its height.
   transform.py writes that wrapper into the markup instead, and it is inert
   until the menu collapses.

   `display: contents` above 991px is the point. An ordinary <div> here would
   become the flex item in `.nav-inner` in place of the <nav> it holds, and
   `.nav-menu`'s own `flex` sizing would apply to nothing. */
.nav-overlay {
  display: contents;
}@media screen and (max-width: 991px) {

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

  /* The overlay becomes the positioned, clipping container -- `top: 100%`
     from Webflow's own `[data-nav-menu-open]`, which is where the runtime put
     the panel: directly under the navbar, full width.

     THE MENU STAYS IN FLOW INSIDE IT. Webflow's rule also says
     `position: absolute` on the MENU, because its runtime had already
     measured the overlay before writing that; transcribing it literally is
     what shipped an earlier conversion with a mobile menu that opened onto
     nothing -- an overlay with no in-flow content has no height.

     The open/closed states are in components.hand.css, with the transition. */
  .nav-overlay {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 200px;
    overflow: hidden;
  }

  .nav-overlay > .nav-menu {
    position: static;
  }}


/* `.w-nav-brand { padding-left: 10px }`, which lives inside
   `@media (max-width: 767px)` in webflow.css and is transcribed HERE, in the
   same media context.

   This is the rule an earlier conversion transcribed at the top level and so
   invented a 10px offset at every width -- and it is also the rule that same
   conversion's design CANCELLED, which is why it computed to zero there and
   why the lesson was "check the media context". Egnis's design does not
   cancel it: measured against the export at 700px, `.brand-logo-link`
   computes `padding-left: 10px`. Dropping it would move the logo. */
@media screen and (max-width: 767px) {
  .brand-logo-link {
    padding-left: 10px;
  }
}

/* --------------------------------------------------------------- carousel
   `.w-slider-arrow-left` / `.w-slider-arrow-right`. The design gives
   `.review-arrow` a 60px square, a background, a colour and `inset: auto 0 0
   auto`, but no `position` -- that came from the framework, and without it
   both arrows drop into the flow under the last slide.

   `width: 80px`, `color: white` and `font-size: 40px` from the same rule are
   NOT here: the design overrides all three (`width: 60px`, `color:
   var(--_colors---color--black-60)`, and the arrow is an inline <svg> rather
   than an icon glyph). */
.review-arrow {
  position: absolute;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* ...and the box those two anchor against. `.w-slider { position: relative }`
   is the only reason the arrows land inside the carousel rather than against
   the page; the design's `.review-slider` sets a height, two margins and a
   background and says nothing about position. Measured on the export: the
   right arrow's box is at x 1265 of a 1440px viewport, which is inside the
   slider -- with this line dropped it resolves against <body> instead. */
.review-slider {
  position: relative;
}

/* `.w-slider-arrow-left { z-index: 3 }` / `-right { z-index: 4 }`. The two
   never overlap in this design, but the order is the export's. */
.review-arrow.is-left {
  z-index: 3;
}

/* `.w-slider-mask`. `overflow: hidden` is what makes the mask a mask; the
   rest of the rule (`height: 100%`, `white-space: nowrap`) belonged to the
   sliding track this build does not use -- the carousel cross-fades. */
.mask {
  position: relative;
  display: block;
  overflow: hidden;
  z-index: 1;
}

/* `.w-slide`. `width: 100%` is what makes one quote fill the mask. */
.slide {
  position: relative;
  width: 100%;
  text-align: left;
}

/* -------------------------------------------------------------- accordion
   `.w-dropdown`. `display: inline-block` beside the design's `width: 100%`
   is the export's own combination and it is load-bearing: an inline-block sits
   on a line box, which is where the 5px gap between two adjacent rows in the
   FAQ list comes from. */
.accordion {
  position: relative;
  display: inline-block;
  text-align: left;
  z-index: 900;
}

/* `.w-dropdown-toggle`. The design supplies `display: flex` and its own
   padding; what it does not supply is the text alignment, which matters
   because transform.py turns this element into a <button> and the UA
   stylesheet centres a button's text. `user-select: none` stops a
   double-click on a question selecting the words instead of opening it. */
.accordion-toggle {
  position: relative;
  text-align: left;
  cursor: pointer;
  user-select: none;
}

/* `.w-dropdown-list`. `min-width: 100%` was load-bearing on an earlier
   conversion -- a used width is clamped to the minimum LAST, so dropping it
   let a max-width elsewhere win and reflowed a whole FAQ. Here the panel is
   `position: static` by the design's own rule and so already fills its row;
   the declaration is kept anyway, at the width it had. */
.accordion-list {
  min-width: 100%;
}

/* ------------------------------------------------------ retagged controls
   Four elements that were <div>s or <a>s in the export are real controls
   here: the menu button, each FAQ question, each services row and both
   carousel arrows. A <button> arrives with the UA's own `background-color:
   buttonface` and centred text, which is a grey box behind the hamburger and
   a centred FAQ question.

   `:where()` scores ZERO, so every one of these is still overridden by the
   design sheet below exactly as if it were the element default -- which is
   the point. A plain selector here would beat `.blog-tab-link`'s own
   `background-color` and flatten all four tab strips. */
:where(.menu-button, .accordion-toggle, .review-arrow, .tabset-link) {
  appearance: none;
  background-color: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
}

/* ======================================================================
   3. Egnis design
   ====================================================================== */
:root {
  --_colors---color--white: white;
  --_typography---font-family--primary-font: Inter, sans-serif;
  --_colors---color--black-60: #0009;
  --_typography---text-default--font-size: 16px;
  --_typography---text-medium--line-height: 1.4em;
  --_typography---font-weight--medium: 500;
  --_typography---text-default--letter-spacing: var(--_typography---letter-spacing--x-large);
  --_typography---font-family--secondary-font: "Fira Mono", sans-serif;
  --_typography---h1--font-size: 46px;
  --_typography---h1--line-height: 1.2em;
  --_typography---font-weight--semi-bold: 600;
  --_typography---h1--letter-spacing: var(--_typography---letter-spacing--x-large);
  --_responsive---element-spacing--none: 0px;
  --_typography---h2--font-size: 36px;
  --_typography---h2--line-height: 1.2em;
  --_typography---h2--font-weight: var(--_typography---font-weight--semi-bold);
  --_typography---h2--letter-spacing: var(--_typography---letter-spacing--x-large);
  --_typography---h3--font-size: 26px;
  --_typography---h3--line-height: 1.2em;
  --_typography---h3--font-weight: var(--_typography---font-weight--medium);
  --_typography---h3--letter-spacing: var(--_typography---letter-spacing--x-large);
  --_typography---h4--font-size: 20px;
  --_typography---h4--line-height: 1.2em;
  --_typography---h4--font-weight: var(--_typography---font-weight--medium);
  --_typography---h4--letter-spacing: var(--_typography---letter-spacing--small);
  --_typography---h5--font-size: 18px;
  --_typography---h5--line-height: 1.2em;
  --_typography---h5--font-weight: var(--_typography---font-weight--bold);
  --_typography---h5--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---h6--font-size: 16px;
  --_typography---h6--line-height: 1.2em;
  --_typography---h6--font-weight: var(--_typography---font-weight--bold);
  --_typography---h6--letter-spacing: var(--_typography---letter-spacing--none);
  --full-size: 100%;
  --_responsive---section-padding--large: 120px;
  --_typography---font-weight--regular: 400;
  --_typography---text-medium--letter-spacing: var(--_typography---letter-spacing--x-large);
  --_typography---text-default--line-height: 1.25em;
  --_typography---text-small--font-size: 14px;
  --_typography---text-small--line-height: 1.15em;
  --_responsive---element-spacing--spacing-xlarge: 40px;
  --_colors---color--background: #f4f4f4;
  --_colors---color--white-60: #fff9;
  --_responsive---element-spacing--spacing-tiny: 4px;
  --_colors---color--white-20: #fff3;
  --_responsive---element-spacing--spacing-normal: 32px;
  --_colors---color--black: black;
  --_colors---color--black-20: #0003;
  --_colors---color--stroke: #bdbdbd;
  --_responsive---element-spacing--spacing-slim: 20px;
  --_responsive---element-spacing--spacing-xxsmall: 8px;
  --_responsive---element-spacing--spacing-xxxlarge: 48px;
  --_responsive---spacing--34-px\<deleted\|variable-7e30a8d3-7687-4a52-d404-74d261b5dc62\>: 34px;
  --_responsive---element-spacing--spacing-medium: 24px;
  --_responsive---element-spacing--spacing-regular: 30px;
  --_responsive---element-spacing--spacing-xsmall: 12px;
  --_responsive---spacing--14-px\<deleted\|variable-6e27546b-22fd-9515-9505-a788ebe0bc82\>: 14px;
  --_responsive---element-spacing--spacing-massive: 80px;
  --_responsive---element-spacing--spacing-giant: 90px;
  --_responsive---margin--margin-80-px\<deleted\|variable-d245b505-7310-fedd-12f6-4e8ea0571cfa\>: 80px;
  --_responsive---margin--margin-60-px\<deleted\|variable-81f6ae22-b512-06c2-5961-4d195e4def69\>: 60px;
  --_responsive---spacing--10-px\<deleted\|variable-7cc3a4c8-b72f-1d6a-a3c6-33f67efa54a1\>: 10px;
  --_responsive---element-spacing--spacing-xjumbo: 72px;
  --_responsive---element-spacing--spacing-xxbig: 60px;
  --_responsive---element-spacing--spacing-small: 16px;
  --_colors---color--transparent: #0000;
  --_responsive---section-padding--default: 50px;
  --_responsive---section-padding--xlarge: 200px;
  --_typography---display-02--font-size: 76px;
  --_typography---display-02--line-height: 1.2em;
  --_typography---display-02--font-weight: var(--_typography---font-weight--medium);
  --_typography---display-02--letter-spacing: var(--_typography---letter-spacing--x-large);
  --_typography---button-text--font-size: 14px;
  --_typography---button-text--line-height: 1.14em;
  --_typography---button-text--letter-spacing: var(--_typography---letter-spacing--x-large);
  --_responsive---section-padding--small: 20px;
  --_typography---display-xlarge--font-size: 240px;
  --_typography---display-xlarge--line-height: .75em;
  --_responsive---element-spacing--section-title-spacing: 50px;
  --_colors---color--stroke-secondary: grey;
  --_typography---tag--font-size: 14px;
  --_typography---tag--line-height: 1.14em;
  --_typography---tag--letter-spacing: var(--_typography---letter-spacing--none);
  --_responsive---element-spacing--spacing-xxxbig: 64px;
  --_responsive---element-spacing--spacing-large: 36px;
  --_responsive---element-spacing--spacing-colossal: 120px;
  --_typography---display-01--line-height: 1em;
  --_responsive---element-spacing--spacing-medium-rare: 28px;
  --_responsive---element-spacing--spacing-big: 52px;
  --_responsive---border-radius--radius-medium: 12px;
  --_responsive---section-padding--medium: 80px;
  --_responsive---border-radius--radius-small: 10px;
  --_typography---text-xsmall--font-size: 10px;
  --_typography---text-xsmall--line-height: 1em;
  --_typography---text-xsmall--font-weight: var(--_typography---font-weight--regular);
  --_typography---text-small--letter-spacing: var(--_typography---letter-spacing--none);
  --_colors---color--card-background: #f8f8f8;
  --_responsive---border-radius--radius-large: 20px;
  --_typography---display-01--font-size: 160px;
  --_responsive---border-radius--radius-round: 50%;
  --_typography---font-weight--bold: 700;
  --_responsive---element-spacing--spacing-xxlarge: 44px;
  --_responsive---element-spacing--spacing-xbig: 56px;
  --_responsive---element-spacing--spacing-jumbo: 68px;
  --_responsive---element-spacing--spacing-xxjumbo: 76px;
  --_responsive---element-spacing--spacing-immense: 100px;
  --_typography---display-xlarge--letter-spacing: var(--_typography---letter-spacing--x-large);
  --_typography---display-xlarge--font-weight: var(--_typography---font-weight--medium);
  --_typography---display-01--letter-spacing: var(--_typography---letter-spacing--x-large);
  --_typography---display-01--font-weight: var(--_typography---font-weight--medium);
  --_typography---h1--font-weight: var(--_typography---font-weight--semi-bold);
  --_responsive---border-radius--radius-tiny: 4px;
  --_responsive---border-radius--radius-xxsmall: 6px;
  --_responsive---border-radius--radius-xsmall: 8px;
  --_responsive---border-radius--radius-regular: 16px;
  --_responsive---border-radius--radius-xlarge: 24px;
  --_responsive---border-radius--radius-xxlarge: 32px;
  --_responsive---border-radius--radius-xxxlarge: 40px;
  --_responsive---border-radius--radius-circle: 100%;
  --_typography---text-medium--font-size: 18px;
  --_typography---text-medium--font-weight: var(--_typography---font-weight--medium);
  --_typography---text-default--font-weight: var(--_typography---font-weight--medium);
  --_typography---text-small--font-weight: var(--_typography---font-weight--medium);
  --_typography---text-xsmall--letter-spacing: var(--_typography---letter-spacing--x-large);
  --_typography---tag--font-weight: var(--_typography---font-weight--medium);
  --_typography---button-text--font-weight: var(--_typography---font-weight--medium);
  --_typography---font-weight--light: 300;
  --_typography---letter-spacing--none: 0em;
  --_typography---letter-spacing--tiny: .01em;
  --_typography---letter-spacing--small: -.01em;
  --_typography---letter-spacing--default: -.02em;
  --_typography---letter-spacing--medium: -.03em;
  --_typography---letter-spacing--large: -.04em;
  --_typography---letter-spacing--x-large: -.05em;
}
.block-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.bg-video-button:focus-visible {
  outline-offset: 2px;
  border-radius: 50%;
  outline: 2px solid #3b79c3;
}
.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-commerceaddtocartquantityinput {
  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-commerceaddtocartquantityinput::placeholder {
  color: #999;
}
.wf-commerce-commerceaddtocartquantityinput:focus {
  border-color: #3898ec;
  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) {

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

  .block-container {
    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-commerceaddtocartquantityinput, .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 {
  background-color: var(--_colors---color--white);
  font-family: var(--_typography---font-family--primary-font);
  color: var(--_colors---color--black-60);
  font-size: var(--_typography---text-default--font-size);
  line-height: var(--_typography---text-medium--line-height);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---text-default--letter-spacing);
  --_responsive---element-spacing--none: 0px;
  --_responsive---section-padding--large: 120px;
  --_responsive---element-spacing--spacing-xlarge: 40px;
  --_responsive---element-spacing--spacing-tiny: 4px;
  --_responsive---element-spacing--spacing-normal: 32px;
  --_responsive---element-spacing--spacing-slim: 20px;
  --_responsive---element-spacing--spacing-xxsmall: 8px;
  --_responsive---element-spacing--spacing-xxxlarge: 48px;
  --_responsive---spacing--34-px\<deleted\|variable-7e30a8d3-7687-4a52-d404-74d261b5dc62\>: 34px;
  --_responsive---element-spacing--spacing-medium: 24px;
  --_responsive---element-spacing--spacing-regular: 30px;
  --_responsive---element-spacing--spacing-xsmall: 12px;
  --_responsive---spacing--14-px\<deleted\|variable-6e27546b-22fd-9515-9505-a788ebe0bc82\>: 14px;
  --_responsive---element-spacing--spacing-massive: 80px;
  --_responsive---element-spacing--spacing-giant: 90px;
  --_responsive---margin--margin-80-px\<deleted\|variable-d245b505-7310-fedd-12f6-4e8ea0571cfa\>: 80px;
  --_responsive---margin--margin-60-px\<deleted\|variable-81f6ae22-b512-06c2-5961-4d195e4def69\>: 60px;
  --_responsive---spacing--10-px\<deleted\|variable-7cc3a4c8-b72f-1d6a-a3c6-33f67efa54a1\>: 10px;
  --_responsive---element-spacing--spacing-xjumbo: 72px;
  --_responsive---element-spacing--spacing-xxbig: 60px;
  --_responsive---element-spacing--spacing-small: 16px;
  --_responsive---section-padding--default: 50px;
  --_responsive---section-padding--xlarge: 200px;
  --_responsive---section-padding--small: 20px;
  --_responsive---element-spacing--section-title-spacing: 50px;
  --_responsive---element-spacing--spacing-xxxbig: 64px;
  --_responsive---element-spacing--spacing-large: 36px;
  --_responsive---element-spacing--spacing-colossal: 120px;
  --_responsive---element-spacing--spacing-medium-rare: 28px;
  --_responsive---element-spacing--spacing-big: 52px;
  --_responsive---border-radius--radius-medium: 12px;
  --_responsive---section-padding--medium: 80px;
  --_responsive---border-radius--radius-small: 10px;
  --_responsive---border-radius--radius-large: 20px;
  --_responsive---border-radius--radius-round: 50%;
  --_responsive---element-spacing--spacing-xxlarge: 44px;
  --_responsive---element-spacing--spacing-xbig: 56px;
  --_responsive---element-spacing--spacing-jumbo: 68px;
  --_responsive---element-spacing--spacing-xxjumbo: 76px;
  --_responsive---element-spacing--spacing-immense: 100px;
  --_responsive---border-radius--radius-tiny: 4px;
  --_responsive---border-radius--radius-xxsmall: 6px;
  --_responsive---border-radius--radius-xsmall: 8px;
  --_responsive---border-radius--radius-regular: 16px;
  --_responsive---border-radius--radius-xlarge: 24px;
  --_responsive---border-radius--radius-xxlarge: 32px;
  --_responsive---border-radius--radius-xxxlarge: 40px;
  --_responsive---border-radius--radius-circle: 100%;
  --full-size: 100%;
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h1--font-size);
  line-height: var(--_typography---h1--line-height);
  font-weight: var(--_typography---font-weight--semi-bold);
  letter-spacing: var(--_typography---h1--letter-spacing);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
}
h2:where(:not([class*="heading-scale-"])), :where(.heading-scale-2) {
  margin-top: var(--_responsive---element-spacing--none);
  margin-bottom: var(--_responsive---element-spacing--none);
  font-family: var(--_typography---font-family--primary-font);
  font-size: var(--_typography---h2--font-size);
  line-height: var(--_typography---h2--line-height);
  font-weight: var(--_typography---h2--font-weight);
  letter-spacing: var(--_typography---h2--letter-spacing);
}
h3:where(:not([class*="heading-scale-"])), :where(.heading-scale-3) {
  margin-top: var(--_responsive---element-spacing--none);
  margin-bottom: var(--_responsive---element-spacing--none);
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h3--font-size);
  line-height: var(--_typography---h3--line-height);
  font-weight: var(--_typography---h3--font-weight);
  letter-spacing: var(--_typography---h3--letter-spacing);
  text-transform: uppercase;
}
h4:where(:not([class*="heading-scale-"])), :where(.heading-scale-4) {
  margin-top: var(--_responsive---element-spacing--none);
  margin-bottom: var(--_responsive---element-spacing--none);
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h4--font-size);
  line-height: var(--_typography---h4--line-height);
  font-weight: var(--_typography---h4--font-weight);
  letter-spacing: var(--_typography---h4--letter-spacing);
  text-transform: uppercase;
}
h5:where(:not([class*="heading-scale-"])), :where(.heading-scale-5) {
  margin-top: var(--_responsive---element-spacing--none);
  margin-bottom: var(--_responsive---element-spacing--none);
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h5--font-size);
  line-height: var(--_typography---h5--line-height);
  font-weight: var(--_typography---h5--font-weight);
  letter-spacing: var(--_typography---h5--letter-spacing);
  text-transform: uppercase;
}
h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-6) {
  margin-top: var(--_responsive---element-spacing--none);
  margin-bottom: var(--_responsive---element-spacing--none);
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h6--font-size);
  line-height: var(--_typography---h6--line-height);
  font-weight: var(--_typography---h6--font-weight);
  letter-spacing: var(--_typography---h6--letter-spacing);
  text-transform: uppercase;
}
p {
  margin-top: var(--_responsive---element-spacing--none);
  margin-bottom: var(--_responsive---element-spacing--none);
}
ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}
img {
  width: var(--full-size);
  height: var(--full-size);
  object-fit: cover;
  display: inline-block;
}
.utility-page-wrap {
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  padding-top: var(--_responsive---section-padding--large);
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
}
.utility-page-content {
  width: var(--full-size);
  text-align: center;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.utility-page-content.is-password {
  max-width: 520px;
  margin-bottom: 0;
}
.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}
.container {
  width: var(--full-size);
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.container.is-founder {
  height: var(--full-size);
  flex-flow: column;
  display: flex;
}
.heading-02 {
  margin-top: var(--_responsive---element-spacing--none);
  margin-bottom: var(--_responsive---element-spacing--none);
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h2--font-size);
  line-height: var(--_typography---h2--line-height);
  font-weight: var(--_typography---h2--font-weight);
  letter-spacing: var(--_typography---h2--letter-spacing);
  text-transform: uppercase;
}
.heading-03 {
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h3--font-size);
  line-height: var(--_typography---h3--line-height);
  font-weight: var(--_typography---h3--font-weight);
  letter-spacing: var(--_typography---h3--letter-spacing);
  text-transform: uppercase;
}
.heading-04 {
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h4--font-size);
  line-height: var(--_typography---h4--line-height);
  font-weight: var(--_typography---h4--font-weight);
  letter-spacing: var(--_typography---h4--letter-spacing);
  text-transform: uppercase;
}
.heading-05 {
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h5--font-size);
  line-height: var(--_typography---h5--line-height);
  font-weight: var(--_typography---h5--font-weight);
  letter-spacing: var(--_typography---h5--letter-spacing);
}
.heading-06 {
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h6--font-size);
  line-height: var(--_typography---h6--line-height);
  font-weight: var(--_typography---h6--font-weight);
  letter-spacing: var(--_typography---h6--letter-spacing);
  text-transform: uppercase;
}
.text-medium {
  font-size: var(--_typography---text-default--font-size);
  line-height: var(--_typography---text-medium--line-height);
  font-weight: var(--_typography---font-weight--regular);
  letter-spacing: var(--_typography---text-medium--letter-spacing);
}
.text-default {
  font-size: var(--_typography---text-default--font-size);
  line-height: var(--_typography---text-default--line-height);
  font-weight: var(--_typography---font-weight--regular);
  letter-spacing: var(--_typography---text-medium--letter-spacing);
}
.text-small {
  font-size: var(--_typography---text-small--font-size);
  line-height: var(--_typography---text-small--line-height);
  font-weight: var(--_typography---font-weight--regular);
  letter-spacing: var(--_typography---text-medium--letter-spacing);
}
.style-guide-wrap {
  grid-column-gap: 100px;
  grid-row-gap: 100px;
  flex-flow: column;
  max-width: 846px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.color-wrap {
  grid-row-gap: 30px;
  flex-flow: column;
  display: flex;
}
.typography-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  background-color: var(--_colors---color--background);
  border-radius: 16px;
  flex-flow: column;
  padding: 40px;
  display: flex;
}
.components-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  background-color: var(--_colors---color--white-60);
  flex-flow: column;
  display: flex;
}
.style-guide-box-title {
  border-bottom: var(--_responsive---element-spacing--spacing-tiny) solid var(--_colors---color--white-20);
}
.color-block-wrap {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.color-block {
  border-radius: 12px;
  justify-content: flex-start;
  align-items: flex-end;
  min-height: 305px;
  padding: 16px;
  display: flex;
}
.color-block.bg-black {
  background-color: var(--_colors---color--black);
}
.color-block.blck-20 {
  background-color: var(--_colors---color--black-20);
}
.color-block.black-50 {
  background-color: var(--_colors---color--black-60);
}
.color-block.white-50 {
  border: 1px solid var(--_colors---color--stroke);
  background-color: var(--_colors---color--white-60);
}
.color-block.white-20 {
  border: 1px solid var(--_colors---color--stroke);
  background-color: var(--_colors---color--white-20);
}
.color-block.white {
  border: 1px solid var(--_colors---color--stroke);
  background-color: var(--_colors---color--white);
}
.color-block.stroke {
  background-color: var(--_colors---color--stroke);
}
.color-block.background {
  background-color: var(--_colors---color--background);
}
.color-block-info {
  grid-column-gap: var(--_responsive---element-spacing--spacing-slim);
  grid-row-gap: var(--_responsive---element-spacing--spacing-slim);
  background-color: var(--_colors---color--white);
  color: var(--_colors---color--black);
  border-radius: 10px;
  justify-content: space-between;
  padding: 2px 10px;
  display: inline-block;
}
.color-block-main-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xxxlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xxxlarge);
  flex-flow: column;
  display: flex;
}
.typography-box-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-normal);
  grid-row-gap: var(--_responsive---element-spacing--spacing-normal);
  flex-flow: column;
  display: flex;
}
.typography-box-inner-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-medium);
  grid-row-gap: var(--_responsive---element-spacing--spacing-medium);
  flex-flow: column;
  display: flex;
}
.text-block {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xsmall);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xsmall);
  flex-flow: column;
  display: flex;
}
.components-main-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xxxlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xxxlarge);
  flex-flow: column;
  max-width: 760px;
  display: flex;
}
.button-item-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-normal);
  grid-row-gap: var(--_responsive---element-spacing--spacing-normal);
  display: flex;
}
.button-primary {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  border-right: 1px solid var(--_colors---color--stroke);
  border-bottom: 1px solid var(--_colors---color--stroke);
  border-left: 1px solid var(--_colors---color--stroke);
  color: var(--_colors---color--black);
  justify-content: center;
  align-items: center;
  padding: 10px;
  text-decoration: none;
  display: flex;
  position: relative;
}
.button-primary:where(.button-text-white) {
  border-right-color: var(--_colors---color--white-20);
  border-bottom-color: var(--_colors---color--white-20);
  border-left-color: var(--_colors---color--white-20);
  color: var(--_colors---color--white);
}
.button-primary:hover {
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
.button-primary.text-white {
  border-right-color: var(--_colors---color--white-20);
  border-bottom-color: var(--_colors---color--white-20);
  border-left-color: var(--_colors---color--white-20);
  color: var(--_colors---color--white);
}
.button-primary.v1 {
  background-color: var(--_colors---color--white);
}
.button-primary-arrow-wrap {
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  display: flex;
}
.button-primary-arrow-wrap:where(.button-icon-first) {
  order: -9999;
  transform: rotate(180deg);
}
.button-primary-arrow-group {
  justify-content: flex-end;
  align-items: flex-start;
  width: 12px;
  height: 12px;
  display: flex;
  overflow: hidden;
  transform: rotate(-45deg);
}
.button-primary-arrow {
  flex: none;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
}
.footer-top {
  width: var(--full-size);
  grid-column-gap: var(--_responsive---element-spacing--spacing-slim);
  grid-row-gap: var(--_responsive---element-spacing--spacing-slim);
  pointer-events: auto;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.footer-bottom {
  width: var(--full-size);
  margin-top: var(--_responsive---margin--margin-80-px\<deleted\|variable-d245b505-7310-fedd-12f6-4e8ea0571cfa\>);
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  pointer-events: none;
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.footer-top-left {
  width: 461px;
  max-width: var(--full-size);
  grid-column-gap: var(--_responsive---element-spacing--spacing-normal);
  grid-row-gap: var(--_responsive---element-spacing--spacing-normal);
  flex-flow: column;
  display: flex;
}
.footer-top-right {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xxbig);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xxbig);
  flex: none;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  display: flex;
}
.footer-wrap {
  z-index: 2;
  pointer-events: none;
  position: relative;
}
.footer-left-bottom {
  grid-column-gap: var(--_responsive---element-spacing--spacing-small);
  grid-row-gap: var(--_responsive---element-spacing--spacing-small);
  flex-flow: column;
  max-width: 184px;
  display: flex;
}
.footer-contact-link {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xsmall);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xsmall);
  color: var(--_colors---color--white);
  align-items: center;
  text-decoration: none;
  display: flex;
}
.footer-contact-link-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xxsmall);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xxsmall);
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}
.footer-link-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-medium);
  grid-row-gap: var(--_responsive---element-spacing--spacing-medium);
  flex-flow: column;
  display: flex;
}
.footer-link-list-wrap {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}
.header-section {
  position: absolute;
  inset: 0% 0% auto;
}
.header-section:where(.header-v2) {
  background-color: var(--_colors---color--transparent);
}
.navbar {
  width: var(--full-size);
  background-color: var(--_colors---color--transparent);
  padding-top: 20px;
  padding-bottom: 20px;
}
.brand-logo-link {
  max-width: 67px;
  color: var(--_colors---color--white);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.brand-logo-link:where(.header-v2) {
  color: var(--_colors---color--black);
}
.nav-button-wrapper {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex: none;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}
.nav-inner {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.nav-menu {
  width: var(--full-size);
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  justify-content: space-between;
  align-items: center;
  max-width: 873px;
  display: flex;
}
.nav-link {
  padding: var(--_responsive---element-spacing--none);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  color: var(--_colors---color--white-60);
  margin-left: 0;
  margin-right: 0;
  text-decoration: none;
  display: flex;
}
.nav-link:where(.header-v2) {
  color: var(--_colors---color--black-60);
}
.nav-link[aria-current="page"], .nav-link.is-active {
  color: var(--_colors---color--white);
}
.nav-link[aria-current="page"]:where(.header-v2), .nav-link.is-active:where(.header-v2) {
  color: var(--_colors---color--black);
}
.utility-content-block {
  grid-row-gap: 36px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 848px;
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
  display: flex;
}
.text-dark {
  color: var(--_colors---color--black);
}
.text-dark.is-process-title {
  margin-bottom: 60px;
  position: sticky;
  top: 40px;
}
.text-dark.flex {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xsmall);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xsmall);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.utility-section {
  padding-top: var(--_responsive---section-padding--default);
  padding-bottom: var(--_responsive---section-padding--default);
}
.utility-section.is-padding-large {
  padding-top: var(--_responsive---section-padding--xlarge);
  padding-bottom: var(--_responsive---section-padding--large);
}
.terms-link {
  color: #000;
  font-weight: var(--_typography---font-weight--medium);
  transition: color .3s;
}
.terms-link:hover {
  color: var(--_colors---color--black);
}
.utility-text-wrap {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-top: 24px;
  padding-bottom: 44px;
  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;
}
.display-02 {
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---display-02--font-size);
  line-height: var(--_typography---display-02--line-height);
  font-weight: var(--_typography---display-02--font-weight);
  letter-spacing: var(--_typography---display-02--letter-spacing);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
}
.display-02.is-utility-title {
  font-family: var(--_typography---font-family--primary-font);
  text-transform: none;
}
.button-7 {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  color: #fff;
  background-color: #000;
  border-radius: 2px;
  justify-content: center;
  align-items: center;
  padding: 20px 32px;
  text-decoration: none;
  display: flex;
}
.button-text {
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---button-text--font-size);
  line-height: var(--_typography---button-text--line-height);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---button-text--letter-spacing);
  text-transform: uppercase;
}
.utility-title-block {
  grid-row-gap: 32px;
  max-width: 625px;
  color: var(--_colors---color--black);
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 140px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.utility-title-block.is-instruction {
  max-width: 544px;
}
.footer {
  z-index: 1;
  background-color: var(--_colors---color--black);
  padding-top: 50px;
  padding-bottom: 43px;
  position: relative;
  overflow: hidden;
}
.footer-background-video {
  width: 120%;
  height: var(--full-size);
  margin-left: -10%;
  position: absolute;
  inset: 0%;
}
.footer-video-overlay {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background-color: #0003;
  position: absolute;
  inset: 0%;
}
.footer-logo {
  mix-blend-mode: difference;
}
.footer-logo-link {
  pointer-events: auto;
  width: 80%;
}
.footer-utility-link-block {
  width: var(--full-size);
  pointer-events: auto;
  max-width: 318px;
  color: var(--_colors---color--white-60);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.hero-section {
  min-height: 650px;
  padding-top: 140px;
  padding-bottom: var(--_responsive---section-padding--small);
  background-color: var(--_colors---color--black);
  position: relative;
}
.hero-background-video {
  z-index: 1;
  width: var(--full-size);
  height: var(--full-size);
  pointer-events: auto;
  position: absolute;
  inset: 0%;
}
.hero-video-overlay {
  -webkit-backdrop-filter: blur(54px);
  backdrop-filter: blur(54px);
  background-color: #0000002e;
  position: absolute;
  inset: 0%;
}
.hero-info-block {
  z-index: 2;
  color: var(--_colors---color--white-60);
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 70px;
  display: flex;
  position: relative;
}
.display-xlarge {
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---display-xlarge--font-size);
  line-height: var(--_typography---display-xlarge--line-height);
  font-weight: var(--_typography---font-weight--medium);
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-end;
}
.hero-title-wrap {
  color: var(--_colors---color--white);
  mix-blend-mode: difference;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.work-widget-left {
  width: var(--full-size);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 255px;
  display: flex;
}
.work-widget-title-block {
  grid-row-gap: 5px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.work-widget-client-block {
  grid-row-gap: var(--_responsive---element-spacing--spacing-xxsmall);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.work-widget-tag-block {
  grid-column-gap: 5px;
  flex-flow: wrap;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.work-widget-tag {
  grid-column-gap: 10px;
  font-weight: var(--_typography---font-weight--medium);
  background-color: #f4f4f4;
  border-radius: 40px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  display: flex;
}
.work-widget {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}
.work-widget-right {
  width: var(--full-size);
  border-radius: 10px;
  max-width: 1100px;
  position: relative;
  overflow: hidden;
}
.work-section {
  padding-top: var(--_responsive---section-padding--default);
  padding-bottom: var(--_responsive---section-padding--small);
}
.sub-title-row {
  width: 100%;
  max-width: 1400px;
  margin-bottom: var(--_responsive---element-spacing--spacing-slim);
  border-bottom: 1px dashed var(--_colors---color--stroke);
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  text-decoration: none;
  display: flex;
}
.sub-title-row.is-benefit {
  border-bottom-color: var(--_colors---color--white-20);
  color: var(--_colors---color--white-60);
  margin-bottom: 0;
}
.sub-title-row.is-faq {
  margin-bottom: var(--_responsive---section-padding--default);
  color: var(--_colors---color--white-60);
}
.sub-title-row.is-blog {
  margin-bottom: var(--_responsive---element-spacing--section-title-spacing);
}
.sub-title-row.is-blog-details {
  margin-bottom: 50px;
}
.sub-title-row.is-service {
  border-bottom-color: var(--_colors---color--stroke-secondary);
  color: var(--_colors---color--white-60);
}
.sub-title-row.is-compare {
  margin-bottom: 40px;
}
.sub-title-row.is-footer {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xsmall);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xsmall);
  pointer-events: auto;
  color: var(--_colors---color--white);
}
.sub-title-row.is-founder {
  margin-bottom: var(--_responsive---section-padding--default);
  border-bottom-color: var(--_colors---color--white-60);
  color: var(--_colors---color--white-60);
}
.sub-title-row.is-statistic {
  margin-bottom: var(--_responsive---section-padding--small);
  border-bottom-color: var(--_colors---color--white-60);
  color: var(--_colors---color--white-60);
}
.sub-title {
  grid-column-gap: 7px;
  color: var(--_colors---color--black-60);
  text-transform: uppercase;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}
.sub-title:where(.sub-title-white-60) {
  color: var(--_colors---color--white-60);
}
.sub-title:where(.sub-title-white) {
  color: var(--_colors---color--white);
}
.sub-title-particle {
  background-color: var(--_colors---color--black);
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 2px;
  height: 11px;
}
.sub-title-particle:where(.sub-title-white-60) {
  background-color: var(--_colors---color--white-60);
}
.sub-title-particle:where(.sub-title-white) {
  background-color: var(--_colors---color--white);
}
.section-title-block {
  margin-bottom: var(--_responsive---element-spacing--section-title-spacing);
}
.section-title-block.is-statistic {
  position: sticky;
  top: 40px;
}
.tag-text {
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---tag--font-size);
  line-height: var(--_typography---tag--line-height);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---tag--letter-spacing);
  text-transform: uppercase;
}
.section-title-row {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-bottom: 10px;
  text-decoration: none;
  display: flex;
}
.section-title-row.is-feature {
  max-width: 899px;
  margin-left: auto;
}
.section-title-row.is-award {
  max-width: 889px;
  margin-left: auto;
}
.section-title-row.is-statistic {
  max-width: 923px;
  margin-left: auto;
  padding-bottom: 0;
}
.section-title-left {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  color: var(--_colors---color--black);
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.section-title-left.is-service {
  max-width: 640px;
  color: var(--_colors---color--white);
}
.hero-info-wrap {
  max-width: 131px;
}
.text-white {
  color: var(--_colors---color--white);
}
.hero-title-block {
  z-index: 2;
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
  position: relative;
}
.about-section {
  padding-top: var(--_responsive---section-padding--default);
  padding-bottom: var(--_responsive---section-padding--default);
}
.section-title-right {
  flex: none;
}
.section-title-right.is-service {
  width: var(--full-size);
  max-width: 295px;
}
.work-widget-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  margin-bottom: 50px;
  display: flex;
}
.about-right {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 568px;
  display: flex;
}
.mission-widget {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  width: 100%;
  color: var(--_colors---color--black);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.reputation-widget {
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.about-content-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  justify-content: space-between;
  display: flex;
}
.about-left {
  width: var(--full-size);
  grid-column-gap: var(--_responsive---element-spacing--spacing-normal);
  grid-row-gap: var(--_responsive---element-spacing--spacing-normal);
  justify-content: space-between;
  max-width: 700px;
  display: flex;
}
.about-stats-widget {
  grid-row-gap: 5px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}
.about-stats-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  flex-flow: column;
  display: flex;
}
.about-image-wrap {
  width: var(--full-size);
  border-radius: 10px;
  max-width: 326px;
  position: relative;
  overflow: hidden;
}
.about-stats-block {
  width: var(--full-size);
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  flex-flow: column;
  justify-content: space-between;
  max-width: 302px;
  display: flex;
}
.section-particle {
  max-width: 12px;
}
.section-particle.two {
  margin-top: auto;
}
.section-particle-block {
  margin-bottom: var(--_responsive---element-spacing--section-title-spacing);
  color: var(--_colors---color--black);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.section-particle-block.is-banner {
  color: var(--_colors---color--white);
  margin-bottom: 0;
}
.section-particle-block.is-blog-main, .section-particle-block.is-work {
  margin-bottom: 0;
}
.section-particle-block.is-service {
  color: var(--_colors---color--white);
}
.section-particle-block.is-blog {
  margin-bottom: 0;
}
.section-particle-block.is-benefit-two {
  margin-bottom: 37px;
}
.section-particle-block.is-feature {
  margin-bottom: 0;
}
.section-particle-block.is-error {
  color: var(--_colors---color--black);
  margin-bottom: 0;
}
.section-particle-block.is-about {
  margin-bottom: var(--_responsive---section-padding--default);
  color: var(--_colors---color--white);
}
.section-particle-block.is-value {
  margin-bottom: 0;
}
.section-particle-block.is-founder {
  margin-bottom: var(--_responsive---element-spacing--spacing-xxxbig);
  color: var(--_colors---color--white);
}
.section-particle-block.is-team-top {
  margin-bottom: var(--_responsive---element-spacing--spacing-regular);
  color: var(--_colors---color--white);
}
.section-particle-block.is-team-bottom {
  margin-bottom: var(--_responsive---element-spacing--none);
  color: var(--_colors---color--white);
}
.section-particle-block.is-review {
  margin-bottom: 0;
}
.section-particle-block.is-testimonial {
  margin-bottom: var(--_responsive---element-spacing--none);
}
.section-particle-block.is-pricing {
  margin-bottom: 0;
}
.process-section {
  padding-top: var(--_responsive---section-padding--default);
  padding-bottom: var(--_responsive---section-padding--default);
  background-color: var(--_colors---color--background);
}
.process-card-block {
  background-color: var(--_colors---color--white);
  border-radius: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  max-width: 700px;
  padding: 10px;
  display: flex;
}
.process-card {
  grid-row-gap: 10px;
  background-color: var(--_colors---color--background);
  border-radius: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
}
.process-card-inner {
  grid-column-gap: var(--_responsive---element-spacing--spacing-colossal);
  grid-row-gap: var(--_responsive---element-spacing--spacing-colossal);
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}
.process-card-body {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.process-card-particle-wrap {
  background-color: var(--_colors---color--background);
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}
.process-particle-white {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 24%;
  height: 14px;
  text-decoration: none;
  display: flex;
}
.process-particle-white.is-left {
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
}
.process-particle-white.is-right {
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
}
.process-particle-gray {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 56%;
  max-width: 376px;
  height: 14px;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}
.process-content-block {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  justify-content: space-between;
  display: flex;
}
.process-card-description {
  max-width: 360px;
}
.process-left {
  width: var(--full-size);
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  flex-flow: column;
  justify-content: space-between;
  max-width: 604px;
  display: flex;
}
.about-title-space {
  width: 193px;
  display: inline-block;
}
.process-button-wrap {
  max-width: 302px;
}
.work-widget-status-block {
  grid-row-gap: 8px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.weight-medium {
  font-weight: var(--_typography---font-weight--medium);
}
.all-caps {
  text-transform: uppercase;
}
.heading-04-primary-font {
  font-family: var(--_typography---font-family--primary-font);
  font-size: var(--_typography---h4--font-size);
  line-height: var(--_typography---h4--line-height);
  font-weight: var(--_typography---h4--font-weight);
  letter-spacing: var(--_typography---h4--letter-spacing);
}
.pricing-card {
  width: var(--full-size);
  height: var(--full-size);
  grid-row-gap: 36px;
  background-color: var(--_colors---color--white);
  border-radius: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 20px;
  display: flex;
}
.pricing-card.dark {
  background-color: var(--_colors---color--black);
}
.pricing-card-title-block {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}
.pricing-toggle-block {
  grid-column-gap: 10px;
  flex: 0 auto;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}
.pricing-card-price-block {
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.pricing-card-list-block {
  grid-row-gap: 15px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}
.section-particles-block {
  width: 100%;
  color: var(--_colors---color--black);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.section-particles-block.is-benefit {
  margin-bottom: var(--_responsive---element-spacing--none);
  color: var(--_colors---color--white);
}
.section-particles-block.is-faq {
  color: var(--_colors---color--white);
}
.section-particles-block.is-benefit-top {
  margin-bottom: var(--_responsive---element-spacing--section-title-spacing);
  color: var(--_colors---color--white);
}
.pricing-section {
  padding-top: var(--_responsive---section-padding--default);
  padding-bottom: var(--_responsive---section-padding--default);
  background-color: var(--_colors---color--background);
}
.heading-01-primary-font {
  font-family: var(--_typography---font-family--primary-font);
  font-size: var(--_typography---h1--font-size);
  line-height: var(--_typography---h1--line-height);
  font-weight: var(--_typography---font-weight--semi-bold);
  letter-spacing: var(--_typography---h1--letter-spacing);
}
.heading-01-primary-font.weight-semi-bold {
  font-weight: var(--_typography---font-weight--semi-bold);
}
.heading-01-primary-font.white {
  color: var(--_colors---color--white);
}
.heading-01-primary-font.v1 {
  line-height: var(--_typography---display-01--line-height);
  text-align: left;
}
.pricing-card-price-wrapper {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.pricing-card-block {
  margin-bottom: var(--_responsive---element-spacing--section-title-spacing);
  grid-column-gap: var(--_responsive---element-spacing--spacing-xsmall);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xsmall);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: stretch;
  display: grid;
}
.weight-semi-bold {
  font-weight: var(--_typography---font-weight--semi-bold);
}
.weight-semi-bold.white {
  color: var(--_colors---color--white-60);
}
.heading-03-primary-font {
  font-family: var(--_typography---font-family--primary-font);
  font-size: var(--_typography---h3--font-size);
  line-height: var(--_typography---h3--line-height);
  font-weight: var(--_typography---h3--font-weight);
  letter-spacing: var(--_typography---h3--letter-spacing);
}
.heading-03-primary-font.white {
  color: var(--_colors---color--white);
}
.testimonial-section {
  background-color: var(--_colors---color--background);
  height: 300vh;
}
.testimonial-section.is-large {
  display: none;
}
.testimonial-card-block {
  width: 100%;
  margin-bottom: var(--_responsive---element-spacing--section-title-spacing);
  justify-content: flex-start;
  align-items: stretch;
  text-decoration: none;
  display: flex;
}
.testimonial-card {
  grid-column-gap: 10px;
  border: 4px solid var(--_colors---color--white);
  background-color: var(--_colors---color--background);
  border-radius: 10px;
  flex: none;
  justify-content: flex-start;
  align-items: stretch;
  max-width: 566px;
  min-height: 75vh;
  padding: 30px;
  text-decoration: none;
  position: relative;
}
.testimonial-card-inner {
  width: var(--full-size);
  height: var(--full-size);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}
.testimonial-card-top {
  grid-row-gap: var(--_responsive---element-spacing--spacing-big);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
  position: relative;
}
.testimonial-card-image {
  border-radius: var(--_responsive---border-radius--radius-medium);
  object-fit: cover;
  max-width: 103px;
}
.testimonial-card-text {
  width: 100%;
  color: var(--_colors---color--black);
  font-size: var(--_typography---h4--font-size);
  line-height: var(--_typography---h4--line-height);
  letter-spacing: var(--_typography---h4--letter-spacing);
  flex: none;
  margin-top: 0;
  margin-bottom: 0;
}
.testimonial-card-bottom {
  grid-row-gap: 4px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}
.testimonial-social-link {
  grid-row-gap: 10px;
  background-color: var(--_colors---color--white);
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  padding: 8px 10px;
  display: flex;
  position: absolute;
  inset: 0% 0% auto auto;
}
.testimonial-social-icon {
  object-fit: cover;
  overflow: hidden;
}
.benefit-section {
  padding-top: var(--_responsive---section-padding--small);
  padding-bottom: var(--_responsive---section-padding--small);
  position: relative;
}
.benefit-content-block {
  width: var(--full-size);
  flex-flow: column;
  justify-content: space-between;
  min-height: 763px;
  display: flex;
}
.benefit-line-block {
  pointer-events: none;
  justify-content: center;
  display: flex;
  position: absolute;
  inset: 0%;
}
.benefit-verticle-line {
  height: var(--full-size);
  border-right: 1px dashed var(--_colors---color--white-20);
}
.benefit-content {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.benefit-right {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding-top: 30px;
  padding-left: 30px;
  text-decoration: none;
  display: flex;
}
.benefit-tab-link-text {
  font-family: var(--_typography---font-family--secondary-font);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
}
.benefit-content-wrap {
  margin-top: auto;
  margin-bottom: var(--_responsive---element-spacing--section-title-spacing);
}
.benefit-left {
  max-width: 619px;
  color: var(--_colors---color--white);
  margin-top: auto;
}
.accordion {
  border-bottom: 1px dashed var(--_colors---color--white-20);
  width: 100%;
  padding-bottom: 14px;
}
.accordion-toggle {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 30px 20px 16px;
  display: flex;
}
.accordion-list {
  padding-left: 20px;
  padding-right: 20px;
  position: static;
}
.accordion-list.is-open {
  background-color: #0000;
  overflow: hidden;
}
.accordion-description {
  color: var(--_colors---color--white-60);
  padding-bottom: 14px;
}
.accordion-icon {
  max-width: 20px;
  color: var(--_colors---color--white);
}
.accordion-title {
  color: var(--_colors---color--white);
  white-space: pre-wrap;
}
.accordion-description-wrap {
  max-width: 700px;
}
.faq-section {
  padding-top: var(--_responsive---section-padding--default);
  padding-bottom: var(--_responsive---section-padding--small);
  background-color: var(--_colors---color--black);
}
.faq-content-block {
  margin-bottom: var(--_responsive---section-padding--default);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.faq-accordion-block {
  width: var(--full-size);
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  max-width: 802px;
  display: flex;
}
.faq-image-block {
  width: var(--full-size);
  border-radius: 10px;
  max-width: 417px;
  overflow: hidden;
}
.blog-section {
  padding-top: var(--_responsive---section-padding--default);
  padding-bottom: var(--_responsive---section-padding--small);
}
.blog-card-block {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-rows: auto;
  grid-template-columns: 1.25fr 1fr .75fr .9fr;
  grid-auto-columns: 1fr;
  margin-bottom: 17px;
  display: grid;
}
.blog-widget-body {
  grid-row-gap: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.blog-widget-info-wrap {
  width: 100%;
  color: var(--_colors---color--black);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.blog-widget-title-wrap {
  grid-row-gap: 5px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.blog-widget {
  width: var(--full-size);
  color: var(--_colors---color--black-60);
  text-decoration: none;
}
.blog-widget:where(.blog-widget-v2) {
  color: var(--_colors---color--black-60);
  text-decoration: none;
}
.blog-widget-image-wrap {
  border-radius: 10px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.blog-widget-particles {
  pointer-events: none;
  color: var(--_colors---color--white);
  padding: 20px;
  display: flex;
  position: absolute;
  inset: 0%;
}
.blog-widget-particle.two {
  margin-top: auto;
  margin-left: auto;
}
.blog-widget-image:where(.blog-widget-v2) {
  min-height: 317px;
  max-height: 317px;
}
.blog-widget-image:where(.blog-widget-v3) {
  min-height: 232px;
  max-height: 232px;
}
.blog-widget-image:where(.blog-widget-v4) {
  min-height: 431px;
  max-height: 431px;
}
.blog-widget-image:where(.blog-widget-v5) {
  min-height: 340px;
  max-height: 340px;
}
.blog-widget-title {
  font-family: var(--_typography---font-family--secondary-font);
  color: var(--_colors---color--black);
  text-transform: uppercase;
}
.blog-widget-button-wrap {
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}
.blog-widget-button {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  color: var(--_colors---color--white);
  background-color: #ffffff1a;
  border-radius: 40px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  padding: 15px 20px;
  text-decoration: none;
  transition: filter .3s;
  display: flex;
}
.blog-widget-button:hover {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.blog-widget-button-icon {
  max-width: 12px;
}
.empty-state {
  background-color: var(--_colors---color--black-20);
  color: var(--_colors---color--black);
  text-align: center;
  border-radius: 4px;
  padding: 16px;
}
.banner-section {
  padding-top: var(--_responsive---section-padding--large);
  padding-bottom: var(--_responsive---section-padding--medium);
  background-color: var(--_colors---color--black);
}
.banner-description {
  max-width: 400px;
}
.banner-description.is-utility {
  grid-column-gap: 104px;
  grid-row-gap: 104px;
  flex-flow: column;
  width: 32.287%;
  display: flex;
}
.banner-description.is-error {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  text-align: left;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.banner-description.is {
  grid-column-gap: 104px;
  grid-row-gap: 104px;
  flex-flow: column;
  display: flex;
}
.banner-description.is-pricing {
  width: 32.287%;
}
.banner-content-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  color: var(--_colors---color--white);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.banner-content-block.is-error {
  width: var(--full-size);
  color: var(--_colors---color--black);
}
.banner-content-block.is-service {
  z-index: 2;
  pointer-events: auto;
  flex-flow: row;
  position: relative;
}
.banner-title {
  font-family: var(--_typography---font-family--secondary-font);
  font-size: 13vw;
  line-height: .75em;
  font-weight: var(--_typography---font-weight--medium);
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-end;
}
.banner-title-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}
.banner-title-block.is-contact {
  color: var(--_colors---color--white);
}
.banner-title-block.is-error {
  text-align: left;
  max-width: 560px;
}
.banner-title-block.is-about {
  color: var(--_colors---color--white);
  display: inline-flex;
}
.collection-list {
  grid-column-gap: 26px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.blog-tabs {
  margin-bottom: var(--_responsive---section-padding--default);
}
.tabs-menu {
  grid-column-gap: 11px;
  grid-row-gap: 11px;
  flex-flow: wrap;
  margin-bottom: 50px;
  display: flex;
}
.blog-tab-link {
  border: 1px solid var(--_colors---color--black-20);
  background-color: var(--_colors---color--transparent);
  padding: 16px;
}
.blog-tab-link[aria-current="page"], .blog-tab-link.is-active {
  border-color: var(--_colors---color--black);
  background-color: var(--_colors---color--black);
  color: var(--_colors---color--white);
}
.blog-details-section {
  padding-top: var(--_responsive---section-padding--large);
}
.blog-details-right {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 850px;
  margin-top: -40px;
  padding-bottom: 20px;
  text-decoration: none;
  display: flex;
}
.blog-gallery-image-wrap {
  background-color: #0003;
  border-radius: 10px;
  margin-top: 20px;
  margin-bottom: 40px;
  overflow: hidden;
}
.blog-quote-autor-image {
  object-fit: cover;
  border-radius: 50%;
  max-width: 48px;
}
.blog-quote-block {
  grid-row-gap: 10px;
  border-style: solid;
  border-width: 0 0 0 4px;
  border-color: #000 #000 #000 var(--_colors---color--black);
  background-color: var(--_colors---color--background);
  border-radius: 8px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 20px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}
.blog-quote-inner {
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 760px;
  text-decoration: none;
  display: flex;
}
.blog-quote-author-block {
  grid-column-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 289px;
  height: 48px;
  text-decoration: none;
  display: flex;
}
.blog-quote-author-info {
  grid-row-gap: 2px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}
.blog-details-content-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.blog-rich-text h2:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-2) {
  color: var(--_colors---color--black);
  font-size: var(--_typography---h3--font-size);
  line-height: var(--_typography---h3--line-height);
  letter-spacing: var(--_typography---h3--letter-spacing);
  margin-top: 40px;
  margin-bottom: 14px;
}
.blog-rich-text p {
  margin-bottom: 20px;
}
.blog-rich-text ul {
  grid-column-gap: var(--_responsive---element-spacing--spacing-tiny);
  grid-row-gap: var(--_responsive---element-spacing--spacing-tiny);
  color: var(--_colors---color--black);
  flex-flow: column;
  margin-bottom: 20px;
  padding-left: 25px;
  display: flex;
}
.blog-rich-text li {
  line-height: var(--_typography---text-medium--line-height);
}
.blog-details-left {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  padding-bottom: 40px;
  display: flex;
  position: sticky;
  top: 40px;
}
.blog-details-info-block {
  grid-column-gap: 4px;
  font-family: var(--_typography---font-family--secondary-font);
  color: var(--_colors---color--black);
  text-transform: uppercase;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}
.blog-details-social-block {
  grid-row-gap: 8px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}
.social-links {
  grid-column-gap: 12px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-main-image {
  max-height: 720px;
}
.blog-main-image-wrap {
  border-radius: 20px;
  margin-bottom: 50px;
  overflow: hidden;
}
.social-link {
  max-width: 24px;
  color: var(--_colors---color--black);
  transition: transform .3s;
}
.social-link:hover {
  transform: scale(1.1);
}
.utility-content {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.utility-table-of-content {
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
  position: sticky;
  top: 40px;
}
.utility-text-block {
  width: var(--full-size);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  max-width: 850px;
  display: flex;
}
.utility-title-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}
.utility-description-wrap {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.utility-title {
  font-family: var(--_typography---font-family--primary-font);
  color: var(--_colors---color--black);
  font-size: var(--_typography---h4--font-size);
  line-height: var(--_typography---h4--line-height);
  font-weight: var(--_typography---h4--font-weight);
  letter-spacing: var(--_typography---h4--letter-spacing);
}
.utility-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}
.utility-list {
  color: var(--_colors---color--black);
  margin-bottom: 0;
  padding-left: 25px;
}
.utility-link {
  color: var(--_colors---color--black);
  text-decoration: none;
}
.utility-contact-list {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  margin-bottom: 0;
  padding-left: 25px;
  display: flex;
}
.utility-table-link {
  color: var(--_colors---color--black-60);
  text-decoration: none;
}
.utility-table-link[aria-current="page"], .utility-table-link.is-active {
  color: var(--_colors---color--black);
}
.about-title-blank {
  width: 254px;
  display: inline-block;
}
.service-section {
  padding-top: var(--_responsive---section-padding--default);
  padding-bottom: var(--_responsive---section-padding--small);
  background-color: var(--_colors---color--black);
}
.service-section.is-main {
  padding-bottom: var(--_responsive---section-padding--default);
}
.service-tab-link {
  border-bottom: 1px dashed var(--_colors---color--white-60);
  background-color: var(--_colors---color--transparent);
  color: var(--_colors---color--white-60);
  padding: 30px 20px;
}
.service-tab-link[aria-current="page"], .service-tab-link.is-active {
  border: 1px dashed var(--_colors---color--white-60);
  background-color: var(--_colors---color--transparent);
  color: var(--_colors---color--white);
  border-radius: 10px;
}
.service-tab-content {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  display: flex;
}
.service-tab-left {
  width: var(--full-size);
  grid-column-gap: var(--_responsive---element-spacing--spacing-medium);
  grid-row-gap: var(--_responsive---element-spacing--spacing-medium);
  text-align: right;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 700px;
  text-decoration: none;
  display: flex;
}
.service-tab-image {
  object-fit: cover;
  border-radius: 10px;
  max-width: 268px;
  overflow: hidden;
}
.service-tab-description {
  grid-row-gap: 8px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 250px;
  text-decoration: none;
  display: flex;
}
.service-tabs-menu {
  grid-column-gap: var(--_responsive---element-spacing--spacing-regular);
  grid-row-gap: var(--_responsive---element-spacing--spacing-regular);
  flex-flow: column;
  display: flex;
}
.service-tab-right {
  width: var(--full-size);
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  justify-content: space-between;
  align-items: flex-start;
  max-width: 600px;
  display: flex;
  overflow: hidden;
}
.text-white-60 {
  color: var(--_colors---color--white-60);
}
.service-tabs {
  margin-bottom: var(--_responsive---element-spacing--section-title-spacing);
}
.service-widget-left {
  width: var(--full-size);
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 852px;
  text-decoration: none;
  display: flex;
}
.service-widget-particles {
  width: 100%;
  color: var(--_colors---color--white);
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  display: flex;
}
.service-widget-right {
  width: var(--full-size);
  grid-row-gap: 20px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  max-width: 528px;
  display: flex;
}
.service-widget-title-wrap {
  grid-row-gap: 10px;
  width: 100%;
  color: var(--_colors---color--white);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.service-widget {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border-bottom: 1px dashed var(--_colors---color--white-20);
  justify-content: space-between;
  padding-bottom: 30px;
  display: flex;
}
.heading-02-primary-font {
  margin-top: var(--_responsive---element-spacing--none);
  margin-bottom: var(--_responsive---element-spacing--none);
  font-family: var(--_typography---font-family--primary-font);
  font-size: var(--_typography---h2--font-size);
  line-height: var(--_typography---h2--line-height);
  font-weight: var(--_typography---h2--font-weight);
  letter-spacing: var(--_typography---h2--letter-spacing);
}
.service-widget-image-wrap {
  border-radius: var(--_responsive---border-radius--radius-small);
  overflow: hidden;
}
.service-widget-block {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  display: flex;
}
.blog-section-button-wrap {
  flex-flow: column;
  max-width: 302px;
  margin-bottom: 11px;
  display: flex;
}
.hero-right-block {
  width: var(--full-size);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  max-width: 295px;
  display: flex;
}
.hero-right-button-wrap {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  color: var(--_colors---color--white);
  flex-flow: column;
  display: flex;
}
.ceo-card-info-wrap {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  flex-flow: column;
  margin-top: auto;
  display: flex;
}
.ceo-card-image-wrap {
  border-radius: 5px;
  max-width: 88px;
  overflow: hidden;
}
.ceo-card {
  grid-column-gap: 17px;
  grid-row-gap: 17px;
  background-color: var(--_colors---color--white);
  border-radius: 5px;
  padding: 9px;
  display: flex;
}
.ceo-card-info-block {
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}
.text-xsmall {
  font-size: var(--_typography---text-xsmall--font-size);
  line-height: var(--_typography---text-xsmall--line-height);
  font-weight: var(--_typography---text-xsmall--font-weight);
  letter-spacing: var(--_typography---text-small--letter-spacing);
}
.hero-review {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  flex-flow: wrap;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}
.hero-review-image {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 88px;
  height: 38px;
  text-decoration: none;
  display: flex;
}
.hero-review-block {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  max-width: 343px;
  color: var(--_colors---color--white-60);
  flex-flow: column;
  margin-top: auto;
  display: flex;
}
.hero-left-bottom {
  justify-content: space-between;
  align-self: stretch;
  align-items: flex-start;
  display: flex;
}
.hero-left {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}
.service-banner-section {
  pointer-events: none;
  padding-top: 80px;
  padding-bottom: 96px;
  position: relative;
}
.service-banner-bottom {
  z-index: 2;
  width: var(--full-size);
  pointer-events: auto;
  justify-content: space-between;
  align-items: flex-end;
  max-width: 700px;
  margin-top: 80px;
  margin-left: auto;
  display: flex;
  position: relative;
}
.service-banner-description {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  max-width: 333px;
  display: flex;
}
.service-banner-button-wrap {
  width: var(--full-size);
  max-width: 295px;
}
.black-60 {
  color: var(--_colors---color--black-60);
}
.benefit-two {
  padding-top: var(--_responsive---section-padding--default);
  padding-bottom: var(--_responsive---section-padding--default);
}
.benefit-two-title-blank {
  width: 98px;
  display: inline-block;
}
.benefit-two-content-block {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: space-between;
  display: flex;
}
.benefit-two-left {
  width: var(--full-size);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  max-width: 265px;
  display: flex;
}
.benefit-two-left-card {
  height: var(--full-size);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  border-radius: var(--_responsive---border-radius--radius-small);
  color: var(--_colors---color--white);
  background-image: url('../images/background.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  flex-flow: column;
  justify-content: space-between;
  padding: 20px;
  display: flex;
  overflow: hidden;
}
.benefit-card-particle {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.benefit-two-stats-block {
  height: var(--full-size);
  grid-column-gap: 21.5px;
  grid-row-gap: 21.5px;
  border-radius: var(--_responsive---border-radius--radius-small);
  background-color: var(--_colors---color--card-background);
  flex-flow: column;
  padding: 20px;
  display: flex;
}
.benefit-two-stats-widget {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr .8fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.benefit-two-stats-divider {
  border-bottom: 1px dashed var(--_colors---color--stroke);
}
.benefit-two-middle {
  width: var(--full-size);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  max-width: 688px;
  display: flex;
}
.benefit-two-right {
  width: var(--full-size);
  border-radius: var(--_responsive---border-radius--radius-small);
  max-width: 427px;
  color: var(--_colors---color--white);
  background-image: url('../images/background-image.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
  position: relative;
}
.benefit-two-right-text {
  text-align: center;
  mix-blend-mode: difference;
  max-width: 251px;
}
.benefit-rivew-card {
  width: var(--full-size);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  border-radius: var(--_responsive---border-radius--radius-small);
  background-color: var(--_colors---color--card-background);
  flex-flow: column;
  justify-content: space-between;
  max-width: 406px;
  padding: 20px;
  display: flex;
}
.benefit-two-middle-top {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: space-between;
  display: flex;
}
.benefit-story-card {
  width: var(--full-size);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  border-radius: var(--_responsive---border-radius--radius-small);
  background-color: var(--_colors---color--card-background);
  flex-flow: column;
  justify-content: space-between;
  max-width: 272px;
  padding: 20px;
  display: flex;
}
.paragraph {
  color: var(--_colors---color--black);
  text-transform: uppercase;
}
.star {
  max-width: 14px;
  height: auto;
}
.review-image {
  aspect-ratio: 1;
  border: 1px solid var(--_colors---color--white);
  border-radius: 50%;
  max-width: 32px;
  margin-left: -12px;
}
.review-image.first {
  margin-left: 0;
}
.review-image-wrap {
  flex: none;
}
.review-content {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.review-text {
  width: var(--full-size);
  max-width: 200px;
  color: var(--_colors---color--black);
}
.benefit-two-middle-bottom {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: space-between;
  display: flex;
}
.benefit-contact-card {
  width: var(--full-size);
  border-radius: var(--_responsive---border-radius--radius-small);
  max-width: 318px;
  color: var(--_colors---color--white);
  background-image: url('../images/ceo-image-1.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  flex-flow: column;
  justify-content: space-between;
  padding: 20px;
  display: flex;
}
.benefit-client-card {
  width: var(--full-size);
  border-radius: var(--_responsive---border-radius--radius-small);
  background-color: var(--_colors---color--card-background);
  max-width: 280px;
  padding: 20px;
}
.benefit-client-card-top {
  grid-row-gap: 5px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 297px;
  margin-bottom: 77px;
  text-decoration: none;
  display: flex;
}
.benefit-client-logo-block {
  width: var(--full-size);
  justify-content: flex-start;
  align-items: center;
  max-width: 360px;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}
.logo {
  object-fit: fill;
  flex: none;
  width: auto;
  height: auto;
  max-height: 20px;
  margin-right: 40px;
  overflow: hidden;
}
.benefit-contact-card-top {
  justify-content: space-between;
  display: flex;
}
.benefit-contact-card-bottom {
  grid-column-gap: 17px;
  grid-row-gap: 17px;
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.benefit-contact-bottom-content {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  display: flex;
}
.benefit-two-right-particle {
  color: var(--_colors---color--white);
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0;
  padding: 20px;
  display: flex;
  position: absolute;
  inset: 0%;
}
.benefit-client-card-particle {
  color: var(--_colors---color--black);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 151px;
  display: flex;
}
.feature-section {
  padding-top: var(--_responsive---section-padding--default);
  padding-bottom: var(--_responsive---section-padding--small);
  background-color: var(--_colors---color--background);
}
.feature-card {
  grid-column-gap: 77px;
  grid-row-gap: 77px;
  border-radius: var(--_responsive---border-radius--radius-small);
  background-color: var(--_colors---color--white);
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding: 20px;
  display: flex;
}
.feature-card-icon {
  max-width: 80px;
  height: auto;
}
.feature-card-body {
  grid-row-gap: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}
.feature-card-block {
  grid-column-gap: 0px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 20px 1fr 20px 1fr;
  grid-auto-columns: 1fr;
  margin-bottom: 30px;
  display: grid;
}
.feature-card-divider {
  background-color: var(--_colors---color--white);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}
.feature-card-divider.three {
  display: none;
}
.feature-card-divider-inner {
  width: var(--full-size);
  background-color: var(--_colors---color--background);
  height: 25%;
}
.feature-card-divider-inner.is-top {
  border-bottom-left-radius: var(--_responsive---border-radius--radius-small);
  border-bottom-right-radius: var(--_responsive---border-radius--radius-small);
}
.feature-card-divider-inner.is-bottom {
  border-top-left-radius: var(--_responsive---border-radius--radius-small);
  border-top-right-radius: var(--_responsive---border-radius--radius-small);
}
.feature-title-blank {
  width: 65px;
  display: inline-block;
}
.pricing-card-toggle {
  background-color: var(--_colors---color--background);
  cursor: pointer;
  border-radius: 30px;
  width: 30px;
  padding: 2px;
}
.pricing-card-toggle.professional {
  background-color: var(--_colors---color--white-20);
}
.pricing-toggle-button {
  aspect-ratio: 1;
  background-color: var(--_colors---color--black-60);
  border-radius: 50%;
  width: 14px;
}
.pricing-toggle-button.dot {
  background-color: var(--_colors---color--white-60);
}
.pricing-card-price-wrap {
  color: var(--_colors---color--black);
}
.compare-section {
  padding-top: var(--_responsive---section-padding--default);
  padding-bottom: var(--_responsive---section-padding--small);
}
.compare-table {
  justify-content: space-between;
  width: 1000.99px;
  margin-left: auto;
  display: flex;
}
.compare-cell {
  border-bottom: 1px solid var(--_colors---color--black-20);
  height: 50px;
  color: var(--_colors---color--black);
  justify-content: flex-start;
  align-items: center;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
}
.compare-column {
  width: var(--full-size);
  flex-flow: column;
  display: flex;
}
.compare-column.is-professional {
  border-top-left-radius: var(--_responsive---border-radius--radius-small);
  border-top-right-radius: var(--_responsive---border-radius--radius-small);
  background-color: var(--_colors---color--background);
}
.compare-icon {
  max-width: 20px;
  height: auto;
}
.compare-table-wrap {
  margin-bottom: var(--_responsive---element-spacing--section-title-spacing);
  overflow: auto;
}
.pricing-details-left {
  grid-row-gap: 40px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 718px;
  text-decoration: none;
  display: flex;
}
.pricing-details-block {
  grid-row-gap: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.pricing-details-section {
  padding-top: var(--_responsive---section-padding--default);
  padding-bottom: var(--_responsive---section-padding--default);
  background-color: var(--_colors---color--background);
}
.pricing-details-right {
  width: var(--full-size);
  grid-column-gap: 36px;
  grid-row-gap: 36px;
  background-color: var(--_colors---color--black);
  border-radius: 10px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  max-width: 650px;
  padding: 20px;
  text-decoration: none;
  display: flex;
  position: sticky;
  top: 40px;
}
.pricing-details-right-details {
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.pricing-details-content-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.pricing-details-rich-text ul {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: var(--_colors---color--black);
  font-weight: var(--_typography---font-weight--semi-bold);
  flex-flow: column;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
}
.pricing-details-rich-text-two ul {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: var(--_colors---color--black);
  font-weight: var(--_typography---font-weight--semi-bold);
  flex-flow: column;
  margin-bottom: 0;
  padding-left: 25px;
  display: flex;
}
.pricing-details-rich-text-two p {
  margin-bottom: 20px;
}
.pricing-details-block-title {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: var(--_colors---color--black);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.pricing-details-divider {
  border-bottom: 1px dashed var(--_colors---color--black-60);
  height: 1px;
}
.hide {
  display: none;
}
.add-to-cart {
  grid-column-gap: 36px;
  grid-row-gap: 36px;
  flex-flow: column;
  position: relative;
}
.default-state {
  grid-column-gap: 36px;
  grid-row-gap: 36px;
  flex-flow: column;
  margin-bottom: 0;
  display: flex;
}
.button-group {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xsmall);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xsmall);
  margin-bottom: 0;
}
.option-list {
  position: absolute;
  inset: 0% 0% auto auto;
}
.add-to-cart-button {
  z-index: 5;
  opacity: 0;
  position: absolute;
  inset: 0%;
}
.option-button {
  border-color: var(--_colors---color--stroke);
  background-color: var(--_colors---color--transparent);
  color: var(--_colors---color--white);
  margin-right: 0;
  padding: 4px 12px;
}
.option-button.is-selected {
  border-color: var(--_colors---color--black);
  background-color: var(--_colors---color--white);
  color: var(--_colors---color--black);
}
.pricing-card-rich-text ul {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  color: var(--_colors---color--black);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---text-default--letter-spacing);
  flex-flow: column;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
}
.button-primary-line {
  width: var(--full-size);
  background-color: var(--_colors---color--black-20);
  height: 1px;
  position: absolute;
  inset: 0% 0% auto;
}
.button-primary-line:where(.button-text-white), .button-primary-line.text-white {
  background-color: var(--_colors---color--white-20);
}
.work-widget-particle-block {
  pointer-events: none;
  color: var(--_colors---color--white);
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 20px;
  display: flex;
  position: absolute;
  inset: 0%;
}
.work-widget-particle {
  max-width: 12px;
}
.work-widget-particle-wrap {
  width: var(--full-size);
  justify-content: space-between;
  display: flex;
}
.work-widget-particle-wrap.is-bottom {
  margin-top: auto;
}
.work-widget-button-wrapper {
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
  position: absolute;
  inset: 0%;
}
.work-widget-title {
  color: var(--_colors---color--black);
  text-decoration: none;
}
.work-widget-image-overlay {
  background-color: var(--_colors---color--black-20);
  pointer-events: none;
  position: absolute;
  inset: 0%;
}
.work-widget-button-wrap {
  width: var(--full-size);
  flex-flow: column;
  max-width: 295px;
  display: flex;
}
.work-tab-link {
  border: 1px solid var(--_colors---color--black-20);
  background-color: var(--_colors---color--transparent);
  color: var(--_colors---color--black-60);
  padding: 16px;
}
.work-tab-link[aria-current="page"], .work-tab-link.is-active {
  background-color: var(--_colors---color--black);
  color: var(--_colors---color--white);
}
.work-tabs-menu {
  margin-bottom: var(--_responsive---element-spacing--section-title-spacing);
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: wrap;
  display: flex;
}
.work-details-section {
  padding-top: var(--_responsive---section-padding--large);
  padding-bottom: var(--_responsive---section-padding--small);
}
.work-details-image {
  max-height: 719px;
}
.work-details-image-wrap {
  margin-bottom: var(--_responsive---element-spacing--section-title-spacing);
  border-radius: var(--_responsive---border-radius--radius-large);
  overflow: hidden;
}
.project-details {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.project-details-right {
  width: 60%;
  max-width: 850px;
  margin-left: auto;
}
.project-details-left {
  grid-row-gap: 40px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 250px;
  display: flex;
}
.work-details-title-wrap {
  grid-row-gap: 5px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}
.work-details-info-wrap {
  grid-row-gap: 8px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}
.work-details-tag-wrap {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  flex-flow: wrap;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.work-rich-text h2:where(:not([class*="heading-scale-"])), .work-rich-text :where(.heading-scale-2) {
  color: var(--_colors---color--black);
  font-size: var(--_typography---h3--font-size);
  line-height: var(--_typography---h3--line-height);
  font-weight: var(--_typography---font-weight--semi-bold);
  letter-spacing: var(--_typography---h3--letter-spacing);
  margin-bottom: 14px;
}
.work-rich-text p {
  margin-bottom: 40px;
}
.work-rich-text h3:where(:not([class*="heading-scale-"])), .work-rich-text :where(.heading-scale-3) {
  font-family: var(--_typography---font-family--primary-font);
  color: var(--_colors---color--black);
  font-size: var(--_typography---h4--font-size);
  line-height: var(--_typography---h4--line-height);
  font-weight: var(--_typography---h4--font-weight);
  text-transform: none;
  margin-top: -20px;
  margin-bottom: 8px;
}
.project-gallery-image-wrap {
  border-radius: var(--_responsive---border-radius--radius-large);
  overflow: hidden;
}
.project-gallery-image-wrap.one {
  width: 38%;
}
.project-gallery-image-wrap.two {
  width: 60%;
}
.project-gallery-image-wrapper {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  justify-content: space-between;
  margin-bottom: 40px;
  display: flex;
}
.work-info-title {
  font-family: var(--_typography---font-family--secondary-font);
  text-transform: uppercase;
}
.work-details-info-wrapper {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  display: flex;
}
.contact-section {
  min-height: 780px;
  padding-top: 97px;
  padding-bottom: var(--_responsive---section-padding--default);
  background-color: var(--_colors---color--black);
  background-image: url('../images/contact-background-image.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.contact-content-block {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  justify-content: space-between;
  display: flex;
}
.form-block {
  width: var(--full-size);
  max-width: 561px;
  margin-bottom: 0;
}
.contact-left {
  width: var(--full-size);
  grid-column-gap: 68px;
  grid-row-gap: 68px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 627px;
  display: flex;
}
.contact-link-block {
  grid-column-gap: var(--_responsive---element-spacing--spacing-slim);
  grid-row-gap: var(--_responsive---element-spacing--spacing-slim);
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 627px;
  display: flex;
}
.contact-link-widget {
  grid-row-gap: 30px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 160px;
  display: flex;
}
.contact-link-widget-title {
  opacity: .6;
  width: 100%;
  color: var(--_colors---color--white);
  font-size: var(--_typography---text-small--font-size);
  line-height: var(--_typography---text-small--line-height);
  letter-spacing: var(--_typography---text-small--letter-spacing);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  text-decoration: none;
}
.contact-link-wrap {
  grid-row-gap: 5px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 126px;
  display: flex;
}
.utility-button-wrap {
  width: var(--full-size);
  max-width: 269px;
}
.changelog-version {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  max-width: 846px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.changelog-list {
  margin-bottom: 0;
  padding-left: 25px;
}
.license-content-block {
  grid-column-gap: 100px;
  grid-row-gap: 100px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 846px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.license-block {
  grid-row-gap: 30px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}
.license-text-block {
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  display: flex;
}
.licesen-image-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: grid;
}
.license-image {
  object-fit: cover;
  border-radius: 10px;
}
.license-link {
  grid-row-gap: 30px;
  background-color: var(--_colors---color--card-background);
  border-radius: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 40px;
  text-decoration: none;
  display: flex;
}
.license-link-icon {
  object-fit: cover;
  max-width: 140px;
  overflow: hidden;
}
.display-01 {
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---display-01--font-size);
  line-height: var(--_typography---display-01--line-height);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---h1--letter-spacing);
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-end;
}
.typography-block {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  display: flex;
}
.error-button-wrap {
  width: var(--full-size);
  max-width: 269px;
}
.contact-link {
  color: var(--_colors---color--white);
  text-decoration: none;
}
.footer-link {
  color: var(--_colors---color--white-60);
  text-decoration: none;
}
.footer-link:hover {
  color: var(--_colors---color--white);
}
.footer-link[aria-current="page"], .footer-link.is-active {
  color: var(--_colors---color--white);
  background-image: url('../images/footer-link-arrow.svg');
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: auto;
  padding-right: 16px;
}
.cart-button {
  background-color: var(--_colors---color--transparent);
  color: var(--_colors---color--white);
  padding: 0;
}
.cart-button:where(.header-v2) {
  color: var(--_colors---color--black);
}
.cart {
  max-width: 24px;
}
.cart-quantity {
  border-radius: var(--_responsive---border-radius--radius-round);
  background-color: var(--_colors---color--white);
  min-width: 16px;
  height: 16px;
  color: var(--_colors---color--black);
  font-size: var(--_typography---text-xsmall--font-size);
  line-height: var(--_typography---text-xsmall--line-height);
  font-weight: var(--_typography---font-weight--regular);
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: -10px -10px auto auto;
}
.cart-quantity:where(.header-v2) {
  background-color: var(--_colors---color--black);
  color: var(--_colors---color--white);
}
.about-banner-section {
  padding-top: var(--_responsive---section-padding--large);
  padding-bottom: var(--_responsive---section-padding--default);
  background-color: var(--_colors---color--black);
  background-image: url('../images/about-background.webp');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
}
.about-top {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  justify-content: space-between;
  align-items: stretch;
  margin-top: 40px;
  margin-bottom: 50px;
  display: flex;
}
.about-top-description {
  grid-column-gap: var(--_responsive---element-spacing--spacing-big);
  grid-row-gap: var(--_responsive---element-spacing--spacing-big);
  min-width: 260px;
  max-width: 330px;
  color: var(--_colors---color--white);
  flex-flow: column;
  flex: 1;
  display: flex;
}
.hero-review-text-wrap {
  color: var(--_colors---color--white-60);
}
.about-bottom-left {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  justify-content: space-between;
  align-items: flex-end;
  max-width: 498px;
}
.about-bottom-info-wrap {
  max-width: 152px;
  color: var(--_colors---color--white);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}
.about-bottom-image-wrap {
  width: var(--full-size);
  border-radius: var(--_responsive---border-radius--radius-small);
  max-width: 215px;
  overflow: hidden;
}
.stats-widget-block {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  flex-flow: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1400px;
  text-decoration: none;
  display: flex;
}
.stats-widget {
  color: var(--_colors---color--white);
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
}
.value-section {
  padding-top: var(--_responsive---section-padding--default);
  padding-bottom: var(--_responsive---section-padding--small);
}
.value-widget {
  grid-column-gap: var(--_responsive---element-spacing--spacing-normal);
  grid-row-gap: var(--_responsive---element-spacing--spacing-slim);
  color: var(--_colors---color--black);
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.value-image-wrap {
  width: var(--full-size);
  border-radius: var(--_responsive---border-radius--radius-small);
  max-width: 340px;
  overflow: hidden;
}
.value-content-block {
  margin-bottom: var(--_responsive---section-padding--default);
  grid-column-gap: var(--_responsive---element-spacing--spacing-medium);
  grid-row-gap: var(--_responsive---element-spacing--spacing-medium);
  justify-content: space-between;
  display: flex;
}
.value-widget-description {
  max-width: var(--full-size);
  flex: 1;
  min-width: 300px;
}
.value-widget-wrap {
  width: var(--full-size);
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  flex-flow: column;
  justify-content: space-between;
  max-width: 508px;
  display: flex;
}
.founder-section {
  background-color: var(--_colors---color--black);
  height: 300vh;
}
.founder-title-wrap {
  color: var(--_colors---color--white-60);
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  padding-top: 240px;
  display: flex;
  position: absolute;
  inset: 0%;
}
.founder-card-block {
  grid-column-gap: var(--_responsive---element-spacing--spacing-normal);
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
  text-decoration: none;
  display: flex;
}
.founder-card {
  width: var(--full-size);
  background-color: #1e1e1e;
  border-radius: 10px;
  max-width: 446px;
  position: relative;
  overflow: hidden;
}
.founder-card-image {
  object-fit: cover;
  border-radius: 10px;
}
.founder-card-text-wrap {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 212px;
  display: flex;
}
.founder-card-description {
  width: 100%;
  color: var(--_colors---color--white-60);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
}
.founder-card-text-block {
  background-image: linear-gradient(#0000 70%, #000c);
  justify-content: flex-start;
  align-items: flex-end;
  padding: 20px;
  display: flex;
  position: absolute;
  inset: 0%;
}
.founder-card-title {
  font-family: var(--_typography---font-family--secondary-font);
  color: var(--_colors---color--white);
  font-size: var(--_typography---text-default--font-size);
  line-height: var(--_typography---text-default--line-height);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---text-medium--letter-spacing);
  text-transform: uppercase;
}
.founder-sticky {
  height: 100vh;
  padding-top: var(--_responsive---section-padding--default);
  padding-bottom: var(--_responsive---section-padding--small);
  position: sticky;
  top: 0;
  overflow: hidden;
}
.team-section {
  padding-top: var(--_responsive---section-padding--default);
  padding-bottom: var(--_responsive---section-padding--small);
  background-color: var(--_colors---color--black);
}
.team-card {
  max-width: 446px;
  text-decoration: none;
  position: relative;
}
.team-card-body {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 10px;
  display: flex;
}
.team-card-image {
  object-fit: cover;
  border-radius: 10px;
}
.team-card-image-wrap {
  border-radius: var(--_responsive---border-radius--radius-small);
  overflow: hidden;
}
.team-card-block {
  margin-bottom: var(--_responsive---section-padding--default);
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.team-card-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  max-width: 612px;
  display: grid;
}
.team-card-wrap.right {
  margin-left: auto;
}
.team-card-wrap.left {
  margin-right: auto;
}
.team-contact-block {
  height: var(--full-size);
  border-radius: var(--_responsive---border-radius--radius-small);
  background-image: linear-gradient(#000000c9, #000000c9), url('../images/team-contact-image.webp');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.team-contact-button-wrap {
  width: var(--full-size);
  max-width: 295px;
}
.team-contact-button-wrapper {
  background-color: #000000c9;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}
.award-section {
  padding-top: var(--_responsive---section-padding--default);
  padding-bottom: var(--_responsive---section-padding--small);
}
.award-widget-block {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 877px;
  text-decoration: none;
  display: flex;
}
.award-widget {
  z-index: 1;
  grid-column-gap: 20px;
  grid-row-gap: 16px;
  border-bottom: 1px dashed var(--_colors---color--black-60);
  grid-template-rows: auto;
  grid-template-columns: .75fr 1.35fr 1.5fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  place-items: start stretch;
  width: 100%;
  padding: 10px;
  text-decoration: none;
  display: grid;
  position: relative;
  overflow: hidden;
}
.award-widget-background {
  z-index: -1;
  background-color: var(--_colors---color--black);
  width: 100%;
  height: 100%;
  position: absolute;
  inset: auto 0% 0%;
}
.award-info-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.award-image-wrap {
  width: var(--full-size);
  border-radius: var(--_responsive---border-radius--radius-small);
  max-width: 310px;
  overflow: hidden;
}
.award-content-block {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.statistic-section {
  padding-top: var(--_responsive---section-padding--default);
  padding-bottom: var(--_responsive---section-padding--small);
  background-color: var(--_colors---color--black);
}
.statistic-card {
  width: var(--full-size);
  grid-column-gap: 152px;
  grid-row-gap: 152px;
  border: 1px solid var(--_colors---color--white-20);
  background-color: var(--_colors---color--black);
  color: var(--_colors---color--white);
  flex-flow: column;
  padding: 32px;
  display: flex;
  position: sticky;
  top: 275px;
}
.statistic-card.is-v2 {
  background-color: var(--_colors---color--white);
  color: var(--_colors---color--black);
}
.statistic-card-top {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xxsmall);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xxsmall);
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-end;
  text-decoration: none;
  display: flex;
}
.statistic-card-body {
  padding-top: var(--_responsive---element-spacing--spacing-small);
  grid-row-gap: var(--_responsive---element-spacing--spacing-small);
  border-top: 1px solid var(--_colors---color--white-20);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}
.statistic-card-block {
  grid-column-gap: var(--_responsive---element-spacing--spacing-slim);
  grid-row-gap: var(--_responsive---element-spacing--spacing-slim);
  flex-flow: column;
  max-width: 512px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.review-section {
  padding-top: var(--_responsive---section-padding--default);
  padding-bottom: var(--_responsive---section-padding--small);
}
.review-author-image-wrap {
  width: var(--full-size);
  border-radius: var(--_responsive---border-radius--radius-small);
  max-width: 398px;
  position: relative;
  overflow: hidden;
}
.review-slide-content {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  justify-content: space-between;
  display: flex;
}
.review-text-block {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  flex-flow: column;
  justify-content: space-between;
  width: 63%;
  max-width: 923px;
  padding-top: 140px;
  display: flex;
}
.review-author-info-block {
  grid-row-gap: 5px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 297px;
  text-decoration: none;
  display: flex;
}
.review-image-particle-wrap {
  pointer-events: none;
  width: 100%;
  color: var(--_colors---color--white);
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
  display: flex;
  position: absolute;
  inset: 0%;
}
.mission-widget-body {
  width: 53%;
  max-width: 297px;
}
.reputation-widget-line {
  width: var(--full-size);
  background-color: #00000080;
  height: 1px;
}
.reputation-widget-left {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  justify-content: flex-start;
  align-items: center;
  width: 47%;
  display: flex;
}
.about-image-particle-block {
  pointer-events: none;
  color: var(--_colors---color--white);
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 20px;
  display: flex;
  position: absolute;
  inset: 0%;
}
.about-image-particle {
  max-width: 12px;
}
.about-image-particle.is-bottom {
  margin-top: auto;
  margin-left: auto;
}
.nav-location {
  color: var(--_colors---color--white);
}
.nav-location:where(.header-v2) {
  color: var(--_colors---color--black);
}
.benefit-tab-menu {
  margin-bottom: var(--_responsive---element-spacing--spacing-xxbig);
  grid-column-gap: var(--_responsive---element-spacing--spacing-xxsmall);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xxsmall);
  flex-flow: column;
  display: flex;
}
.benefit-tab-link {
  background-color: var(--_colors---color--transparent);
  color: var(--_colors---color--white-60);
  padding: 0;
}
.benefit-tab-link[aria-current="page"], .benefit-tab-link.is-active {
  background-color: var(--_colors---color--transparent);
  color: var(--_colors---color--white);
}
.benefit-tab {
  max-width: 260px;
}
.benefit-particle {
  max-width: 60px;
  height: auto;
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -55%);
}
.benefit-background-video {
  z-index: -1;
  width: var(--full-size);
  height: var(--full-size);
  position: absolute;
  inset: 0%;
}
.testimonial-sticky {
  padding-top: var(--_responsive---section-padding--default);
  padding-bottom: var(--_responsive---section-padding--default);
  position: sticky;
  top: 0;
  overflow: hidden;
}
.banner-heading-bottom {
  position: absolute;
  inset: 0%;
}
.banner-heading-wrap {
  position: relative;
  overflow: hidden;
}
.value-widget-title {
  min-width: 170px;
}
.field-label {
  color: var(--_colors---color--white);
  font-weight: var(--_typography---font-weight--medium);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.contact-input {
  border: 1px solid var(--_colors---color--white-20);
  background-color: var(--_colors---color--transparent);
  height: auto;
  color: var(--_colors---color--white);
  margin-bottom: 0;
  padding: 15px 10px;
}
.contact-input:focus {
  border-color: var(--_colors---color--white);
}
.contact-input::placeholder {
  color: var(--_colors---color--white-60);
}
.contact-input-wrapper {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.contact-form-button-wrap {
  flex-flow: column;
  display: flex;
}
.contact-form {
  height: var(--full-size);
  grid-column-gap: var(--_responsive---element-spacing--spacing-xxbig);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xxbig);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}
.success-message {
  background-color: var(--_colors---color--black);
  color: var(--_colors---color--white);
  padding: 16px;
}
.error-message {
  background-color: var(--_colors---color--card-background);
  color: var(--_colors---color--black);
  text-align: center;
  padding: 16px;
}
.submit-button {
  z-index: 5;
  opacity: 0;
  margin-bottom: 0;
  position: absolute;
  inset: 0%;
}
.benefit-client-card-title {
  font-family: var(--_typography---font-family--secondary-font);
  color: var(--_colors---color--black);
  text-transform: uppercase;
}
.checkout-section {
  padding-top: var(--_responsive---section-padding--large);
  padding-bottom: var(--_responsive---section-padding--default);
}
.checkout-form {
  background-color: var(--_colors---color--transparent);
  padding: 0;
}
.weight-bold {
  font-weight: var(--_typography---font-weight--bold);
}
.line-item {
  color: var(--_colors---color--black);
}
.block-header {
  color: var(--_colors---color--black);
  padding-top: 8px;
  padding-bottom: 8px;
}
.paypal-checkout-form, .order-confirmation {
  background-color: var(--_colors---color--transparent);
  padding: 0;
}
.bottom {
  margin-left: auto;
}
.review-author-name {
  color: var(--_colors---color--black);
  text-transform: uppercase;
}
.faq-image-wrap {
  margin-bottom: 10px;
}
.faq-link-block {
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  display: flex;
}
.faq-link {
  max-width: 170px;
  color: var(--_colors---color--white-60);
  text-decoration: none;
}
.hero-particle-block {
  pointer-events: none;
  justify-content: center;
  align-items: flex-start;
  padding-top: 140px;
  display: flex;
  position: absolute;
  inset: 0%;
}
.hero-particle-wrapper {
  flex-flow: column;
  justify-content: space-between;
  width: 42%;
  height: 63%;
  display: flex;
}
.hero-particle {
  max-width: 12px;
  color: var(--_colors---color--white);
}
.hero-particle-wrap {
  justify-content: space-between;
  display: flex;
}
.hero-particle-wrap.is-middle {
  justify-content: center;
}
.mission-widget-divider {
  width: var(--full-size);
  border-bottom: 1px dashed var(--_colors---color--stroke);
  height: 1px;
}
.benefit-play-button {
  z-index: 1;
}
.pricing-collection-list, .collection-item {
  height: var(--full-size);
}
.password-title-block {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  max-width: 520px;
  color: var(--_colors---color--black);
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 129px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.password-label {
  font-family: var(--_typography---font-family--secondary-font);
  color: var(--_colors---color--black);
  font-weight: var(--_typography---font-weight--medium);
  text-align: left;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.password-input-wrap {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  display: flex;
}
.password-input {
  border: 1px solid var(--_colors---color--black-20);
  background-color: var(--_colors---color--transparent);
  height: auto;
  margin-bottom: 0;
  padding: 14px 10px;
}
.password-input:focus {
  border-color: var(--_colors---color--white);
}
.password-input::placeholder {
  color: var(--_colors---color--black-60);
}
.service-play-button {
  z-index: 5;
  pointer-events: auto;
}
.cart-title-wrap {
  width: var(--full-size);
  color: var(--_colors---color--black);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.cart-text-wrap {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 0;
  margin-right: 0;
}
.cart-line-item {
  color: var(--_colors---color--black);
}
.remove-button {
  color: var(--_colors---color--black-60);
}
.cart-header {
  border-bottom-color: var(--_colors---color--black-20);
  color: var(--_colors---color--black);
}
.cart-footer {
  border-top-color: var(--_colors---color--black-20);
}
.close-button {
  cursor: pointer;
}
.footer-play-button {
  z-index: 1;
  bottom: 10%;
  right: 10%;
}
.nav-time {
  padding: var(--_responsive---element-spacing--none);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  color: var(--_colors---color--white-60);
  margin-left: 0;
  margin-right: 0;
  text-decoration: none;
  display: flex;
}
.nav-time:where(.header-v2) {
  color: var(--_colors---color--black-60);
}
.nav-time[aria-current="page"], .nav-time.is-active {
  color: var(--_colors---color--white);
}
.nav-time[aria-current="page"]:where(.header-v2), .nav-time.is-active:where(.header-v2) {
  color: var(--_colors---color--black);
}
.utility-list-block {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}
.instruction-list {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 20px;
}
.benefit-link {
  color: var(--_colors---color--white);
  text-decoration: none;
}
.benefit-logo-row {
  flex: none;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.benefit-logo-overlay {
  background-image: linear-gradient(90deg, #f8f8f8, var(--_colors---color--transparent) 25%, var(--_colors---color--transparent) 75%, #f8f8f8);
  position: absolute;
  inset: 0%;
}
.pricing-short-text, .paragraph-2, .monthly-text {
  color: var(--_colors---color--white-60);
}
.pricing-card-rich-text-copy ul {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  color: var(--_colors---color--black);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---text-default--letter-spacing);
  flex-flow: column;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
}
.pricing-card-rich-text-copy li {
  color: var(--_colors---color--white);
}
.dot-line {
  border-top: 1px dashed var(--_colors---color--black-20);
  width: 100%;
  height: 1px;
}
.dot-line.v2 {
  border-top-color: var(--_colors---color--white-60);
}
.about-left-block {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}
.review-slider {
  height: auto;
  margin-top: -130px;
  margin-bottom: var(--_responsive---section-padding--default);
  background-color: var(--_colors---color--transparent);
}
.mask {
  height: auto;
}
.review-arrow {
  aspect-ratio: 1;
  background-color: var(--_colors---color--background);
  width: 60px;
  color: var(--_colors---color--black-60);
  justify-content: center;
  align-items: center;
  display: flex;
  inset: auto 0% 0% auto;
}
.review-arrow:focus {
  background-color: var(--_colors---color--black);
  color: var(--_colors---color--white);
}
.review-arrow.is-left {
  right: 80px;
}
.review-blank-space {
  width: var(--full-size);
  max-width: 398px;
}
.review-title {
  width: 63%;
  max-width: 923px;
  color: var(--_colors---color--black);
}
.social-link-icon {
  display: flex;
}@media screen and (min-width: 1280px) {

  body {
    --_typography---font-family--primary-font: Inter, sans-serif;
    --_typography---text-default--font-size: 16px;
    --_typography---text-medium--line-height: 1.4em;
    --_typography---font-weight--medium: 500;
    --_typography---text-default--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---font-family--secondary-font: "Fira Mono", sans-serif;
    --_typography---h1--font-size: 46px;
    --_typography---h1--line-height: 1.2em;
    --_typography---font-weight--semi-bold: 600;
    --_typography---h1--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---h2--font-size: 36px;
    --_typography---h2--line-height: 1.2em;
    --_typography---h2--font-weight: var(--_typography---font-weight--semi-bold);
    --_typography---h2--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---h3--font-size: 26px;
    --_typography---h3--line-height: 1.2em;
    --_typography---h3--font-weight: var(--_typography---font-weight--medium);
    --_typography---h3--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---h4--font-size: 20px;
    --_typography---h4--line-height: 1.2em;
    --_typography---h4--font-weight: var(--_typography---font-weight--medium);
    --_typography---h4--letter-spacing: var(--_typography---letter-spacing--small);
    --_typography---h5--font-size: 18px;
    --_typography---h5--line-height: 1.2em;
    --_typography---h5--font-weight: var(--_typography---font-weight--bold);
    --_typography---h5--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---h6--font-size: 16px;
    --_typography---h6--line-height: 1.2em;
    --_typography---h6--font-weight: var(--_typography---font-weight--bold);
    --_typography---h6--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---font-weight--regular: 400;
    --_typography---text-medium--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---text-default--line-height: 1.25em;
    --_typography---text-small--font-size: 14px;
    --_typography---text-small--line-height: 1.15em;
    --_typography---display-02--font-size: 76px;
    --_typography---display-02--line-height: 1.2em;
    --_typography---display-02--font-weight: var(--_typography---font-weight--medium);
    --_typography---display-02--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---button-text--font-size: 14px;
    --_typography---button-text--line-height: 1.14em;
    --_typography---button-text--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---display-xlarge--font-size: 320px;
    --_typography---display-xlarge--line-height: .75em;
    --_typography---tag--font-size: 14px;
    --_typography---tag--line-height: 1.14em;
    --_typography---tag--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---display-01--line-height: 1em;
    --_typography---text-xsmall--font-size: 10px;
    --_typography---text-xsmall--line-height: 1em;
    --_typography---text-xsmall--font-weight: var(--_typography---font-weight--regular);
    --_typography---text-small--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---display-01--font-size: 200px;
    --_typography---font-weight--bold: 700;
    --_typography---display-xlarge--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---display-xlarge--font-weight: var(--_typography---font-weight--medium);
    --_typography---display-01--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---display-01--font-weight: var(--_typography---font-weight--medium);
    --_typography---h1--font-weight: var(--_typography---font-weight--semi-bold);
    --_typography---text-medium--font-size: 18px;
    --_typography---text-medium--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-default--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-small--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-xsmall--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---tag--font-weight: var(--_typography---font-weight--medium);
    --_typography---button-text--font-weight: var(--_typography---font-weight--medium);
    --_typography---font-weight--light: 300;
    --_typography---letter-spacing--none: 0em;
    --_typography---letter-spacing--tiny: .01em;
    --_typography---letter-spacing--small: -.01em;
    --_typography---letter-spacing--default: -.02em;
    --_typography---letter-spacing--medium: -.03em;
    --_typography---letter-spacing--large: -.04em;
    --_typography---letter-spacing--x-large: -.05em;
  }
  .section-title-row.is-statistic {
    max-width: 956px;
  }
  .section-title-row.is-review {
    grid-column-gap: 70px;
    grid-row-gap: 70px;
    justify-content: flex-start;
    align-items: center;
  }
  .testimonial-section.is-small {
    display: none;
  }
  .testimonial-section.is-large {
    display: block;
  }
  .banner-title-block.is-service {
    mix-blend-mode: difference;
  }
  .benefit-client-card {
    max-width: 360px;
  }
  .about-bottom-image-wrap {
    max-width: 220px;
  }
  .value-widget {
    flex-flow: row;
  }
  .review-slide-content {
    grid-column-gap: 70px;
    grid-row-gap: 70px;
    justify-content: flex-start;
  }
  .hero-particle-wrapper {
    width: 48%;
    height: 78%;
  }}
@media screen and (min-width: 1440px) {

  body {
    --_typography---font-family--primary-font: Inter, sans-serif;
    --_typography---text-default--font-size: 16px;
    --_typography---text-medium--line-height: 1.4em;
    --_typography---font-weight--medium: 500;
    --_typography---text-default--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---font-family--secondary-font: "Fira Mono", sans-serif;
    --_typography---h1--font-size: 46px;
    --_typography---h1--line-height: 1.2em;
    --_typography---font-weight--semi-bold: 600;
    --_typography---h1--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---h2--font-size: 36px;
    --_typography---h2--line-height: 1.2em;
    --_typography---h2--font-weight: var(--_typography---font-weight--semi-bold);
    --_typography---h2--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---h3--font-size: 26px;
    --_typography---h3--line-height: 1.2em;
    --_typography---h3--font-weight: var(--_typography---font-weight--medium);
    --_typography---h3--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---h4--font-size: 20px;
    --_typography---h4--line-height: 1.2em;
    --_typography---h4--font-weight: var(--_typography---font-weight--medium);
    --_typography---h4--letter-spacing: var(--_typography---letter-spacing--small);
    --_typography---h5--font-size: 18px;
    --_typography---h5--line-height: 1.2em;
    --_typography---h5--font-weight: var(--_typography---font-weight--bold);
    --_typography---h5--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---h6--font-size: 16px;
    --_typography---h6--line-height: 1.2em;
    --_typography---h6--font-weight: var(--_typography---font-weight--bold);
    --_typography---h6--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---font-weight--regular: 400;
    --_typography---text-medium--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---text-default--line-height: 1.25em;
    --_typography---text-small--font-size: 14px;
    --_typography---text-small--line-height: 1.15em;
    --_typography---display-02--font-size: 76px;
    --_typography---display-02--line-height: 1.2em;
    --_typography---display-02--font-weight: var(--_typography---font-weight--medium);
    --_typography---display-02--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---button-text--font-size: 14px;
    --_typography---button-text--line-height: 1.14em;
    --_typography---button-text--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---display-xlarge--font-size: 320px;
    --_typography---display-xlarge--line-height: .75em;
    --_typography---tag--font-size: 14px;
    --_typography---tag--line-height: 1.14em;
    --_typography---tag--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---display-01--line-height: 1em;
    --_typography---text-xsmall--font-size: 10px;
    --_typography---text-xsmall--line-height: 1em;
    --_typography---text-xsmall--font-weight: var(--_typography---font-weight--regular);
    --_typography---text-small--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---display-01--font-size: 200px;
    --_typography---font-weight--bold: 700;
    --_typography---display-xlarge--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---display-xlarge--font-weight: var(--_typography---font-weight--medium);
    --_typography---display-01--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---display-01--font-weight: var(--_typography---font-weight--medium);
    --_typography---h1--font-weight: var(--_typography---font-weight--semi-bold);
    --_typography---text-medium--font-size: 18px;
    --_typography---text-medium--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-default--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-small--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-xsmall--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---tag--font-weight: var(--_typography---font-weight--medium);
    --_typography---button-text--font-weight: var(--_typography---font-weight--medium);
    --_typography---font-weight--light: 300;
    --_typography---letter-spacing--none: 0em;
    --_typography---letter-spacing--tiny: .01em;
    --_typography---letter-spacing--small: -.01em;
    --_typography---letter-spacing--default: -.02em;
    --_typography---letter-spacing--medium: -.03em;
    --_typography---letter-spacing--large: -.04em;
    --_typography---letter-spacing--x-large: -.05em;
  }
  .hero-info-block {
    justify-content: space-between;
    align-items: flex-start;
  }
  .hero-left-bottom {
    align-self: stretch;
  }
  .benefit-two-left-card {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .benefit-two-middle-bottom {
    height: 100%;
  }
  .hero-particle-wrapper {
    max-width: 750px;
  }}
@media screen and (max-width: 991px) {

  body {
    --_responsive---element-spacing--none: 0px;
    --_responsive---section-padding--large: 110px;
    --_responsive---element-spacing--spacing-xlarge: 36px;
    --_responsive---element-spacing--spacing-tiny: 4px;
    --_responsive---element-spacing--spacing-normal: 28px;
    --_responsive---element-spacing--spacing-slim: 20px;
    --_responsive---element-spacing--spacing-xxsmall: 8px;
    --_responsive---element-spacing--spacing-xxxlarge: 40px;
    --_responsive---spacing--34-px\<deleted\|variable-7e30a8d3-7687-4a52-d404-74d261b5dc62\>: 34px;
    --_responsive---element-spacing--spacing-medium: 20px;
    --_responsive---element-spacing--spacing-regular: 24px;
    --_responsive---element-spacing--spacing-xsmall: 12px;
    --_responsive---spacing--14-px\<deleted\|variable-6e27546b-22fd-9515-9505-a788ebe0bc82\>: 14px;
    --_responsive---element-spacing--spacing-massive: 60px;
    --_responsive---element-spacing--spacing-giant: 60px;
    --_responsive---margin--margin-80-px\<deleted\|variable-d245b505-7310-fedd-12f6-4e8ea0571cfa\>: 60px;
    --_responsive---margin--margin-60-px\<deleted\|variable-81f6ae22-b512-06c2-5961-4d195e4def69\>: 50px;
    --_responsive---spacing--10-px\<deleted\|variable-7cc3a4c8-b72f-1d6a-a3c6-33f67efa54a1\>: 10px;
    --_responsive---element-spacing--spacing-xjumbo: 52px;
    --_responsive---element-spacing--spacing-xxbig: 52px;
    --_responsive---element-spacing--spacing-small: 16px;
    --_responsive---section-padding--default: 50px;
    --_responsive---section-padding--xlarge: 160px;
    --_responsive---section-padding--small: 20px;
    --_responsive---element-spacing--section-title-spacing: 40px;
    --_responsive---element-spacing--spacing-xxxbig: 52px;
    --_responsive---element-spacing--spacing-large: 32px;
    --_responsive---element-spacing--spacing-colossal: 80px;
    --_responsive---element-spacing--spacing-medium-rare: 24px;
    --_responsive---element-spacing--spacing-big: 44px;
    --_responsive---border-radius--radius-medium: 8px;
    --_responsive---section-padding--medium: 70px;
    --_responsive---border-radius--radius-small: 8px;
    --_responsive---border-radius--radius-large: 16px;
    --_responsive---border-radius--radius-round: 50%;
    --_responsive---element-spacing--spacing-xxlarge: 40px;
    --_responsive---element-spacing--spacing-xbig: 48px;
    --_responsive---element-spacing--spacing-jumbo: 52px;
    --_responsive---element-spacing--spacing-xxjumbo: 52px;
    --_responsive---element-spacing--spacing-immense: 60px;
    --_responsive---border-radius--radius-tiny: 4px;
    --_responsive---border-radius--radius-xxsmall: 6px;
    --_responsive---border-radius--radius-xsmall: 8px;
    --_responsive---border-radius--radius-regular: 12px;
    --_responsive---border-radius--radius-xlarge: 16px;
    --_responsive---border-radius--radius-xxlarge: 24px;
    --_responsive---border-radius--radius-xxxlarge: 24px;
    --_responsive---border-radius--radius-circle: 100%;
    --_typography---font-family--primary-font: Inter, sans-serif;
    --_typography---text-default--font-size: 16px;
    --_typography---text-medium--line-height: 1.4em;
    --_typography---font-weight--medium: 500;
    --_typography---text-default--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---font-family--secondary-font: "Fira Mono", sans-serif;
    --_typography---h1--font-size: 46px;
    --_typography---h1--line-height: 1.2em;
    --_typography---font-weight--semi-bold: 600;
    --_typography---h1--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---h2--font-size: 36px;
    --_typography---h2--line-height: 1.2em;
    --_typography---h2--font-weight: var(--_typography---font-weight--semi-bold);
    --_typography---h2--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---h3--font-size: 26px;
    --_typography---h3--line-height: 1.2em;
    --_typography---h3--font-weight: var(--_typography---font-weight--medium);
    --_typography---h3--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---h4--font-size: 18px;
    --_typography---h4--line-height: 1.2em;
    --_typography---h4--font-weight: var(--_typography---font-weight--medium);
    --_typography---h4--letter-spacing: var(--_typography---letter-spacing--small);
    --_typography---h5--font-size: 18px;
    --_typography---h5--line-height: 1.2em;
    --_typography---h5--font-weight: var(--_typography---font-weight--bold);
    --_typography---h5--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---h6--font-size: 16px;
    --_typography---h6--line-height: 1.2em;
    --_typography---h6--font-weight: var(--_typography---font-weight--bold);
    --_typography---h6--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---font-weight--regular: 400;
    --_typography---text-medium--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---text-default--line-height: 1.25em;
    --_typography---text-small--font-size: 14px;
    --_typography---text-small--line-height: 1.15em;
    --_typography---display-02--font-size: 76px;
    --_typography---display-02--line-height: 1.2em;
    --_typography---display-02--font-weight: var(--_typography---font-weight--medium);
    --_typography---display-02--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---button-text--font-size: 14px;
    --_typography---button-text--line-height: 1.14em;
    --_typography---button-text--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---display-xlarge--font-size: 190px;
    --_typography---display-xlarge--line-height: .75em;
    --_typography---tag--font-size: 14px;
    --_typography---tag--line-height: 1.14em;
    --_typography---tag--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---display-01--line-height: 1em;
    --_typography---text-xsmall--font-size: 10px;
    --_typography---text-xsmall--line-height: 1em;
    --_typography---text-xsmall--font-weight: var(--_typography---font-weight--regular);
    --_typography---text-small--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---display-01--font-size: 140px;
    --_typography---font-weight--bold: 700;
    --_typography---display-xlarge--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---display-xlarge--font-weight: var(--_typography---font-weight--medium);
    --_typography---display-01--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---display-01--font-weight: var(--_typography---font-weight--medium);
    --_typography---h1--font-weight: var(--_typography---font-weight--semi-bold);
    --_typography---text-medium--font-size: 16px;
    --_typography---text-medium--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-default--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-small--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-xsmall--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---tag--font-weight: var(--_typography---font-weight--medium);
    --_typography---button-text--font-weight: var(--_typography---font-weight--medium);
    --_typography---font-weight--light: 300;
    --_typography---letter-spacing--none: 0em;
    --_typography---letter-spacing--tiny: .01em;
    --_typography---letter-spacing--small: -.01em;
    --_typography---letter-spacing--default: -.02em;
    --_typography---letter-spacing--medium: -.03em;
    --_typography---letter-spacing--large: -.04em;
    --_typography---letter-spacing--x-large: -.05em;
  }
  .container {
    max-width: none;
  }
  .color-block {
    height: 150px;
  }
  .color-block-info {
    grid-row-gap: var(--_responsive---element-spacing--spacing-xxsmall);
    flex-flow: wrap;
  }
  .button-item-wrap {
    grid-row-gap: var(--_responsive---spacing--14-px\<deleted\|variable-6e27546b-22fd-9515-9505-a788ebe0bc82\>);
    flex-flow: wrap;
  }
  .button-primary {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .button-primary-arrow-wrap {
    width: 34px;
    height: 34px;
  }
  .footer-top {
    grid-column-gap: var(--_responsive---element-spacing--spacing-massive);
    grid-row-gap: var(--_responsive---element-spacing--spacing-massive);
    align-items: flex-start;
  }
  .navbar {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .hamburger-line-middle {
    background-color: var(--_colors---color--white);
    border-radius: 16px;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 2px;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
  }
  .hamburger-line-middle:where(.header-v2) {
    background-color: var(--_colors---color--black);
  }
  .hamburger-line-top {
    background-color: var(--_colors---color--white);
    border-radius: 16px;
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }
  .hamburger-line-top:where(.header-v2) {
    background-color: var(--_colors---color--black);
  }
  .hamburger-line-bottom {
    background-color: var(--_colors---color--white);
    border-radius: 16px;
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }
  .hamburger-line-bottom:where(.header-v2) {
    background-color: var(--_colors---color--black);
  }
  .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: 24px;
    height: 40px;
    display: flex;
  }
  .nav-menu {
    background-color: var(--_colors---color--black);
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
  }
  .nav-link {
    padding-top: var(--_responsive---element-spacing--spacing-tiny);
    padding-bottom: var(--_responsive---element-spacing--spacing-tiny);
  }
  .nav-link:where(.header-v2) {
    color: var(--_colors---color--white-60);
  }
  .utility-content-wrap {
    grid-row-gap: 32px;
  }
  .button-7 {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .utility-title-block {
    margin-bottom: 80px;
  }
  .hero-section {
    min-height: auto;
    padding-top: 120px;
  }
  .sub-title-row.is-blog-details {
    margin-bottom: 40px;
  }
  .section-title-row {
    flex-flow: column;
    align-items: stretch;
  }
  .hero-title-block {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
    flex-flow: column;
    align-items: stretch;
  }
  .work-widget-block {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .about-right {
    max-width: none;
  }
  .about-content-wrap {
    flex-flow: column;
  }
  .about-left {
    max-width: none;
  }
  .about-image-wrap {
    width: 53%;
    max-width: none;
  }
  .section-particle-block.is-founder {
    margin-bottom: var(--_responsive---element-spacing--spacing-large);
  }
  .process-card-block {
    max-width: none;
  }
  .process-content-block {
    flex-flow: column;
  }
  .process-left {
    max-width: none;
  }
  .pricing-card-block {
    grid-template-columns: 1fr 1fr;
  }
  .testimonial-section {
    height: auto;
  }
  .testimonial-card-block {
    grid-column-gap: var(--_responsive---element-spacing--spacing-medium-rare);
    grid-row-gap: var(--_responsive---element-spacing--spacing-medium-rare);
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .testimonial-card {
    min-height: auto;
    padding: 24px;
  }
  .testimonial-card-image {
    max-width: 90px;
  }
  .benefit-content-block {
    min-height: 600px;
  }
  .benefit-right {
    padding-top: 24px;
    padding-left: 24px;
  }
  .accordion {
    padding-bottom: 8px;
  }
  .accordion-toggle {
    padding-top: 24px;
  }
  .faq-content-block {
    flex-flow: column;
  }
  .faq-accordion-block {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    max-width: none;
  }
  .faq-image-block {
    max-width: 300px;
  }
  .blog-card-block {
    grid-row-gap: var(--_responsive---element-spacing--spacing-large);
    grid-template-columns: 1.25fr 1fr;
  }
  .banner-description {
    max-width: none;
  }
  .banner-description.is-utility, .banner-description.is {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }
  .banner-description.is-blog {
    width: 41.603%;
  }
  .banner-content-block.is-project {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  .banner-content-block.is-service {
    pointer-events: auto;
    flex-flow: wrap;
  }
  .banner-title-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .collection-list {
    grid-row-gap: var(--_responsive---element-spacing--spacing-large);
    grid-template-columns: 1fr 1fr;
  }
  .tabs-menu {
    margin-bottom: 40px;
  }
  .blog-gallery-image-wrap {
    margin-bottom: 32px;
  }
  .blog-details-content-block {
    flex-flow: column;
  }
  .blog-rich-text h2:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-2) {
    margin-top: 32px;
  }
  .blog-rich-text p {
    margin-bottom: 16px;
  }
  .blog-details-left {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding-bottom: 0;
    position: static;
  }
  .blog-main-image-wrap {
    border-radius: 16px;
    margin-bottom: 40px;
  }
  .utility-content {
    flex-flow: column;
  }
  .utility-table-of-content {
    position: static;
  }
  .utility-text-block {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .utility-title-wrap {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
  .about-title-blank {
    width: 95px;
  }
  .service-tab-content {
    flex-flow: column;
  }
  .service-widget-left {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .service-widget-particles {
    order: -9999;
  }
  .service-widget-right {
    order: -9999;
    max-width: none;
  }
  .service-widget {
    flex-flow: column;
  }
  .hero-right-block {
    flex-flow: row;
    justify-content: space-between;
    max-width: 295svh;
  }
  .hero-left {
    width: var(--full-size);
    align-items: stretch;
  }
  .benefit-two-title-blank {
    width: 80px;
  }
  .benefit-two-content-block {
    flex-flow: column;
  }
  .benefit-two-left {
    flex-flow: row;
    max-width: none;
  }
  .benefit-two-left-card, .benefit-two-stats-block {
    width: var(--full-size);
    height: auto;
  }
  .benefit-two-middle {
    max-width: none;
  }
  .benefit-two-right {
    max-width: none;
    min-height: 500px;
  }
  .benefit-rivew-card, .benefit-story-card, .benefit-contact-card, .benefit-client-logo-block {
    max-width: none;
  }
  .logo {
    margin-right: 32px;
  }
  .feature-card {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .feature-card-icon {
    max-width: 70px;
  }
  .feature-card-block {
    grid-template-columns: 1fr 20px 1fr;
  }
  .feature-card-divider.two {
    display: none;
  }
  .feature-card-divider.three {
    display: flex;
  }
  .feature-card-divider.four {
    display: none;
  }
  .feature-title-blank {
    width: 60px;
  }
  .compare-table {
    width: 800px;
  }
  .pricing-details-left {
    max-width: none;
  }
  .pricing-details-right {
    order: -9999;
    max-width: none;
    position: static;
  }
  .pricing-details-content-block {
    flex-flow: column;
    align-items: stretch;
  }
  .work-tabs-menu {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
  .project-details {
    flex-flow: column;
  }
  .project-details-right {
    width: var(--full-size);
    max-width: none;
  }
  .project-details-left {
    align-items: stretch;
    max-width: none;
  }
  .work-rich-text p {
    margin-bottom: 32px;
  }
  .work-rich-text h3:where(:not([class*="heading-scale-"])), .work-rich-text :where(.heading-scale-3) {
    margin-top: -12px;
  }
  .project-gallery-image-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    margin-bottom: 32px;
  }
  .work-details-info-wrapper {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-flow: row;
  }
  .contact-content-block {
    flex-flow: column;
  }
  .form-block, .contact-left, .contact-link-block {
    max-width: none;
  }
  .about-bottom-left {
    width: var(--full-size);
    justify-content: flex-end;
    max-width: none;
  }
  .about-bottom-image-wrap {
    max-width: 297px;
  }
  .stats-widget-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
  }
  .value-image-wrap {
    max-width: none;
  }
  .value-content-block {
    flex-flow: column;
  }
  .value-widget-description {
    min-width: auto;
    max-width: none;
  }
  .value-widget-wrap {
    flex-flow: row;
    max-width: none;
  }
  .founder-section {
    height: auto;
  }
  .founder-title-wrap {
    margin-bottom: var(--_responsive---element-spacing--spacing-xxxlarge);
    padding-top: 0;
    position: static;
  }
  .founder-sticky {
    height: auto;
  }
  .team-card-block {
    grid-template-columns: 1fr;
  }
  .team-card-wrap, .team-card-wrap.left {
    max-width: none;
  }
  .team-contact-button-wrap {
    max-width: 260px;
  }
  .award-widget {
    grid-template-columns: .25fr .35fr .5fr;
  }
  .award-widget-background {
    transform: scale(0);
  }
  .award-content-block {
    flex-flow: column;
  }
  .statistic-card {
    grid-column-gap: 120px;
    grid-row-gap: 120px;
    top: 300px;
  }
  .review-author-image-wrap {
    max-width: 260px;
  }
  .review-text-block {
    padding-top: 40px;
  }
  .mission-widget-body {
    max-width: none;
  }
  .benefit-particle {
    transform: translate(-50%, -150%);
  }
  .value-image {
    object-position: 50% 20%;
    max-height: 500px;
  }
  .hero-particle-wrapper {
    height: 66%;
  }
  .footer-play-button {
    bottom: 13%;
  }
  .nav-time {
    padding-top: var(--_responsive---element-spacing--spacing-tiny);
    padding-bottom: var(--_responsive---element-spacing--spacing-tiny);
  }
  .nav-time:where(.header-v2) {
    color: var(--_colors---color--black-60);
  }
  .benefit-link {
    color: var(--_colors---color--white);
  }
  .review-slider {
    margin-top: 0;
  }
  .review-arrow {
    width: 50px;
  }
  .review-arrow.is-left {
    right: 70px;
  }
  .review-blank-space {
    display: none;
  }
  .review-title {
    width: var(--full-size);
  }}
@media screen and (max-width: 767px) {

  body {
    --_responsive---element-spacing--none: 0px;
    --_responsive---section-padding--large: 100px;
    --_responsive---element-spacing--spacing-xlarge: 24px;
    --_responsive---element-spacing--spacing-tiny: 4px;
    --_responsive---element-spacing--spacing-normal: 24px;
    --_responsive---element-spacing--spacing-slim: 16px;
    --_responsive---element-spacing--spacing-xxsmall: 8px;
    --_responsive---element-spacing--spacing-xxxlarge: 36px;
    --_responsive---spacing--34-px\<deleted\|variable-7e30a8d3-7687-4a52-d404-74d261b5dc62\>: 34px;
    --_responsive---element-spacing--spacing-medium: 16px;
    --_responsive---element-spacing--spacing-regular: 20px;
    --_responsive---element-spacing--spacing-xsmall: 12px;
    --_responsive---spacing--14-px\<deleted\|variable-6e27546b-22fd-9515-9505-a788ebe0bc82\>: 14px;
    --_responsive---element-spacing--spacing-massive: 48px;
    --_responsive---element-spacing--spacing-giant: 48px;
    --_responsive---margin--margin-80-px\<deleted\|variable-d245b505-7310-fedd-12f6-4e8ea0571cfa\>: 50px;
    --_responsive---margin--margin-60-px\<deleted\|variable-81f6ae22-b512-06c2-5961-4d195e4def69\>: 40px;
    --_responsive---spacing--10-px\<deleted\|variable-7cc3a4c8-b72f-1d6a-a3c6-33f67efa54a1\>: 10px;
    --_responsive---element-spacing--spacing-xjumbo: 44px;
    --_responsive---element-spacing--spacing-xxbig: 40px;
    --_responsive---element-spacing--spacing-small: 12px;
    --_responsive---section-padding--default: 50px;
    --_responsive---section-padding--xlarge: 140px;
    --_responsive---section-padding--small: 20px;
    --_responsive---element-spacing--section-title-spacing: 32px;
    --_responsive---element-spacing--spacing-xxxbig: 40px;
    --_responsive---element-spacing--spacing-large: 24px;
    --_responsive---element-spacing--spacing-colossal: 60px;
    --_responsive---element-spacing--spacing-medium-rare: 20px;
    --_responsive---element-spacing--spacing-big: 40px;
    --_responsive---border-radius--radius-medium: 6px;
    --_responsive---section-padding--medium: 60px;
    --_responsive---border-radius--radius-small: 6px;
    --_responsive---border-radius--radius-large: 12px;
    --_responsive---border-radius--radius-round: 50%;
    --_responsive---element-spacing--spacing-xxlarge: 36px;
    --_responsive---element-spacing--spacing-xbig: 40px;
    --_responsive---element-spacing--spacing-jumbo: 44px;
    --_responsive---element-spacing--spacing-xxjumbo: 48px;
    --_responsive---element-spacing--spacing-immense: 60px;
    --_responsive---border-radius--radius-tiny: 4px;
    --_responsive---border-radius--radius-xxsmall: 4px;
    --_responsive---border-radius--radius-xsmall: 4px;
    --_responsive---border-radius--radius-regular: 8px;
    --_responsive---border-radius--radius-xlarge: 12px;
    --_responsive---border-radius--radius-xxlarge: 20px;
    --_responsive---border-radius--radius-xxxlarge: 20px;
    --_responsive---border-radius--radius-circle: 100%;
    --_typography---font-family--primary-font: Inter, sans-serif;
    --_typography---text-default--font-size: 15px;
    --_typography---text-medium--line-height: 1.4em;
    --_typography---font-weight--medium: 500;
    --_typography---text-default--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---font-family--secondary-font: "Fira Mono", sans-serif;
    --_typography---h1--font-size: 36px;
    --_typography---h1--line-height: 1.2em;
    --_typography---font-weight--semi-bold: 600;
    --_typography---h1--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---h2--font-size: 32px;
    --_typography---h2--line-height: 1.2em;
    --_typography---h2--font-weight: var(--_typography---font-weight--semi-bold);
    --_typography---h2--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---h3--font-size: 24px;
    --_typography---h3--line-height: 1.2em;
    --_typography---h3--font-weight: var(--_typography---font-weight--medium);
    --_typography---h3--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---h4--font-size: 18px;
    --_typography---h4--line-height: 1.2em;
    --_typography---h4--font-weight: var(--_typography---font-weight--medium);
    --_typography---h4--letter-spacing: var(--_typography---letter-spacing--small);
    --_typography---h5--font-size: 18px;
    --_typography---h5--line-height: 1.2em;
    --_typography---h5--font-weight: var(--_typography---font-weight--bold);
    --_typography---h5--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---h6--font-size: 16px;
    --_typography---h6--line-height: 1.2em;
    --_typography---h6--font-weight: var(--_typography---font-weight--bold);
    --_typography---h6--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---font-weight--regular: 400;
    --_typography---text-medium--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---text-default--line-height: 1.25em;
    --_typography---text-small--font-size: 14px;
    --_typography---text-small--line-height: 1.15em;
    --_typography---display-02--font-size: 54px;
    --_typography---display-02--line-height: 1.2em;
    --_typography---display-02--font-weight: var(--_typography---font-weight--medium);
    --_typography---display-02--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---button-text--font-size: 14px;
    --_typography---button-text--line-height: 1.14em;
    --_typography---button-text--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---display-xlarge--font-size: 120px;
    --_typography---display-xlarge--line-height: .75em;
    --_typography---tag--font-size: 14px;
    --_typography---tag--line-height: 1.14em;
    --_typography---tag--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---display-01--line-height: 1em;
    --_typography---text-xsmall--font-size: 10px;
    --_typography---text-xsmall--line-height: 1em;
    --_typography---text-xsmall--font-weight: var(--_typography---font-weight--regular);
    --_typography---text-small--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---display-01--font-size: 80px;
    --_typography---font-weight--bold: 700;
    --_typography---display-xlarge--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---display-xlarge--font-weight: var(--_typography---font-weight--medium);
    --_typography---display-01--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---display-01--font-weight: var(--_typography---font-weight--medium);
    --_typography---h1--font-weight: var(--_typography---font-weight--semi-bold);
    --_typography---text-medium--font-size: 16px;
    --_typography---text-medium--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-default--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-small--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-xsmall--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---tag--font-weight: var(--_typography---font-weight--medium);
    --_typography---button-text--font-weight: var(--_typography---font-weight--medium);
    --_typography---font-weight--light: 300;
    --_typography---letter-spacing--none: 0em;
    --_typography---letter-spacing--tiny: .01em;
    --_typography---letter-spacing--small: -.01em;
    --_typography---letter-spacing--default: -.02em;
    --_typography---letter-spacing--medium: -.03em;
    --_typography---letter-spacing--large: -.04em;
    --_typography---letter-spacing--x-large: -.05em;
  }
  .utility-page-wrap, .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .color-block-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .color-block {
    height: 130px;
  }
  .button-item-wrap {
    flex-flow: wrap;
  }
  .button-primary {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    padding: 6px 6px 6px 22px;
  }
  .footer-top {
    grid-column-gap: var(--_responsive---element-spacing--spacing-massive);
    grid-row-gap: var(--_responsive---element-spacing--spacing-massive);
    flex-flow: column;
  }
  .footer-top-right {
    width: var(--full-size);
    grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
    grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  }
  .footer-link-list-wrap.is-left {
    justify-content: flex-start;
    align-items: flex-start;
  }
  .navbar {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .nav-button-wrapper {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
  .hamburger {
    width: 44px;
    height: 44px;
  }
  .utility-content-wrap {
    grid-row-gap: 24px;
  }
  .button-7 {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    padding: 14px 28px;
  }
  .utility-title-block {
    margin-bottom: 60px;
  }
  .work-widget-left {
    max-width: none;
  }
  .work-widget {
    flex-flow: column;
  }
  .work-widget-right {
    order: -9999;
  }
  .sub-title-row.is-blog-details {
    margin-bottom: 32px;
  }
  .section-title-block.is-statistic {
    position: static;
  }
  .section-title-row {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .about-stats-block {
    width: auto;
    max-width: none;
  }
  .testimonial-card-block {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }
  .testimonial-card {
    padding: 20px;
  }
  .testimonial-card-image {
    max-width: 80px;
  }
  .benefit-content-block {
    min-height: 500px;
  }
  .faq-accordion-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .banner-description {
    width: var(--full-size);
    max-width: none;
  }
  .banner-description.is-utility {
    width: var(--full-size);
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .banner-description.is {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    width: auto;
  }
  .banner-description.is-pricing, .banner-description.is-blog {
    width: var(--full-size);
  }
  .banner-content-block {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  .banner-title-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
  .collection-list {
    grid-template-columns: 1fr;
  }
  .tabs-menu {
    margin-bottom: 32px;
  }
  .blog-gallery-image-wrap {
    margin-bottom: 24px;
  }
  .blog-rich-text h2:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-2) {
    margin-top: 24px;
  }
  .blog-rich-text p {
    margin-bottom: 12px;
  }
  .blog-details-left {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .blog-main-image-wrap {
    border-radius: 12px;
    margin-bottom: 32px;
  }
  .utility-text-block {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .utility-title-wrap {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
  .about-title-blank {
    width: 40px;
  }
  .service-tab-link {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .service-tab-left {
    text-align: left;
    flex-flow: column;
  }
  .hero-right-button-wrap {
    grid-column-gap: 28px;
    grid-row-gap: 28px;
    max-width: 195px;
  }
  .ceo-card {
    max-width: var(--full-size);
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    flex: 1;
    min-width: 270px;
  }
  .hero-review {
    max-width: var(--full-size);
    flex: 1;
    min-width: 270px;
  }
  .hero-review-block {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .hero-left {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
  .service-banner-bottom {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  .service-banner-description {
    order: 9999;
    max-width: none;
  }
  .benefit-two-title-blank {
    width: 40px;
  }
  .benefit-two-stats-block {
    height: auto;
  }
  .benefit-two-middle-bottom {
    flex-flow: column;
  }
  .benefit-contact-card {
    min-height: 400px;
  }
  .benefit-client-card {
    max-width: none;
  }
  .benefit-client-card-top {
    max-width: none;
    margin-bottom: 60px;
  }
  .logo {
    margin-right: 24px;
  }
  .benefit-client-card-particle {
    margin-bottom: 100px;
  }
  .feature-card-icon {
    max-width: 60px;
  }
  .feature-card-block {
    grid-template-columns: 1fr 16px 1fr;
  }
  .feature-title-blank {
    width: 40px;
  }
  .pricing-details-left {
    grid-row-gap: 32px;
  }
  .default-state {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .work-tab-link {
    padding: 12px;
  }
  .work-tabs-menu {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
  .work-details-info-wrap {
    width: auto;
    max-width: var(--full-size);
    flex: 1;
    min-width: 130px;
  }
  .work-rich-text p {
    margin-bottom: 24px;
  }
  .work-rich-text h3:where(:not([class*="heading-scale-"])), .work-rich-text :where(.heading-scale-3) {
    margin-top: -8px;
  }
  .project-gallery-image-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    margin-bottom: 24px;
  }
  .work-details-info-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: wrap;
  }
  .contact-link-block {
    grid-column-gap: var(--_responsive---element-spacing--spacing-slim);
    grid-row-gap: var(--_responsive---element-spacing--spacing-slim);
    flex-flow: wrap;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
  }
  .about-top {
    grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
    grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
    flex-flow: column;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .about-top-description {
    grid-column-gap: var(--_responsive---element-spacing--spacing-regular);
    grid-row-gap: var(--_responsive---element-spacing--spacing-regular);
    max-width: none;
  }
  .value-widget-wrap {
    flex-flow: column;
  }
  .founder-title-wrap {
    margin-bottom: var(--_responsive---element-spacing--spacing-slim);
  }
  .founder-card-block {
    grid-column-gap: var(--_responsive---element-spacing--spacing-normal);
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .founder-card {
    max-width: none;
  }
  .team-contact-button-wrap {
    max-width: 220px;
  }
  .award-widget {
    grid-template-columns: .25fr 1fr;
  }
  .award-info-wrap {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
  .statistic-card {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
    padding: 24px;
    top: 40px;
  }
  .review-author-image-wrap {
    max-width: none;
  }
  .review-slide-content {
    flex-flow: column;
  }
  .review-text-block {
    width: var(--full-size);
    padding-top: 0;
  }
  .benefit-particle {
    transform: translate(-50%, -178%);
  }
  .review-arrow {
    width: 44px;
    margin-top: -10px;
    position: relative;
    right: -32px;
  }
  .review-arrow.is-left {
    bottom: -34px;
    right: 32px;
  }
  .review-author-image {
    object-position: 50% 0%;
    max-height: 500px;
  }}
@media screen and (max-width: 479px) {

  body {
    --_responsive---element-spacing--none: 0px;
    --_responsive---section-padding--large: 100px;
    --_responsive---element-spacing--spacing-xlarge: 24px;
    --_responsive---element-spacing--spacing-tiny: 4px;
    --_responsive---element-spacing--spacing-normal: 24px;
    --_responsive---element-spacing--spacing-slim: 16px;
    --_responsive---element-spacing--spacing-xxsmall: 8px;
    --_responsive---element-spacing--spacing-xxxlarge: 32px;
    --_responsive---spacing--34-px\<deleted\|variable-7e30a8d3-7687-4a52-d404-74d261b5dc62\>: 34px;
    --_responsive---element-spacing--spacing-medium: 16px;
    --_responsive---element-spacing--spacing-regular: 20px;
    --_responsive---element-spacing--spacing-xsmall: 12px;
    --_responsive---spacing--14-px\<deleted\|variable-6e27546b-22fd-9515-9505-a788ebe0bc82\>: 14px;
    --_responsive---element-spacing--spacing-massive: 40px;
    --_responsive---element-spacing--spacing-giant: 40px;
    --_responsive---margin--margin-80-px\<deleted\|variable-d245b505-7310-fedd-12f6-4e8ea0571cfa\>: 40px;
    --_responsive---margin--margin-60-px\<deleted\|variable-81f6ae22-b512-06c2-5961-4d195e4def69\>: 30px;
    --_responsive---spacing--10-px\<deleted\|variable-7cc3a4c8-b72f-1d6a-a3c6-33f67efa54a1\>: 10px;
    --_responsive---element-spacing--spacing-xjumbo: 40px;
    --_responsive---element-spacing--spacing-xxbig: 36px;
    --_responsive---element-spacing--spacing-small: 12px;
    --_responsive---section-padding--default: 50px;
    --_responsive---section-padding--xlarge: 120px;
    --_responsive---section-padding--small: 20px;
    --_responsive---element-spacing--section-title-spacing: 32px;
    --_responsive---element-spacing--spacing-xxxbig: 36px;
    --_responsive---element-spacing--spacing-large: 24px;
    --_responsive---element-spacing--spacing-colossal: 50px;
    --_responsive---element-spacing--spacing-medium-rare: 20px;
    --_responsive---element-spacing--spacing-big: 36px;
    --_responsive---border-radius--radius-medium: 6px;
    --_responsive---section-padding--medium: 50px;
    --_responsive---border-radius--radius-small: 6px;
    --_responsive---border-radius--radius-large: 12px;
    --_responsive---border-radius--radius-round: 50%;
    --_responsive---element-spacing--spacing-xxlarge: 32px;
    --_responsive---element-spacing--spacing-xbig: 36px;
    --_responsive---element-spacing--spacing-jumbo: 40px;
    --_responsive---element-spacing--spacing-xxjumbo: 40px;
    --_responsive---element-spacing--spacing-immense: 50px;
    --_responsive---border-radius--radius-tiny: 4px;
    --_responsive---border-radius--radius-xxsmall: 4px;
    --_responsive---border-radius--radius-xsmall: 4px;
    --_responsive---border-radius--radius-regular: 8px;
    --_responsive---border-radius--radius-xlarge: 12px;
    --_responsive---border-radius--radius-xxlarge: 20px;
    --_responsive---border-radius--radius-xxxlarge: 20px;
    --_responsive---border-radius--radius-circle: 100%;
    --_typography---font-family--primary-font: Inter, sans-serif;
    --_typography---text-default--font-size: 15px;
    --_typography---text-medium--line-height: 1.4em;
    --_typography---font-weight--medium: 500;
    --_typography---text-default--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---font-family--secondary-font: "Fira Mono", sans-serif;
    --_typography---h1--font-size: 32px;
    --_typography---h1--line-height: 1.2em;
    --_typography---font-weight--semi-bold: 600;
    --_typography---h1--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---h2--font-size: 32px;
    --_typography---h2--line-height: 1.2em;
    --_typography---h2--font-weight: var(--_typography---font-weight--semi-bold);
    --_typography---h2--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---h3--font-size: 24px;
    --_typography---h3--line-height: 1.2em;
    --_typography---h3--font-weight: var(--_typography---font-weight--medium);
    --_typography---h3--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---h4--font-size: 18px;
    --_typography---h4--line-height: 1.2em;
    --_typography---h4--font-weight: var(--_typography---font-weight--medium);
    --_typography---h4--letter-spacing: var(--_typography---letter-spacing--small);
    --_typography---h5--font-size: 18px;
    --_typography---h5--line-height: 1.2em;
    --_typography---h5--font-weight: var(--_typography---font-weight--bold);
    --_typography---h5--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---h6--font-size: 16px;
    --_typography---h6--line-height: 1.2em;
    --_typography---h6--font-weight: var(--_typography---font-weight--bold);
    --_typography---h6--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---font-weight--regular: 400;
    --_typography---text-medium--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---text-default--line-height: 1.25em;
    --_typography---text-small--font-size: 14px;
    --_typography---text-small--line-height: 1.15em;
    --_typography---display-02--font-size: 40px;
    --_typography---display-02--line-height: 1.2em;
    --_typography---display-02--font-weight: var(--_typography---font-weight--medium);
    --_typography---display-02--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---button-text--font-size: 14px;
    --_typography---button-text--line-height: 1.14em;
    --_typography---button-text--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---display-xlarge--font-size: 100px;
    --_typography---display-xlarge--line-height: .75em;
    --_typography---tag--font-size: 14px;
    --_typography---tag--line-height: 1.14em;
    --_typography---tag--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---display-01--line-height: 1em;
    --_typography---text-xsmall--font-size: 10px;
    --_typography---text-xsmall--line-height: 1em;
    --_typography---text-xsmall--font-weight: var(--_typography---font-weight--regular);
    --_typography---text-small--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---display-01--font-size: 54px;
    --_typography---font-weight--bold: 700;
    --_typography---display-xlarge--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---display-xlarge--font-weight: var(--_typography---font-weight--medium);
    --_typography---display-01--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---display-01--font-weight: var(--_typography---font-weight--medium);
    --_typography---h1--font-weight: var(--_typography---font-weight--semi-bold);
    --_typography---text-medium--font-size: 15px;
    --_typography---text-medium--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-default--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-small--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-xsmall--letter-spacing: var(--_typography---letter-spacing--x-large);
    --_typography---tag--font-weight: var(--_typography---font-weight--medium);
    --_typography---button-text--font-weight: var(--_typography---font-weight--medium);
    --_typography---font-weight--light: 300;
    --_typography---letter-spacing--none: 0em;
    --_typography---letter-spacing--tiny: .01em;
    --_typography---letter-spacing--small: -.01em;
    --_typography---letter-spacing--default: -.02em;
    --_typography---letter-spacing--medium: -.03em;
    --_typography---letter-spacing--large: -.04em;
    --_typography---letter-spacing--x-large: -.05em;
  }
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .style-guide-wrap {
    grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
    grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  }
  .color-block-wrap {
    grid-column-gap: var(--_responsive---element-spacing--spacing-normal);
    grid-row-gap: var(--_responsive---element-spacing--spacing-normal);
    grid-template-columns: 1fr;
  }
  .color-block {
    height: 120px;
  }
  .typography-box-wrap {
    grid-column-gap: var(--_responsive---spacing--34-px\<deleted\|variable-7e30a8d3-7687-4a52-d404-74d261b5dc62\>);
    grid-row-gap: var(--_responsive---spacing--34-px\<deleted\|variable-7e30a8d3-7687-4a52-d404-74d261b5dc62\>);
  }
  .typography-box-inner-wrap {
    grid-column-gap: var(--_responsive---element-spacing--spacing-regular);
    grid-row-gap: var(--_responsive---element-spacing--spacing-regular);
  }
  .footer-top {
    grid-column-gap: var(--_responsive---element-spacing--spacing-giant);
    grid-row-gap: var(--_responsive---element-spacing--spacing-giant);
    flex-flow: column;
  }
  .footer-bottom {
    margin-top: var(--_responsive---margin--margin-60-px\<deleted\|variable-81f6ae22-b512-06c2-5961-4d195e4def69\>);
    grid-column-gap: var(--_responsive---element-spacing--spacing-slim);
    grid-row-gap: var(--_responsive---spacing--10-px\<deleted\|variable-7cc3a4c8-b72f-1d6a-a3c6-33f67efa54a1\>);
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: flex-end;
  }
  .footer-top-left {
    grid-column-gap: var(--_responsive---element-spacing--spacing-xjumbo);
    grid-row-gap: var(--_responsive---element-spacing--spacing-xjumbo);
  }
  .footer-top-right {
    width: var(--full-size);
    grid-column-gap: var(--_responsive---element-spacing--spacing-giant);
    grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
    flex-flow: wrap;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    display: grid;
  }
  .hamburger {
    width: 40px;
    height: 40px;
  }
  .display-02.is-process-no {
    order: -9999;
  }
  .footer-logo-link {
    width: 100%;
  }
  .footer-utility-link-block {
    max-width: none;
  }
  .hero-info-block {
    grid-column-gap: var(--_responsive---element-spacing--spacing-xsmall);
    grid-row-gap: var(--_responsive---element-spacing--spacing-xsmall);
    flex-flow: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }
  .hero-title-wrap {
    order: -9999;
  }
  .sub-title-row.is-benefit {
    margin-bottom: var(--_responsive---element-spacing--section-title-spacing);
  }
  .sub-title-row.is-faq {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-flow: wrap;
  }
  .sub-title-row.is-footer {
    flex-flow: wrap;
  }
  .hero-info-wrap {
    max-width: var(--full-size);
    flex: 1;
    order: 9999;
    min-width: 200px;
  }
  .hero-title-block {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .mission-widget {
    flex-flow: column;
  }
  .reputation-widget {
    grid-column-gap: var(--_responsive---element-spacing--spacing-xsmall);
    grid-row-gap: var(--_responsive---element-spacing--spacing-xsmall);
    flex-flow: column;
  }
  .about-left {
    flex-flow: column;
  }
  .about-stats-wrap {
    flex-flow: row;
    justify-content: space-between;
  }
  .about-image-wrap {
    width: var(--full-size);
    max-width: none;
  }
  .process-card {
    padding: 16px;
  }
  .process-card-body {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  .process-card-description {
    max-width: none;
  }
  .about-title-space {
    width: 50px;
  }
  .process-button-wrap {
    max-width: none;
  }
  .pricing-card {
    padding-left: 16px;
    padding-right: 16px;
  }
  .pricing-card-block {
    grid-template-columns: 1fr;
  }
  .testimonial-card {
    padding: 16px;
  }
  .testimonial-card-image {
    max-width: 70px;
  }
  .benefit-line-block {
    display: none;
  }
  .benefit-content {
    grid-template-columns: 1fr;
  }
  .benefit-right {
    padding-left: 0;
  }
  .accordion-toggle, .accordion-list {
    padding-left: 16px;
    padding-right: 16px;
  }
  .faq-image-block {
    max-width: none;
  }
  .blog-card-block {
    grid-template-columns: 1.25fr;
  }
  .blog-widget-image {
    min-height: auto;
  }
  .banner-title-block {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
  .tabs-menu {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
  .blog-tab-link {
    padding: 12px;
  }
  .service-tab-link {
    padding: 20px 10px;
  }
  .service-tab-left {
    text-align: left;
  }
  .service-tab-image, .service-tab-description {
    max-width: none;
  }
  .service-tab-right, .hero-right-block {
    flex-flow: column;
  }
  .hero-right-button-wrap {
    max-width: none;
  }
  .ceo-card.is-benefit {
    min-width: auto;
  }
  .hero-review-block {
    max-width: none;
  }
  .hero-left-bottom {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-flow: column;
  }
  .benefit-two-left {
    flex-flow: column;
  }
  .benefit-two-stats-block {
    padding-left: 16px;
    padding-right: 16px;
  }
  .benefit-two-right {
    min-height: 400px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .benefit-rivew-card {
    padding-left: 16px;
    padding-right: 16px;
  }
  .benefit-two-middle-top {
    flex-flow: column;
  }
  .benefit-story-card, .benefit-contact-card, .benefit-client-card {
    padding-left: 16px;
    padding-right: 16px;
  }
  .benefit-client-card-particle {
    margin-bottom: 60px;
  }
  .feature-card-icon {
    max-width: 44px;
  }
  .feature-card-block {
    grid-row-gap: 0px;
    grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto;
    grid-template-columns: 1fr;
  }
  .feature-card-divider, .feature-card-divider.one {
    flex-flow: row;
    height: 16px;
  }
  .feature-card-divider.two, .feature-card-divider.four {
    display: flex;
  }
  .feature-card-divider-inner {
    width: 25%;
    height: var(--full-size);
  }
  .feature-card-divider-inner.is-top {
    height: var(--full-size);
    border-top-right-radius: var(--_responsive---border-radius--radius-small);
    border-bottom-left-radius: 0;
  }
  .feature-card-divider-inner.is-bottom {
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--_responsive---border-radius--radius-small);
  }
  .pricing-details-right {
    padding-left: 16px;
    padding-right: 16px;
  }
  .option-list {
    position: static;
  }
  .pricing-right-title-wrap {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }
  .work-widget-button-wrap {
    max-width: 200px;
  }
  .project-gallery-image-wrap.one, .project-gallery-image-wrap.two {
    width: var(--full-size);
  }
  .project-gallery-image-wrapper {
    flex-flow: column;
  }
  .project-gallery-image {
    min-height: 200px;
  }
  .about-top {
    grid-row-gap: var(--_responsive---element-spacing--spacing-xxxlarge);
  }
  .value-widget {
    flex-flow: column;
  }
  .value-widget-description {
    max-width: none;
  }
  .founder-title-wrap {
    position: sticky;
    top: 32px;
  }
  .founder-card-block {
    grid-row-gap: 60px;
    grid-template-columns: 1fr;
  }
  .founder-card {
    position: sticky;
    top: 100px;
  }
  .founder-sticky {
    overflow: visible;
  }
  .award-widget {
    padding: var(--_responsive---element-spacing--spacing-slim) 16px;
    grid-template-columns: .25fr .75fr;
  }
  .award-info-wrap {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
  .statistic-card {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    padding: 20px 16px;
  }
  .review-author-image-wrap {
    max-width: none;
  }
  .review-slide-content {
    flex-flow: column;
  }
  .review-text-block {
    max-width: none;
  }
  .mission-widget-body {
    width: var(--full-size);
  }
  .reputation-widget-left {
    width: var(--full-size);
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
  }
  .nav-location {
    display: none;
  }
  .benefit-tab {
    max-width: none;
  }
  .block-header {
    flex-flow: wrap;
  }
  .faq-link-block {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-flow: wrap;
  }
  .faq-link {
    max-width: none;
  }
  .hero-particle-wrapper {
    display: none;
  }
  .footer-play-button {
    bottom: 22%;
  }
  .review-author-image {
    max-height: none;
  }}

#node-b5f983b6-4e9e-eea9-0ee2-e487a4b5ce09-60dbc56c, #node-_8ab7c227-ea3c-4903-ad22-15885231ad0a-60dbc574, #node-_18eee7ce-2e4a-1438-27a8-9cc5038ab8da-60dbc576, #node-f2fdd8cc-8a64-6e59-1e67-67dd4a3d9902-60dbc576, #node-e6c7bce0-9cda-9a07-0418-a188cb130011-60dbc576, #node-cedd70d7-0d1a-c583-9a8b-febe87d768ef-60dbc576 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}@media screen and (max-width: 767px) {

  #node-_8f72bb8c-2b82-28e2-40b9-16f0766f2642-60dbc56c, #node-abc0173c-a880-56fc-9d09-bf2bb78d9648-60dbc56c, #node-b13c7ce2-055b-2ee9-1fda-975b2f76bb8a-60dbc56c, #node-_24c393c1-2031-65b6-daad-78a14812e43f-60dbc56c, #node-db4d3c51-b6dd-f61a-3153-4dd28b610bad-60dbc56c, #node-_7525f72a-25dc-0eb9-3e77-c407a00813ed-60dbc56c, #node-b5bc99d4-36ac-c392-e397-a0e737df4a90-60dbc56c, #node-_97dfc364-8356-d93e-a68d-eb66ce94daa6-60dbc56c {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }}


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

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

   Three conventions run through the file.

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

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

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

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

       outQuart / power3.out   cubic-bezier(.165, .84, .44, 1)
       outQuad  / power1.out   cubic-bezier(.25, .46, .45, .94)
       inOutQuad               cubic-bezier(.455, .03, .515, .955)
       outBack                 cubic-bezier(.175, .885, .32, 1.275)
       ease                    ease
   ====================================================================== */

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

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

/* transform.py wraps each page's own sections in <main> for the skip link and
   the main landmark. `display: contents` removes the BOX and leaves the
   sections exactly where the design put them -- every page here is a flat
   list of <section>s under <body>, so an ordinary block would become the
   containing block for all of them. */
main {
  display: contents;
}

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

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

/* The first thing in every <body>: off-screen until it is focused. */
.skip-link {
  position: absolute;
  top: -100vh;
  left: 8px;
  z-index: 2000;
  padding: 10px 16px;
  border-radius: 6px;
  background-color: var(--_colors---color--black);
  color: var(--_colors---color--white);
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---tag--font-size);
  text-decoration: none;
  text-transform: uppercase;
}

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

/* The export relies on Webflow's `[data-wf-focus-visible]` polyfill for its
   focus rings, and that rule is dropped with the runtime. `:focus-visible` is
   the platform's own version of the same idea and needs no script. */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

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

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

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

/* Every reveal is `both`-filled while it runs so it cannot flash at its start
   value, and every one of them hands over to `.is-shown` at the end. */
.reveal.is-revealed {
  animation-duration: 1.2s;
  animation-timing-function: var(--ease-out-quart);
  animation-fill-mode: both;
  animation-delay: var(--reveal-delay, 0ms);
}

/* --- this design's own five, all one gesture ---------------------------
   `a-73`..`a-76` ("Fade In 0.2".."Fade In 0.5"): opacity 0, y 50px and a 5px
   blur clearing over 1200ms. The four differ only in their delay, which
   main.js reads off `data-reveal-delay` and writes into `--reveal-delay`. */
@keyframes reveal-rise {
  from {
    opacity: 0;
    filter: blur(5px);
    transform: translate3d(0, 50px, 0);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

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

.reveal-rise.is-shown {
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

/* `a-53` ("Fade In"): the same shape at a quarter of the distance -- 30px and
   1px of blur -- and effectively no delay. Used for small type. */
@keyframes reveal-fade {
  from {
    opacity: 0;
    filter: blur(1px);
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

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

.reveal-fade.is-shown {
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

/* --- Webflow's three stock presets, all 1000ms `outQuart` --------------- */
.reveal-up.is-revealed,
.reveal-grow.is-revealed,
.reveal-shrink.is-revealed {
  animation-duration: 1s;
}@keyframes reveal-up {

  from {
    opacity: 0;
    transform: translate3d(0, 100px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }}


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

  from {
    opacity: 0;
    transform: scale3d(0.75, 0.75, 1);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }}


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

  from {
    opacity: 0;
    transform: scale3d(1.25, 1.25, 1);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }}


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

.reveal-up.is-shown,
.reveal-grow.is-shown,
.reveal-shrink.is-shown {
  transform: none;
}

/* Nothing above runs for a visitor who has asked for less motion; the end
   state is all they get. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-revealed {
    animation: none !important;
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* ================================================================= navbar
   The overlay's two states. framework.hand.css has already made it the
   absolutely-positioned, clipping container below 992px; this is the open and
   closed geometry and the transition between them.

   `grid-template-rows` is used rather than a JS-measured height so the panel
   can open to its own content height without main.js having to measure
   anything -- and `minmax(0, Nfr)` rather than a bare `0fr`, because a bare
   `0fr` does NOT collapse a row whose content has a minimum size (that cost
   an earlier conversion a dropdown that would not close). */
@media screen and (max-width: 991px) {
  .nav-overlay {
    display: grid;
    grid-template-rows: minmax(0, 0fr);
    transition: grid-template-rows 400ms ease;
  }

  .nav-overlay.is-open {
    grid-template-rows: minmax(0, 1fr);
  }

  .nav-overlay > .nav-menu {
    min-height: 0;
    overflow: hidden;
  }

  /* THE HAMBURGER, WHICH THE PUBLISHED SITE DOES NOT ANIMATE.
     `a-15` (NAVBAR_OPEN) and `a-16` (NAVBAR_CLOSE) describe this exactly --
     the middle bar to `width: 0`, one bar down 8px at 45deg and the other up
     8px at -45deg, over 300ms and 400ms -- but every one of their ten action
     items targets `{}`, an empty object, so none of it reaches an element.
     Webflow leaves the steps behind when the elements they pointed at are
     deleted and re-made, which is what happened to these three <div>s.

     The gesture ships, keyed on the button's own `aria-expanded`, which
     main.js has to set anyway. */
  .hamburger-line-top,
  .hamburger-line-middle,
  .hamburger-line-bottom {
    transition: transform 400ms ease, width 300ms ease, opacity 300ms ease;
  }

  .menu-button[aria-expanded="true"] .hamburger-line-middle {
    width: 0;
    opacity: 0;
  }

  .menu-button[aria-expanded="true"] .hamburger-line-top {
    transform: translateY(8px) rotate(45deg);
  }

  .menu-button[aria-expanded="true"] .hamburger-line-bottom {
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* ============================================================== accordion
   `a-56` / `a-57`: the panel from height 0 to auto over 300ms while the
   chevron turns 180deg.

   THE COLLAPSE IS IN THIS FILE, NOT IN framework.hand.css, and that is
   deliberate. The design says `.accordion-list { position: static }` and
   nothing about display; a state the design does not know about has to be
   declared AFTER the design sheet or it loses on source order at equal
   specificity -- which is how an earlier conversion shipped an FAQ that was
   permanently open. */
.accordion-list {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  overflow: hidden;
  transition: grid-template-rows 300ms ease;
}

.accordion-list > .accordion-description-wrap {
  min-height: 0;
  overflow: hidden;
}

.accordion-toggle[aria-expanded="true"] + .accordion-list {
  grid-template-rows: minmax(0, 1fr);
}

/* ...and the same, addressed from the heading wrapper, because the <h3>
   rebuild_faq inserts sits BETWEEN the button and the panel in the DOM even
   though `display: contents` removes its box. An adjacent-sibling combinator
   walks the DOM, not the box tree. */
.accordion-heading:has(.accordion-toggle[aria-expanded="true"]) + .accordion-list {
  grid-template-rows: minmax(0, 1fr);
}

.accordion-icon {
  transition: transform 300ms ease;
}

.accordion-toggle[aria-expanded="true"] .accordion-icon {
  transform: rotate(180deg);
}

/* ============================================================== tab sets
   Three real tab sets (blog categories, project categories, client
   benefits). The framework's `.w-tab-pane { display: none }` and
   `.w--tab-active { display: block }` are KEPT by build_css and renamed, so
   the panes already switch; all that is left is the strip's own state, which
   the design styles through `.w--current` -> `.is-active`, and the keyboard
   affordances the widget used to provide. */
.tabset-link {
  cursor: pointer;
}

/* ------------------------------------------------- the services accordion
   `a-58` / `a-59` (TAB_ACTIVE / TAB_INACTIVE): `.service-tab-right` from
   height 0 to auto over 300ms. The widget behind it is a tab set whose four
   panes are EMPTY -- the content is inside the links -- so transform.py ships
   it as the accordion it actually is. See rebuild_service_accordion.

   The design already gives `.service-tab-right` `overflow: hidden`, which is
   what makes the collapse possible without a second wrapper. */
/* `.service-tab-right` HAS TWO CHILDREN, and that is the whole difficulty.
   The single-row `grid-template-rows: minmax(0, 0fr)` trick collapses the
   explicit row and leaves the second child in an IMPLICIT row, which is
   `auto` -- so the panel measured 205px with the row supposedly shut, and
   every services row on the home page shipped permanently open. (The probe
   caught it; nothing static could.)

   `grid-auto-flow: column` puts both children in the ONE explicit row as
   columns, which is also the side-by-side layout the design's own flex box
   produced -- the picture on the left, the description on the right. Below
   480px the design stacks them (`.service-tab-right { flex-flow: column }`),
   so there the flow goes back to rows and BOTH rows are declared, explicit
   and animatable.

   `minmax(0, 1fr)` rather than `auto`: in a grid whose own height is
   indefinite an `fr` track resolves to its content's size, which is what
   makes the open state fit the content -- and unlike `auto` it can be
   transitioned to. */
.service-tab-right {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, auto);
  grid-template-rows: minmax(0, 0fr);
  align-items: start;
  transition: grid-template-rows 300ms ease;
}

.service-tab-link[aria-expanded="true"] .service-tab-right {
  grid-template-rows: minmax(0, 1fr);
}

.service-tab-right > * {
  min-height: 0;
}@media screen and (max-width: 479px) {

  .service-tab-right {
    grid-auto-flow: row;
    grid-template-rows: minmax(0, 0fr) minmax(0, 0fr);
  }

  .service-tab-link[aria-expanded="true"] .service-tab-right {
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }}


/* =============================================================== carousel
   The company page's four client quotes. `data-animation="cross"` on the
   export's own element, so this cross-fades rather than sliding: every slide
   is stacked in the mask and only the active one is opaque. */
.review-slider .mask {
  display: grid;
}

.review-slider .slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms ease, visibility 500ms ease;
}

.review-slider .slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* ======================================================== background video
   The four films. `object-fit` was Webflow's polyfill; it is a real property
   now, and the widget's own `> video` rule (kept and renamed by build_css)
   already supplies the absolute fill. All that is left is the control. */
.bg-video-button {
  cursor: pointer;
  line-height: 0;
}

.bg-video-button svg {
  width: 44px;
  height: 44px;
  color: rgba(46, 46, 46, 0.8);
}

/* ================================================================= hovers
   Each pair of IX2 lists collapses into one `:hover` state, because the
   "Hover Out" list IS the "Hover In" list's group 0 -- which is exactly what
   `useFirstGroupAsInitialState: true` on the "in" and `false` on the "out"
   means. `:focus-within` is added everywhere: every one of these lives on a
   card that is also a link, and a keyboard should see what a pointer sees. */

/* --- `a` / `a-2`, the primary button ----------------------------------
   The arrow travels a full width right (400ms `ease`) while the hairline
   under the label grows from 0 to 100% (500ms). Both children sit under
   `overflow: hidden`, so the arrow leaves and its duplicate arrives.

   THE REST WIDTH IS 0, AND THE DESIGN SAYS 100%. `.button-primary-line` is
   `width: var(--full-size)` in the design sheet and IX2's group 0 overrides
   it to `0px` inline on every button in the export -- a group-0 value that
   CONTRADICTS the sheet, which is the case that has to be transcribed rather
   than dropped. */
.button-primary-line {
  width: 0;
  transition: width 500ms ease;
}

.button-primary:hover .button-primary-line,
.button-primary:focus-within .button-primary-line {
  width: 100%;
}

.button-primary-arrow {
  transition: transform 400ms ease;
}

/* TRANSLATE FIRST, ROTATE SECOND -- THE ORDER IS THE WHOLE BEHAVIOUR.
 *
 * `transform` applies its functions left to right, each one operating in the
 * coordinate system the previous one left behind. `rotate(45deg)
 * translateX(100%)` therefore turns the axes 45deg and THEN slides the arrow
 * along the turned axis, so it leaves diagonally, misses the gap in the
 * group's `overflow: hidden` box and is clipped to a sliver -- which is what
 * a hover was showing instead of an arrow.
 *
 * `translateX(100%) rotate(45deg)` slides it along the GROUP's own axis
 * (already turned -45deg by the design) and then straightens the glyph, which
 * is the "flies away up-right while its duplicate arrives from down-left"
 * this button is drawn for.
 *
 * It is also the order the payload composes in. Every rest state IX2 writes
 * inline in this export reads
 *   `translate3d(...) scale3d(...) rotateX() rotateY() rotateZ() skew()`
 * -- translate first, rotate last -- so a hand-written rule that reverses the
 * two is not transcribing the interaction, it is inventing a different one. */
.button-primary:hover .button-primary-arrow,
.button-primary:focus-within .button-primary-arrow {
  transform: translateX(100%) rotate(45deg);
}

/* --- `a-66` / `a-67` / `a-68`, the work card -------------------------- */
.work-widget-image {
  transition: transform 300ms var(--ease-out-quad);
}

.work-widget-image-overlay,
.work-widget-button-wrapper {
  opacity: 0;
  transition: opacity 300ms ease;
}

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

[data-hover="work-widget"]:hover .work-widget-image-overlay,
[data-hover="work-widget"]:focus-within .work-widget-image-overlay {
  opacity: 0.3;
}

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

/* --- `a-77` / `a-78`, the blog card ----------------------------------- */
.blog-widget-image {
  transition: transform 300ms ease;
}

.blog-widget-button-wrap {
  opacity: 0;
  transition: opacity 300ms ease;
}

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

[data-hover="blog-widget"]:hover .blog-widget-button-wrap,
[data-hover="blog-widget"]:focus-within .blog-widget-button-wrap {
  opacity: 1;
}

/* --- `a-79` / `a-80` and `a-81` / `a-82`, the two portrait cards ------- */
.founder-card-image,
.team-card-image {
  transition: transform 300ms ease;
}

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

/* --- `a-70` / `a-71`, the awards row ----------------------------------
   A black panel grows out of the row's bottom edge (`inOutQuad`, 500ms) while
   the row's own text goes from black-60 to white and the `.text-dark` cells
   from black to white. Both colours carry a `globalSwatchId`, so the variable
   is what the runtime used -- not the rgb triple stored beside it. */
.award-widget-background {
  transform: translateY(30px) scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 500ms var(--ease-in-out-quad);
}

[data-hover="award-widget"] {
  color: var(--_colors---color--black-60);
  transition: color 500ms ease;
}

[data-hover="award-widget"] .text-dark {
  transition: color 500ms ease;
}

[data-hover="award-widget"]:hover .award-widget-background,
[data-hover="award-widget"]:focus-within .award-widget-background {
  transform: translateY(0) scaleY(1);
}

[data-hover="award-widget"]:hover,
[data-hover="award-widget"]:focus-within,
[data-hover="award-widget"]:hover .text-dark,
[data-hover="award-widget"]:focus-within .text-dark {
  color: var(--_colors---color--white);
}

/* ======================================================== cursor-follow
   `a-68`: MOUSE_MOVE over a work card drives `.work-widget-button-wrapper`
   +-50% of its own size on both axes, so the "View" pill tracks the pointer
   inside the picture. main.js writes the two numbers; everything else is the
   design's own centring. */
[data-cursor="work-widget"] .work-widget-button-wrapper {
  transform: translate3d(
    calc(var(--cursor-x, 0) * 50%),
    calc(var(--cursor-y, 0) * 50%),
    0
  );
}

/* ================================================================ scrubs
   Each scrubbed section carries `--scrub` (0..1) and every scrubbed element
   under it is a PAUSED 1s animation seeked by a negative delay. The keyframe
   percentages below are the payload's own. */
[data-scrub] [data-scrub-part],
[data-scrub="founder"] .founder-card-block {
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-delay: calc(var(--scrub, 0) * -1s);
}

/* `a-69` ("Founder Section Scroll"): the card block enters from x 100%
   between 30% and 75% of the section's progress. `main` only -- below 992px
   the design lays the same block out as a grid and the payload does not run
   it. The gate is on the CSS as well as on the JS: a scrub whose stylesheet
   is ungated still moves the element at widths where nothing updates
   `--scrub`, and it would sit frozen at 100%. */
@media screen and (min-width: 992px) {
  @keyframes scrub-founder {
    0%,
    30% {
      transform: translate3d(100%, 0, 0);
    }
    75%,
    100% {
      transform: translate3d(0, 0, 0);
    }
  }

  [data-scrub="founder"] .founder-card-block {
    animation-name: scrub-founder;
  }
}

/* `a-72` ("Testimonial Scroll (Small)") and `a-83` ("...(Large)"): the same
   rail authored twice, in two sections the design swaps at 991px. Four cards
   fan out to the left, each further and later than the one before; the fifth
   card does not move at all, which is why only four carry a part number.

   The two sets of distances are the payload's, unrounded. */
@keyframes scrub-testimonial-small-1 {
  0%,
  25% {
    transform: translate3d(0, 0, 0);
  }
  35%,
  100% {
    transform: translate3d(-77.5%, 0, 0);
  }
}@keyframes scrub-testimonial-small-2 {

  0%,
  25% {
    transform: translate3d(0, 0, 0);
  }
  45%,
  100% {
    transform: translate3d(-154.1%, 0, 0);
  }}
@keyframes scrub-testimonial-small-3 {

  0%,
  25% {
    transform: translate3d(0, 0, 0);
  }
  55%,
  100% {
    transform: translate3d(-231.15%, 0, 0);
  }}
@keyframes scrub-testimonial-small-4 {

  0%,
  25% {
    transform: translate3d(0, 0, 0);
  }
  65%,
  100% {
    transform: translate3d(-310%, 0, 0);
  }}


[data-scrub="testimonial-small"] [data-scrub-part="1"] {
  animation-name: scrub-testimonial-small-1;
}

[data-scrub="testimonial-small"] [data-scrub-part="2"] {
  animation-name: scrub-testimonial-small-2;
}

[data-scrub="testimonial-small"] [data-scrub-part="3"] {
  animation-name: scrub-testimonial-small-3;
}

[data-scrub="testimonial-small"] [data-scrub-part="4"] {
  animation-name: scrub-testimonial-small-4;
}@keyframes scrub-testimonial-large-1 {

  0%,
  25% {
    transform: translate3d(0, 0, 0);
  }
  35%,
  100% {
    transform: translate3d(-65%, 0, 0);
  }}
@keyframes scrub-testimonial-large-2 {

  0%,
  25% {
    transform: translate3d(0, 0, 0);
  }
  45%,
  100% {
    transform: translate3d(-130%, 0, 0);
  }}
@keyframes scrub-testimonial-large-3 {

  0%,
  25% {
    transform: translate3d(0, 0, 0);
  }
  55%,
  100% {
    transform: translate3d(-195%, 0, 0);
  }}
@keyframes scrub-testimonial-large-4 {

  0%,
  25% {
    transform: translate3d(0, 0, 0);
  }
  65%,
  100% {
    transform: translate3d(-258%, 0, 0);
  }}


[data-scrub="testimonial-large"] [data-scrub-part="1"] {
  animation-name: scrub-testimonial-large-1;
}

[data-scrub="testimonial-large"] [data-scrub-part="2"] {
  animation-name: scrub-testimonial-large-2;
}

[data-scrub="testimonial-large"] [data-scrub-part="3"] {
  animation-name: scrub-testimonial-large-3;
}

[data-scrub="testimonial-large"] [data-scrub-part="4"] {
  animation-name: scrub-testimonial-large-4;
}@media (prefers-reduced-motion: reduce) {

  [data-scrub] [data-scrub-part],
  [data-scrub="founder"] .founder-card-block {
    animation: none !important;
    transform: none;
  }}


/* ==================================================== the benefit crosshair
   The small cross that marks where the benefit section's two dashed guide
   lines meet. transform.reparent_particle moves it onto the row that DRAWS
   the horizontal line, and this centres it on that line's own bottom edge.

   The design anchored it to the middle of the SECTION instead
   (`inset: 50% auto auto 50%`) and then nudged the Y by hand three times --
   -55%, -150% at 991px, -178% at 767px. Measured against the export it misses
   at every one: 26.0px, 26.5px and 24.2px BELOW the crossing. It cannot do
   anything else, because the anchor moves with the section's height and the
   target moves with the length of the copy above it.

   Anchored here, it is exact at any width and any amount of copy, and all
   three of those percentages are overridden -- a later rule of equal
   specificity beats an earlier one whatever media query the earlier one is
   in, so no `!important` is needed. */
.sub-title-row.is-benefit {
  position: relative;
}

.benefit-particle {
  inset: auto auto 0 50%;
  transform: translate(-50%, 50%);
}@media screen and (max-width: 479px) {

  /* The design hides `.benefit-line-block` here, which used to take the cross
     with it. It lives somewhere else now, so it is hidden explicitly -- with
     the vertical line gone there is no crossing left to mark. */
  .benefit-particle {
    display: none;
  }}


/* ================================================================ marquee
   `a-84` ("Benefit Logo Marquee"): `.benefit-logo-row` travels -100% of its
   own width over THIRTY SECONDS. The payload's event carries no `loop` flag,
   so on the published site the strip pans once and then stops forever; it
   loops here.

   main.js clones the row so the second copy arrives as the first leaves, and
   the animation only runs once the strip has been revealed -- which is what
   `a-84` being a SCROLL_INTO_VIEW event means.

   `:is(.is-revealed, .is-shown)` rather than `.is-revealed` alone: the reveal
   handover REMOVES `is-revealed`, and an earlier conversion froze a logo
   ticker exactly there. Both classes score the same, so nothing in the
   cascade moves. */
@keyframes marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

[data-marquee] {
  display: flex;
  overflow: hidden;
}

[data-marquee] .benefit-logo-row {
  animation: marquee 30s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}

[data-marquee]:is(.is-revealed, .is-shown) .benefit-logo-row {
  animation-play-state: running;
}@media (prefers-reduced-motion: reduce) {

  [data-marquee] .benefit-logo-row {
    animation: none;
  }}


/* ============================================================ split text
   The three IX3 timelines, without GSAP. main.js wraps each character in a
   `.split-char` inside a `.split-word`, and the WORD is what matters: a run
   of inline-blocks breaks between any two of them, so a per-character split
   with no word grouping reads "make rea / l estate" at narrow widths. Spaces
   stay as text nodes between the words. */
.split-word {
  display: inline-block;
  white-space: nowrap;
}

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

/* --- `t-e0cba7fd`, the hero roll (wf:load) -----------------------------
   `.banner-heading-top` rolls its characters UP out of the wrap (y 0% ->
   -100%) and `.banner-heading-bottom` brings its own in from below (y 100% ->
   0%). Both 0.4s `power1.out`, the top starting at 0.1s and the bottom at
   0.2s, each staggered across 0.4s in total.

   Until it plays, both are hidden -- which is what the export's own inline
   `<style>` block does with `visibility: hidden !important` -- and gated on
   `.js` so a visitor with scripting off sees the heading rather than a hole. */
:where(.js) .banner-heading-top .split-char {
  transform: translateY(0);
}

:where(.js) .banner-heading-bottom .split-char {
  transform: translateY(100%);
}

.banner-heading-wrap.is-played .split-char {
  transition: transform 0.4s var(--ease-out-quad);
  transition-delay: var(--char-delay, 0s);
}

.banner-heading-wrap.is-played .banner-heading-top .split-char {
  transform: translateY(-100%);
}

.banner-heading-wrap.is-played .banner-heading-bottom .split-char {
  transform: translateY(0);
}

/* --- `t-133ad88a`, `[data-split-fade]` (wf:scroll, enter) --------------
   Every section heading: its characters arrive from opacity 0 and
   `scaleY(1.1)`, staggered across 0.5s, `power1.out`.

   In the export this hook is spelled `title="animate"` -- a REAL global HTML
   attribute, so all 31 headings showed a browser tooltip reading "animate".
   transform.py renames it; see IX3_ATTRS. */
:where(.js) [data-split-fade] .split-char {
  opacity: 0;
  transform: scaleY(1.1);
}

[data-split-fade].is-played .split-char {
  opacity: 1;
  transform: scaleY(1);
  transition: opacity 0.5s var(--ease-out-quad),
    transform 0.5s var(--ease-out-quad);
  transition-delay: var(--char-delay, 0s);
}

/* --- `t-63ed2cfe`, `[data-split-left]` (wf:scroll, enter) --------------
   Not a character split at all: the block's own CHILDREN arrive from
   `x: -50px` and opacity 0, 0.6s `power3.out`, 0.12s apart, starting 0.1s in.
   Forty-eight of them, all on the work cards. */
:where(.js) [data-split-left] > * {
  opacity: 0;
  transform: translateX(-50px);
}

[data-split-left].is-played > * {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.6s var(--ease-out-quart),
    transform 0.6s var(--ease-out-quart);
  transition-delay: var(--child-delay, 0s);
}@media (prefers-reduced-motion: reduce) {

  :where(.js) .banner-heading-top .split-char,
  :where(.js) .banner-heading-bottom .split-char,
  :where(.js) [data-split-fade] .split-char,
  :where(.js) [data-split-left] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }}


/* ========================================================= pricing toggle
   `a-60`..`a-65`: three Monthly/Yearly switches, one per plan card. A click
   shows the yearly price and slides the knob 12px right; a second click puts
   both back. Each card's prices carry their own modifier -- `.monthly` /
   `.yearly` on the first, `.professional-*` on the second, `.enterprise-*` on
   the third -- which is why the payload needed six lists for one control.

   main.js swaps `.is-yearly` on the card and shows the matching price; the
   knob's 300ms travel is here. */
.pricing-toggle-button {
  transition: transform 300ms ease, background-color 300ms ease;
}

.pricing-card-toggle[aria-checked="true"] .pricing-toggle-button {
  transform: translateX(12px);
  background-color: var(--_colors---color--black);
}

.pricing-card-toggle {
  cursor: pointer;
}

/* ================================================================== cart
   A localStorage basket in place of Webflow Ecommerce. The drawer's own
   layout is the design's (all 104 `.w-commerce-*` rules are kept and renamed
   `.wf-commerce-*`); what the runtime supplied was the open state and the
   overlay behind it. */
.cart-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1500;
  background-color: rgba(0, 0, 0, 0.5);
}

.cart-modal.is-open {
  display: flex;
  justify-content: flex-end;
}

.cart-modal .wf-commerce-commercecartcontainer {
  max-height: 100vh;
  overflow-y: auto;
}

/* The drawer's two state panels. Both are closed by a `hidden` attribute that
   transform.py puts back after clean_style strips the runtime's inline
   `display: none` -- three conversions in this series shipped an error box
   OPEN because nothing did. The `[hidden]` rule below covers them; these two
   names exist so a reader can find them. */
.cart-empty[hidden],
.cart-error-state[hidden] {
  display: none;
}

/* The line item template is inert markup until main.js clones it. */
template {
  display: none;
}

/* ================================================================= forms
   The demo forms. Webflow posted them to its own endpoint; main.js shows the
   success panel instead, and the two state boxes ship with `hidden` so
   neither can be on the page at load (an inline `display: none` that IX2 also
   writes is stripped by clean_style, and three conversions in a row shipped
   an error box open because nothing put the attribute back). */
[hidden] {
  display: none !important;
}

.contact-input:focus,
.wf-input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--_colors---color--black);
  outline-offset: 2px;
}