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

   Fonts: assets/fonts/fonts.css -- Inter Tight and Poppins, both
   self-hosted woff2. The export pulled them from Google at runtime
   through webfont.js, alongside a third family (Sacramento) that no
   rule on any page ever referenced. It also shipped HELVETICA NEUE as
   eight raw .otf files -- a licensed Linotype family that may not be
   redistributed in a template that is sold. Its whole visible surface
   was `.button.date-1`, four metadata labels in the blog sidebar, so
   Inter Tight stands in for it: swapped at the :root font variable, so
   every rule that asked for the old family gets the new one and
   nothing else in the sheet moves. Sacramento's property is dropped. */

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

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

.wf-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
}
.wf-container:before, .wf-container:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.wf-container:after {
  clear: both;
}@media screen and (max-width: 991px) {

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

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

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

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

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

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

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


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

   build_css drops every rule in Webflow's base sheet whose only purpose was
   to be driven by the runtime -- the nav overlay, the dropdown open states,
   the slider track, the background-video wrapper, the icon webfont. Some of
   those rules were ALSO carrying real geometry that the design sheet never
   restates, so it is transcribed here, re-keyed on this design's own class
   names.

   The position of this block in the stylesheet is load-bearing. It is
   emitted BETWEEN the framework and the design, which is where the rules it
   replaces used to sit -- so the design keeps overriding it exactly as it
   overrode them. Appending it after the design instead would silently win
   arguments the framework used to lose.

   Everything here was read off the export's own computed styles, not
   guessed: `probe_widget_css.py` prints, for each widget class, every rule
   the design already has on the same element, so what is written here is
   only what the design does NOT say. */


/* ---------------------------------------------------------------- button
   `<a>` -> `<button>` crosses the UA's form-control reset, and `font:
   inherit` does NOT restore letter-spacing, word-spacing or text-transform.
   Eleven elements make that crossing in this build -- both tab strips, the
   FAQ toggles, the nav dropdown toggle, the hamburger, the cart's open and
   close controls, and both lightbox triggers -- and on an earlier conversion
   the missing inherit cost 7px per tab.

   `:where()` keeps this at specificity 0, so every design class still wins. */
:where(button) {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}


/* ------------------------------------------------------------------- nav
   `.w-nav` gave the navbar its stacking context and, less obviously, a pair
   of clearfix pseudo-elements. Those are NOT decoration: `.navbar-wrapper`
   is `display: flex`, which makes `::before` and `::after` flex items with
   real height, and dropping them silently changes the row. They are not
   reproduced here -- the design's own flex layout does not need a clearfix
   and this build has no floats -- but the note stays, because an earlier
   conversion found the difference the hard way and it is worth knowing that
   their absence is deliberate rather than an oversight.

   `.navbar` itself is `position: absolute` in the design, so the only thing
   the framework was still providing is the stacking order that keeps the
   header above the hero it sits on top of. */
.navbar {
  z-index: 1000;
}

/* `.w-nav-brand { float: left }` and `.w-nav-menu { float: right }` are the
   1990s half of the widget. `.navbar-wrapper` is `justify-content:
   space-between`, so the floats never did anything here.

   `.w-nav-brand { padding-left: 10px }` is NOT transcribed, and the reason is
   a mistake worth recording: it lives inside `@media (max-width: 767px)` in
   the framework sheet, where the design's own `.navbar-brand
   { padding-left: 0 }` -- also below 768px, also later -- cancels it. So the
   export computes ZERO at every width. Copying it to the top level here put
   the logo 10px right of where the design puts it on all forty-seven pages,
   at every width above 767, and the parity harness could not see it: it
   measures section tops and heights, and a logo shifted sideways inside a
   flex row moves neither.

   What the brand DOES still need is the pair of declarations that make it not
   look like a link: it holds two <img>s and no text, so the user agent's blue
   underline is invisible until an image fails to load -- but it is still
   wrong, and it is what the export computes (`#333`, no underline). */
.navbar-brand {
  color: #333;
  text-decoration: none;
}

/* The collapse breakpoint. `data-collapse="medium"` is 991px, and the two
   rules the framework used to key on that attribute are the entire mobile
   nav switch: above it the menu is a row and the hamburger is hidden, below
   it the menu is a panel and the hamburger is the only way to reach it. */
.menu-button {
  display: none;
}@media screen and (max-width: 991px) {

  .menu-button {
    display: block;
  }

  /* The panel, and the box that clips it while it is off-screen.

     Webflow's runtime built this at load: it created a `.w-nav-overlay`
     <div> after the navbar, MOVED the menu into it, gave the overlay the
     height of the whole document and slid the menu down from -100%.
     rebuild_nav writes that wrapper into the markup instead, where
     `display: contents` makes it free at every width the menu is a row at
     (an ordinary <div> there would become the flex item in
     `.navbar-wrapper` instead of the <nav> it holds).

     The overlay is only as tall as the menu, so it never covers the page --
     the runtime's full-document height was an artefact of building the
     element in script. `padding-bottom` gives the panel's `box-shadow`
     somewhere to land inside the clip; the matching negative margin keeps
     the box the same size, and neither can move anything because the
     overlay is absolutely positioned. */
  .nav-overlay {
    position: absolute;
    inset: 100% 0 auto;
    overflow: hidden;
    padding-bottom: 8px;
    margin-bottom: -8px;
    visibility: hidden;
  }

  .nav-menu-wrapper {
    transform: translateY(-110%);
    transition: transform .4s ease;
  }

  [data-nav-open] .nav-overlay {
    visibility: visible;
  }

  [data-nav-open] .nav-menu-wrapper {
    transform: none;
  }}


/* `.navbar-brand { padding-left: 0 }` below 768px is NOT restated here: the
   design sheet already says exactly that, and it comes later. */


/* -------------------------------------------------------------- dropdown
   Two different widgets share `.w-dropdown`: the navbar's "Pages" panel and
   the FAQ accordion. Both lost the same three framework rules --
   `.w-dropdown { position: relative }`, `.w-dropdown-list { position:
   absolute; display: none }` and `.w-dropdown-list.w--open { display:
   block }` -- and they need opposite things back, because the design has
   already re-laid-out the FAQ one as a static block.

   The nav panel is the one that matters most: THE DESIGN PUTS ITS ENTIRE
   OPEN GEOMETRY ON `.w--open` -- `width: 33.625rem; padding: 1.5rem .5rem
   .5rem; left: -15rem`, and at 991px `width: auto; padding-top: 1rem;
   position: static`. build_css renames that to `.is-open` and keeps every
   declaration, so main.js MUST put `.is-open` on the LIST (not only on the
   toggle) for hover, focus and click alike. On a previous conversion it did
   not, and the panel opened 336px to the right of where the design puts it.

   The open/close motion is IX2's a-3 / a-49: height 0 -> auto and opacity
   0 -> 1 over 500ms, with the chevron rotating 180deg. `height: auto` is not
   an animatable value, so the panel becomes a one-row grid and the ROW is
   animated instead -- `minmax(0, 0fr)` to `minmax(0, 1fr)`, which is the
   spelling that actually collapses (a bare `0fr` is `minmax(auto, 0fr)` and
   the auto minimum is the content's own line box, which is how an earlier
   accordion stayed 16px open). */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-list {
  position: absolute;
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  min-width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows .5s ease, opacity .5s ease,
              visibility 0s linear .5s;
}

.nav-dropdown-list.is-open {
  grid-template-rows: minmax(0, 1fr);
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows .5s ease, opacity .5s ease,
              visibility 0s linear;
}

/* The FAQ panel's WIDTH, and only its width.
   `min-width: 100%` is load-bearing and not obvious: the design gives this
   element `max-width: 34.3125rem`, and the framework's
   `.w-dropdown-list { min-width: 100% }` OVERRIDES it -- a used width is
   clamped to the minimum last, so the panel is as wide as the row (628px at
   1440) rather than 549px. Dropped, the answers wrapped to more lines and the
   FAQ section measured 67px taller than the export's.

   Its OPEN/CLOSED state is NOT here, and that is the point of this note. The
   design sets `.faq-answer { display: block }` and this block is emitted
   BEFORE the design sheet, so a `display: grid` written here loses the tie on
   source order and the accordion ships permanently open. The collapse lives
   in components.hand.css, after the design. */
.faq-answer {
  min-width: 100%;
}

/* The heading rebuild_faq wraps around each toggle. `display: contents`
   keeps `.faq-list`'s own column layout seeing the button and the answer as
   its children, so inserting a semantic <h3> moves nothing.

   `font: inherit` is the other half of "moves nothing", and it is easy to
   miss: an <h3> is 36px, and the <button> inside it inherits that. Nothing in
   this accordion sizes itself in `em`, so no layout moved -- but the toggle
   was computing a 36px font where the export computes 16px, and the next
   thing added inside it would have inherited the wrong one. */
.faq-heading {
  display: contents;
  font: inherit;
}

/* The links inside the Pages panel.
   `.w-dropdown-btn, .w-dropdown-toggle, .w-dropdown-link` set
   `text-decoration: none; color: #222222`, and the design says NOTHING about
   either on `.nav-dropdown-link` -- it sets only weight, flex, margin,
   padding and a hover colour. Dropping the framework rule therefore handed
   every link in the panel back to the user agent: blue and underlined, on
   all forty-seven pages.
   Measured rather than assumed: the export computes `rgb(34, 34, 34)` and
   `text-decoration-line: none` on a non-current link, and this is the only
   link on the page that differed. */
.nav-dropdown-link {
  color: #222;
  text-decoration: none;
}


/* ---------------------------------------------------------------- slider
   `.w-slider` supplied the track's whole geometry and the design restates
   only the sizes, so the positioning half is transcribed. The three slides
   are laid on a flex track and main.js moves it, which is what
   `data-animation="slide"` on the export's widget asked for.

   `.w-slider-nav`, `.w-slider-arrow-left` and `.w-slider-arrow-right` are
   NOT here: all three are `display: none` in the design and rebuild_sliders
   removes the elements, so there is nothing left to position. */
.testimonials-slider {
  position: relative;
}

.testimonials-mask {
  position: relative;
  display: flex;
  z-index: 1;
}

.testimonials-slide {
  position: relative;
  flex: 0 0 100%;
  white-space: normal;
  text-align: left;
}


/* ------------------------------------------------------ background video
   `.w-background-video` positioned the <video> and made it cover its box;
   the design gives both wrappers their size and radius but nothing else, so
   the clip and the cover are transcribed.

   `object-fit` is stated directly. The framework shipped a `data-object-fit`
   attribute and a script that polyfilled it for browsers that have not
   needed one since 2017. */
/* Only `.home-video` needs the containing block. The design positions
   `.background-video` absolutely itself (`inset: 0` inside `.video-wrapper`),
   so naming it here declared a `position` the design overrides two hundred
   rules later -- a dead declaration, which audit_cascade.py now fails on.

   `overflow` and `color` are a different matter and BOTH wrappers need them:
   the framework's `.w-background-video { overflow: hidden; color: white }` is
   top-level and the design restates neither, so dropping them let the video
   escape its rounded corners and left the wrapper inheriting the page's dark
   text colour instead of white. */
.home-video {
  position: relative;
}

.home-video,
.background-video {
  overflow: hidden;
  color: #fff;
}

.home-video > video,
.background-video > video {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: 50% 50%;
}


/* ------------------------------------------------------------ CMS states
   `.w-dyn-empty` was a grey 10px box the runtime showed when a collection
   had no items. drop_empty_states removes the elements, so the rule has
   nothing to style and is not transcribed -- this note is here so the next
   person does not go looking for it. */

/* ======================================================================
   3. Greencore design
   ====================================================================== */
:root {
  --_colors---background-color--white: white;
  --font-family--inter-tight: "Inter Tight", sans-serif;
  --_colors---text-color--dark: #1d1d1d;
  --_typography---texts-font-sizes--default-paragraph: 1rem;
  --_typography---texts-line-height--default-paragraph: 140%;
  --font-weight--regular: 400;
  --_typography---texts-letter-spacing--default-paragraph: -.03rem;
  --_typography---heading-font-sizes--h1: 4.125rem;
  --_typography---heading-line-height--h1: 100%;
  --font-weight--medium: 500;
  --_typography---heading-letter-spacing--h1: -.12375rem;
  --_typography---heading-font-sizes--h2: 2.875rem;
  --_typography---heading-line-height--h2: 110%;
  --_typography---heading-letter-spacing--h2: -.08625rem;
  --_typography---heading-font-sizes--h3: 2.25rem;
  --_typography---heading-line-height--h3: 120%;
  --_typography---heading-letter-spacing--h3: -.0675rem;
  --_typography---heading-font-sizes--h4: 1.6875rem;
  --_typography---heading-line-height--h4: 120%;
  --_typography---heading-letter-spacing--h4: -.05063rem;
  --_typography---heading-font-sizes--h5: 1.25rem;
  --_typography---heading-line-height--h5: 120%;
  --font-weight--semi-bold: 600;
  --_typography---heading-letter-spacing--h5: -.0375rem;
  --_sizes---default-sizes--width: 100%;
  --_sizes---default-sizes--height: 100%;
  --_sizes---spacing--spacing-small: 1rem;
  --_sizes---spacing--spacing-regular: 1.5rem;
  --_sizes---spacing--spacing-medium: 1.25rem;
  --_sizes---container--large-container: 90rem;
  --_colors---text-color--transparent: #fff0;
  --_sizes---spacing--spacing-xsmall: .5rem;
  --_sizes---border-radius--radius-medium: 1.25rem;
  --_sizes---spacing--spacing-tiny: .25rem;
  --_sizes---border-radius--radius-tiny: .625rem;
  --_colors---text-color--rgba-143-143-143-0-10: #8f8f8f1a;
  --font-family--poppins: Poppins, sans-serif;
  --_typography---texts-font-sizes--paragraph-sm: .75rem;
  --_typography---texts-line-height--paragraph-sm: 110%;
  --_typography---texts-letter-spacing--paragraph-sm: -.0225rem;
  --_colors---text-color--rgba-143-143-143-0-50: #8f8f8f80;
  --_colors---background-color--primary: #96e362;
  --_sizes---spacing--spacing-massive: 5rem;
  --_sizes---spacing--spacing-normal: 2rem;
  --_typography---texts-font-sizes--paragraph-s: .875rem;
  --_typography---texts-line-height--paragraph-s: 120%;
  --_typography---texts-letter-spacing--paragraph-s: -.02625rem;
  --_sizes---spacing--spacing-xxsmall: .75rem;
  --_sizes---border-radius--radius-circle: 100%;
  --_sizes---border-radius--radius-large: 1.875rem;
  --_sizes---border-radius--radius-regular: 1.5rem;
  --_colors---border-color--soft-pearl: #f1f1f1;
  --_sizes---spacing--spacing-xjumbo: 4.25rem;
  --_sizes---spacing--spacing-big: 2.5rem;
  --_sizes---container--container: 85rem;
  --_sizes---spacing--spacing-jumbo: 3.75rem;
  --_sizes---spacing--spacing-large: 2.25rem;
  --_sizes---spacing--spacing-colossal: 6.5rem;
  --_typography---texts-font-sizes--paragraph-l: 1.25rem;
  --_typography---texts-line-height--paragraph-l: 133.333%;
  --_typography---texts-letter-spacing--paragraph-l: -.0375rem;
  --_colors---border-color--opacity-10-dark: #1d1d1d1a;
  --_typography---heading-font-sizes--h6: 1.125rem;
  --_typography---heading-line-height--h6: 120%;
  --_typography---heading-letter-spacing--h6: -.02rem;
  --_sizes---border-radius--radius-small: 1rem;
  --_colors---border-color--deep-ash: #404040;
  --_colors---text-color--void-black: #0e0e0e;
  --_sizes---border-radius--radius-xtiny: .75rem;
  --_colors---border-color--iron-void: #2d2d2d;
  --_colors---border-color--rgba-44-44-44-0-10: #2c2c2c1a;
  --_colors---border-color--opacity-30-dark: #1d1d1d4d;
  --_colors---background-color--red: #ec0b0b;
  --_colors---button-color--granite-gray: #666;
  --_sizes---border-radius--radius-soft: 3.75rem;
  --font-weight--thin: 100;
  --font-weight--extra-light: 200;
  --font-weight--light: 300;
  --font-weight--bold: 700;
  --font-weight--extra-bold: 800;
  --font-weight--heavy: 900;
  --_sizes---border-radius--radius-big: 2rem;
  --_sizes---border-radius--radius-pill: 5rem;
}
.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-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: 767px) {

  .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---background-color--white);
  font-family: var(--font-family--inter-tight);
  color: var(--_colors---text-color--dark);
  font-size: var(--_typography---texts-font-sizes--default-paragraph);
  line-height: var(--_typography---texts-line-height--default-paragraph);
  font-weight: var(--font-weight--regular);
  letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  --_typography---texts-font-sizes--default-paragraph: 1rem;
  --_typography---texts-line-height--default-paragraph: 140%;
  --_typography---texts-letter-spacing--default-paragraph: -.03rem;
  --_typography---heading-font-sizes--h1: 4.125rem;
  --_typography---heading-line-height--h1: 100%;
  --_typography---heading-letter-spacing--h1: -.12375rem;
  --_typography---heading-font-sizes--h2: 2.875rem;
  --_typography---heading-line-height--h2: 110%;
  --_typography---heading-letter-spacing--h2: -.08625rem;
  --_typography---heading-font-sizes--h3: 2.25rem;
  --_typography---heading-line-height--h3: 120%;
  --_typography---heading-letter-spacing--h3: -.0675rem;
  --_typography---heading-font-sizes--h4: 1.6875rem;
  --_typography---heading-line-height--h4: 120%;
  --_typography---heading-letter-spacing--h4: -.05063rem;
  --_typography---heading-font-sizes--h5: 1.25rem;
  --_typography---heading-line-height--h5: 120%;
  --_typography---heading-letter-spacing--h5: -.0375rem;
  --_typography---texts-font-sizes--paragraph-sm: .75rem;
  --_typography---texts-line-height--paragraph-sm: 110%;
  --_typography---texts-letter-spacing--paragraph-sm: -.0225rem;
  --_typography---texts-font-sizes--paragraph-s: .875rem;
  --_typography---texts-line-height--paragraph-s: 120%;
  --_typography---texts-letter-spacing--paragraph-s: -.02625rem;
  --_typography---texts-font-sizes--paragraph-l: 1.25rem;
  --_typography---texts-line-height--paragraph-l: 133.333%;
  --_typography---texts-letter-spacing--paragraph-l: -.0375rem;
  --_typography---heading-font-sizes--h6: 1.125rem;
  --_typography---heading-line-height--h6: 120%;
  --_typography---heading-letter-spacing--h6: -.02rem;
  --_sizes---default-sizes--width: 100%;
  --_sizes---default-sizes--height: 100%;
  --_sizes---spacing--spacing-small: 1rem;
  --_sizes---spacing--spacing-regular: 1.5rem;
  --_sizes---spacing--spacing-medium: 1.25rem;
  --_sizes---container--large-container: 90rem;
  --_sizes---spacing--spacing-xsmall: .5rem;
  --_sizes---border-radius--radius-medium: 1.25rem;
  --_sizes---spacing--spacing-tiny: .25rem;
  --_sizes---border-radius--radius-tiny: .625rem;
  --_sizes---spacing--spacing-massive: 5rem;
  --_sizes---spacing--spacing-normal: 2rem;
  --_sizes---spacing--spacing-xxsmall: .75rem;
  --_sizes---border-radius--radius-circle: 100%;
  --_sizes---border-radius--radius-large: 1.875rem;
  --_sizes---border-radius--radius-regular: 1.5rem;
  --_sizes---spacing--spacing-xjumbo: 4.25rem;
  --_sizes---spacing--spacing-big: 2.5rem;
  --_sizes---container--container: 85rem;
  --_sizes---spacing--spacing-jumbo: 3.75rem;
  --_sizes---spacing--spacing-large: 2.25rem;
  --_sizes---spacing--spacing-colossal: 6.5rem;
  --_sizes---border-radius--radius-small: 1rem;
  --_sizes---border-radius--radius-xtiny: .75rem;
  --_sizes---border-radius--radius-soft: 3.75rem;
  --_sizes---border-radius--radius-big: 2rem;
  --_sizes---border-radius--radius-pill: 5rem;
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  font-family: var(--font-family--inter-tight);
  color: var(--_colors---text-color--dark);
  font-size: var(--_typography---heading-font-sizes--h1);
  line-height: var(--_typography---heading-line-height--h1);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
  margin-top: 0;
  margin-bottom: 0;
}
h2:where(:not([class*="heading-scale-"])), :where(.heading-scale-2) {
  font-family: var(--font-family--inter-tight);
  font-size: var(--_typography---heading-font-sizes--h2);
  line-height: var(--_typography---heading-line-height--h2);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--_typography---heading-letter-spacing--h2);
  margin-top: 0;
  margin-bottom: 0;
}
h3:where(:not([class*="heading-scale-"])), :where(.heading-scale-3) {
  font-size: var(--_typography---heading-font-sizes--h3);
  line-height: var(--_typography---heading-line-height--h3);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--_typography---heading-letter-spacing--h3);
  margin-top: 0;
  margin-bottom: 0;
}
h4:where(:not([class*="heading-scale-"])), :where(.heading-scale-4) {
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
  margin-top: 0;
  margin-bottom: 0;
}
h5:where(:not([class*="heading-scale-"])), :where(.heading-scale-5) {
  font-size: var(--_typography---heading-font-sizes--h5);
  line-height: var(--_typography---heading-line-height--h5);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h5);
  margin-top: 0;
  margin-bottom: 0;
}
p {
  font-weight: var(--font-weight--medium);
  margin-top: 0;
  margin-bottom: 0;
}
ul {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}
img {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  max-height: var(--_sizes---default-sizes--height);
  max-width: var(--_sizes---default-sizes--width);
  object-fit: cover;
}
.page-wrapper {
  overflow: clip;
}
.utility-page-wrap {
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  padding-right: var(--_sizes---spacing--spacing-small);
  padding-left: var(--_sizes---spacing--spacing-small);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}
.utility-page-content {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 25rem;
  margin-bottom: 0;
  display: flex;
}
.utility-page-content.password {
  max-width: 25.625rem;
}
.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}
.navbar {
  left: 0%;
  top: var(--_sizes---spacing--spacing-medium);
  width: 100%;
  max-width: var(--_sizes---container--large-container);
  padding-right: var(--_sizes---spacing--spacing-small);
  padding-left: var(--_sizes---spacing--spacing-small);
  background-color: var(--_colors---text-color--transparent);
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  bottom: auto;
  right: 0%;
}
.navbar-brand {
  width: 100%;
  max-width: 8.7rem;
}
.navbar-wrapper {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.nav-buttons {
  justify-content: center;
  align-items: center;
  display: flex;
}
.nav-buttons.mob {
  display: none;
}
.nav-logo {
  object-fit: cover;
  width: 100%;
}
.nav-logo.black:where(.navbar-white), .nav-logo.white {
  display: none;
}
.nav-logo.white:where(.navbar-white) {
  display: block;
}
.nav-dropdown {
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}
.nav-menu-items {
  grid-column-gap: var(--_sizes---spacing--spacing-tiny);
  grid-row-gap: var(--_sizes---spacing--spacing-tiny);
  justify-content: center;
  align-items: center;
  display: flex;
}
.dropdown-arrow {
  width: .6rem;
  height: .6rem;
}
.nav-dropdown-list {
  border-radius: var(--_sizes---border-radius--radius-medium);
  background-color: var(--_colors---text-color--transparent);
  overflow: clip;
}
.nav-dropdown-list.is-open {
  width: 33.625rem;
  padding: 1.5rem .5rem .5rem;
  left: -15rem;
}
.nav-dropdown-toggle {
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  border-radius: var(--_sizes---border-radius--radius-tiny);
  background-color: var(--_colors---text-color--rgba-143-143-143-0-10);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  font-family: var(--font-family--poppins);
  color: var(--_colors---text-color--dark);
  font-size: var(--_typography---texts-font-sizes--paragraph-sm);
  line-height: var(--_typography---texts-line-height--paragraph-sm);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-sm);
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  padding: .88rem 1.25rem;
  transition: all .25s;
  display: flex;
}
.nav-dropdown-toggle:where(.navbar-white) {
  background-color: var(--_colors---text-color--rgba-143-143-143-0-50);
  color: var(--_colors---background-color--white);
}
.nav-dropdown-toggle:hover {
  background-color: var(--_colors---background-color--primary);
}
.nav-dropdown-toggle:hover:where(.navbar-white) {
  color: var(--_colors---text-color--dark);
}
.nav-dropdown-link {
  font-weight: var(--font-weight--medium);
  flex: none;
  margin: 0;
  padding: 0;
  transition: all .25s;
}
.nav-dropdown-link:where(.navbar-white) {
  background-color: var(--_colors---text-color--transparent);
}
.nav-dropdown-link:hover {
  color: var(--_colors---background-color--primary);
}
.nav-dropdown-link[aria-current="page"], .nav-dropdown-link.is-active, .nav-dropdown-link[aria-current="page"]:where(.navbar-white), .nav-dropdown-link.is-active:where(.navbar-white) {
  background-color: var(--_colors---text-color--transparent);
  color: var(--_colors---background-color--primary);
}
.nav-dropdown-items {
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.nav-link {
  border-radius: var(--_sizes---border-radius--radius-tiny);
  background-color: var(--_colors---text-color--rgba-143-143-143-0-10);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  font-family: var(--font-family--poppins);
  color: var(--_colors---text-color--dark);
  font-size: var(--_typography---texts-font-sizes--paragraph-sm);
  line-height: var(--_typography---texts-line-height--paragraph-sm);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-sm);
  text-transform: uppercase;
  padding: .88rem 1.25rem;
  text-decoration: none;
  transition: all .25s;
}
.nav-link:where(.navbar-white) {
  background-color: var(--_colors---text-color--rgba-143-143-143-0-50);
  color: var(--_colors---background-color--white);
}
.nav-link:hover {
  background-color: var(--_colors---background-color--primary);
}
.nav-link:hover:where(.navbar-white) {
  color: var(--_colors---text-color--dark);
}
.nav-link[aria-current="page"], .nav-link.is-active {
  background-color: var(--_colors---background-color--primary);
}
.nav-link[aria-current="page"]:where(.navbar-white), .nav-link.is-active:where(.navbar-white) {
  background-color: var(--_colors---background-color--primary);
  color: var(--_colors---text-color--dark);
}
.nav-dropdown-collection {
  grid-column-gap: var(--_sizes---spacing--spacing-massive);
  grid-row-gap: var(--_sizes---spacing--spacing-massive);
  border-radius: var(--_sizes---border-radius--radius-medium);
  background-color: var(--_colors---background-color--white);
  justify-content: flex-start;
  align-items: flex-start;
  padding: 2rem;
  display: flex;
  overflow: clip;
  box-shadow: 0 2px 5px #0003;
}
.primary-button {
  border-radius: var(--_sizes---border-radius--radius-tiny);
  background-color: var(--_colors---background-color--primary);
  justify-content: center;
  align-items: center;
  min-height: 3rem;
  padding: .84rem 1.25rem;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: clip;
}
.primary-button:where(.button-black) {
  background-color: var(--_colors---text-color--dark);
}
.primary-button:where(.button-white) {
  background-color: var(--_colors---background-color--white);
}
.primary-button:where(.button-black-v2) {
  background-color: var(--_colors---text-color--dark);
}
.hover-layer {
  z-index: 2;
  background-color: var(--_colors---text-color--dark);
  opacity: 0;
  width: 102%;
  height: 5rem;
  position: absolute;
  inset: auto 0% 0%;
}
.hover-layer:where(.button-black), .hover-layer:where(.button-white) {
  background-color: var(--_colors---background-color--primary);
}
.hover-layer:where(.button-white-v2), .hover-layer:where(.button-black-v2) {
  background-color: var(--_colors---background-color--white);
}
.button-text {
  z-index: 1;
  font-family: var(--font-family--poppins);
  color: var(--_colors---text-color--dark);
  font-size: var(--_typography---texts-font-sizes--paragraph-s);
  line-height: var(--_typography---texts-line-height--paragraph-s);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-s);
  text-transform: uppercase;
  position: relative;
}
.button-text._01:where(.button-black) {
  color: var(--_colors---background-color--white);
}
.button-text._01:where(.button-white) {
  color: var(--_colors---text-color--dark);
}
.button-text._01:where(.button-black-v2) {
  color: var(--_colors---background-color--white);
}
.button-text._02 {
  z-index: 3;
  color: var(--_colors---background-color--white);
  position: absolute;
  top: 3rem;
}
.button-text._02:where(.button-black), .button-text._02:where(.button-white), .button-text._02:where(.button-white-v2), .button-text._02:where(.button-black-v2) {
  color: var(--_colors---text-color--dark);
}
.nav-dropdown-header {
  margin-bottom: var(--_sizes---spacing--spacing-xxsmall);
  color: var(--_colors---text-color--dark);
  font-size: var(--_typography---texts-font-sizes--paragraph-s);
  line-height: var(--_typography---texts-line-height--paragraph-s);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-s);
  flex: none;
}
.cart-button {
  background-color: var(--_colors---text-color--transparent);
  color: var(--_colors---text-color--dark);
  padding: 0;
  position: relative;
}
.cart-button:where(.navbar-white) {
  color: var(--_colors---background-color--white);
}
.cart-icon {
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  display: flex;
}
.cart-quantity {
  border-radius: var(--_sizes---border-radius--radius-circle);
  background-color: var(--_colors---background-color--primary);
  width: .875rem;
  min-width: .875rem;
  height: .875rem;
  min-height: .875rem;
  color: var(--_colors---text-color--dark);
  font-size: var(--_typography---texts-font-sizes--paragraph-sm);
  line-height: var(--_typography---texts-line-height--paragraph-sm);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-sm);
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 1px 0 0;
  display: flex;
  position: absolute;
  inset: -5% -10% auto auto;
}
.cart-quantity:where(.navbar-white) {
  background-color: var(--_colors---background-color--white);
}
.nav-cart {
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0% 8rem 0% auto;
}
.section.home-hero {
  border-bottom-left-radius: var(--_sizes---border-radius--radius-large);
  border-bottom-right-radius: var(--_sizes---border-radius--radius-large);
  background-image: url('../images/Home-Hero-Banner.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
  overflow: clip;
}
.section.innovative {
  border-top-left-radius: var(--_sizes---border-radius--radius-large);
  border-top-right-radius: var(--_sizes---border-radius--radius-large);
  background-color: var(--_colors---border-color--soft-pearl);
}
.section.results {
  overflow: clip;
}
.section.project-card {
  width: 100%;
  height: 300vh;
}
.section.customize {
  border-radius: var(--_sizes---border-radius--radius-large);
  background-color: var(--_colors---border-color--soft-pearl);
}
.section.about-hero {
  border-bottom-left-radius: var(--_sizes---border-radius--radius-large);
  border-bottom-right-radius: var(--_sizes---border-radius--radius-large);
  background-image: url('../images/About-Hero-Banner.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
  overflow: clip;
}
.section.marquee {
  padding-top: var(--_sizes---spacing--spacing-xjumbo);
  padding-bottom: var(--_sizes---spacing--spacing-xjumbo);
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}
.section.ideas {
  width: var(--_sizes---default-sizes--width);
  height: 300vh;
}
.section.forward {
  background-color: var(--_colors---text-color--dark);
}
.section.business {
  padding-top: var(--_sizes---spacing--spacing-small);
  padding-bottom: var(--_sizes---spacing--spacing-massive);
  overflow: clip;
}
.section.team {
  background-color: var(--_colors---border-color--soft-pearl);
}
.section.service-hero {
  width: 100%;
}
.container {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  max-width: var(--_sizes---container--container);
  padding-right: var(--_sizes---spacing--spacing-small);
  padding-left: var(--_sizes---spacing--spacing-small);
  margin-left: auto;
  margin-right: auto;
}
.container.large-container {
  max-width: var(--_sizes---container--large-container);
}
.wrapper {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  padding-top: var(--_sizes---spacing--spacing-massive);
  padding-bottom: var(--_sizes---spacing--spacing-massive);
  grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
  grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.wrapper.styleguide {
  padding-top: 9.19rem;
  padding-bottom: var(--_sizes---spacing--spacing-big);
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
}
.wrapper.styleguide-details {
  padding-top: var(--_sizes---spacing--spacing-large);
  grid-column-gap: var(--_sizes---spacing--spacing-colossal);
  grid-row-gap: var(--_sizes---spacing--spacing-colossal);
}
.wrapper.footer {
  padding-bottom: var(--_sizes---spacing--spacing-big);
  grid-column-gap: var(--_sizes---spacing--spacing-massive);
  grid-row-gap: var(--_sizes---spacing--spacing-massive);
}
.wrapper.home-hero {
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-end;
}
.wrapper.mission {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.wrapper.innovative {
  grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
  grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
}
.wrapper.results {
  height: 400vh;
  display: block;
}
.wrapper.projects {
  padding: var(--_sizes---spacing--spacing-normal);
  justify-content: space-between;
  align-items: stretch;
  position: absolute;
  inset: 0%;
}
.wrapper.customize-wrap {
  padding-bottom: 10rem;
}
.wrapper.pricing {
  padding-bottom: var(--_sizes---spacing--spacing-big);
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
}
.wrapper.testimonials {
  max-width: 68.125rem;
  padding-bottom: var(--_sizes---spacing--spacing-big);
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  justify-content: center;
  align-items: flex-start;
  margin-left: auto;
  margin-right: auto;
}
.wrapper.about-hero {
  flex-flow: row;
  justify-content: center;
  align-items: flex-end;
}
.wrapper.our-mission {
  grid-column-gap: var(--_sizes---spacing--spacing-xjumbo);
  grid-row-gap: var(--_sizes---spacing--spacing-xjumbo);
  border-bottom: 1px solid #1d1d1d1a;
  grid-template-rows: auto;
  grid-template-columns: .45fr 1fr;
  grid-auto-columns: 1fr;
  place-items: start stretch;
  display: grid;
}
.wrapper.ideas {
  justify-content: space-between;
}
.wrapper.business {
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  height: 100vh;
  position: sticky;
  top: 0;
}
.wrapper.service-hero {
  padding-top: 10rem;
  padding-bottom: var(--_sizes---spacing--spacing-small);
  flex-flow: row;
  justify-content: center;
  align-items: flex-end;
}
.wrapper.services {
  max-width: 68.125rem;
  padding-bottom: var(--_sizes---spacing--spacing-normal);
}
.wrapper.pricing-hero {
  padding-top: 10rem;
  padding-bottom: var(--_sizes---spacing--spacing-normal);
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
}
.wrapper.compare-pricing {
  padding-bottom: var(--_sizes---spacing--spacing-normal);
}
.wrapper.pricing-details {
  max-width: 57.5rem;
  padding-top: 10rem;
}
.wrapper.project {
  padding-top: 10rem;
}
.wrapper.project-details {
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  justify-content: center;
  align-items: flex-start;
  padding-top: 10rem;
}
.wrapper.blog {
  padding-top: 10rem;
}
.wrapper.blog-details {
  padding-top: 10rem;
  padding-bottom: var(--_sizes---spacing--spacing-jumbo);
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  justify-content: center;
  align-items: flex-start;
}
.wrapper.related-blogs {
  padding-top: var(--_sizes---spacing--spacing-normal);
}
.wrapper.product {
  grid-column-gap: var(--_sizes---spacing--spacing-massive);
  grid-row-gap: var(--_sizes---spacing--spacing-massive);
  grid-template-rows: auto;
  grid-template-columns: 1fr .75fr;
  grid-auto-columns: 1fr;
  padding-top: 10rem;
  display: grid;
}
.wrapper.contact {
  padding-top: 10rem;
  padding-bottom: var(--_sizes---spacing--spacing-normal);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: start stretch;
  display: grid;
}
.wrapper.location {
  padding-bottom: var(--_sizes---spacing--spacing-normal);
}
.wrapper.license-details {
  padding-top: var(--_sizes---spacing--spacing-large);
}
.wrapper.changelog {
  max-width: 43.75rem;
  padding-top: var(--_sizes---spacing--spacing-large);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
}
.wrapper.changelog-hero {
  padding-top: 9.19rem;
  padding-bottom: var(--_sizes---spacing--spacing-regular);
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
}
.styleguide-title {
  text-align: center;
}
.publish-date.license {
  width: var(--_sizes---default-sizes--width);
  text-align: center;
  max-width: 35rem;
}
.styleguide-content {
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  grid-template-rows: auto;
  grid-template-columns: .6fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  width: 100%;
  display: grid;
}
.title {
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
}
.title.white {
  width: 100%;
  max-width: 12.75rem;
  color: var(--_colors---background-color--white);
}
.title.white-3 {
  z-index: 3;
  width: 100%;
  max-width: 12.75rem;
  color: var(--_colors---background-color--white);
  position: relative;
}
.title.price {
  color: var(--_colors---background-color--white);
}
.title.project-year {
  color: var(--_colors---text-color--dark);
}
.title.email {
  color: var(--_colors---text-color--dark);
  text-decoration: none;
  transition: all .25s;
}
.title.email:hover {
  color: var(--_colors---background-color--primary);
}
.typography-details {
  grid-column-gap: var(--_sizes---spacing--spacing-normal);
  grid-row-gap: var(--_sizes---spacing--spacing-normal);
  flex-flow: column;
  display: flex;
}
.typography-block {
  padding-bottom: var(--_sizes---spacing--spacing-regular);
  border-bottom: 1px solid var(--_colors---border-color--opacity-10-dark);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.button {
  font-family: var(--font-family--poppins);
  font-size: var(--_typography---texts-font-sizes--paragraph-s);
  line-height: var(--_typography---texts-line-height--paragraph-s);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-s);
  text-transform: uppercase;
}
.button.mission {
  color: var(--_colors---text-color--dark);
  text-decoration: none;
  transition: all .25s;
}
.button.mission:hover {
  color: var(--_colors---background-color--primary);
}
.button.date {
  color: var(--_colors---text-color--dark);
}
.button.date-1 {
  font-family: var(--font-family--inter-tight);
  color: var(--_colors---text-color--dark);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: none;
}
.title-block {
  top: var(--_sizes---spacing--spacing-regular);
  position: sticky;
}
.colors-details {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.color-box {
  width: 100%;
  height: 11.25rem;
  padding: var(--_sizes---spacing--spacing-big);
  border-radius: var(--_sizes---border-radius--radius-medium);
  background-color: var(--_colors---background-color--primary);
  justify-content: center;
  align-items: center;
  display: flex;
}
.color-box._02 {
  border: 1px solid var(--_colors---border-color--soft-pearl);
  background-color: var(--_colors---background-color--white);
}
.color-box._03 {
  background-color: var(--_colors---text-color--dark);
}
.color-box._04 {
  background-color: var(--_colors---border-color--soft-pearl);
}
.color-code {
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
}
.color-code._03 {
  color: var(--_colors---background-color--white);
}
.buttons-details {
  width: 100%;
  max-width: 29.5rem;
  padding: var(--_sizes---spacing--spacing-medium);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  border-radius: var(--_sizes---spacing--spacing-medium);
  background-color: var(--_colors---border-color--soft-pearl);
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  display: flex;
}
.footer {
  border-top-left-radius: var(--_sizes---border-radius--radius-large);
  border-top-right-radius: var(--_sizes---border-radius--radius-large);
  background-color: var(--_colors---text-color--dark);
}
.cta-wrapper {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 33.75rem;
  margin-left: 0;
  margin-right: auto;
  display: flex;
}
.footer-line {
  width: 100%;
}
.cta-title {
  color: var(--_colors---background-color--white);
}
.cta-para {
  width: 100%;
  max-width: 29.375rem;
  margin-top: var(--_sizes---spacing--spacing-medium);
  margin-bottom: var(--_sizes---spacing--spacing-big);
  color: var(--_colors---background-color--white);
}
.footer-wrapper {
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  flex-flow: column;
  width: 100%;
  display: flex;
}
.footer-contents {
  padding-bottom: var(--_sizes---spacing--spacing-massive);
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  border-bottom: 1px solid #ffffff1a;
  grid-template-rows: auto;
  grid-template-columns: .5fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}
.footer-left {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 21.875rem;
  display: flex;
}
.footer-logo {
  width: 100%;
  max-width: 8.7rem;
}
.logo-icon {
  object-fit: cover;
  width: 100%;
}
.footer-para {
  width: 100%;
  color: var(--_colors---background-color--white);
}
.footer-right {
  grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
  grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  max-width: 40rem;
  margin-left: auto;
  margin-right: 0;
  display: grid;
}
.footer-links {
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.page-header {
  margin-bottom: var(--_sizes---spacing--spacing-xxsmall);
  opacity: .5;
  color: var(--_colors---background-color--white);
  font-weight: var(--font-weight--medium);
}
.page-link {
  color: var(--_colors---background-color--white);
  font-weight: var(--font-weight--medium);
  text-decoration: none;
  transition: all .25s;
}
.page-link:hover {
  margin-left: var(--_sizes---spacing--spacing-tiny);
  color: var(--_colors---background-color--primary);
}
.page-link[aria-current="page"], .page-link.is-active {
  color: var(--_colors---background-color--primary);
}
.copyright-text {
  color: var(--_colors---background-color--white);
  text-align: center;
}
.credit-link {
  color: var(--_colors---background-color--white);
  transition: all .25s;
}
.credit-link:hover {
  color: var(--_colors---background-color--primary);
}
.building-contents {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 33.75rem;
  display: flex;
}
.white-text {
  color: var(--_colors---background-color--white);
}
.white-text.sustainable {
  width: 100%;
  max-width: 29.375rem;
}
.white-text.value-title {
  text-align: center;
}
.white-text.value-text {
  text-align: center;
  width: 100%;
  max-width: 28.75rem;
}
.video-wrapper {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  border-radius: var(--_sizes---border-radius--radius-regular);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: #5c5c5c80;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  max-width: 26.6875rem;
  padding: .62rem;
  display: grid;
}
.home-video {
  z-index: 1;
  width: var(--_sizes---default-sizes--width);
  border-radius: var(--_sizes---border-radius--radius-medium);
  height: 11rem;
}
.video-detail {
  flex-flow: column;
  justify-content: space-around;
  align-items: flex-start;
  display: flex;
}
.home-lightbox {
  border: 1px solid var(--_colors---border-color--deep-ash);
  border-radius: var(--_sizes---border-radius--radius-tiny);
  font-family: var(--font-family--poppins);
  color: var(--_colors---background-color--white);
  font-size: var(--_typography---texts-font-sizes--paragraph-s);
  line-height: var(--_typography---texts-line-height--paragraph-s);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-s);
  justify-content: center;
  align-items: center;
  padding: .84rem 1.25rem;
  text-decoration: none;
  display: flex;
}
.lightbox-texts {
  height: 1.05rem;
  position: relative;
  overflow: clip;
}
.mission-contents {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  width: 100%;
  max-width: 40.5rem;
  display: flex;
  position: relative;
}
.mission-para {
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
}
.mission-hover {
  z-index: 1;
  border-radius: var(--_sizes---border-radius--radius-tiny);
  padding: 0;
  text-decoration: underline;
  transition: all .25s;
}
.mission-hover:hover {
  background-color: var(--_colors---text-color--dark);
  color: var(--_colors---background-color--white);
  padding: .5rem;
}
.mission-card {
  width: 12.75rem;
  padding-top: .62rem;
  padding-right: .62rem;
  padding-bottom: var(--_sizes---spacing--spacing-small);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  border-top-left-radius: var(--_sizes---border-radius--radius-tiny);
  border-top-right-radius: var(--_sizes---border-radius--radius-tiny);
  border-bottom-left-radius: var(--_sizes---border-radius--radius-tiny);
  border-bottom-right-radius: var(--_sizes---border-radius--radius-tiny);
  background-color: var(--_colors---background-color--white);
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  margin-left: auto;
  margin-right: auto;
  padding-left: .62rem;
  display: flex;
  position: absolute;
  inset: 2.5rem 0% auto;
  transform: scale(0);
  box-shadow: 0 0 4px #00000026, 0 4px 10px #0000000d;
}
.mission-card._02 {
  top: 9.5rem;
  transform: scale(0);
}
.mission-card._03 {
  top: 9.5rem;
  right: -23rem;
  transform: scale(0);
}
.mission-card._04 {
  top: 11.5rem;
  left: -26rem;
  transform: scale(0);
}
.mission-card._05 {
  top: 0;
  left: -26rem;
  transform: scale(0);
}
.mission-card._06 {
  top: 7.5rem;
  right: 8rem;
  transform: scale(0);
}
.oveflow {
  border-radius: var(--_sizes---border-radius--radius-tiny);
  width: 100%;
  overflow: clip;
}
.card-detail {
  padding-right: var(--_sizes---spacing--spacing-xsmall);
  padding-left: var(--_sizes---spacing--spacing-xsmall);
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.small-paragraph {
  font-size: var(--_typography---texts-font-sizes--paragraph-s);
  line-height: var(--_typography---texts-line-height--paragraph-s);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-s);
}
.header-top {
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.header-top.customize {
  width: var(--_sizes---default-sizes--width);
  justify-content: center;
  align-items: center;
  max-width: 33.75rem;
}
.header-top.pricing {
  width: var(--_sizes---default-sizes--width);
  justify-content: center;
  align-items: center;
  max-width: 23.125rem;
}
.header-top.faq {
  width: var(--_sizes---default-sizes--width);
  justify-content: center;
  align-items: center;
  max-width: 33.75rem;
}
.header-top.compare {
  width: var(--_sizes---default-sizes--width);
  justify-content: center;
  align-items: center;
  max-width: 30rem;
}
.section-title {
  text-align: center;
}
.section-title.result {
  width: 100%;
  max-width: 30.25rem;
}
.section-desp {
  text-align: center;
}
.innovative-contents {
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}
.innovative-cards {
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  grid-template-rows: auto;
  grid-template-columns: .75fr 1fr .75fr;
  grid-auto-columns: 1fr;
  width: 100%;
  max-width: 66.125rem;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}
.innovative-cards._02 {
  grid-template-columns: 1fr .75fr .75fr;
}
.innovative-card {
  width: 100%;
  height: 100%;
  padding: var(--_sizes---spacing--spacing-regular);
  grid-column-gap: 4.81rem;
  grid-row-gap: 4.81rem;
  border-radius: var(--_sizes---border-radius--radius-medium);
  background-color: var(--_colors---background-color--white);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
  overflow: clip;
}
.innovative-card._02 {
  background-image: url('../images/Innovative-Img.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.innovative-card.desk-2 {
  position: relative;
}
.innovative-card.tab-2 {
  display: none;
  position: relative;
}
.innovative-flex {
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.innovative-box {
  border-radius: var(--_sizes---border-radius--radius-circle);
  background-color: var(--_colors---border-color--soft-pearl);
  justify-content: center;
  align-items: center;
  width: 3.3125rem;
  min-width: 3.3125rem;
  height: 3.3125rem;
  min-height: 3.3125rem;
  display: flex;
}
.innovative-icon {
  width: 1.375rem;
  height: auto;
}
.innovative-overlay {
  background-image: linear-gradient(0deg, #000c 28.74%, #0000);
  width: 100%;
  height: 7.5rem;
  position: absolute;
  inset: auto 0% 0%;
}
.innovative-overlay._02 {
  z-index: 2;
  background-image: linear-gradient(0deg, #0000004d, #0000004d);
  height: 100%;
  inset: 0%;
}
.innovative-overlay._03 {
  z-index: 2;
}
.innovative-counters {
  z-index: 1;
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
  position: relative;
}
.innovative-counters._02 {
  z-index: 3;
}
.empowering-counter-flex {
  display: flex;
}
.empowering-counter-wrap {
  height: 2.7rem;
  overflow: clip;
}
.empowering-counter-wrap.mission {
  height: 4.125rem;
}
.empowering-counter-text {
  color: var(--_colors---background-color--white);
  font-size: var(--_typography---heading-font-sizes--h3);
  line-height: var(--_typography---heading-line-height--h3);
  letter-spacing: var(--_typography---heading-letter-spacing--h3);
}
.empowering-counter-text.mission {
  color: var(--_colors---text-color--void-black);
  font-size: var(--_typography---heading-font-sizes--h1);
  line-height: var(--_typography---heading-line-height--h1);
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
  padding-right: .1rem;
}
.counter-block {
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}
.duration {
  opacity: .5;
  color: var(--_colors---background-color--white);
  text-transform: capitalize;
  margin-bottom: .25rem;
}
.background-video {
  z-index: 1;
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  position: absolute;
  inset: 0%;
}
.results-content {
  width: 100%;
  height: 100vh;
  padding-top: var(--_sizes---spacing--spacing-big);
  grid-column-gap: var(--_sizes---spacing--spacing-colossal);
  grid-row-gap: var(--_sizes---spacing--spacing-colossal);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: sticky;
  top: 0;
}
.results-cards {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 37.5rem;
  display: flex;
}
.service-link {
  width: 100%;
  padding: var(--_sizes---spacing--spacing-big);
  grid-column-gap: var(--_sizes---spacing--spacing-xjumbo);
  grid-row-gap: var(--_sizes---spacing--spacing-xjumbo);
  border-radius: var(--_sizes---border-radius--radius-medium);
  background-color: var(--_colors---border-color--soft-pearl);
  flex-flow: column;
  text-decoration: none;
  display: flex;
}
.service-top {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.service-num {
  color: var(--_colors---text-color--dark);
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
}
.service-arrow {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  color: var(--_colors---text-color--dark);
  justify-content: center;
  align-items: center;
  display: flex;
}
.service-arrow._02 {
  position: absolute;
  inset: auto auto -100% -100%;
}
.service-name {
  width: 100%;
  max-width: 17rem;
  color: var(--_colors---text-color--dark);
  font-size: var(--_typography---heading-font-sizes--h3);
  line-height: var(--_typography---heading-line-height--h3);
  letter-spacing: var(--_typography---heading-letter-spacing--h3);
}
.service-box {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  position: relative;
  overflow: clip;
}
.results-desp {
  width: 100%;
  max-width: 57.875rem;
  font-size: var(--_typography---heading-font-sizes--h2);
  line-height: var(--_typography---heading-line-height--h2);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--h2);
}
.result-img {
  border-radius: var(--_sizes---border-radius--radius-medium);
  object-fit: cover;
  width: 9.375rem;
  height: auto;
  position: absolute;
  inset: 10rem auto auto 0%;
}
.result-img._02 {
  inset: auto auto 1rem 0%;
}
.result-img._03 {
  inset: 10rem 0% auto auto;
}
.result-img._04 {
  inset: auto 0% 1rem auto;
}
.projects-sticky {
  width: var(--_sizes---default-sizes--width);
  height: 100vh;
  position: sticky;
  top: 0;
}
.projects-images {
  width: var(--_sizes---default-sizes--width);
  height: 100vh;
  position: relative;
}
.project-image {
  object-fit: cover;
}
.project-image._01 {
  opacity: 1;
}
.project-image._02, .project-image._03, .project-image._04 {
  opacity: 0;
  position: absolute;
  inset: 0%;
}
.projects-list {
  grid-column-gap: var(--_sizes---spacing--spacing-tiny);
  grid-row-gap: var(--_sizes---spacing--spacing-tiny);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.project-list {
  opacity: .2;
  color: var(--_colors---background-color--white);
  font-size: var(--_typography---heading-font-sizes--h3);
  line-height: var(--_typography---heading-line-height--h3);
  letter-spacing: var(--_typography---heading-letter-spacing--h3);
}
.project-list._01, .project-list.list-1 {
  opacity: 1;
}
.projects-bottom {
  width: var(--_sizes---default-sizes--width);
  max-width: 26.6875rem;
  padding: var(--_sizes---spacing--spacing-medium);
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  border-radius: var(--_sizes---border-radius--radius-medium);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: #5c5c5c80;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  margin-left: auto;
  margin-right: 0;
  display: flex;
}
.promote-desp {
  color: var(--_colors---background-color--white);
}
.project-tab {
  display: none;
}
.impact-cards {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-normal);
  grid-row-gap: var(--_sizes---spacing--spacing-normal);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  max-width: 68.125rem;
  display: grid;
}
.impact-card {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  flex-flow: column;
  display: flex;
}
.overflow-hidden {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  overflow: clip;
}
.overflow-hidden.impact {
  border-radius: var(--_sizes---border-radius--radius-medium);
}
.impact-detail {
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.impact-text {
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
}
.customize-tabs {
  width: var(--_sizes---default-sizes--width);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.tabs-menu {
  margin-bottom: var(--_sizes---spacing--spacing-massive);
  grid-column-gap: .31rem;
  grid-row-gap: .31rem;
  border-radius: var(--_sizes---border-radius--radius-tiny);
  background-color: var(--_colors---background-color--white);
  justify-content: center;
  align-items: center;
  padding: .31rem;
  display: flex;
}
.customize-tabs-content {
  width: var(--_sizes---default-sizes--width);
  overflow: visible;
}
.customize-bottom {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  flex-flow: column;
  display: flex;
}
.customize-title {
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
}
.tab-link {
  padding: .87rem var(--_sizes---spacing--spacing-medium);
  border-radius: var(--_sizes---border-radius--radius-tiny);
  background-color: var(--_colors---text-color--transparent);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  flex: none;
}
.tab-link[aria-current="page"], .tab-link.is-active {
  background-color: var(--_colors---background-color--primary);
}
.customize {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  grid-template-rows: auto;
  grid-template-columns: .75fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
  position: relative;
}
.customize-left {
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.customize-flex {
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.customize-image {
  max-width: 65rem;
  height: auto;
  max-height: none;
  position: absolute;
  inset: -9rem -10rem 0% auto;
}
.customize-image._02 {
  max-width: 31rem;
  top: -11.5rem;
  right: 8rem;
}
.customize-image._03 {
  max-width: 41rem;
  top: -8rem;
  right: 2rem;
}
.customize-right {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  max-width: 45rem;
}
.pricing-tabs {
  width: var(--_sizes---default-sizes--width);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 75rem;
  display: flex;
}
.pricing-tabs-menu {
  margin-bottom: var(--_sizes---spacing--spacing-big);
  grid-column-gap: var(--_sizes---spacing--spacing-tiny);
  grid-row-gap: var(--_sizes---spacing--spacing-tiny);
  border-radius: var(--_sizes---border-radius--radius-tiny);
  background-color: var(--_colors---border-color--soft-pearl);
  justify-content: center;
  align-items: center;
  padding: .31rem;
  display: flex;
}
.pricing-tabs-content {
  width: var(--_sizes---default-sizes--width);
  overflow: visible;
}
.pricing-tab-link {
  padding: .44rem var(--_sizes---spacing--spacing-small);
  background-color: var(--_colors---text-color--transparent);
  font-family: var(--font-family--poppins);
  font-size: var(--_typography---texts-font-sizes--paragraph-s);
  line-height: var(--_typography---texts-line-height--paragraph-s);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-s);
  text-transform: uppercase;
  border-radius: .375rem;
  justify-content: center;
  align-items: center;
  display: flex;
}
.pricing-tab-link[aria-current="page"], .pricing-tab-link.is-active {
  background-color: var(--_colors---background-color--primary);
}
.collection-item-pricing {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
}
.pricing-card {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  border-radius: var(--_sizes---border-radius--radius-medium);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1.88rem;
  display: flex;
}
.pricing-box {
  border-radius: var(--_sizes---border-radius--radius-circle);
  background-color: var(--_colors---background-color--white);
  justify-content: center;
  align-items: center;
  width: 3.125rem;
  height: 3.125rem;
  display: flex;
}
.pricing-icon {
  width: 1.5rem;
  height: 1.5rem;
}
.pricing-top {
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.pricing-name {
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
}
.pricing-block {
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.pricing-price {
  font-size: var(--_typography---heading-font-sizes--h2);
  line-height: var(--_typography---heading-line-height--h2);
  letter-spacing: var(--_typography---heading-letter-spacing--h2);
}
.pricing-button {
  width: var(--_sizes---default-sizes--width);
  justify-content: flex-start;
  align-items: center;
}
.features-list h3:where(:not([class*="heading-scale-"])), .features-list :where(.heading-scale-3) {
  margin-bottom: var(--_sizes---spacing--spacing-xxsmall);
  font-size: var(--_typography---heading-font-sizes--h5);
  line-height: var(--_typography---heading-line-height--h5);
  letter-spacing: var(--_typography---heading-letter-spacing--h5);
}
.features-list li {
  background-image: url('../images/Checkmark-3.webp');
  background-position: 0%;
  background-repeat: no-repeat;
  background-size: 1rem;
  padding-left: 1.5rem;
}
.features-list ul {
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  font-weight: var(--font-weight--medium);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
}
.pricing-grid {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.white-list h3:where(:not([class*="heading-scale-"])), .white-list :where(.heading-scale-3) {
  margin-bottom: var(--_sizes---spacing--spacing-xxsmall);
  font-size: var(--_typography---heading-font-sizes--h5);
  line-height: var(--_typography---heading-line-height--h5);
  letter-spacing: var(--_typography---heading-letter-spacing--h5);
}
.white-list li {
  background-image: url('../images/Checkmark-3-1.webp');
  background-position: 0%;
  background-repeat: no-repeat;
  background-size: 1rem;
  padding-left: 1.5rem;
}
.white-list ul {
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  font-weight: var(--font-weight--medium);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
}
.testimonials-slider {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  background-color: var(--_colors---text-color--transparent);
  justify-content: flex-start;
  align-items: center;
  max-width: 53.125rem;
  padding: 0;
}
.testimonial-slide-nav {
  display: none;
}
.testimonials-mask {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  padding: 0;
  overflow: clip;
}
.testimonials-slide {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  padding: 0;
}
.testimonial-content {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.testimonial-desp {
  font-size: var(--_typography---heading-font-sizes--h2);
  line-height: var(--_typography---heading-line-height--h2);
  letter-spacing: var(--_typography---heading-letter-spacing--h2);
}
.left-arrow, .right-arrow {
  display: none;
}
.testimonial-bottom {
  width: var(--_sizes---default-sizes--width);
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 12rem;
  display: flex;
}
.testimonial-left {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 26.875rem;
  display: flex;
}
.testimonial-right {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  max-width: 30rem;
  display: grid;
}
.testimonial-card {
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  flex-flow: column;
  display: flex;
}
.testimonial-img {
  border-radius: var(--_sizes---border-radius--radius-medium);
}
.testimonial-detail {
  grid-column-gap: var(--_sizes---spacing--spacing-tiny);
  grid-row-gap: var(--_sizes---spacing--spacing-tiny);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.testimonial-detail._02, .testimonial-detail._03 {
  opacity: 0;
  display: none;
}
.testimonial-author {
  font-size: var(--_typography---heading-font-sizes--h6);
  line-height: var(--_typography---heading-line-height--h6);
  letter-spacing: var(--_typography---heading-letter-spacing--h6);
}
.testimonial-desig {
  font-size: var(--_typography---texts-font-sizes--paragraph-sm);
  line-height: var(--_typography---texts-line-height--paragraph-sm);
  font-weight: var(--font-weight--regular);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-sm);
}
.faq-lists {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  flex-flow: column;
  max-width: 41.75rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.faq-list {
  width: var(--_sizes---default-sizes--width);
  padding: var(--_sizes---spacing--spacing-medium);
  border-radius: var(--_sizes---spacing--spacing-small);
  background-color: var(--_colors---border-color--soft-pearl);
  cursor: pointer;
  flex-flow: column;
  display: flex;
}
.faq-question {
  width: var(--_sizes---default-sizes--width);
  justify-content: space-between;
  align-items: center;
  padding: 0;
  display: flex;
}
.faq-ques {
  font-size: var(--_typography---heading-font-sizes--h5);
  line-height: var(--_typography---heading-line-height--h5);
  letter-spacing: var(--_typography---heading-letter-spacing--h5);
  white-space: pre-wrap;
}
.faq-answer {
  background-color: var(--_colors---text-color--transparent);
  width: 100%;
  max-width: 34.3125rem;
  display: block;
  position: static;
  overflow: clip;
}
.faq-para {
  padding-top: 16px;
}
.faq-arrow {
  width: 1.375rem;
  height: 1.375rem;
  max-height: var(--_sizes---default-sizes--height);
  max-width: var(--_sizes---default-sizes--width);
  justify-content: center;
  align-items: center;
  min-width: 1.375rem;
  min-height: 1.375rem;
  display: flex;
}
.value-contents {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 28.75rem;
  display: flex;
}
.value-contents.service {
  max-width: 37.5rem;
}
.value-contents.pricing {
  max-width: 37rem;
}
.value-contents.detail-hero {
  max-width: none;
}
.value-contents.blog {
  max-width: 37rem;
}
.value-contents.contact {
  top: var(--_sizes---spacing--spacing-regular);
  grid-column-gap: var(--_sizes---spacing--spacing-massive);
  grid-row-gap: var(--_sizes---spacing--spacing-massive);
  justify-content: center;
  align-items: flex-start;
  max-width: 29.375rem;
  position: sticky;
}
.value-buttons {
  margin-top: var(--_sizes---spacing--spacing-xxsmall);
  justify-content: center;
  align-items: center;
  display: flex;
}
.mission-left {
  top: var(--_sizes---spacing--spacing-regular);
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: sticky;
}
.mission-right {
  grid-column-gap: var(--_sizes---spacing--spacing-colossal);
  grid-row-gap: var(--_sizes---spacing--spacing-colossal);
  flex-flow: column;
  display: flex;
}
.mission-counters {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.mission-flex {
  grid-column-gap: var(--_sizes---spacing--spacing-tiny);
  grid-row-gap: var(--_sizes---spacing--spacing-tiny);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.marquee-items {
  flex: none;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.marquee-img {
  width: 7.875rem;
  margin-right: var(--_sizes---spacing--spacing-big);
}
.marquee-img._02 {
  width: 7.4375rem;
}
.marquee-img._03 {
  width: 8rem;
}
.marquee-img._04 {
  width: 9.3125rem;
}
.marquee-img._05 {
  width: 8.3125rem;
}
.marquee-img._06 {
  width: 7.3125rem;
}
.marquee-img._07 {
  width: 8.4375rem;
}
.marquee-img._08 {
  width: 8.0625rem;
}
.marquee-img._09 {
  width: 7.4375rem;
}
.marquee-img._10 {
  width: 6.5rem;
}
.left-gradient {
  background-image: linear-gradient(270deg, var(--_colors---text-color--transparent), var(--_colors---background-color--white));
  width: 42.8125rem;
  position: absolute;
  inset: 0% auto 0% 0%;
}
.right-gradient {
  background-image: linear-gradient(270deg, var(--_colors---background-color--white), var(--_colors---text-color--transparent));
  width: 42.8125rem;
  position: absolute;
  inset: 0% 0% 0% auto;
}
.ideas-sticky {
  width: var(--_sizes---default-sizes--width);
  background-image: url('../images/Ideas-Banner.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  position: sticky;
  top: 0;
}
.ideas-title {
  width: var(--_sizes---default-sizes--width);
  max-width: 38.75rem;
  color: var(--_colors---background-color--white);
  font-size: var(--_typography---heading-font-sizes--h1);
  line-height: var(--_typography---heading-line-height--h1);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
}
.ideas-cards {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex: none;
  justify-content: flex-start;
  align-items: center;
  margin-left: 20rem;
  display: flex;
}
.ideas-card {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  max-width: 20.6875rem;
  padding: var(--_sizes---spacing--spacing-medium);
  grid-column-gap: var(--_sizes---spacing--spacing-massive);
  grid-row-gap: var(--_sizes---spacing--spacing-massive);
  border-radius: var(--_sizes---border-radius--radius-medium);
  background-color: var(--_colors---background-color--white);
  flex-flow: column;
  flex: none;
  display: flex;
}
.card-title {
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
}
.founder-title {
  text-align: center;
  width: 100%;
  max-width: 33.75rem;
}
.founder-bottom {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-xjumbo);
  grid-row-gap: var(--_sizes---spacing--spacing-xjumbo);
  grid-template-rows: auto;
  grid-template-columns: .9fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  max-width: 57.1875rem;
  display: grid;
}
.founder-image {
  top: var(--_sizes---spacing--spacing-regular);
  border-radius: var(--_sizes---border-radius--radius-medium);
  height: auto;
  position: sticky;
}
.founder-details {
  grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
  grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
  flex-flow: column;
  display: flex;
}
.founder-flex {
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  flex-flow: column;
  display: flex;
}
.founder-grid {
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.founder-signature {
  width: 9.5rem;
}
.founder-detail {
  grid-column-gap: var(--_sizes---spacing--spacing-tiny);
  grid-row-gap: var(--_sizes---spacing--spacing-tiny);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.business-title {
  width: 100%;
  max-width: 41.875rem;
  font-size: var(--_typography---heading-font-sizes--h1);
  line-height: var(--_typography---heading-line-height--h1);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
}
.business-height {
  width: var(--_sizes---default-sizes--width);
  height: 250vh;
}
.business-bottom {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-xjumbo);
  grid-row-gap: var(--_sizes---spacing--spacing-xjumbo);
  grid-template-rows: auto;
  grid-template-columns: 1fr .75fr;
  grid-auto-columns: 1fr;
  max-width: 68rem;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}
.business-image {
  border-radius: var(--_sizes---spacing--spacing-medium);
  height: 35rem;
}
.business-contents {
  width: var(--_sizes---default-sizes--width);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 25rem;
  display: flex;
}
.business-flex {
  grid-column-gap: var(--_sizes---spacing--spacing-normal);
  grid-row-gap: var(--_sizes---spacing--spacing-normal);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
  position: relative;
}
.business-detail {
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.business-detail._02, .business-detail._03 {
  opacity: 0;
  position: absolute;
  inset: 0% 0% auto;
}
.forward-title {
  top: var(--_sizes---spacing--spacing-massive);
  width: 100%;
  max-width: 23.125rem;
  color: var(--_colors---background-color--white);
  text-align: center;
  position: sticky;
}
.forward-bottom {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  flex-flow: column;
  max-width: 55.25rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.process-block {
  top: var(--_sizes---spacing--spacing-regular);
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  grid-template-rows: auto;
  grid-template-columns: 1fr .9fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
  position: sticky;
}
.process-block._01 {
  background-color: var(--_colors---text-color--dark);
  top: 14rem;
}
.process-img {
  border-radius: var(--_sizes---spacing--spacing-medium);
}
.process-flex {
  padding-top: var(--_sizes---spacing--spacing-regular);
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  border-top: 1px solid var(--_colors---border-color--iron-void);
  background-color: var(--_colors---text-color--dark);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.step-text {
  color: var(--_colors---background-color--primary);
}
.step-title {
  color: var(--_colors---background-color--white);
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
}
.step-desp {
  color: var(--_colors---background-color--white);
}
.team-top {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 30rem;
  display: flex;
}
.team-title {
  text-align: center;
  width: 100%;
}
.team-flex {
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.team-para {
  text-align: center;
}
.team-members {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.team-member {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  border-radius: var(--_sizes---border-radius--radius-small);
  position: relative;
  overflow: clip;
}
.team-overflow {
  border-radius: var(--_sizes---border-radius--radius-small);
  overflow: clip;
}
.team-detail {
  width: var(--_sizes---default-sizes--width);
  height: 11.375rem;
  padding: var(--_sizes---spacing--spacing-medium);
  grid-column-gap: var(--_sizes---spacing--spacing-tiny);
  grid-row-gap: var(--_sizes---spacing--spacing-tiny);
  background-image: linear-gradient(#0000, #0009);
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}
.member-name {
  color: var(--_colors---background-color--white);
  font-size: var(--_typography---heading-font-sizes--h5);
  line-height: var(--_typography---heading-line-height--h5);
  letter-spacing: var(--_typography---heading-letter-spacing--h5);
}
.member-designation {
  color: var(--_colors---background-color--white);
}
.expert-title {
  text-align: center;
}
.expert-para {
  width: var(--_sizes---default-sizes--width);
  text-align: center;
  max-width: 26.75rem;
}
.service-marquee {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.marquee-images {
  flex: none;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}
.marquee-image {
  width: 20rem;
  margin-right: var(--_sizes---spacing--spacing-small);
  border-radius: var(--_sizes---border-radius--radius-medium);
  flex: none;
}
.marquee-image._02 {
  width: 17.5rem;
}
.marquee-image._03 {
  width: 30rem;
}
.marquee-image._04 {
  width: 20.625rem;
}
.services-top {
  width: var(--_sizes---default-sizes--width);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.services-title {
  width: var(--_sizes---default-sizes--width);
  max-width: 23.75rem;
}
.services-bottom {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  border-top: 1px solid var(--_colors---text-color--dark);
  flex-flow: column;
  display: flex;
}
.services-item {
  width: var(--_sizes---default-sizes--width);
  border-bottom: 1px solid var(--_colors---text-color--dark);
  background-color: var(--_colors---text-color--transparent);
  justify-content: space-between;
  align-items: center;
  padding-top: 1.88rem;
  padding-bottom: 1.88rem;
  text-decoration: none;
  transition: all .25s;
  display: flex;
}
.services-item:hover {
  padding-right: var(--_sizes---spacing--spacing-medium);
  padding-left: var(--_sizes---spacing--spacing-medium);
  background-color: var(--_colors---background-color--primary);
}
.services-wrap {
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.services-num {
  color: var(--_colors---text-color--dark);
}
.pricing-desp {
  width: var(--_sizes---default-sizes--width);
  text-align: center;
}
.compare-table {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  max-width: 80rem;
  display: flex;
  overflow: auto;
}
.table-1 {
  width: var(--_sizes---default-sizes--width);
  height: 9.525rem;
  padding: var(--_sizes---spacing--spacing-regular);
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  border-radius: var(--_sizes---border-radius--radius-medium);
  background-color: var(--_colors---border-color--soft-pearl);
  flex-flow: column;
  flex: none;
  justify-content: space-between;
  display: flex;
}
.table-1._03 {
  background-color: var(--_colors---background-color--primary);
}
.table-1._01 {
  padding: var(--_sizes---spacing--spacing-small) 0rem;
  border-bottom: 1px solid var(--_colors---border-color--rgba-44-44-44-0-10);
  background-color: var(--_colors---text-color--transparent);
  border-radius: 0;
  justify-content: flex-end;
  align-items: flex-start;
}
.plan-title {
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
}
.plan-title._01 {
  font-size: var(--_typography---heading-font-sizes--h5);
  line-height: var(--_typography---heading-line-height--h5);
  letter-spacing: var(--_typography---heading-letter-spacing--h5);
}
.table-column {
  width: var(--_sizes---default-sizes--width);
  flex-flow: column;
  flex: none;
  max-width: 19.1rem;
  display: flex;
}
.table-row {
  padding: var(--_sizes---spacing--spacing-small);
  border-bottom: 1px solid var(--_colors---border-color--rgba-44-44-44-0-10);
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.table-row._01 {
  padding-left: 0;
  padding-right: 0;
}
.pricing-info {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.details-1-pricing {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr .7fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}
.pricing-features {
  border-radius: var(--_sizes---border-radius--radius-medium);
  background-color: var(--_colors---border-color--soft-pearl);
  padding: 1.88rem;
}
.pricing-features h3:where(:not([class*="heading-scale-"])), .pricing-features :where(.heading-scale-3) {
  margin-bottom: var(--_sizes---spacing--spacing-medium);
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
}
.pricing-features ul {
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
}
.pricing-features li {
  background-image: url('../images/Checkmark-3.webp');
  background-position: 0%;
  background-repeat: no-repeat;
  background-size: 1rem;
  padding-left: 1.5rem;
}
.price-details {
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  border-radius: var(--_sizes---border-radius--radius-medium);
  background-color: var(--_colors---text-color--dark);
  flex-flow: column;
  padding: 1.88rem;
  display: flex;
}
.price-1-flex {
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.plan-price {
  color: var(--_colors---background-color--white);
  font-size: var(--_typography---heading-font-sizes--h2);
  line-height: var(--_typography---heading-line-height--h2);
  letter-spacing: var(--_typography---heading-letter-spacing--h2);
}
.plan-duration {
  color: var(--_colors---background-color--white);
}
.pricing-details-2 {
  width: var(--_sizes---default-sizes--width);
  max-width: 42.5rem;
}
.pricing-details-2 h3:where(:not([class*="heading-scale-"])), .pricing-details-2 :where(.heading-scale-3) {
  margin-bottom: var(--_sizes---spacing--spacing-xxsmall);
  font-size: var(--_typography---heading-font-sizes--h5);
  line-height: var(--_typography---heading-line-height--h5);
  letter-spacing: var(--_typography---heading-letter-spacing--h5);
}
.pricing-details-2 h4:where(:not([class*="heading-scale-"])), .pricing-details-2 :where(.heading-scale-4) {
  margin-top: var(--_sizes---spacing--spacing-normal);
  margin-bottom: var(--_sizes---spacing--spacing-xxsmall);
  font-size: var(--_typography---heading-font-sizes--h5);
  line-height: var(--_typography---heading-line-height--h5);
  letter-spacing: var(--_typography---heading-letter-spacing--h5);
}
.project-desp {
  width: var(--_sizes---default-sizes--width);
  text-align: center;
  max-width: 31.25rem;
}
.collection-list-wrapper-projects {
  width: var(--_sizes---default-sizes--width);
}
.collection-list-projects {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.collection-item-projects {
  width: var(--_sizes---default-sizes--width);
  border-radius: var(--_sizes---border-radius--radius-medium);
  background-color: var(--_colors---background-color--white);
}
.project-link {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  flex-flow: column;
  text-decoration: none;
  display: flex;
}
.project-overflow {
  width: var(--_sizes---default-sizes--width);
  border-radius: var(--_sizes---border-radius--radius-medium);
  overflow: clip;
}
.project-detail {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.project-flex {
  grid-column-gap: var(--_sizes---spacing--spacing-tiny);
  grid-row-gap: var(--_sizes---spacing--spacing-tiny);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.project-name {
  color: var(--_colors---text-color--dark);
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
}
.project-client {
  color: var(--_colors---text-color--dark);
}
.project-title {
  text-align: left;
}
.project-details-1 {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.client-detail {
  grid-column-gap: var(--_sizes---spacing--spacing-tiny);
  grid-row-gap: var(--_sizes---spacing--spacing-tiny);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.project-banner {
  border-radius: var(--_sizes---border-radius--radius-medium);
  height: 40rem;
}
.project-overview {
  width: var(--_sizes---default-sizes--width);
  max-width: 46.875rem;
}
.project-overview h3:where(:not([class*="heading-scale-"])), .project-overview :where(.heading-scale-3) {
  margin-bottom: var(--_sizes---spacing--spacing-xxsmall);
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
}
.project-overview h4:where(:not([class*="heading-scale-"])), .project-overview :where(.heading-scale-4) {
  margin-top: var(--_sizes---spacing--spacing-big);
  margin-bottom: var(--_sizes---spacing--spacing-xxsmall);
}
.gallery-item, .gallery-wrapper {
  width: var(--_sizes---default-sizes--width);
}
.gallery-list {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.gallery-items {
  width: var(--_sizes---default-sizes--width);
  border-radius: var(--_sizes---border-radius--radius-medium);
  overflow: clip;
}
.blog-desp {
  width: var(--_sizes---default-sizes--width);
  text-align: center;
  max-width: 23.125rem;
}
.blog-wrapper {
  width: var(--_sizes---default-sizes--width);
}
.blog-list {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.blog-item {
  width: var(--_sizes---default-sizes--width);
}
.blog-link {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  flex-flow: column;
  text-decoration: none;
  display: flex;
}
.blog-overflow {
  width: var(--_sizes---default-sizes--width);
  border-radius: var(--_sizes---border-radius--radius-medium);
  overflow: clip;
}
.blog-detail {
  flex-flow: column;
  justify-content: center;
  display: flex;
}
.blog-1-flex {
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-line {
  background-color: var(--_colors---text-color--dark);
  width: 2px;
  height: .8rem;
}
.blog-line._01 {
  height: 1.2rem;
}
.blog-name {
  margin-top: var(--_sizes---spacing--spacing-small);
  margin-bottom: var(--_sizes---spacing--spacing-xxsmall);
  color: var(--_colors---text-color--void-black);
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
}
.blog-para {
  color: var(--_colors---text-color--dark);
}
.blog-title {
  width: var(--_sizes---default-sizes--width);
  text-align: left;
  max-width: 60rem;
}
.blog-banner {
  border-radius: var(--_sizes---border-radius--radius-medium);
  height: 37.5rem;
}
.blog-contents {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  grid-template-rows: auto;
  grid-template-columns: .75fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}
.blog-informations p {
  margin-bottom: var(--_sizes---spacing--spacing-xxsmall);
}
.blog-informations h4:where(:not([class*="heading-scale-"])), .blog-informations :where(.heading-scale-4) {
  margin-top: var(--_sizes---spacing--spacing-big);
  margin-bottom: var(--_sizes---spacing--spacing-xxsmall);
}
.blog-left {
  top: var(--_sizes---spacing--spacing-regular);
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 17.125rem;
  display: flex;
  position: sticky;
}
.date-flex {
  width: var(--_sizes---default-sizes--width);
  padding-bottom: var(--_sizes---spacing--spacing-medium);
  grid-column-gap: var(--_sizes---spacing--spacing-tiny);
  grid-row-gap: var(--_sizes---spacing--spacing-tiny);
  border-bottom: 1px solid #1d1d1d1a;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.related-title {
  text-align: center;
}
.products-wrapper {
  width: var(--_sizes---default-sizes--width);
}
.products-list {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.products-item {
  width: var(--_sizes---default-sizes--width);
}
.product-link {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  flex-flow: column;
  text-decoration: none;
  display: flex;
}
.product-overflow {
  width: var(--_sizes---default-sizes--width);
  border-radius: var(--_sizes---border-radius--radius-medium);
  overflow: clip;
}
.product-detail {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.product-left {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-tiny);
  grid-row-gap: var(--_sizes---spacing--spacing-tiny);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 29.5rem;
  display: flex;
}
.product-name {
  color: var(--_colors---text-color--dark);
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
}
.product-desp {
  color: var(--_colors---text-color--dark);
}
.product-price {
  color: var(--_colors---text-color--dark);
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
}
.product-img {
  border-radius: var(--_sizes---border-radius--radius-medium);
}
.product-details {
  grid-column-gap: 1.88rem;
  grid-row-gap: 1.88rem;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.product-top {
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.product-item {
  font-size: var(--_typography---heading-font-sizes--h2);
  line-height: var(--_typography---heading-line-height--h2);
  letter-spacing: var(--_typography---heading-letter-spacing--h2);
}
.price-rate {
  font-size: var(--_typography---heading-font-sizes--h3);
  line-height: var(--_typography---heading-line-height--h3);
  letter-spacing: var(--_typography---heading-letter-spacing--h3);
}
.buy-now-button, .field-label {
  display: none;
}
.default-state {
  grid-column-gap: 1.88rem;
  grid-row-gap: 1.88rem;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 0;
  display: flex;
}
.quantity {
  border-color: var(--_colors---text-color--dark);
  width: 13.625rem;
  height: 2.5rem;
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  border-radius: .375rem;
  margin-bottom: 0;
  padding: .2rem .5rem;
}
.quantity:focus {
  border-color: var(--_colors---background-color--primary);
}
.add-to-cart-button {
  padding: var(--_sizes---spacing--spacing-xxsmall) var(--_sizes---border-radius--radius-regular) var(--_sizes---spacing--spacing-xxsmall) var(--_sizes---spacing--spacing-regular);
  border-radius: var(--_sizes---border-radius--radius-tiny);
  background-color: var(--_colors---text-color--dark);
  font-family: var(--font-family--poppins);
  color: var(--_colors---background-color--white);
  font-size: var(--_typography---texts-font-sizes--paragraph-s);
  line-height: var(--_typography---texts-line-height--paragraph-s);
  font-weight: var(--font-weight--semi-bold);
  text-align: center;
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-s);
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  transition: all .25s;
}
.add-to-cart-button:hover {
  background-color: var(--_colors---background-color--primary);
  color: var(--_colors---text-color--dark);
}
.contact-info {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  flex-flow: column;
  display: flex;
}
.contact-flex {
  padding-bottom: var(--_sizes---spacing--spacing-small);
  grid-column-gap: var(--_sizes---spacing--spacing-tiny);
  grid-row-gap: var(--_sizes---spacing--spacing-tiny);
  border-bottom: 1px solid var(--_colors---border-color--opacity-10-dark);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.contact-form-block {
  width: var(--_sizes---default-sizes--width);
  padding: var(--_sizes---spacing--spacing-big);
  border-radius: var(--_sizes---border-radius--radius-medium);
  background-color: var(--_colors---border-color--soft-pearl);
  margin-bottom: 0;
}
.contact-label {
  font-weight: var(--font-weight--medium);
  margin-bottom: 0;
}
.contact-label.checkout {
  margin-bottom: .5rem;
}
.contact-input {
  width: var(--_sizes---default-sizes--width);
  border: 1px solid var(--_colors---text-color--transparent);
  border-radius: var(--_sizes---border-radius--radius-tiny);
  background-color: var(--_colors---background-color--white);
  height: 3.125rem;
  color: var(--_colors---text-color--dark);
  font-weight: var(--font-weight--medium);
  margin-bottom: 0;
  padding: .94rem;
}
.contact-input:focus {
  border-color: var(--_colors---text-color--transparent);
}
.contact-input::placeholder {
  color: var(--_colors---border-color--opacity-30-dark);
}
.contact-block {
  margin-bottom: var(--_sizes---spacing--spacing-medium);
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.contact-block.message {
  margin-bottom: var(--_sizes---spacing--spacing-big);
}
.contact-grid {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.contact-input.checkout {
  border-color: var(--_colors---border-color--opacity-10-dark);
  margin-bottom: .5rem;
}
.textarea {
  width: var(--_sizes---default-sizes--width);
  border: 1px solid var(--_colors---text-color--transparent);
  border-radius: var(--_sizes---border-radius--radius-tiny);
  background-color: var(--_colors---background-color--white);
  min-height: 10rem;
  color: var(--_colors---text-color--dark);
  font-weight: var(--font-weight--medium);
  margin-bottom: 0;
  padding: .94rem;
}
.textarea:focus {
  border-color: var(--_colors---text-color--transparent);
}
.textarea::placeholder {
  color: var(--_colors---border-color--opacity-30-dark);
}
.submit-button {
  width: var(--_sizes---default-sizes--width);
  padding: .84rem var(--_sizes---spacing--spacing-small);
  border-radius: var(--_sizes---border-radius--radius-tiny);
  background-color: var(--_colors---background-color--primary);
  font-family: var(--font-family--poppins);
  color: var(--_colors---text-color--dark);
  font-size: var(--_typography---texts-font-sizes--paragraph-s);
  line-height: var(--_typography---texts-line-height--paragraph-s);
  font-weight: var(--font-weight--semi-bold);
  text-align: center;
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-s);
  text-transform: uppercase;
  transition: all .25s;
}
.submit-button:hover {
  background-color: var(--_colors---background-color--white);
}
.submit-button.checkout {
  margin-bottom: 0;
}
.submit-button.checkout:hover {
  background-color: var(--_colors---text-color--dark);
  color: var(--_colors---background-color--white);
}
.success-message {
  border-radius: var(--_sizes---border-radius--radius-tiny);
  background-color: var(--_colors---background-color--primary);
  color: var(--_colors---text-color--dark);
  font-weight: var(--font-weight--medium);
  text-align: center;
}
.error-message {
  background-color: var(--_colors---text-color--transparent);
  color: var(--_colors---background-color--red);
  padding: 0;
}
.location-title {
  width: var(--_sizes---default-sizes--width);
  max-width: 26.375rem;
  font-size: var(--_typography---heading-font-sizes--h1);
  line-height: var(--_typography---heading-line-height--h1);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
}
.location-bottom {
  width: var(--_sizes---default-sizes--width);
  border-radius: var(--_sizes---border-radius--radius-medium);
  position: relative;
  overflow: clip;
}
.map-img {
  border-radius: var(--_sizes---border-radius--radius-medium);
}
.location-informations {
  left: var(--_sizes---spacing--spacing-normal);
  top: auto;
  right: auto;
  bottom: var(--_sizes---spacing--spacing-normal);
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: 1.88rem;
  grid-row-gap: 1.88rem;
  border-top-left-radius: var(--_sizes---border-radius--radius-small);
  border-top-right-radius: var(--_sizes---border-radius--radius-small);
  border-bottom-left-radius: var(--_sizes---border-radius--radius-small);
  border-bottom-right-radius: var(--_sizes---border-radius--radius-small);
  background-color: var(--_colors---background-color--white);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 26.25rem;
  padding: 1.88rem;
  display: flex;
  position: absolute;
  box-shadow: 5px 5px 59.5px #0000001a;
}
.location-flex {
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.license-content {
  padding: var(--_sizes---spacing--spacing-regular);
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  border-radius: var(--_sizes---border-radius--radius-medium);
  background-color: var(--_colors---border-color--soft-pearl);
  flex-flow: column;
  display: flex;
}
.license-link {
  color: var(--_colors---text-color--dark);
  text-decoration: underline;
  transition: all .25s;
}
.license-link:hover {
  color: var(--_colors---background-color--primary);
}
.license-images {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.license-img {
  border-radius: var(--_sizes---border-radius--radius-medium);
}
.iconography-block {
  width: var(--_sizes---default-sizes--width);
  border-radius: var(--_sizes---border-radius--radius-medium);
  background-color: var(--_colors---background-color--white);
  justify-content: center;
  align-items: center;
  height: 12.5rem;
  display: flex;
}
.huge-icon {
  width: 5.625rem;
  height: auto;
}
.changelog-block {
  width: var(--_sizes---default-sizes--width);
  padding: var(--_sizes---spacing--spacing-normal);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  border-radius: var(--_sizes---border-radius--radius-medium);
  background-color: var(--_colors---border-color--soft-pearl);
  flex-flow: column;
  display: flex;
}
.performance-text {
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
}
.performance-list {
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  font-weight: var(--font-weight--medium);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 1.75rem;
  display: flex;
}
.error-image {
  max-width: 41.0625rem;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: auto 0% 0%;
}
.protected-desp {
  margin-top: var(--_sizes---spacing--spacing-xxsmall);
  margin-bottom: var(--_sizes---spacing--spacing-regular);
  font-weight: var(--font-weight--medium);
}
.protected-block {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.protected-field {
  width: var(--_sizes---default-sizes--width);
  border: 1px solid var(--_colors---text-color--dark);
  border-radius: var(--_sizes---border-radius--radius-tiny);
  background-color: var(--_colors---text-color--transparent);
  height: 3rem;
  color: var(--_colors---text-color--dark);
  margin-bottom: 0;
  padding: .6rem .75rem .5rem;
}
.protected-field:focus {
  border-color: var(--_colors---background-color--primary);
}
.protected-field::placeholder {
  color: var(--_colors---text-color--dark);
}
.protected-button {
  border-top-left-radius: var(--_sizes---border-radius--radius-tiny);
  border-top-right-radius: var(--_sizes---border-radius--radius-tiny);
  border-bottom-left-radius: var(--_sizes---border-radius--radius-tiny);
  border-bottom-right-radius: var(--_sizes---border-radius--radius-tiny);
  background-color: var(--_colors---background-color--primary);
  height: 3rem;
  font-family: var(--font-family--poppins);
  color: var(--_colors---text-color--dark);
  font-size: var(--_typography---texts-font-sizes--paragraph-s);
  line-height: var(--_typography---texts-line-height--paragraph-s);
  font-weight: var(--font-weight--semi-bold);
  text-align: center;
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-s);
  text-transform: uppercase;
  padding: .84rem 2.2rem;
  box-shadow: 0 14px 30px #0000000d;
}
.close-button {
  cursor: pointer;
}
.product-icon {
  margin-right: var(--_sizes---spacing--spacing-xxsmall);
}
.remove-button {
  color: var(--_colors---button-color--granite-gray);
  text-decoration: none;
  transition: all .25s;
}
.remove-button:hover {
  color: var(--_colors---background-color--primary);
}
.product-block {
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  margin-left: 0;
  margin-right: 0;
}
.quantity-2 {
  display: none;
}
.price-product {
  margin-top: 1rem;
  position: absolute;
  inset: 0% 0% auto auto;
}
.cart-item {
  position: relative;
}
.checkout-button {
  border-radius: var(--_sizes---spacing--spacing-xsmall);
  background-color: var(--_colors---background-color--primary);
  color: var(--_colors---text-color--dark);
  font-weight: var(--font-weight--medium);
  padding: 1rem 1rem .8rem;
  transition: all .25s;
}
.checkout-button:hover {
  background-color: var(--_colors---text-color--dark);
  color: var(--_colors---background-color--white);
}
.web-payments {
  display: none;
}
.total-price {
  font-weight: var(--font-weight--semi-bold);
}
.error-state {
  background-color: var(--_colors---text-color--transparent);
  color: var(--_colors---background-color--red);
  text-align: center;
  padding: 0;
}
.checkout-form {
  padding: 10rem 0px var(--_sizes---spacing--spacing-massive);
  background-color: var(--_colors---text-color--transparent);
}
.block-header {
  border-color: var(--_colors---border-color--soft-pearl);
  background-color: var(--_colors---text-color--transparent);
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
}
.block-content {
  border-style: none solid solid;
  border-width: 1px;
  border-color: var(--_colors---border-color--soft-pearl);
  background-color: var(--_colors---text-color--transparent);
  padding: 1.5rem;
}
.checkbox {
  margin-top: 0;
}
.checkbox-label {
  font-weight: var(--font-weight--regular);
  margin-bottom: 0;
  margin-left: 0;
}
.billing-address-toggle {
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  justify-content: flex-start;
  align-items: center;
}
.order-item {
  justify-content: flex-start;
  align-items: center;
}
.order-block {
  width: var(--_sizes---default-sizes--width);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.order-items, .order-summary {
  margin-bottom: 0;
}
.tab-menus {
  display: none;
}
.collection-pricing-list {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
}
.popular-block {
  width: var(--_sizes---default-sizes--width);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.popular {
  border-radius: var(--_sizes---border-radius--radius-soft);
  background-color: var(--_colors---background-color--primary);
  font-size: var(--_typography---texts-font-sizes--paragraph-s);
  line-height: var(--_typography---texts-line-height--paragraph-s);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-s);
  justify-content: center;
  align-items: center;
  padding: .75rem .88rem .5rem;
  display: flex;
}
.promo-text {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2em;
  text-decoration: none;
}
.circle {
  background-color: #0158ff;
  border-radius: 1000px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: -4px;
  right: -4px;
}
.unlock-full-access {
  color: #0158ff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2em;
}
.promo-cards {
  z-index: 10;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  display: flex;
  position: fixed;
  bottom: 20px;
  right: 20px;
}
.image {
  width: 28px;
  height: 28px;
}
.buy-template-button {
  background-color: #7c7c7c26;
  border-top-left-radius: 1.4rem;
  border-top-right-radius: 1.4rem;
  justify-content: center;
  align-items: center;
  min-width: 20rem;
  position: fixed;
  inset: auto 0% 0% auto;
}
.buy-template-button:hover {
  box-shadow: 4px 4px 25px #0003;
}
.buy-template-button.frosted-glass {
  z-index: 1000;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 10px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: auto;
  min-width: 16rem;
  padding: 8px 12px;
  text-decoration: none;
  display: flex;
  position: relative;
  bottom: auto;
  right: auto;
}
.buy-template-button.frosted-glass:hover {
  border-width: 1px;
  border-color: #0158ff;
}@media screen and (max-width: 991px) {

  body {
    --_typography---texts-font-sizes--default-paragraph: 1rem;
    --_typography---texts-line-height--default-paragraph: 140%;
    --_typography---texts-letter-spacing--default-paragraph: -.03rem;
    --_typography---heading-font-sizes--h1: 3.25rem;
    --_typography---heading-line-height--h1: 100%;
    --_typography---heading-letter-spacing--h1: -.12375rem;
    --_typography---heading-font-sizes--h2: 2.5rem;
    --_typography---heading-line-height--h2: 110%;
    --_typography---heading-letter-spacing--h2: -.08625rem;
    --_typography---heading-font-sizes--h3: 2rem;
    --_typography---heading-line-height--h3: 120%;
    --_typography---heading-letter-spacing--h3: -.0675rem;
    --_typography---heading-font-sizes--h4: 1.6875rem;
    --_typography---heading-line-height--h4: 120%;
    --_typography---heading-letter-spacing--h4: -.05063rem;
    --_typography---heading-font-sizes--h5: 1.25rem;
    --_typography---heading-line-height--h5: 120%;
    --_typography---heading-letter-spacing--h5: -.0375rem;
    --_typography---texts-font-sizes--paragraph-sm: .75rem;
    --_typography---texts-line-height--paragraph-sm: 110%;
    --_typography---texts-letter-spacing--paragraph-sm: -.0225rem;
    --_typography---texts-font-sizes--paragraph-s: .875rem;
    --_typography---texts-line-height--paragraph-s: 120%;
    --_typography---texts-letter-spacing--paragraph-s: -.02625rem;
    --_typography---texts-font-sizes--paragraph-l: 1.25rem;
    --_typography---texts-line-height--paragraph-l: 133.333%;
    --_typography---texts-letter-spacing--paragraph-l: -.0375rem;
    --_typography---heading-font-sizes--h6: 1.125rem;
    --_typography---heading-line-height--h6: 120%;
    --_typography---heading-letter-spacing--h6: -.02rem;
    --_sizes---default-sizes--width: 100%;
    --_sizes---default-sizes--height: 100%;
    --_sizes---spacing--spacing-small: 1rem;
    --_sizes---spacing--spacing-regular: 1.5rem;
    --_sizes---spacing--spacing-medium: 1.25rem;
    --_sizes---container--large-container: 90rem;
    --_sizes---spacing--spacing-xsmall: .5rem;
    --_sizes---border-radius--radius-medium: 1.25rem;
    --_sizes---spacing--spacing-tiny: .25rem;
    --_sizes---border-radius--radius-tiny: .625rem;
    --_sizes---spacing--spacing-massive: 3.75rem;
    --_sizes---spacing--spacing-normal: 2rem;
    --_sizes---spacing--spacing-xxsmall: .75rem;
    --_sizes---border-radius--radius-circle: 100%;
    --_sizes---border-radius--radius-large: 1.875rem;
    --_sizes---border-radius--radius-regular: 1.5rem;
    --_sizes---spacing--spacing-xjumbo: 3.25rem;
    --_sizes---spacing--spacing-big: 2.5rem;
    --_sizes---container--container: 85rem;
    --_sizes---spacing--spacing-jumbo: 3.125rem;
    --_sizes---spacing--spacing-large: 2.25rem;
    --_sizes---spacing--spacing-colossal: 5rem;
    --_sizes---border-radius--radius-small: 1rem;
    --_sizes---border-radius--radius-xtiny: .75rem;
    --_sizes---border-radius--radius-soft: 3.75rem;
    --_sizes---border-radius--radius-big: 2rem;
    --_sizes---border-radius--radius-pill: 5rem;
  }
  .utility-page-wrap {
    height: auto;
    padding-top: 10rem;
    padding-bottom: 16rem;
  }
  .utility-page-wrap.password {
    padding-top: 10rem;
    padding-bottom: 8rem;
  }
  .navbar {
    top: var(--_sizes---spacing--spacing-xsmall);
  }
  .menu-button {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
  }
  .menu-button.is-open {
    background-color: #fff0;
  }
  .nav-lottie {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
  }
  .nav-lottie.white {
    display: none;
  }
  .nav-lottie.white:where(.navbar-white) {
    display: block;
  }
  .nav-lottie.base:where(.navbar-white), .nav-buttons.mob, .nav-buttons.desk {
    display: none;
  }
  .nav-menu-wrapper {
    width: var(--_sizes---default-sizes--width);
    border-radius: var(--_sizes---border-radius--radius-medium);
    background-color: var(--_colors---background-color--white);
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 5px 5px -5px #0003;
  }
  .nav-dropdown {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    display: none;
  }
  .nav-menu-items {
    grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
    grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
    border-radius: var(--_sizes---border-radius--radius-medium);
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
  }
  .nav-dropdown-list.is-open {
    width: auto;
    padding-top: 1rem;
    position: static;
  }
  .nav-dropdown-toggle {
    grid-column-gap: .25rem;
    grid-row-gap: .25rem;
  }
  .nav-dropdown-toggle:where(.navbar-white) {
    color: var(--_colors---text-color--dark);
  }
  .nav-dropdown-items {
    justify-content: flex-start;
    align-items: center;
  }
  .nav-link {
    display: none;
  }
  .nav-link:where(.navbar-white) {
    color: var(--_colors---text-color--dark);
  }
  .nav-dropdown-collection {
    background-color: var(--_colors---text-color--transparent);
    box-shadow: none;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
  }
  .nav-cart {
    right: 4rem;
  }
  .section.home-hero, .section.about-hero {
    height: auto;
  }
  .section.business {
    padding-top: var(--_sizes---spacing--spacing-tiny);
    padding-bottom: var(--_sizes---spacing--spacing-big);
  }
  .section.service-hero {
    height: auto;
  }
  .wrapper.styleguide {
    padding-top: 7rem;
  }
  .wrapper.home-hero {
    grid-column-gap: var(--_sizes---spacing--spacing-regular);
    grid-row-gap: var(--_sizes---spacing--spacing-regular);
    padding-top: 16rem;
  }
  .wrapper.mission {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .wrapper.results {
    height: auto;
  }
  .wrapper.customize-wrap {
    padding-bottom: var(--_sizes---spacing--spacing-massive);
  }
  .wrapper.about-hero {
    grid-column-gap: var(--_sizes---spacing--spacing-regular);
    grid-row-gap: var(--_sizes---spacing--spacing-regular);
    padding-top: 16rem;
  }
  .wrapper.our-mission {
    grid-template-columns: .25fr 1fr;
  }
  .wrapper.service-hero {
    grid-column-gap: var(--_sizes---spacing--spacing-regular);
    grid-row-gap: var(--_sizes---spacing--spacing-regular);
    padding-top: 8rem;
  }
  .wrapper.pricing-hero, .wrapper.pricing-details, .wrapper.project, .wrapper.project-details, .wrapper.blog, .wrapper.blog-details {
    padding-top: 8rem;
  }
  .wrapper.product {
    grid-column-gap: var(--_sizes---spacing--spacing-big);
    grid-row-gap: var(--_sizes---spacing--spacing-big);
    grid-template-columns: 1fr 1fr;
    padding-top: 8rem;
  }
  .wrapper.contact {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
    grid-template-columns: .9fr 1fr;
    padding-top: 8rem;
  }
  .wrapper.changelog-hero {
    padding-top: 7rem;
    padding-bottom: var(--_sizes---spacing--spacing-xsmall);
  }
  .styleguide-content {
    grid-template-columns: .4fr 1fr;
  }
  .title.email {
    font-size: var(--_typography---texts-font-sizes--default-paragraph);
    line-height: var(--_typography---texts-line-height--default-paragraph);
    letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  }
  .colors-details, .buttons-details {
    grid-template-columns: 1fr 1fr;
  }
  .cta-wrapper {
    max-width: none;
  }
  .cta-para {
    max-width: 36rem;
    margin-top: var(--_sizes---spacing--spacing-small);
    margin-bottom: var(--_sizes---spacing--spacing-regular);
  }
  .footer-contents {
    grid-column-gap: var(--_sizes---spacing--spacing-big);
    grid-row-gap: var(--_sizes---spacing--spacing-big);
    grid-template-columns: minmax(0, 1fr);
  }
  .footer-left {
    max-width: 30rem;
  }
  .footer-right {
    margin-left: 0;
    margin-right: auto;
  }
  .page-header {
    margin-bottom: var(--_sizes---spacing--spacing-xsmall);
  }
  .video-wrapper {
    grid-template-columns: minmax(0, 1fr);
    max-width: 16rem;
  }
  .video-detail {
    grid-column-gap: var(--_sizes---spacing--spacing-small);
    grid-row-gap: var(--_sizes---spacing--spacing-small);
  }
  .section-title.result {
    max-width: 24rem;
  }
  .innovative-cards {
    grid-column-gap: var(--_sizes---spacing--spacing-small);
    grid-row-gap: var(--_sizes---spacing--spacing-small);
  }
  .innovative-cards._02 {
    grid-template-columns: .85fr .75fr .75fr;
  }
  .innovative-card {
    padding: var(--_sizes---spacing--spacing-medium) var(--_sizes---spacing--spacing-small);
    grid-column-gap: var(--_sizes---spacing--spacing-regular);
    grid-row-gap: var(--_sizes---spacing--spacing-regular);
  }
  .innovative-box {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
  }
  .innovative-icon {
    width: 1.2rem;
  }
  .innovative-para {
    font-size: var(--_typography---texts-font-sizes--paragraph-s);
    line-height: var(--_typography---texts-line-height--paragraph-s);
    letter-spacing: var(--_typography---texts-letter-spacing--paragraph-s);
  }
  .empowering-counter-wrap {
    height: 2.4rem;
  }
  .empowering-counter-wrap.mission {
    height: 3.25rem;
  }
  .results-content {
    grid-column-gap: var(--_sizes---spacing--spacing-big);
    grid-row-gap: var(--_sizes---spacing--spacing-big);
    height: auto;
    padding-top: 0;
  }
  .results-cards {
    grid-column-gap: var(--_sizes---spacing--spacing-medium);
    grid-row-gap: var(--_sizes---spacing--spacing-medium);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    max-width: none;
    display: grid;
  }
  .service-arrow {
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    min-height: 1.5rem;
  }
  .service-name {
    max-width: 14rem;
  }
  .service-box {
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    min-height: 1.5rem;
  }
  .results-desp {
    max-width: 42rem;
    font-size: var(--_typography---heading-font-sizes--h3);
    line-height: var(--_typography---heading-line-height--h3);
    letter-spacing: var(--_typography---heading-letter-spacing--h3);
  }
  .result-img {
    width: 8rem;
    display: none;
  }
  .impact-cards {
    grid-column-gap: var(--_sizes---spacing--spacing-regular);
    grid-template-columns: 1fr 1fr;
  }
  .customize-image {
    position: static;
  }
  .customize-image._02 {
    max-width: 16rem;
  }
  .customize-image._03 {
    max-width: 25rem;
  }
  .customize-right {
    justify-content: center;
    align-items: center;
    max-width: 28rem;
    display: flex;
  }
  .pricing-grid {
    grid-template-columns: 1fr 1fr;
  }
  .testimonial-bottom {
    margin-top: 4rem;
  }
  .testimonial-left {
    max-width: 20.5rem;
  }
  .testimonial-right {
    max-width: 24rem;
  }
  .testimonial-img {
    border-radius: var(--_sizes---border-radius--radius-small);
  }
  .value-contents.pricing {
    max-width: 33.5rem;
  }
  .value-contents.blog {
    max-width: 30rem;
  }
  .value-contents.contact {
    max-width: 21rem;
  }
  .mission-counters {
    grid-column-gap: var(--_sizes---spacing--spacing-small);
    grid-row-gap: var(--_sizes---spacing--spacing-small);
    justify-content: space-between;
    display: flex;
  }
  .experience-para {
    font-size: var(--_typography---texts-font-sizes--paragraph-s);
    line-height: var(--_typography---texts-line-height--paragraph-s);
    letter-spacing: var(--_typography---texts-letter-spacing--paragraph-s);
  }
  .left-gradient, .right-gradient {
    width: 24rem;
  }
  .ideas-cards {
    margin-left: 0;
  }
  .founder-title, .business-title {
    max-width: 28rem;
  }
  .business-bottom {
    grid-column-gap: var(--_sizes---spacing--spacing-big);
    grid-row-gap: var(--_sizes---spacing--spacing-big);
  }
  .forward-title {
    max-width: 28rem;
  }
  .process-block._01 {
    top: 12rem;
  }
  .team-title {
    max-width: 28rem;
  }
  .team-members {
    grid-template-columns: 1fr 1fr;
  }
  .marquee-image {
    width: 16rem;
  }
  .marquee-image._02 {
    width: 14rem;
  }
  .marquee-image._03 {
    width: 22rem;
  }
  .marquee-image._04 {
    width: 15rem;
  }
  .project-banner {
    height: 27rem;
  }
  .blog-list {
    grid-template-columns: 1fr 1fr;
  }
  .blog-title {
    max-width: none;
  }
  .blog-banner {
    height: 26rem;
  }
  .blog-contents {
    grid-template-columns: .7fr 1fr;
  }
  .product-detail {
    grid-column-gap: var(--_sizes---spacing--spacing-small);
    grid-row-gap: var(--_sizes---spacing--spacing-small);
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
  }
  .product-details {
    grid-column-gap: var(--_sizes---spacing--spacing-medium);
    grid-row-gap: var(--_sizes---spacing--spacing-medium);
  }
  .product-top {
    grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
    grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  }
  .product-item {
    font-size: var(--_typography---heading-font-sizes--h3);
    line-height: var(--_typography---heading-line-height--h3);
    letter-spacing: var(--_typography---heading-letter-spacing--h3);
  }
  .default-state {
    grid-column-gap: var(--_sizes---spacing--spacing-medium);
    grid-row-gap: var(--_sizes---spacing--spacing-medium);
  }
  .email-text {
    font-size: var(--_typography---texts-font-sizes--paragraph-s);
    line-height: var(--_typography---texts-line-height--paragraph-s);
    letter-spacing: var(--_typography---texts-letter-spacing--paragraph-s);
  }
  .contact-form-block {
    padding: var(--_sizes---spacing--spacing-regular);
  }
  .contact-grid {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    grid-template-columns: minmax(0, 1fr);
  }
  .textarea {
    min-height: 8rem;
  }
  .location-informations {
    grid-column-gap: 1.25rem;
    grid-row-gap: 1.25rem;
    max-width: 24rem;
    padding: 1.5rem;
  }
  .license-images {
    grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
    grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  }
  .license-img {
    border-radius: var(--_sizes---border-radius--radius-small);
  }
  .iconography-block {
    height: 10rem;
  }
  .error-image {
    max-width: 30rem;
  }
  .remove-button {
    transition: all .25s;
  }
  .remove-button:hover {
    color: var(--_colors---background-color--primary);
  }
  .checkout-form {
    padding-top: 8rem;
  }
  .block-header, .block-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .row {
    flex-flow: column;
  }
  .tab-menus {
    width: var(--_sizes---default-sizes--width);
    grid-column-gap: var(--_sizes---spacing--spacing-big);
    grid-row-gap: var(--_sizes---spacing--spacing-big);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .pages-items {
    grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
    grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
  }
  .main-pages {
    font-weight: var(--font-weight--medium);
    flex: none;
  }
  .page-item {
    color: var(--_colors---text-color--dark);
    font-weight: var(--font-weight--medium);
    flex: none;
    text-decoration: none;
    transition: all .25s;
  }
  .page-item:hover {
    color: var(--_colors---background-color--primary);
  }}
@media screen and (max-width: 767px) {

  body {
    --_typography---texts-font-sizes--default-paragraph: 1rem;
    --_typography---texts-line-height--default-paragraph: 140%;
    --_typography---texts-letter-spacing--default-paragraph: 0rem;
    --_typography---heading-font-sizes--h1: 2.75rem;
    --_typography---heading-line-height--h1: 100%;
    --_typography---heading-letter-spacing--h1: -.1rem;
    --_typography---heading-font-sizes--h2: 2.25rem;
    --_typography---heading-line-height--h2: 110%;
    --_typography---heading-letter-spacing--h2: 0rem;
    --_typography---heading-font-sizes--h3: 1.5rem;
    --_typography---heading-line-height--h3: 120%;
    --_typography---heading-letter-spacing--h3: 0rem;
    --_typography---heading-font-sizes--h4: 1.25rem;
    --_typography---heading-line-height--h4: 120%;
    --_typography---heading-letter-spacing--h4: 0rem;
    --_typography---heading-font-sizes--h5: 1.125rem;
    --_typography---heading-line-height--h5: 120%;
    --_typography---heading-letter-spacing--h5: 0rem;
    --_typography---texts-font-sizes--paragraph-sm: .75rem;
    --_typography---texts-line-height--paragraph-sm: 110%;
    --_typography---texts-letter-spacing--paragraph-sm: 0rem;
    --_typography---texts-font-sizes--paragraph-s: .875rem;
    --_typography---texts-line-height--paragraph-s: 120%;
    --_typography---texts-letter-spacing--paragraph-s: 0rem;
    --_typography---texts-font-sizes--paragraph-l: 1.125rem;
    --_typography---texts-line-height--paragraph-l: 133.333%;
    --_typography---texts-letter-spacing--paragraph-l: 0rem;
    --_typography---heading-font-sizes--h6: 1rem;
    --_typography---heading-line-height--h6: 120%;
    --_typography---heading-letter-spacing--h6: 0rem;
    --_sizes---default-sizes--width: 100%;
    --_sizes---default-sizes--height: 100%;
    --_sizes---spacing--spacing-small: 1rem;
    --_sizes---spacing--spacing-regular: 1rem;
    --_sizes---spacing--spacing-medium: 1rem;
    --_sizes---container--large-container: 90rem;
    --_sizes---spacing--spacing-xsmall: .5rem;
    --_sizes---border-radius--radius-medium: 1.25rem;
    --_sizes---spacing--spacing-tiny: .25rem;
    --_sizes---border-radius--radius-tiny: .625rem;
    --_sizes---spacing--spacing-massive: 3.25rem;
    --_sizes---spacing--spacing-normal: 1.25rem;
    --_sizes---spacing--spacing-xxsmall: .625rem;
    --_sizes---border-radius--radius-circle: 100%;
    --_sizes---border-radius--radius-large: 1.875rem;
    --_sizes---border-radius--radius-regular: 1.5rem;
    --_sizes---spacing--spacing-xjumbo: 2.75rem;
    --_sizes---spacing--spacing-big: 2rem;
    --_sizes---container--container: 85rem;
    --_sizes---spacing--spacing-jumbo: 2.5rem;
    --_sizes---spacing--spacing-large: 2rem;
    --_sizes---spacing--spacing-colossal: 3.75rem;
    --_sizes---border-radius--radius-small: 1rem;
    --_sizes---border-radius--radius-xtiny: .75rem;
    --_sizes---border-radius--radius-soft: 3.75rem;
    --_sizes---border-radius--radius-big: 2rem;
    --_sizes---border-radius--radius-pill: 5rem;
  }
  .utility-page-wrap {
    padding-top: 8rem;
    padding-bottom: 12rem;
  }
  .navbar-brand {
    padding-left: 0;
  }
  .nav-menu-wrapper {
    max-width: 20rem;
  }
  .nav-dropdown {
    flex-direction: column;
    align-items: center;
  }
  .nav-cart {
    right: 3.5rem;
  }
  .section.home-hero {
    border-bottom-left-radius: var(--_sizes---border-radius--radius-regular);
    border-bottom-right-radius: var(--_sizes---border-radius--radius-regular);
  }
  .section.innovative {
    border-top-left-radius: var(--_sizes---border-radius--radius-regular);
    border-top-right-radius: var(--_sizes---border-radius--radius-regular);
  }
  .section.project-card {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
    flex-flow: column;
    height: auto;
    display: flex;
  }
  .section.customize {
    border-radius: var(--_sizes---border-radius--radius-regular);
  }
  .section.about-hero {
    border-bottom-left-radius: var(--_sizes---border-radius--radius-regular);
    border-bottom-right-radius: var(--_sizes---border-radius--radius-regular);
  }
  .section.ideas {
    height: auto;
  }
  .section.business {
    padding-top: 0;
    padding-bottom: 0;
  }
  .section.service-hero {
    border-bottom-left-radius: var(--_sizes---border-radius--radius-regular);
    border-bottom-right-radius: var(--_sizes---border-radius--radius-regular);
  }
  .wrapper.styleguide {
    padding-top: 6rem;
  }
  .wrapper.home-hero {
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    padding-top: 10rem;
  }
  .wrapper.mission {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
  .wrapper.testimonials {
    padding-top: var(--_sizes---spacing--spacing-jumbo);
    padding-bottom: var(--_sizes---spacing--spacing-normal);
  }
  .wrapper.about-hero {
    padding-top: 10rem;
  }
  .wrapper.our-mission {
    grid-column-gap: var(--_sizes---spacing--spacing-small);
    grid-row-gap: var(--_sizes---spacing--spacing-small);
    grid-template-columns: minmax(0, 1fr);
  }
  .wrapper.business {
    height: auto;
    padding-top: var(--_sizes---spacing--spacing-normal);
  }
  .wrapper.service-hero, .wrapper.pricing-hero, .wrapper.pricing-details, .wrapper.project, .wrapper.project-details, .wrapper.blog {
    padding-top: 7rem;
  }
  .wrapper.blog-details {
    padding-top: 7rem;
    padding-bottom: var(--_sizes---spacing--spacing-big);
  }
  .wrapper.product {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 7rem;
  }
  .wrapper.contact {
    grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
    grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
    grid-template-columns: minmax(0, 1fr);
    padding-top: 7rem;
  }
  .wrapper.changelog-hero {
    padding-top: 6rem;
  }
  .styleguide-content {
    grid-column-gap: var(--_sizes---spacing--spacing-large);
    grid-row-gap: var(--_sizes---spacing--spacing-large);
    grid-template-columns: minmax(0, 1fr);
  }
  .colors-details {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .color-box {
    height: 10rem;
  }
  .buttons-details {
    flex-flow: wrap;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    justify-content: flex-start;
    align-items: center;
  }
  .footer {
    border-top-left-radius: var(--_sizes---border-radius--radius-regular);
    border-top-right-radius: var(--_sizes---border-radius--radius-regular);
  }
  .footer-right {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .video-wrapper {
    max-width: none;
    padding-right: var(--_sizes---spacing--spacing-normal);
    grid-template-columns: minmax(0, 1fr) 1fr;
  }
  .mission-hover:hover {
    background-color: var(--_colors---text-color--transparent);
    color: var(--_colors---text-color--dark);
    padding: 0;
  }
  .innovative-cards, .innovative-cards._02 {
    grid-template-columns: 1fr 1fr;
  }
  .innovative-card.desk-2 {
    display: none;
  }
  .innovative-card.tab-2 {
    display: flex;
  }
  .empowering-counter-wrap {
    height: 1.8rem;
  }
  .empowering-counter-wrap.mission {
    height: 2.75rem;
  }
  .service-link {
    padding-right: var(--_sizes---spacing--spacing-normal);
    padding-left: var(--_sizes---spacing--spacing-normal);
    grid-column-gap: var(--_sizes---spacing--spacing-large);
    grid-row-gap: var(--_sizes---spacing--spacing-large);
  }
  .service-name {
    max-width: 10rem;
  }
  .projects-sticky {
    height: auto;
    display: none;
  }
  .projects-images {
    height: auto;
  }
  .project-list._01 {
    opacity: .2;
  }
  .project-list.list-2, .project-list.list-3, .project-list.list-4 {
    opacity: 100;
  }
  .projects-bottom {
    margin-left: 0;
    margin-right: 0;
  }
  .project-tab {
    width: var(--_sizes---default-sizes--width);
    height: 30rem;
    display: block;
    position: sticky;
    top: 0;
  }
  .overflow-hidden.impact {
    height: 20rem;
  }
  .customize-tabs {
    justify-content: center;
    align-items: center;
  }
  .tabs-menu {
    flex-flow: wrap;
  }
  .customize-bottom {
    justify-content: space-between;
    align-items: center;
  }
  .tab-link {
    font-size: var(--_typography---texts-font-sizes--default-paragraph);
    line-height: var(--_typography---texts-line-height--default-paragraph);
    letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  }
  .customize {
    justify-content: space-between;
    align-items: center;
  }
  .customize-image {
    max-width: none;
  }
  .customize-image._02 {
    max-width: 12rem;
  }
  .customize-right {
    max-width: 16rem;
  }
  .customize-right._01 {
    max-width: 22rem;
  }
  .customize-para {
    font-size: var(--_typography---texts-font-sizes--paragraph-s);
    line-height: var(--_typography---texts-line-height--paragraph-s);
    letter-spacing: var(--_typography---texts-letter-spacing--paragraph-s);
  }
  .pricing-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .testimonial-bottom {
    margin-top: var(--_sizes---spacing--spacing-normal);
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  .testimonial-left {
    max-width: none;
  }
  .testimonial-right {
    order: -9999;
  }
  .faq-answer {
    max-width: 30rem;
  }
  .value-contents.pricing {
    max-width: 28rem;
  }
  .value-contents.blog {
    max-width: 26rem;
  }
  .value-contents.contact {
    grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
    grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
    max-width: 28rem;
    position: static;
  }
  .mission-left {
    position: static;
  }
  .left-gradient, .right-gradient {
    width: 12rem;
  }
  .ideas-sticky {
    height: auto;
    position: static;
  }
  .ideas-cards {
    grid-column-gap: var(--_sizes---spacing--spacing-medium);
    grid-row-gap: var(--_sizes---spacing--spacing-medium);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    place-items: center;
    display: grid;
  }
  .ideas-card {
    max-width: none;
  }
  .card-title {
    font-size: var(--_typography---heading-font-sizes--h3);
    line-height: var(--_typography---heading-line-height--h3);
    letter-spacing: var(--_typography---heading-letter-spacing--h3);
  }
  .founder-bottom {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
    grid-template-columns: minmax(0, 1fr);
  }
  .founder-image {
    position: static;
  }
  .business-height {
    height: auto;
  }
  .business-bottom {
    grid-template-columns: minmax(0, 1fr);
  }
  .business-image {
    object-position: 50% 100%;
    height: 26rem;
  }
  .business-contents {
    max-width: none;
  }
  .business-flex {
    grid-column-gap: var(--_sizes---spacing--spacing-large);
    grid-row-gap: var(--_sizes---spacing--spacing-large);
  }
  .business-detail._02, .business-detail._03 {
    opacity: 100;
    position: static;
  }
  .process-block {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
  }
  .process-block._01 {
    top: 10.5rem;
  }
  .step-desp {
    font-size: var(--_typography---texts-font-sizes--paragraph-s);
    line-height: var(--_typography---texts-line-height--paragraph-s);
    letter-spacing: var(--_typography---texts-letter-spacing--paragraph-s);
  }
  .table-1 {
    border-radius: var(--_sizes---border-radius--radius-xtiny);
    height: 7.5rem;
  }
  .table-column {
    max-width: 16.5rem;
  }
  .table-row {
    padding-right: var(--_sizes---spacing--spacing-xxsmall);
    padding-left: var(--_sizes---spacing--spacing-xxsmall);
    font-size: var(--_typography---texts-font-sizes--paragraph-s);
    line-height: var(--_typography---texts-line-height--paragraph-s);
    letter-spacing: var(--_typography---texts-letter-spacing--paragraph-s);
  }
  .details-1-pricing {
    grid-template-columns: minmax(0, 1fr);
  }
  .pricing-details-2 h3:where(:not([class*="heading-scale-"])), .pricing-details-2 h4:where(:not([class*="heading-scale-"])), .pricing-details-2 :where(.heading-scale-3), .pricing-details-2 :where(.heading-scale-4) {
    font-size: var(--_typography---heading-font-sizes--h4);
    line-height: var(--_typography---heading-line-height--h4);
    letter-spacing: var(--_typography---heading-letter-spacing--h4);
  }
  .collection-item-projects, .project-overflow {
    border-radius: var(--_sizes---border-radius--radius-small);
  }
  .project-details-1 {
    flex-flow: wrap;
  }
  .client._01 {
    font-size: var(--_typography---texts-font-sizes--paragraph-s);
    line-height: var(--_typography---texts-line-height--paragraph-s);
    letter-spacing: var(--_typography---texts-letter-spacing--paragraph-s);
  }
  .project-banner {
    border-radius: var(--_sizes---border-radius--radius-small);
    height: 19.629rem;
  }
  .project-overview h3:where(:not([class*="heading-scale-"])), .project-overview h4:where(:not([class*="heading-scale-"])), .project-overview :where(.heading-scale-3), .project-overview :where(.heading-scale-4) {
    font-size: var(--_typography---heading-font-sizes--h3);
    line-height: var(--_typography---heading-line-height--h3);
    letter-spacing: var(--_typography---heading-letter-spacing--h3);
  }
  .gallery-items {
    border-radius: var(--_sizes---border-radius--radius-small);
  }
  .blog-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .blog-name {
    font-size: var(--_typography---heading-font-sizes--h3);
    line-height: var(--_typography---heading-line-height--h3);
    letter-spacing: var(--_typography---heading-letter-spacing--h3);
  }
  .blog-banner {
    height: 19rem;
  }
  .blog-contents {
    grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
    grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
    grid-template-columns: minmax(0, 1fr);
  }
  .blog-informations h4:where(:not([class*="heading-scale-"])), .blog-informations :where(.heading-scale-4) {
    font-size: var(--_typography---heading-font-sizes--h3);
    line-height: var(--_typography---heading-line-height--h3);
    letter-spacing: var(--_typography---heading-letter-spacing--h3);
  }
  .blog-left {
    position: static;
  }
  .products-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-left {
    max-width: none;
  }
  .product-name {
    font-size: var(--_typography---heading-font-sizes--h3);
    line-height: var(--_typography---heading-line-height--h3);
    letter-spacing: var(--_typography---heading-letter-spacing--h3);
  }
  .product-img {
    border-radius: var(--_sizes---border-radius--radius-small);
  }
  .product-item {
    font-size: var(--_typography---heading-font-sizes--h2);
    line-height: var(--_typography---heading-line-height--h2);
    letter-spacing: var(--_typography---heading-letter-spacing--h2);
  }
  .contact-form-block {
    padding: var(--_sizes---spacing--spacing-normal);
    border-radius: var(--_sizes---border-radius--radius-small);
  }
  .location-title {
    max-width: 18rem;
  }
  .location-bottom {
    grid-column-gap: var(--_sizes---spacing--spacing-small);
    grid-row-gap: var(--_sizes---spacing--spacing-small);
    flex-flow: column;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: flex;
    overflow: visible;
  }
  .location-informations {
    max-width: none;
    position: static;
  }
  .performance-text {
    font-size: var(--_typography---heading-font-sizes--h3);
    line-height: var(--_typography---heading-line-height--h3);
    letter-spacing: var(--_typography---heading-letter-spacing--h3);
  }
  .error-image {
    max-width: 22rem;
  }
  .tab-menus {
    grid-template-columns: 1fr 1fr;
  }}
@media screen and (max-width: 479px) {

  body {
    --_typography---texts-font-sizes--default-paragraph: 1rem;
    --_typography---texts-line-height--default-paragraph: 140%;
    --_typography---texts-letter-spacing--default-paragraph: 0rem;
    --_typography---heading-font-sizes--h1: 2.5rem;
    --_typography---heading-line-height--h1: 100%;
    --_typography---heading-letter-spacing--h1: -.1rem;
    --_typography---heading-font-sizes--h2: 2rem;
    --_typography---heading-line-height--h2: 110%;
    --_typography---heading-letter-spacing--h2: 0rem;
    --_typography---heading-font-sizes--h3: 1.5rem;
    --_typography---heading-line-height--h3: 120%;
    --_typography---heading-letter-spacing--h3: 0rem;
    --_typography---heading-font-sizes--h4: 1.25rem;
    --_typography---heading-line-height--h4: 120%;
    --_typography---heading-letter-spacing--h4: 0rem;
    --_typography---heading-font-sizes--h5: 1.125rem;
    --_typography---heading-line-height--h5: 120%;
    --_typography---heading-letter-spacing--h5: 0rem;
    --_typography---texts-font-sizes--paragraph-sm: .75rem;
    --_typography---texts-line-height--paragraph-sm: 110%;
    --_typography---texts-letter-spacing--paragraph-sm: 0rem;
    --_typography---texts-font-sizes--paragraph-s: .875rem;
    --_typography---texts-line-height--paragraph-s: 120%;
    --_typography---texts-letter-spacing--paragraph-s: 0rem;
    --_typography---texts-font-sizes--paragraph-l: 1rem;
    --_typography---texts-line-height--paragraph-l: 133.333%;
    --_typography---texts-letter-spacing--paragraph-l: 0rem;
    --_typography---heading-font-sizes--h6: 1rem;
    --_typography---heading-line-height--h6: 120%;
    --_typography---heading-letter-spacing--h6: 0rem;
    --_sizes---default-sizes--width: 100%;
    --_sizes---default-sizes--height: 100%;
    --_sizes---spacing--spacing-small: 1rem;
    --_sizes---spacing--spacing-regular: 1rem;
    --_sizes---spacing--spacing-medium: 1rem;
    --_sizes---container--large-container: 90rem;
    --_sizes---spacing--spacing-xsmall: .5rem;
    --_sizes---border-radius--radius-medium: 1.25rem;
    --_sizes---spacing--spacing-tiny: .25rem;
    --_sizes---border-radius--radius-tiny: .625rem;
    --_sizes---spacing--spacing-massive: 3.25rem;
    --_sizes---spacing--spacing-normal: 1.25rem;
    --_sizes---spacing--spacing-xxsmall: .625rem;
    --_sizes---border-radius--radius-circle: 100%;
    --_sizes---border-radius--radius-large: 1.875rem;
    --_sizes---border-radius--radius-regular: 1.5rem;
    --_sizes---spacing--spacing-xjumbo: 2.5rem;
    --_sizes---spacing--spacing-big: 2rem;
    --_sizes---container--container: 85rem;
    --_sizes---spacing--spacing-jumbo: 2.25rem;
    --_sizes---spacing--spacing-large: 2rem;
    --_sizes---spacing--spacing-colossal: 3.75rem;
    --_sizes---border-radius--radius-small: 1rem;
    --_sizes---border-radius--radius-xtiny: .75rem;
    --_sizes---border-radius--radius-soft: 3.75rem;
    --_sizes---border-radius--radius-big: 2rem;
    --_sizes---border-radius--radius-pill: 5rem;
  }
  .utility-page-wrap {
    padding-top: 6rem;
    padding-bottom: 10rem;
  }
  .utility-page-wrap.password {
    padding-top: 8rem;
    padding-bottom: 6rem;
  }
  .utility-page-content.password {
    max-width: 22rem;
  }
  .navbar-brand {
    max-width: 8rem;
  }
  .menu-button {
    width: 1.6rem;
    height: 1.6rem;
  }
  .nav-dropdown-collection {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    height: 13.2rem;
    overflow: auto;
  }
  .nav-dropdown-header {
    margin-bottom: var(--_sizes---spacing--spacing-xsmall);
    text-decoration: underline;
  }
  .section.home-hero {
    border-bottom-left-radius: var(--_sizes---border-radius--radius-medium);
    border-bottom-right-radius: var(--_sizes---border-radius--radius-medium);
  }
  .section.innovative {
    border-top-left-radius: var(--_sizes---border-radius--radius-medium);
    border-top-right-radius: var(--_sizes---border-radius--radius-medium);
  }
  .section.customize {
    border-radius: var(--_sizes---border-radius--radius-medium);
  }
  .section.about-hero, .section.service-hero {
    border-bottom-left-radius: var(--_sizes---border-radius--radius-medium);
    border-bottom-right-radius: var(--_sizes---border-radius--radius-medium);
  }
  .wrapper.home-hero, .wrapper.about-hero {
    padding-top: 8rem;
  }
  .wrapper.service-hero, .wrapper.pricing-hero, .wrapper.pricing-details, .wrapper.project, .wrapper.project-details, .wrapper.blog, .wrapper.blog-details, .wrapper.product, .wrapper.contact {
    padding-top: 6rem;
  }
  .colors-details {
    grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
    grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  }
  .color-box {
    height: 7rem;
  }
  .color-code {
    font-size: var(--_typography---heading-font-sizes--h6);
    line-height: var(--_typography---heading-line-height--h6);
    letter-spacing: var(--_typography---heading-letter-spacing--h6);
  }
  .buttons-details {
    grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
    grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  }
  .footer {
    border-top-left-radius: var(--_sizes---border-radius--radius-small);
    border-top-right-radius: var(--_sizes---border-radius--radius-small);
  }
  .footer-right {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-large);
    grid-template-columns: 1fr 1fr;
  }
  .mission-para {
    font-size: var(--_typography---heading-font-sizes--h5);
    line-height: var(--_typography---heading-line-height--h5);
    letter-spacing: var(--_typography---heading-letter-spacing--h5);
  }
  .header-top.compare {
    max-width: 26rem;
  }
  .innovative-cards, .innovative-cards._02 {
    grid-template-columns: minmax(0, 1fr);
  }
  .innovative-card._02, .innovative-card.tab-2 {
    grid-column-gap: var(--_sizes---spacing--spacing-colossal);
    grid-row-gap: var(--_sizes---spacing--spacing-colossal);
  }
  .empowering-counter-wrap.mission {
    height: 2.5rem;
  }
  .results-content {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
  }
  .results-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .results-desp {
    font-size: var(--_typography---heading-font-sizes--h4);
    line-height: var(--_typography---heading-line-height--h4);
    letter-spacing: var(--_typography---heading-letter-spacing--h4);
  }
  .project-tab {
    height: 28rem;
  }
  .impact-cards {
    grid-column-gap: var(--_sizes---spacing--spacing-large);
    grid-row-gap: var(--_sizes---spacing--spacing-large);
    grid-template-columns: minmax(0, 1fr);
  }
  .tabs-menu {
    margin-bottom: var(--_sizes---spacing--spacing-large);
  }
  .tab-link {
    padding: var(--_sizes---spacing--spacing-xsmall) var(--_sizes---spacing--spacing-xxsmall);
    font-size: var(--_typography---texts-font-sizes--paragraph-s);
    line-height: var(--_typography---texts-line-height--paragraph-s);
    letter-spacing: var(--_typography---texts-letter-spacing--paragraph-s);
  }
  .customize {
    flex-flow: column;
  }
  .customize-left {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
    justify-content: center;
    align-items: center;
  }
  .customize-flex {
    justify-content: center;
    align-items: center;
  }
  .customize-image._02 {
    max-width: 18rem;
  }
  .customize-image._03, .customize-right, .customize-right._01 {
    max-width: none;
  }
  .pricing-card {
    padding: 1.25rem var(--_sizes---spacing--spacing-small);
  }
  .testimonial-desp {
    font-size: var(--_typography---heading-font-sizes--h4);
    line-height: var(--_typography---heading-line-height--h4);
    letter-spacing: var(--_typography---heading-letter-spacing--h4);
  }
  .testimonial-bottom {
    margin-top: var(--_sizes---spacing--spacing-tiny);
  }
  .testimonial-right {
    flex-flow: wrap;
  }
  .testimonial-img {
    border-radius: var(--_sizes---border-radius--radius-xtiny);
    object-position: 50% 0%;
  }
  .testimonial-author {
    font-size: var(--_typography---texts-font-sizes--paragraph-sm);
    line-height: var(--_typography---texts-line-height--paragraph-sm);
    letter-spacing: var(--_typography---texts-letter-spacing--paragraph-sm);
  }
  .testimonial-desig {
    font-size: .7rem;
  }
  .faq-ques {
    font-size: 20px;
  }
  .value-contents.pricing {
    max-width: 26rem;
  }
  .value-contents.blog {
    max-width: 22rem;
  }
  .mission-counters {
    grid-column-gap: var(--_sizes---spacing--spacing-xjumbo);
    grid-row-gap: var(--_sizes---spacing--spacing-large);
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: center;
  }
  .left-gradient, .right-gradient {
    width: 6rem;
  }
  .ideas-title {
    top: var(--_sizes---spacing--spacing-massive);
    position: sticky;
  }
  .ideas-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .ideas-card {
    top: var(--_sizes---spacing--spacing-small);
    border-radius: var(--_sizes---border-radius--radius-small);
    position: sticky;
  }
  .ideas-card.about {
    top: 11rem;
  }
  .founder-image {
    border-radius: var(--_sizes---border-radius--radius-small);
  }
  .business-image {
    height: 20rem;
  }
  .process-block {
    border-radius: var(--_sizes---border-radius--radius-small);
    background-color: var(--_colors---text-color--dark);
    grid-template-columns: minmax(0, 1fr);
  }
  .process-block._01 {
    top: 9.5rem;
  }
  .team-members {
    grid-template-columns: minmax(0, 1fr);
  }
  .marquee-image {
    border-radius: var(--_sizes---border-radius--radius-small);
    width: 12rem;
  }
  .marquee-image._02 {
    width: 10rem;
  }
  .marquee-image._03 {
    width: 18rem;
  }
  .marquee-image._04 {
    width: 12rem;
  }
  .services-top {
    grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
    grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
  }
  .services-item {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .services-item:hover {
    padding-right: var(--_sizes---spacing--spacing-xxsmall);
    padding-left: var(--_sizes---spacing--spacing-xxsmall);
  }
  .services-wrap {
    grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
    grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  }
  .services-num {
    font-size: var(--_typography---heading-font-sizes--h4);
    line-height: var(--_typography---heading-line-height--h4);
    letter-spacing: var(--_typography---heading-letter-spacing--h4);
  }
  .pricing-features {
    border-radius: var(--_sizes---border-radius--radius-small);
    padding: 1.25rem .5rem 1.25rem 1rem;
  }
  .price-details {
    border-radius: var(--_sizes---border-radius--radius-small);
    padding: 1.25rem 1rem;
  }
  .project-overflow {
    border-radius: var(--_sizes---border-radius--radius-xtiny);
  }
  .project-banner {
    height: 13.11rem;
  }
  .gallery-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .blog-overflow {
    border-radius: var(--_sizes---border-radius--radius-small);
  }
  .blog-banner {
    height: 15rem;
  }
  .location-bottom, .map-img, .location-informations {
    border-radius: var(--_sizes---border-radius--radius-small);
  }
  .license-images {
    grid-template-columns: minmax(0, 1fr);
  }
  .huge-icon {
    width: 4rem;
  }
  .error-image {
    max-width: 16rem;
  }
  .protected-block {
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }
  .price-product {
    margin-top: 0;
    position: static;
  }
  .checkout-form {
    padding-top: 7rem;
  }
  .order-item {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
  }
  .div-block {
    margin-left: 0;
    margin-right: 0;
  }
  .order-block {
    grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
    grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
    justify-content: flex-start;
    align-items: center;
  }
  .price-prod {
    margin-left: 4.3rem;
  }}

#node-_8f256889-8474-edd7-21c9-da4ce9f82ddf-9862dd81, #node-a33a63c9-9ff0-905f-f6b4-8048ada35fae-ada35f9c, #node-e17c877b-39e8-1c36-cf4f-568c0038ba89-1146d8ad, #node-_62901b55-31de-b1e0-a39d-1a10eebabc06-2e569ca1 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}
#node-_33f58c00-8fce-3139-52f6-85e40ed0f92b-fbedcce6 {
  place-self: center;
}@media screen and (max-width: 767px) {

  #node-a33a63c9-9ff0-905f-f6b4-8048ada35fa9-ada35f9c, #node-f5558d0c-41c0-ebb6-8e50-30538435d818-9862dd83, #node-_8226eeed-da18-7c2b-a259-e95d3b6a465c-9862dd83 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
  #node-_33f58c00-8fce-3139-52f6-85e40ed0f92b-fbedcce6 {
    grid-area: span 1 / span 1 / span 1 / span 1;
    place-self: center;
  }}
@media screen and (max-width: 479px) {

  #node-_47745a0e-502c-e988-1561-21da7107fddf-9862dd81 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
  #node-f40a3f83-de50-9bfa-d8bf-1a23ee39c45b-9862dd81 {
    order: 9999;
  }
  #node-f5558d0c-41c0-ebb6-8e50-30538435d818-9862dd83, #node-_8226eeed-da18-7c2b-a259-e95d3b6a465c-9862dd83 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }}


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

   Vanilla replacements for the Webflow runtime and for the 245 IX2 events
   (53 action lists) this template shipped. Every number here was read out of the
   decoded payload (`ix2.json`, via `inspect_ix2.py`) rather than eyeballed,
   and `audit_motion.py` asserts that each action list either appears here or
   is named in `build_ix2_map.SKIP` with a reason.

   Two rules of thumb run through the whole file:

   * A REVEAL IS AN ANIMATION, NEVER A TRANSITION. A `transition:` shorthand
     on a reveal class REPLACES whatever transition the element already had
     -- which on an earlier conversion silently deleted a slider's own motion
     -- and a transition also cannot express "start from this transform" the
     way `@keyframes` can.
   * WHERE AN IX2 ACTION CARRIES A `globalSwatchId`, THE RUNTIME USES THE
     VARIABLE, not the rgb triple stored beside it. Every colour step in this
     payload has one, so every colour below is a `var(--...)` and follows the
     design's palette if it is ever re-themed.

   IX2's own easing appears twice: `outQuart`, which is the reveals', and the
   cubic-bezier(.25, .46, .45, .94) the designer used on everything else.
   Both are named as custom properties so a reader can see they are one
   decision rather than forty. */

:root {
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --ease-ix2: cubic-bezier(.25, .46, .45, .94);
}


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

/* One keyboard shortcut past the header, on every page. It is off-screen
   until it takes focus, which is the only time it should be visible. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
  padding: .75rem 1.25rem;
  background: var(--_colors---text-color--dark);
  color: var(--_colors---background-color--white);
  border-radius: 0 0 var(--_sizes---border-radius--radius-tiny) 0;
  transform: translateY(-120%);
}

.skip-link:focus {
  transform: none;
}

/* A visible focus ring, everywhere. The export suppressed the UA's outline
   on every widget it touched (`.w-dropdown-toggle:focus { outline: 0 }` and
   four more) and never drew a replacement, so a keyboard user had nothing to
   follow. `:focus-visible` keeps it off for pointer clicks. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--_colors---background-color--primary);
  outline-offset: 2px;
}

/* The wrapper add_landmarks inserts between `.main-wrapper` and the page's
   own sections, so the skip link has a target and the page has a main
   landmark. `.main-wrapper` is a flex column on several pages, and an
   ordinary <div> here would become the flex item instead of the sections it
   holds -- `display: contents` is what makes it free. */
#main-content {
  display: contents;
}


/* ------------------------------------------------------------- the navbar
   The hamburger, replacing two Lottie files (IX2 a-7 / a-8, frames 0 -> 45).
   The bars are sized from the design's own `.menu-button`, which is 1.75rem
   square below 992px and 1.6rem below 480px. */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: .8em;
  margin: auto;
  pointer-events: none;
}

.hamburger-bar {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s var(--ease-ix2), opacity .2s linear;
}

[data-nav-open] .hamburger-bar:nth-child(1) {
  transform: translateY(.39em) rotate(45deg);
}

[data-nav-open] .hamburger-bar:nth-child(2) {
  opacity: 0;
}

[data-nav-open] .hamburger-bar:nth-child(3) {
  transform: translateY(-.39em) rotate(-45deg);
}

/* The wrapper rebuild_nav writes around the mobile menu. Free above 992px;
   framework.hand.css gives it its clip and its slide below. */
.nav-overlay {
  display: contents;
}@media screen and (max-width: 991px) {

  .nav-overlay {
    display: block;
  }}


/* The "Pages" chevron, IX2 a-3: 180deg over 250ms opening, 250ms closing.
   The panel's own height and opacity are in framework.hand.css, because
   they are what the dropped `.w-dropdown-list` rules used to provide. */
.dropdown-arrow {
  transition: transform .25s ease;
}

[aria-expanded="true"] > .dropdown-arrow,
.nav-dropdown-toggle[aria-expanded="true"] .dropdown-arrow {
  transform: rotate(180deg);
}


/* ------------------------------------------------------------------- FAQ
   IX2 a-47 / a-48: the answer grows from height 0 to auto over 300ms.

   THIS BELONGS AFTER THE DESIGN SHEET, not in framework.hand.css with the
   rest of the dropped `.w-dropdown-list` geometry. The design sets
   `.faq-answer { display: block; position: static; overflow: clip }`, and
   both it and a hand-written rule score (0, 1, 0) -- so a `display: grid`
   emitted BEFORE the design loses on source order, `grid-template-rows` is
   ignored on a block box, and the accordion ships with every answer already
   open. Which is exactly what shipped, on all five pages that carry it.

   `height: auto` is not animatable, so the panel becomes a one-row grid and
   the ROW is animated: `minmax(0, 0fr)` to `minmax(0, 1fr)`. The `minmax` is
   the spelling that actually collapses -- a bare `0fr` is `minmax(auto, 0fr)`
   and the auto minimum is the content's own line box. */
.faq-answer {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  overflow: clip;
  transition: grid-template-rows .3s ease;
}

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

/* `.faq-para`'s own `padding-top: 16px` needs no adjustment, and the reason
   is worth stating because the opposite was assumed first: the padding is on
   the grid ITEM, not on the grid CONTAINER, so it is inside the box the
   zero-height track clips. Moving it to a margin "to be safe" made every open
   answer 16px taller than the export's -- 128px per page across eight rows,
   which the parity sweep caught. */


/* --------------------------------------------------------------- reveals
   IX2's three stock presets, all `opacity: 0 -> 1` over 1000ms `outQuart`,
   differing only in the transform group 1 starts from. 174 elements carry
   one, with a `data-reveal-delay` between 50ms and 300ms.

   `:where(.js)` is what stops a JavaScript-less visitor getting a blank
   page: main.js is what adds `.is-revealed`, so without the guard the rest
   state would be permanent. An earlier conversion shipped exactly that. */
:where(.js) .reveal {
  opacity: 0;
}

:where(.js) .reveal-up {
  transform: translateY(100px);
}

:where(.js) .reveal-up-right {
  transform: translate(100px, 100px);
}

:where(.js) .reveal-grow {
  transform: scale(.75);
}

.reveal.is-revealed {
  animation: reveal-in 1s var(--ease-out-quart) both;
  animation-delay: var(--reveal-delay, 0ms);
}@keyframes reveal-in {

  to {
    opacity: 1;
    transform: none;
  }}


/* THE FINISHED STATE, AS A CLASS RATHER THAN A FILLED ANIMATION.
   main.js swaps `.is-revealed` for this on `animationend`, and the reason is
   not tidiness: a filled animation (`animation-fill-mode: both`) sits ABOVE
   every normal declaration in the cascade, so an element whose reveal has
   finished has `transform: none` pinned on it forever -- and nothing declared
   in CSS can move it again.
   `.ideas-cards` is exactly that element. It carries a reveal AND is the
   target of the `ideas` scroll scrub, so once its reveal completed the rail
   stopped responding to scroll entirely. Handing the finished state to an
   ordinary class puts `transform` back under the cascade's control, where the
   scrub rules below (also (0, 2, 0), but later) win it. */
.reveal.is-shown {
  opacity: 1;
  transform: none;
}

/* Below 992px this one reveal does not exist at all -- `e-133` is gated to
   `medium, small, tiny`, and the export writes its rest state into a
   `max-width: 991px` block in the page head. THE REST STATE HAS TO BE GATED
   TOO: a reveal that is hidden at a width where nothing will ever reveal it
   is an element that never appears, and the parity harness cannot see it,
   because the harness forces reveals visible on both sides. */
@media screen and (min-width: 992px) {
  :where(.js) .reveal[data-reveal-mq="below-main"] {
    opacity: 1;
    transform: none;
  }
}


/* ---------------------------------------------------------------- hovers
   Nine paired [Hover In] / [Hover Out] action lists, all 500ms on the IX2
   easing. Each is a CSS `:hover` / `:focus-within` on the element the event
   fired from, which is also what makes them reachable from a keyboard --
   IX2's MOUSE_OVER never was.

   Every target below was CHECKED to be a descendant of the element the hook
   sits on, which is what makes a plain `:hover` enough and means no state
   class has to be moved by script at all. One of the nine is not a
   descendant -- the services row, whose colour target is the trigger itself
   -- and it is written accordingly; another is not even a hover, the six
   mission cards, whose target is a page-wide selector and which have their
   own section below. */

/* a-5 / a-6 -- the primary button. A `.hover-layer` wipes up from 100% while
   the second copy of the label rolls -190%, so the new label arrives as the
   old one leaves. The layer's `opacity: 0 -> 1` is instant on the way in
   (duration 0) and delayed 400ms on the way out, which is what stops it
   flashing behind the label as it retreats. */
[data-hover="primary-button"] .hover-layer {
  transform: translateY(100%);
  opacity: 0;
  transition: transform .5s var(--ease-ix2), opacity .5s linear .4s;
}

[data-hover="primary-button"] .button-text._02 {
  transform: translateY(0);
  transition: transform .5s var(--ease-ix2);
}

[data-hover="primary-button"]:hover .hover-layer,
[data-hover="primary-button"]:focus-visible .hover-layer{
  transform: translateY(0);
  opacity: 1;
  transition: transform .5s var(--ease-ix2), opacity 0s linear;
}

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

/* a-9 / a-10 -- the home page's video lightbox. Both label lines roll -100%
   inside `.lightbox-texts`, which the design already clips to one line. */
[data-hover="lightbox"] .lightbox-text {
  transition: transform .35s var(--ease-ix2);
}

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

/* a-15 / a-16 -- the services list. The row fills with the primary green and
   both arrows travel up-right together, the second one arriving from
   `inset: auto auto -100% -100%` as the first leaves.

   This is the one hover whose colour target is the TRIGGER ITSELF: the
   `<a class="service-link">` carries the hook and is also what `.service-link`
   names in the payload. Written as a descendant selector it matches nothing,
   which is silent -- the arrows would still travel and the row would simply
   never change colour. */
[data-hover="service-item"] {
  transition: background-color .5s var(--ease-ix2);
}

[data-hover="service-item"] .service-arrow {
  transition: transform .5s var(--ease-ix2);
}

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

[data-hover="service-item"]:hover .service-arrow,
[data-hover="service-item"]:focus-visible .service-arrow {
  transform: translate(100%, -100%);
}

/* a-28 / a-29 -- the about page's team portraits: the caption fades in. */
[data-hover="team-member"] .team-detail {
  opacity: 0;
  transition: opacity .5s var(--ease-ix2);
}

[data-hover="team-member"]:hover .team-detail,
[data-hover="team-member"]:focus-within .team-detail{
  opacity: 1;
}

/* a-31 to a-36 -- three cards that share one gesture: the image scales to
   1.1 over 500ms and the title takes the primary green over 400ms. Their
   class names are all that differ, which is why the payload has three pairs
   of lists for one animation. */
[data-hover="project-link"] .project-img,
[data-hover="blog-item"] .blog-img,
[data-hover="product-item"] .product-image {
  transform: scale(1);
  transition: transform .5s var(--ease-ix2);
}

[data-hover="project-link"] .project-name,
[data-hover="blog-item"] .blog-name,
[data-hover="product-item"] .product-name {
  transition: color .4s var(--ease-ix2);
}

[data-hover="project-link"]:hover .project-img,
[data-hover="project-link"]:focus-within .project-img,
[data-hover="blog-item"]:hover .blog-img,
[data-hover="blog-item"]:focus-within .blog-img,
[data-hover="product-item"]:hover .product-image,
[data-hover="product-item"]:focus-within .product-image{
  transform: scale(1.1);
}

[data-hover="project-link"]:hover .project-name,
[data-hover="project-link"]:focus-within .project-name,
[data-hover="blog-item"]:hover .blog-name,
[data-hover="blog-item"]:focus-within .blog-name,
[data-hover="product-item"]:hover .product-name,
[data-hover="product-item"]:focus-within .product-name{
  color: var(--_colors---background-color--primary);
}


/* ------------------------------------------------------- mission cards
   IX2 a-11/a-12 and a-37 to a-46: six paired lists, one per card, each
   scaling `.mission-card._0N` from 0 to 1 over 500ms.

   THESE ARE THE ONE SET OF HOVERS THAT CANNOT BE A DESCENDANT SELECTOR. The
   trigger is a `<span class="mission-hover">` inside a paragraph and the
   card it scales is a LATER SIBLING of that paragraph -- and the payload's
   target carries no `useEventTarget` at all, so its selector is page-wide.
   main.js pairs them by index (`data-mission-hover` on the span,
   `data-mission-card` on the card) and toggles `.is-shown`.

   Five of the six cards already have `transform: scale(0)` from the design
   sheet; the first has it only from the inline rest state the export writes
   into the page head, which build_head removes -- so it is stated here, and
   the media query matches the one the events are gated to (`main, medium`,
   which is 768px and up). */
.mission-card {
  transition: transform .5s var(--ease-ix2);
}@media screen and (min-width: 768px) {

  .mission-card._01 {
    transform: scale(0);
  }

  .mission-card.is-shown {
    transform: scale(1);
  }}



/* ------------------------------------------------------- counter reels
   IX2 a-13 / a-14: a column of eleven digits inside a one-digit window,
   moved 91% of its own height over 1500ms. `_01` runs DOWN the reel (0 ->
   -91%, landing on the last cell) and `_02` runs UP it (-91% -> 0, landing
   on the first). 91% rather than a round number is the payload's own value:
   ten gaps of one cell each in an eleven-cell reel is 90.9%.

   Animations, not transitions -- see the file header. `both` keeps the end
   state after the run, which is what an IX2 action list does. */
.empowering-counter-wrap {
  overflow: clip;
}

[data-counter="1"] .empowering-counter-items {
  transform: translateY(0);
}

[data-counter="2"] .empowering-counter-items {
  transform: translateY(-91%);
}

[data-counter="1"].is-revealed .empowering-counter-items {
  animation: counter-down 1.5s var(--ease-ix2) both;
}

[data-counter="2"].is-revealed .empowering-counter-items {
  animation: counter-up 1.5s var(--ease-ix2) both;
}@keyframes counter-down {

  from { transform: translateY(0); }
  to   { transform: translateY(-91%); }}
@keyframes counter-up {

  from { transform: translateY(-91%); }
  to   { transform: translateY(0); }}



/* -------------------------------------------------------------- marquees
   IX2 a-24 and a-30, both `loop: true`.

   They run OPPOSITE WAYS, and the payload says so in a place that is easy to
   miss. a-24 has `useFirstGroupAsInitialState: false`, so its group 0 is a
   real step: 0 -> -100% over 40s. a-30 has it TRUE, so group 0 is a rest
   state of -100% and the animated step runs back to 0 over 35s.

   Each strip is three (or seven) identical copies of the same row laid side
   by side in a zero-width flex box, so translating every copy by exactly one
   row-width lands copy 2 where copy 1 was: the snap back to the start is
   invisible and the loop is seamless. */
@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}@keyframes marquee-right {

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


[data-marquee="40s"] .marquee-items {
  animation: marquee-left 40s linear infinite;
}

[data-marquee="35s-reverse"] .marquee-images {
  transform: translateX(-100%);
  animation: marquee-right 35s linear infinite;
}


/* --------------------------------------------------------- scroll scrubs
   Five SCROLLING_IN_VIEW lists. Each is a SCROLL_PROGRESS parameter group
   whose keyframes are percentages of the section's own progress through the
   viewport, so main.js writes that progress to `--scroll-progress` on the
   section and the values below are read from it.

   THE BREAKPOINT GATES ARE NOT DECORATION. `a-25` (main) and `a-26`
   (medium) fire from the SAME element and differ only in distance -- -70%
   at 992px and up, -190% between 768px and 991px -- so the distance is a
   custom property with a media query rather than one number. Ignoring that
   field is how an earlier build ran a desktop-only scrub on a phone. */

/* a-17, `main` only -- the results section. Four photographs fly in from
   ±300%, the card stack collapses to nothing and the title and the
   paragraph pass each other. */
@media screen and (min-width: 992px) {
  [data-scrub="result"] .result-img._01,
  [data-scrub="result"] .result-img._02 {
    transform: translateX(clamp(-300%, calc(-300% + (var(--scroll-progress, 0) - .01) * 508%), 0%));
  }

  [data-scrub="result"] .result-img._03,
  [data-scrub="result"] .result-img._04 {
    transform: translateX(clamp(0%, calc(300% - (var(--scroll-progress, 0) - .01) * 508%), 300%));
  }

  [data-scrub="result"] .results-cards {
    transform: scale(clamp(0, calc(1 - (var(--scroll-progress, 0) - .08) * 3.7), 1));
  }

  [data-scrub="result"] .section-title.result {
    transform: translateY(clamp(0rem, calc((var(--scroll-progress, 0) - .08) * 28.6rem), 12rem));
  }

  [data-scrub="result"] .results-desp {
    transform: translateY(clamp(-30rem, calc((var(--scroll-progress, 0) - .08) * -71.4rem), 0rem));
  }
}

/* a-18, `main` and `medium` -- the project rail. Four photographs and four
   captions cross-fade in step, one per fifth of the scroll. The design
   already gives `._01` opacity 1 and the rest 0, so main.js only has to move
   `.is-current` between them; expressing an eight-step cross-fade as a
   `calc()` would be unreadable and would not match the payload's hard cuts
   at 19.5% / 20%, which are deliberate. */
@media screen and (min-width: 768px) {
  [data-scrub="project"] .project-image,
  [data-scrub="project"] .project-list {
    transition: opacity .3s linear;
  }

  [data-scrub="project"] .project-image.is-current {
    opacity: 1;
  }

  [data-scrub="project"] .project-image:not(.is-current) {
    opacity: 0;
  }

  [data-scrub="project"] .project-list.is-current {
    opacity: 1;
  }

  [data-scrub="project"] .project-list:not(.is-current) {
    opacity: .2;
  }
}

/* a-25 / a-26 -- the ideas rail, one hook and two distances. */
@media screen and (min-width: 768px) {
  [data-scrub="ideas"] .ideas-cards {
    --scrub-distance: -190%;
    transform: translateX(clamp(var(--scrub-distance), calc((var(--scroll-progress, 0) - .04) / .58 * var(--scrub-distance)), 0%));
  }
}@media screen and (min-width: 992px) {

  [data-scrub="ideas"] .ideas-cards {
    --scrub-distance: -70%;
  }}


/* a-27, `main` and `medium` -- the business panel, three cross-fading
   captions. Same shape as a-18. */
@media screen and (min-width: 768px) {
  [data-scrub="business"] .business-detail {
    transition: opacity .3s linear;
  }

  [data-scrub="business"] .business-detail.is-current {
    opacity: 1;
  }

  [data-scrub="business"] .business-detail:not(.is-current) {
    opacity: 0;
  }
}


/* ------------------------------------------------------ testimonial slider
   `data-animation="slide"`, `data-delay="4000"`, `data-duration="500"`,
   `data-infinite="true"` -- so the three slides sit on a flex track that
   main.js translates. The widget's own arrows and numbered nav are all
   `display: none` in the design and rebuild_sliders removes them.

   IX2 a-19 / a-50 / a-51 are the other half: each SLIDER_ACTIVE event swaps
   which `.testimonial-detail._0N` is shown beside the slider. The design
   already ships `._02` and `._03` at `opacity: 0; display: none`, so only
   the SHOWN state has to be stated. */
/* THE SLIDES MOVE, NOT THE MASK.
   `.testimonials-mask` is the element with `overflow: clip` -- it is the
   window, not the film. Translating it slid the whole component out of its
   section and left the quote hanging off the left edge of the page, which is
   what shipped. There is no inner track element in the export's markup, so
   main.js moves every slide by the same offset instead; they are flex items
   laid side by side inside the mask, so that scrolls the row exactly as a
   track would. */
.testimonials-slide {
  transition: transform .5s var(--ease-ix2);
}

.testimonial-detail.is-current {
  display: flex;
  opacity: 1;
  transition: opacity .5s linear;
}

.testimonial-detail:not(.is-current) {
  display: none;
  opacity: 0;
}


/* -------------------------------------------------------------- lightbox
   A replacement for Webflow's gallery, driven from the `data-lightbox`
   attributes rebuild_lightbox decodes out of each link's JSON payload. Two
   kinds use it: the home page's YouTube video and the two-image gallery on
   every project page.

   The video iframe is built on open and destroyed on close, so no page
   makes a request to Google until a visitor asks for it -- and closing the
   dialog stops the video, which removing the element is the only reliable
   way to do. */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: #000000e6;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s linear, visibility 0s linear .25s;
}

.lightbox-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s linear, visibility 0s linear;
}

.lightbox-frame {
  position: relative;
  width: 100%;
  max-width: 60rem;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-frame img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: var(--_sizes---border-radius--radius-medium);
  object-fit: contain;
}

.lightbox-frame iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--_sizes---border-radius--radius-medium);
}

.lightbox-button {
  position: absolute;
  top: 50%;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff26;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  transform: translateY(-50%);
  transition: background-color .2s linear;
}

.lightbox-button:hover {
  background: #ffffff4d;
}

.lightbox-prev { left: -3.5rem; }
.lightbox-next { right: -3.5rem; }

.lightbox-close {
  position: absolute;
  top: -3rem;
  right: 0;
  transform: none;
}@media screen and (max-width: 767px) {

  .lightbox-prev { left: .25rem; }
  .lightbox-next { right: .25rem; }}



/* ------------------------------------------------------------------ forms
   Webflow POSTed every form to its own endpoint and swapped in the success
   block itself. rebuild_forms marks the two state blocks `hidden`; these are
   the rules that show them again when main.js removes the attribute.

   The `:not([hidden])` matters. The framework's `.wf-form-done` and
   `.wf-form-fail` both carry `display: none`, so removing `hidden` alone
   leaves the message invisible -- which is how an earlier conversion shipped
   forms whose success message never appeared. This scores (0, 2, 0) and
   beats them. */
.form-success:not([hidden]),
.form-error:not([hidden]) {
  display: block;
}


/* ------------------------------------------------------------------- cart
   The Ecommerce drawer, re-pointed at a localStorage basket. Every element
   keeps its class and therefore its styling; these are only the states the
   runtime used to write inline.

   `.cart-modal` and `.cart-form` are in transform.RUNTIME_HIDDEN, so their
   inline `display: none` is stripped -- which is what leaves them needing a
   closed state here. Leaving the inline style in place instead is how an
   earlier conversion shipped a cart that could never open, because an inline
   style beats every class. */
.cart-modal {
  display: none;
}

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

.cart-form {
  display: block;
}

.cart-form[hidden],
.cart-empty[hidden],
.cart-error-state[hidden],
.checkout-error[hidden] {
  display: none;
}

.cart-error-state:not([hidden]),
.checkout-error:not([hidden]) {
  display: block;
}

.cart-option {
  list-style: none;
}


/* -------------------------------------------------- reduced motion
   One block, last, so it wins. Everything above is decoration: a visitor who
   has asked their system for less of it gets the end state immediately
   rather than a shorter version of the journey.

   The reveals are the important half -- they are the only motion here that
   an element's VISIBILITY depends on, so they must land on `opacity: 1`
   rather than simply stop. */
@media (prefers-reduced-motion: reduce) {
  :where(.js) .reveal {
    opacity: 1;
    transform: none;
  }

  .reveal.is-revealed {
    animation: none;
  }

  [data-marquee] .marquee-items,
  [data-marquee] .marquee-images {
    animation: none;
  }

  [data-counter] .empowering-counter-items {
    animation: none;
  }

  [data-counter="1"] .empowering-counter-items {
    transform: translateY(-91%);
  }

  [data-counter="2"] .empowering-counter-items {
    transform: translateY(0);
  }

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