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

   Fonts: assets/fonts/fonts.css -- Interdisplay and DM Mono, both
   self-hosted woff2, both SIL OFL 1.1. The export shipped Inter
   Display as four raw .ttf files (1.6 MB, loaded on every page) and
   pulled DM Mono from Google at runtime through webfont.js. Neither
   family is substituted -- only re-cut and served locally -- so every
   `--font-family--*` in :root below still names what the design named. */

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

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

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

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

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

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

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

.richtext figure.wf-richtext-align-fullwidth {
  width: 100%;
  max-width: 100%;
  text-align: center;
  clear: both;
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.richtext figure.wf-richtext-align-fullwidth > div {
  display: inline-block;
  
  padding-bottom: inherit;
}
.richtext figure.wf-richtext-align-fullwidth > figcaption {
  display: block;
}
.tabset {
  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
   ======================================================================

   Section 2 drops every webflow.css rule that only existed for the runtime
   to drive. Three of those families were carrying real LAYOUT as well as
   behaviour -- the navbar, the dropdown shell (which is also the FAQ's
   shell) and the lightbox links -- and this file restates that layout
   against the design's own class names so the pages measure the same
   without the framework's.

   It is emitted BETWEEN the framework and the design sheet, in the same
   place webflow.css sat, so the design keeps overriding it exactly as it
   did before -- `.dropdown-toggle`'s own gap and colour still beat the
   widget's 20px padding, `.menu-button { padding: 0 }` still beats the
   widget's 18px. Moving any of it after the design silently wins arguments
   it used to lose.

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

     * `.navbar`'s two pseudo-elements are NOT decoration. Webflow emits
       them as a clearfix, but `display: table` inside a grid or flex
       parent makes them real boxes with real height, so dropping them
       moves everything below the bar.
     * `[data-nav-menu-open]`'s `display: block !important` is the ONE
       runtime rule in this export that has to beat the design sheet, and
       an attribute selector at (0,1,0) does not. It is written here with
       the `!important` it shipped with, and it is why the open menu is
       marked by an ATTRIBUTE rather than a class.
     * the FAQ answers and the Pages panel are closed by
       `.w-dropdown-list { display: none }` and by nothing else -- the
       design gives both `display: block` and a width and stops. Section 4
       re-authors the open/close as a height collapse gated on `.js`, so
       the `display` rule is deliberately NOT restated here; restating it
       as well would make both panels unopenable. */

/* ---- what a <button> loses that an <a> had --------------------------
   transform.py turns nine kinds of element into real <button>s: the
   hamburger, the Pages toggle, the seven FAQ toggles, the tab links, the
   cookie buttons, the cart's open and close controls and the cart line's
   Remove. Two things get lost on the way, and both are invisible until
   something is measured.

     * The UA's form-control reset. `font: inherit` restores the family,
       the size, the weight and the line height -- and NOT
       `letter-spacing`, `word-spacing` or `text-transform`, which a
       control does not inherit at all.
     * The design sheet's own bare `a` rule. It sets `color` and
       `text-decoration: none` on every link in the template (webflow.css
       adds `text-decoration: underline` underneath it), and a <button>
       stops matching it. `.link-button` restates exactly those -- inside
       `:where()`, so it scores 0 and keeps losing to every design class
       the type selector was already losing to. A plain class here would
       score (0,1,0) and start WINNING arguments the `a` rule used to
       lose, which is how an earlier conversion threw a slider arrow
       across the page. */
button {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-transform: inherit;
}

:where(.link-button) {
  color: var(--_colors---background-color--text-black);
  text-decoration: none;
}

/* ---- the navbar (.w-nav / -brand / -menu / -button) ------------------ */
/* The design positions `.navbar` itself (absolute over each page's hero);
   what the widget was still contributing is the z-index that keeps the bar
   above the reveals scrolling under it. */
.navbar {
  z-index: 1000;
}

/* Webflow's clearfix. `display: table` participates in layout. */
.navbar::before,
.navbar::after {
  content: " ";
  display: table;
  grid-area: 1 / 1 / 2 / 2;
}

.navbar::after {
  clear: both;
}

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

.nav-menu {
  position: relative;
}

/* The design's own `.nav-link` supplies colour, size and spacing; what the
   widget was still contributing is the box model that lets those apply. */
.nav-link {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-align: left;
}

/* The hamburger's wrapper. `display: none` is what hides it above 991px;
   `data-collapse="medium"` turned it on below, and the design then sizes
   it to a 1.5rem square with `padding: 0` in the same band -- which is why
   the widget's own 18px padding is NOT restated. */
.menu-button {
  position: relative;
  display: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
  border: 0;
  background-color: transparent;
}@media screen and (max-width: 991px) {

  /* `data-collapse="medium"`: the menu leaves the bar, the button arrives. */
  .nav-menu {
    display: none;
  }

  .menu-button {
    display: block;
  }}
@media screen and (max-width: 767px) {

  /* webflow.css nudged the brand off the edge on phones, and the design
     says nothing to override it -- so the published site shows it too. */
  .navbar-brand {
    padding-left: 10px;
  }}


/* The open menu. main.js moves `.nav-menu` into this overlay -- appended as
   the navbar's last child, exactly where Webflow's runtime put its own --
   so `top: 100%` measures from the BAR, padding included, rather than from
   `.navbar-wrapper`'s inner box. */
.nav-overlay {
  position: absolute;
  overflow: hidden;
  display: none;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
}

.nav-overlay[data-nav-open] {
  display: block;
}

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

/* ---- the dropdown shell (.w-dropdown / -toggle / -list) -------------- */
/* One widget, two skins: the navbar's Pages panel and the seven FAQ rows.
   The design supplies each toggle's flex row, colour and gap, and each
   panel's width; the widget supplied the boxes they sit in. */
/* The design re-declares `display` on both skins (`flex` for the FAQ rows,
   `inline-flex` for the Pages toggle) and zeroes the toggles' margins, so
   neither is restated here -- a declaration the design always beats never
   applies. `.faq-answer`'s geometry is the design's own (`position: static`,
   an explicit min/max width); only the Pages panel still leans on the
   widget's `absolute`. */
.dropdown,
.faq-box {
  position: relative;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  z-index: 900;
}

.dropdown {
  display: inline-block;
}

.dropdown-toggle,
.question-box {
  position: relative;
  vertical-align: top;
  text-align: left;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  border: 0;
  background-color: transparent;
}

.dropdown-nav {
  position: absolute;
  min-width: 100%;
}

/* ---- the lightbox links (.w-lightbox) -------------------------------- */
/* The project gallery's six thumbnails. The widget's rule also zeroed the
   outline-offset dance of its focus ring; what layout it gave the link was
   just this. */
.gallery-lightbox {
  display: inline-block;
  text-decoration: none;
}

.gallery-lightbox img {
  cursor: pointer;
}

/* ======================================================================
   3. Henecon design
   ====================================================================== */
:root {
  --_colors---text-color--white: white;
  --font-family--inter: Inter, sans-serif;
  --_colors---background-color--text-black: #151515;
  --_typography---texts-font-sizes--default-paragraph: 1rem;
  --_typography---texts-line-height--default-paragraph: 120%;
  --font-weight--regular: 400;
  --_typography---texts-letter-spacing--default-paragraph: -.04rem;
  --font-family--big-shoulders-display: "Big Shoulders Display", Arial, sans-serif;
  --_typography---heading-font-sizes--h1: 4.6875rem;
  --_typography---heading-line-height--h1: 120%;
  --font-weight--bold: 700;
  --_typography---heading-letter-spacing--h1: 0rem;
  --_typography---heading-font-sizes--h2: 2.5rem;
  --_typography---heading-line-height--h2: 112%;
  --font-weight--extra-bold: 800;
  --_typography---heading-letter-spacing--h2: -.125rem;
  --_typography---heading-font-sizes--h3: 2.1875rem;
  --_typography---heading-line-height--h3: 110%;
  --_typography---heading-letter-spacing--h3: -.10938rem;
  --_typography---heading-font-sizes--h4: 1.875rem;
  --_typography---heading-line-height--h4: 117%;
  --_typography---heading-letter-spacing--h4: -.09375rem;
  --_typography---heading-font-sizes--h5: 1.5625rem;
  --_typography---heading-line-height--h5: 120%;
  --_typography---heading-letter-spacing--h5: -.07813rem;
  --_sizes---default-sizes--width: 100%;
  --_sizes---default-sizes--height: 100%;
  --_sizes---spacing--spacing-big: 2.5rem;
  --_sizes---spacing--spacing-small: 1rem;
  --_sizes---spacing--spacing-large: 2.25rem;
  --_colors---background-color--background: #f3f3f3;
  --_colors---background-color--primary-color: #b51402;
  --_sizes---container--max-width: 91rem;
  --_sizes---spacing--spacing-jumbo: 3.75rem;
  --_sizes---spacing--spacing-massive: 5rem;
  --_sizes---spacing--spacing-colossal: 6.5rem;
  --_sizes---spacing--spacing-medium: 1.25rem;
  --_sizes---spacing--spacing-normal: 2rem;
  --_sizes---spacing--spacing-regular: 1.5rem;
  --_sizes---spacing--spacing-xxsmall: .62rem;
  --_sizes---spacing--spacing-tiny: .25rem;
  --_typography---heading-line-height--h6: 120%;
  --_typography---heading-letter-spacing--h6: -.0625rem;
  --_typography---heading-font-sizes--display-02: 5.9375rem;
  --_typography---heading-line-height--display-02: 120%;
  --_typography---heading-letter-spacing--display-02: 0rem;
  --font-weight--semi-bold: 600;
  --_sizes---spacing--spacing-xregular: 1.88rem;
  --_typography---heading-font-sizes--h6: 1.25rem;
  --_typography---heading-font-sizes--display-01: 10.4rem;
  --_typography---heading-line-height--display-01: 106%;
  --_typography---heading-letter-spacing--display-01: 0rem;
  --_typography---heading-font-sizes--display-03: 5rem;
  --_typography---heading-line-height--display-03: 100%;
  --font-weight--heavy: 900;
  --_typography---heading-letter-spacing--display-03: 0rem;
  --_typography---texts-font-sizes--paragraph-l: 1.25rem;
  --_typography---texts-line-height--paragraph-l: 125%;
  --_typography---texts-letter-spacing--paragraph-l: -.0625rem;
  --_typography---texts-font-sizes--caption: .875rem;
  --_typography---texts-line-height--caption: 100%;
  --_typography---texts-letter-spacing--caption: -.035rem;
  --_typography---texts-font-sizes--tag: .75rem;
  --_typography---texts-line-height--tag: 100%;
  --_typography---texts-letter-spacing--tag: -.03rem;
  --_sizes---border-radius--radius-pill: 5rem;
  --_colors---text-color--50-white: #ffffff80;
  --_colors---text-color--transparent: #fff0;
  --_sizes---spacing--spacing-xsmall: .5rem;
  --_sizes---spacing--spacing-xxxsmall: .75rem;
  --_colors---text-color--battleship-gray: #848484;
  --font-family--geist: Geist, sans-serif;
  --font-weight--medium: 500;
  --_colors---border-color--light-ash: #d2d2d2;
  --_sizes---border-radius--radius-xsmall: .5rem;
  --_colors---background-color--eerie-black: #1a1a1a;
  --_colors---background-color--50-black: #00000080;
  --_sizes---border-radius--radius-circle: 100%;
  --_colors---border-color--mid-tone-gray: #414141;
  --font-family--manrope: Manrope, sans-serif;
  --_colors---background-color--black: black;
  --font-family--poppins: Poppins, sans-serif;
  --font-family--general-sans: "General Sans", Arial, sans-serif;
  --font-weight--thin: 100;
  --font-weight--extra-light: 200;
  --font-weight--light: 300;
  --_colors---text-color--raisin-black: #212121;
  --_colors---button-color--granite-gray: #666;
  --_colors---button-color--dark-gray: #333;
  --_sizes---border-radius--radius-tiny: .25rem;
  --_sizes---border-radius--radius-xxsmall: .75rem;
  --_sizes---border-radius--radius-small: 1rem;
  --_sizes---border-radius--radius-medium: 1.25rem;
  --_sizes---border-radius--radius-regular: 1.5rem;
  --_sizes---border-radius--radius-large: 1.875rem;
  --_sizes---border-radius--radius-big: 2rem;
  --_sizes---border-radius--radius-soft: 3.75rem;
}
.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---text-color--white);
  font-family: var(--font-family--inter);
  color: var(--_colors---background-color--text-black);
  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: 120%;
  --_typography---texts-letter-spacing--default-paragraph: -.04rem;
  --_typography---heading-font-sizes--h1: 4.6875rem;
  --_typography---heading-line-height--h1: 120%;
  --_typography---heading-letter-spacing--h1: 0rem;
  --_typography---heading-font-sizes--h2: 2.5rem;
  --_typography---heading-line-height--h2: 112%;
  --_typography---heading-letter-spacing--h2: -.125rem;
  --_typography---heading-font-sizes--h3: 2.1875rem;
  --_typography---heading-line-height--h3: 110%;
  --_typography---heading-letter-spacing--h3: -.10938rem;
  --_typography---heading-font-sizes--h4: 1.875rem;
  --_typography---heading-line-height--h4: 117%;
  --_typography---heading-letter-spacing--h4: -.09375rem;
  --_typography---heading-font-sizes--h5: 1.5625rem;
  --_typography---heading-line-height--h5: 120%;
  --_typography---heading-letter-spacing--h5: -.07813rem;
  --_typography---heading-line-height--h6: 120%;
  --_typography---heading-letter-spacing--h6: -.0625rem;
  --_typography---heading-font-sizes--display-02: 5.9375rem;
  --_typography---heading-line-height--display-02: 120%;
  --_typography---heading-letter-spacing--display-02: 0rem;
  --_typography---heading-font-sizes--h6: 1.25rem;
  --_typography---heading-font-sizes--display-01: 10.4rem;
  --_typography---heading-line-height--display-01: 106%;
  --_typography---heading-letter-spacing--display-01: 0rem;
  --_typography---heading-font-sizes--display-03: 5rem;
  --_typography---heading-line-height--display-03: 100%;
  --_typography---heading-letter-spacing--display-03: 0rem;
  --_typography---texts-font-sizes--paragraph-l: 1.25rem;
  --_typography---texts-line-height--paragraph-l: 125%;
  --_typography---texts-letter-spacing--paragraph-l: -.0625rem;
  --_typography---texts-font-sizes--caption: .875rem;
  --_typography---texts-line-height--caption: 100%;
  --_typography---texts-letter-spacing--caption: -.035rem;
  --_typography---texts-font-sizes--tag: .75rem;
  --_typography---texts-line-height--tag: 100%;
  --_typography---texts-letter-spacing--tag: -.03rem;
  --_sizes---default-sizes--width: 100%;
  --_sizes---default-sizes--height: 100%;
  --_sizes---spacing--spacing-big: 2.5rem;
  --_sizes---spacing--spacing-small: 1rem;
  --_sizes---spacing--spacing-large: 2.25rem;
  --_sizes---container--max-width: 91rem;
  --_sizes---spacing--spacing-jumbo: 3.75rem;
  --_sizes---spacing--spacing-massive: 5rem;
  --_sizes---spacing--spacing-colossal: 6.5rem;
  --_sizes---spacing--spacing-medium: 1.25rem;
  --_sizes---spacing--spacing-normal: 2rem;
  --_sizes---spacing--spacing-regular: 1.5rem;
  --_sizes---spacing--spacing-xxsmall: .62rem;
  --_sizes---spacing--spacing-tiny: .25rem;
  --_sizes---spacing--spacing-xregular: 1.88rem;
  --_sizes---border-radius--radius-pill: 5rem;
  --_sizes---spacing--spacing-xsmall: .5rem;
  --_sizes---spacing--spacing-xxxsmall: .75rem;
  --_sizes---border-radius--radius-xsmall: .5rem;
  --_sizes---border-radius--radius-circle: 100%;
  --_sizes---border-radius--radius-tiny: .25rem;
  --_sizes---border-radius--radius-xxsmall: .75rem;
  --_sizes---border-radius--radius-small: 1rem;
  --_sizes---border-radius--radius-medium: 1.25rem;
  --_sizes---border-radius--radius-regular: 1.5rem;
  --_sizes---border-radius--radius-large: 1.875rem;
  --_sizes---border-radius--radius-big: 2rem;
  --_sizes---border-radius--radius-soft: 3.75rem;
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  font-family: var(--font-family--big-shoulders-display);
  color: var(--_colors---background-color--text-black);
  font-size: var(--_typography---heading-font-sizes--h1);
  line-height: var(--_typography---heading-line-height--h1);
  font-weight: var(--font-weight--bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
}
h2:where(:not([class*="heading-scale-"])), :where(.heading-scale-2) {
  font-size: var(--_typography---heading-font-sizes--h2);
  line-height: var(--_typography---heading-line-height--h2);
  font-weight: var(--font-weight--extra-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h2);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
}
h3:where(:not([class*="heading-scale-"])), :where(.heading-scale-3) {
  font-size: var(--_typography---heading-font-sizes--h3);
  line-height: var(--_typography---heading-line-height--h3);
  font-weight: var(--font-weight--bold);
  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--extra-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
  text-transform: uppercase;
  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--extra-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h5);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
}
h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-6) {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: bold;
  line-height: 18px;
}
p {
  font-family: var(--font-family--inter);
  color: var(--_colors---background-color--text-black);
  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);
  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-width: var(--_sizes---default-sizes--width);
  object-fit: cover;
  display: inline-block;
}
figure {
  margin-top: var(--_sizes---spacing--spacing-big);
  margin-bottom: 0;
}
.page-wrapper {
  overflow: clip;
}
.utility-page-wrap {
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  padding-right: var(--_sizes---spacing--spacing-small);
  padding-left: var(--_sizes---spacing--spacing-small);
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.utility-page-content {
  width: var(--_sizes---default-sizes--width);
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 43.75rem;
  margin-bottom: 0;
  display: flex;
}
.utility-page-content.protected {
  max-width: none;
}
.utility-page-form {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.utility-page-form.protected {
  grid-column-gap: var(--_sizes---spacing--spacing-large);
  grid-row-gap: var(--_sizes---spacing--spacing-large);
}
.section.styleguide-hero {
  background-image: url('../images/desktop-11.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.section.cta {
  height: 350vh;
  position: relative;
  overflow: clip;
}
.section.footer {
  background-color: var(--_colors---background-color--text-black);
}
.section.service, .section.pricing {
  background-color: var(--_colors---background-color--background);
}
.section.about-us-hero {
  background-color: var(--_colors---background-color--text-black);
  flex-flow: column;
  display: flex;
}
.section.work-with {
  background-color: var(--_colors---background-color--background);
}
.section.term {
  background-color: var(--_colors---background-color--primary-color);
}
.section.award {
  background-color: var(--_colors---background-color--background);
}
.section.license-hero {
  background-image: url('../images/desktop-11-2.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.section.pricing-hero {
  background-image: url('../images/desktop-11-3.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.section.vision {
  background-image: url('../images/dreamlike-abstract-art.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.section.socials-section {
  background-color: var(--_colors---background-color--text-black);
}
.section.contact-hero {
  background-color: #9d1000;
}
.section.blog-hero {
  background-image: url('../images/desktop-12.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.section.blog-single {
  background-color: var(--_colors---background-color--primary-color);
}
.section.changelog-hero-section {
  background-image: url('../images/desktop-11-1.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.section.process-section {
  overflow: clip;
}
.container {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  max-width: var(--_sizes---container--max-width);
  padding-right: var(--_sizes---spacing--spacing-small);
  padding-left: var(--_sizes---spacing--spacing-small);
  margin-left: auto;
  margin-right: auto;
}
.wrapper {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  padding-top: var(--_sizes---spacing--spacing-jumbo);
  padding-bottom: var(--_sizes---spacing--spacing-jumbo);
  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;
  display: flex;
}
.wrapper.styleguide-hero {
  z-index: 1;
  justify-content: flex-start;
  align-items: stretch;
  padding-top: 8rem;
  padding-bottom: 20rem;
}
.wrapper.styleguide-details {
  padding-top: var(--_sizes---spacing--spacing-massive);
  padding-bottom: var(--_sizes---spacing--spacing-massive);
  grid-column-gap: 3.5rem;
  grid-row-gap: 3.5rem;
  justify-content: flex-start;
  align-items: stretch;
}
.wrapper.footer-wrap {
  padding-top: var(--_sizes---spacing--spacing-massive);
  padding-bottom: var(--_sizes---spacing--spacing-small);
  align-items: stretch;
}
.wrapper.home-hero {
  padding-top: var(--_sizes---spacing--spacing-colossal);
  padding-bottom: var(--_sizes---spacing--spacing-medium);
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  align-items: stretch;
}
.wrapper.about-us {
  padding-top: var(--_sizes---spacing--spacing-jumbo);
  padding-bottom: var(--_sizes---spacing--spacing-big);
  grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
  grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
  grid-template-rows: auto;
  grid-template-columns: .25fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}
.wrapper.work-wrap {
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  grid-template-rows: auto;
  grid-template-columns: .25fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: flex-start;
}
.wrapper.service {
  grid-column-gap: 3.12rem;
  grid-row-gap: 3.12rem;
  align-items: stretch;
}
.wrapper.work-two {
  grid-template-rows: auto;
  grid-template-columns: .25fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: flex-start;
}
.wrapper.process-wrap {
  justify-content: center;
  align-items: stretch;
  height: 100vh;
  position: sticky;
  top: 0;
}
.wrapper.faq {
  grid-column-gap: 3.12rem;
  grid-row-gap: 3.12rem;
  justify-content: center;
  align-items: stretch;
  max-width: 64.625rem;
}
.wrapper.pricing-wrap, .wrapper.blog {
  grid-column-gap: 3.12rem;
  grid-row-gap: 3.12rem;
  align-items: stretch;
}
.wrapper.about-hero {
  padding-top: var(--_sizes---spacing--spacing-massive);
  padding-bottom: var(--_sizes---spacing--spacing-big);
  grid-column-gap: 10rem;
  grid-row-gap: 10rem;
  align-items: stretch;
  position: relative;
}
.wrapper.career {
  padding-bottom: var(--_sizes---spacing--spacing-massive);
  grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
  grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
  grid-template-rows: auto;
  grid-template-columns: .4fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
  position: relative;
}
.wrapper.work-with {
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  justify-content: flex-start;
  align-items: flex-start;
}
.wrapper.changelog-details {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  align-items: center;
}
.wrapper.term-hero {
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  padding-top: 11.81rem;
  padding-bottom: 11.81rem;
}
.wrapper.term-details, .wrapper.privacy {
  max-width: 75rem;
  padding-top: var(--_sizes---spacing--spacing-massive);
  padding-bottom: var(--_sizes---spacing--spacing-massive);
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  justify-content: center;
  align-items: flex-start;
  margin-left: auto;
  margin-right: auto;
}
.wrapper.license-hero {
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 7rem;
  padding-bottom: 20rem;
}
.wrapper.license-details {
  align-items: stretch;
  max-width: 82.5rem;
  margin-left: auto;
  margin-right: auto;
}
.wrapper.award-wrap {
  align-items: stretch;
}
.wrapper.pricing-hero {
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 6.81rem;
  padding-bottom: 20rem;
}
.wrapper.vision-hero {
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  padding-top: 22rem;
  padding-bottom: 12rem;
}
.wrapper.members-wrap {
  align-items: stretch;
  height: 100vh;
  position: sticky;
  top: 0;
}
.wrapper.socials-wrapper {
  padding-top: var(--_sizes---spacing--spacing-massive);
  padding-bottom: var(--_sizes---spacing--spacing-massive);
  grid-column-gap: 10rem;
  grid-row-gap: 10rem;
  align-items: stretch;
}
.wrapper.project-hero-wrapper {
  padding-top: 7rem;
  padding-bottom: var(--_sizes---spacing--spacing-big);
  grid-column-gap: 1.75rem;
  grid-row-gap: 0rem;
  align-items: stretch;
}
.wrapper.project-single-hero {
  padding-top: 6.5rem;
  padding-bottom: var(--_sizes---spacing--spacing-tiny);
}
.wrapper.project-details-wrapper {
  padding-bottom: var(--_sizes---spacing--spacing-normal);
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  align-items: stretch;
}
.wrapper.contact-hero-wrapper {
  grid-column-gap: var(--_sizes---spacing--spacing-large);
  grid-row-gap: var(--_sizes---spacing--spacing-large);
  align-items: stretch;
  padding-top: 6.81rem;
  padding-bottom: 3rem;
}
.wrapper.blog-hero-wrapper {
  padding-top: 9rem;
  padding-bottom: var(--_sizes---spacing--spacing-colossal);
  grid-column-gap: var(--_sizes---spacing--spacing-massive);
  grid-row-gap: var(--_sizes---spacing--spacing-massive);
  grid-template-rows: auto;
  grid-template-columns: .6fr 1fr;
  grid-auto-columns: 1fr;
  place-items: start stretch;
  display: grid;
}
.wrapper.blog-single-hero {
  grid-column-gap: var(--_sizes---spacing--spacing-massive);
  grid-row-gap: var(--_sizes---spacing--spacing-massive);
  grid-template-rows: auto;
  grid-template-columns: 1fr .95fr;
  grid-auto-columns: 1fr;
  align-items: stretch;
  padding-top: 9rem;
  display: grid;
}
.wrapper.blog-details-wrapper {
  padding-bottom: var(--_sizes---spacing--spacing-big);
}
.wrapper.related-blogs {
  padding-top: var(--_sizes---spacing--spacing-big);
  grid-column-gap: 3.2rem;
  grid-row-gap: 3.2rem;
  align-items: stretch;
}
.wrapper.pricing-single-hero {
  padding-top: 6.81rem;
  padding-bottom: var(--_sizes---spacing--spacing-colossal);
  grid-column-gap: var(--_sizes---spacing--spacing-colossal);
  grid-row-gap: var(--_sizes---spacing--spacing-colossal);
  grid-template-rows: auto;
  grid-template-columns: .75fr 1fr;
  grid-auto-columns: 1fr;
  place-items: start stretch;
  display: grid;
}
.wrapper.more-works {
  padding-bottom: var(--_sizes---spacing--spacing-colossal);
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  grid-template-rows: auto;
  grid-template-columns: .25fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: stretch;
}
.styleguide-hero-contents {
  width: var(--_sizes---default-sizes--width);
  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;
  max-width: 43.75rem;
  display: flex;
}
.styleguide-title-box {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.subtitle {
  font-family: var(--font-family--big-shoulders-display);
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---heading-font-sizes--h5);
  line-height: var(--_typography---heading-line-height--h6);
  font-weight: var(--font-weight--bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h6);
  text-transform: uppercase;
}
.subtitle:where(.subtitle-color) {
  color: var(--_colors---background-color--primary-color);
}
.subtitle:where(.subtitle-black) {
  color: var(--_colors---background-color--text-black);
}
.styleguide-title {
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---heading-font-sizes--display-02);
  line-height: var(--_typography---heading-line-height--display-02);
  font-weight: var(--font-weight--extra-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--display-02);
  text-transform: uppercase;
}
.styleguide-short-desc {
  color: var(--_colors---text-color--white);
  font-weight: var(--font-weight--semi-bold);
}
.text-details {
  grid-column-gap: var(--_sizes---spacing--spacing-massive);
  grid-row-gap: var(--_sizes---spacing--spacing-massive);
  grid-template-rows: auto;
  grid-template-columns: .5fr 1fr;
  grid-auto-columns: 1fr;
  place-items: start stretch;
  display: grid;
}
.text-subtite-box {
  top: var(--_sizes---spacing--spacing-regular);
  position: sticky;
}
.text-details-box {
  padding: var(--_sizes---spacing--spacing-xregular);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  background-color: var(--_colors---background-color--background);
  flex-flow: column;
  display: flex;
}
.display-01 {
  font-family: var(--font-family--big-shoulders-display);
  color: var(--_colors---background-color--text-black);
  font-size: var(--_typography---heading-font-sizes--display-01);
  line-height: var(--_typography---heading-line-height--display-01);
  font-weight: var(--font-weight--bold);
  letter-spacing: var(--_typography---heading-letter-spacing--display-01);
  text-transform: uppercase;
}
.display-02 {
  font-family: var(--font-family--big-shoulders-display);
  color: var(--_colors---background-color--text-black);
  font-size: var(--_typography---heading-font-sizes--display-02);
  line-height: var(--_typography---heading-line-height--display-02);
  font-weight: var(--font-weight--extra-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--display-02);
  text-transform: uppercase;
}
.display-03 {
  font-family: var(--font-family--inter);
  color: var(--_colors---background-color--text-black);
  font-size: var(--_typography---heading-font-sizes--display-03);
  line-height: var(--_typography---heading-line-height--display-03);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---heading-letter-spacing--display-03);
  text-transform: uppercase;
}
.heading-2 {
  text-transform: uppercase;
}
.large-para {
  color: var(--_colors---background-color--text-black);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--extra-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: uppercase;
}
.default-para.bold {
  font-weight: var(--font-weight--semi-bold);
}
.caption {
  color: var(--_colors---background-color--text-black);
  font-size: var(--_typography---texts-font-sizes--caption);
  line-height: var(--_typography---texts-line-height--caption);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--caption);
  text-transform: uppercase;
}
.tag {
  font-size: var(--_typography---texts-font-sizes--tag);
  line-height: var(--_typography---texts-line-height--tag);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--tag);
}
.line {
  width: var(--_sizes---default-sizes--width);
  background-color: var(--_colors---text-color--white);
  height: .0625rem;
  min-height: .0625rem;
}
.color-details-box {
  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;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}
.color-box {
  width: var(--_sizes---default-sizes--width);
  height: 20rem;
  padding: var(--_sizes---spacing--spacing-xregular);
  grid-column-gap: var(--_sizes---spacing--spacing-tiny);
  grid-row-gap: var(--_sizes---spacing--spacing-tiny);
  background-color: var(--_colors---background-color--primary-color);
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
}
.color-box._02 {
  background-color: var(--_colors---background-color--text-black);
}
.color-box._03 {
  background-color: var(--_colors---background-color--background);
}
.color-box._04 {
  border: 1px solid var(--_colors---background-color--background);
  background-color: var(--_colors---text-color--white);
}
.color-name {
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  font-weight: var(--font-weight--extra-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
  text-transform: uppercase;
}
.color-name.black {
  color: var(--_colors---background-color--text-black);
}
.color-code {
  color: var(--_colors---text-color--white);
  font-weight: var(--font-weight--semi-bold);
}
.color-code.black {
  color: var(--_colors---background-color--text-black);
  font-weight: var(--font-weight--semi-bold);
}
.button-box {
  padding: var(--_sizes---spacing--spacing-xregular);
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  background-color: var(--_colors---background-color--background);
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.primary-button {
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  border: 1px solid var(--_colors---background-color--primary-color);
  border-radius: var(--_sizes---border-radius--radius-pill);
  font-family: var(--font-family--inter);
  color: var(--_colors---background-color--primary-color);
  font-size: var(--_typography---texts-font-sizes--caption);
  line-height: var(--_typography---texts-line-height--caption);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--caption);
  text-transform: uppercase;
  flex-flow: row;
  flex: none;
  justify-content: center;
  align-items: center;
  padding: .44rem .62rem;
  text-decoration: none;
  display: flex;
}
.primary-button:where(.button-black) {
  border-color: var(--_colors---background-color--text-black);
  color: var(--_colors---background-color--text-black);
}
.primary-button:where(.button-white-100) {
  width: var(--_sizes---default-sizes--width);
  border-color: var(--_colors---text-color--white);
  color: var(--_colors---text-color--white);
}
.primary-button:where(.button-white-outline) {
  border-color: var(--_colors---text-color--white);
  color: var(--_colors---text-color--white);
}
.primary-button:where(.button-white-bg) {
  border-color: var(--_colors---text-color--white);
  background-color: var(--_colors---text-color--white);
  color: var(--_colors---background-color--primary-color);
}
.primary-button.nav {
  border-color: var(--_colors---text-color--white);
  color: var(--_colors---text-color--white);
}
.primary-button.nav:where(.navbar-secondary) {
  border-color: var(--_colors---background-color--primary-color);
  color: var(--_colors---background-color--primary-color);
}
.primary-button.white {
  border-color: var(--_colors---text-color--white);
  color: var(--_colors---text-color--white);
}
.primary-button.accept {
  background-color: var(--_colors---background-color--primary-color);
  color: var(--_colors---text-color--white);
}
.button-texts {
  flex-flow: column;
  height: .875rem;
  position: relative;
  overflow: clip;
}
.cta-top {
  padding-top: var(--_sizes---spacing--spacing-xxsmall);
  padding-bottom: var(--_sizes---spacing--spacing-xxsmall);
  background-color: var(--_colors---background-color--primary-color);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.cta-title {
  font-family: var(--font-family--big-shoulders-display);
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---heading-font-sizes--h1);
  line-height: var(--_typography---heading-line-height--h1);
  font-weight: var(--font-weight--bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
}
.footer-top {
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  flex-flow: column;
  display: flex;
}
.footer-details {
  grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
  grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.footer-left {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
  grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
  flex-flow: column;
  max-width: 31.0625rem;
  display: flex;
}
.footer-header {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.footer-short-desc {
  color: var(--_colors---text-color--white);
  font-weight: var(--font-weight--semi-bold);
}
.social-link-box {
  grid-column-gap: var(--_sizes---spacing--spacing-xregular);
  grid-row-gap: var(--_sizes---spacing--spacing-xregular);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.social-link {
  grid-column-gap: .2rem;
  grid-row-gap: .2rem;
  color: var(--_colors---text-color--white);
  font-weight: var(--font-weight--semi-bold);
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  transition: all .25s;
  display: flex;
}
.social-link:hover {
  color: var(--_colors---background-color--primary-color);
}
.social-link.dropdown-social {
  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);
}
.footer-right {
  grid-column-gap: var(--_sizes---spacing--spacing-massive);
  grid-row-gap: var(--_sizes---spacing--spacing-massive);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.footer-iinfo {
  grid-column-gap: var(--_sizes---spacing--spacing-xregular);
  grid-row-gap: var(--_sizes---spacing--spacing-xregular);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.pages-header {
  color: var(--_colors---text-color--50-white);
}
.page-details {
  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;
}
.page-link {
  color: var(--_colors---text-color--white);
  font-weight: var(--font-weight--semi-bold);
  text-decoration: none;
  transition: all .25s;
}
.page-link:hover, .page-link[aria-current="page"], .page-link.is-active {
  color: var(--_colors---background-color--primary-color);
}
.copyright-box {
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.copyright-text {
  color: var(--_colors---text-color--50-white);
}
.credit-link {
  color: var(--_colors---text-color--white);
  text-decoration: none;
  transition: all .25s;
}
.credit-link:hover {
  color: var(--_colors---background-color--primary-color);
}
.home-hero-title {
  font-family: var(--font-family--big-shoulders-display);
  color: var(--_colors---background-color--primary-color);
  font-size: var(--_typography---heading-font-sizes--display-01);
  line-height: var(--_typography---heading-line-height--display-01);
  font-weight: var(--font-weight--bold);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--display-01);
}
.overflow-hidden {
  width: var(--_sizes---default-sizes--width);
  position: relative;
  overflow: clip;
}
.overflow-hidden.project {
  height: 26rem;
}
.overflow-hidden.blog-one {
  height: 22.5625rem;
}
.overflow-hidden.member {
  background-color: var(--_colors---background-color--background);
  height: 25.5625rem;
}
.overflow-hidden.project-update {
  height: 36.75rem;
}
.overflow-hidden.blog {
  height: 21.5742rem;
}
.overflow-hidden.home {
  max-width: var(--_sizes---container--max-width);
  padding-right: var(--_sizes---spacing--spacing-small);
  padding-left: var(--_sizes---spacing--spacing-small);
  margin-left: auto;
  margin-right: auto;
}
.digital-block {
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.digital-texts {
  width: var(--_sizes---default-sizes--width);
  max-width: 14rem;
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---texts-font-sizes--tag);
  line-height: var(--_typography---texts-line-height--tag);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--tag);
}
.digital-texts._02 {
  text-align: right;
  max-width: 15rem;
}
.fusion-block {
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.fusion-text {
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---heading-font-sizes--display-03);
  line-height: var(--_typography---heading-line-height--display-03);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---heading-letter-spacing--display-03);
}
.about-us-left {
  top: var(--_sizes---spacing--spacing-regular);
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: sticky;
}
.about-us-right {
  grid-column-gap: var(--_sizes---spacing--spacing-massive);
  grid-row-gap: var(--_sizes---spacing--spacing-massive);
  flex-flow: column;
  display: flex;
}
.about-us-desc {
  font-size: var(--_typography---heading-font-sizes--h3);
  line-height: var(--_typography---heading-line-height--h3);
  font-weight: var(--font-weight--bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h3);
}
.about-us-images {
  grid-column-gap: var(--_sizes---spacing--spacing-xregular);
  grid-row-gap: var(--_sizes---spacing--spacing-xregular);
  flex-flow: column;
  display: flex;
  position: relative;
}
.image-flex {
  justify-content: space-between;
  align-items: stretch;
  display: flex;
  position: relative;
}
.about-us-image {
  max-width: 8.125rem;
  height: 8.125rem;
}
.about-us-image._02 {
  position: relative;
  left: -7rem;
}
.about-us-image.opacity-zero {
  opacity: 0;
}
.about-us-image._05 {
  position: relative;
  left: -16rem;
}
.about-us-image._07 {
  position: relative;
  left: -10rem;
}
.home-hero-content {
  padding-right: var(--_sizes---spacing--spacing-big);
  padding-bottom: var(--_sizes---spacing--spacing-medium);
  padding-left: var(--_sizes---spacing--spacing-big);
  grid-column-gap: 14.5rem;
  grid-row-gap: 14.5rem;
  flex-flow: column;
  justify-content: flex-end;
  align-items: stretch;
  display: flex;
  position: absolute;
  inset: 0%;
}
.about-button-box {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  right: -4rem;
}
.works-tabs {
  width: var(--_sizes---default-sizes--width);
  flex-flow: column;
  display: flex;
}
.works-tabs-content {
  width: var(--_sizes---default-sizes--width);
}
.works-tabs-menu {
  margin-bottom: var(--_sizes---spacing--spacing-jumbo);
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.work-tab-link {
  border: 1px solid var(--_colors---background-color--text-black);
  border-radius: var(--_sizes---border-radius--radius-pill);
  background-color: var(--_colors---text-color--transparent);
  color: var(--_colors---background-color--text-black);
  font-size: var(--_typography---texts-font-sizes--caption);
  line-height: var(--_typography---texts-line-height--caption);
  font-weight: var(--font-weight--semi-bold);
  text-align: center;
  letter-spacing: var(--_typography---texts-letter-spacing--caption);
  text-transform: uppercase;
  padding: .44rem .63rem;
}
.work-tab-link[aria-current="page"], .work-tab-link.is-active {
  border-color: var(--_colors---background-color--primary-color);
  background-color: var(--_colors---text-color--transparent);
  color: var(--_colors---background-color--primary-color);
}
.works-collection-list {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-normal);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.works-collection-list.project {
  grid-template-columns: 1fr;
}
.project-item-link {
  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;
  grid-auto-columns: 1fr;
  text-decoration: none;
  display: grid;
}
.project-item-content {
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.project-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;
}
.project-item-name {
  color: var(--_colors---background-color--text-black);
  font-size: var(--_typography---heading-font-sizes--h3);
  line-height: var(--_typography---heading-line-height--h3);
  font-weight: var(--font-weight--bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h3);
  text-transform: uppercase;
}
.project-catagory {
  color: var(--_colors---background-color--text-black);
  font-size: var(--_typography---texts-font-sizes--caption);
  line-height: var(--_typography---texts-line-height--caption);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--caption);
  text-transform: uppercase;
}
.work-top {
  width: var(--_sizes---default-sizes--width);
  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;
  max-width: 45.8125rem;
  display: flex;
}
.work-header {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.work-short-desc {
  font-weight: var(--font-weight--semi-bold);
}
.service-top {
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  flex-flow: column;
  width: 49%;
  margin-left: auto;
  margin-right: 0;
  display: flex;
}
.service-card-details {
  padding-top: var(--_sizes---spacing--spacing-big);
  padding-bottom: var(--_sizes---spacing--spacing-normal);
  grid-column-gap: .12rem;
  grid-row-gap: .12rem;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}
.service-card-header {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 16.125rem;
  display: flex;
}
.card-title {
  color: var(--_colors---background-color--text-black);
  font-size: var(--_typography---heading-font-sizes--h5);
  line-height: var(--_typography---heading-line-height--h5);
  font-weight: var(--font-weight--extra-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h5);
  text-transform: uppercase;
}
.card-title.career {
  color: var(--_colors---background-color--text-black);
  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);
}
.card-short-desc {
  font-weight: var(--font-weight--semi-bold);
  text-align: center;
}
.card-short-desc.career {
  width: var(--_sizes---default-sizes--width);
  max-width: 32.8125rem;
  color: var(--_colors---background-color--text-black);
  text-align: left;
}
.card-short-desc.growth {
  width: var(--_sizes---default-sizes--width);
  text-align: left;
  max-width: 17.75rem;
}
.service-card-image {
  height: auto;
}
.service-card-image.active {
  opacity: 0;
  position: absolute;
  inset: 0%;
}
.service-card-image.two {
  max-width: 7.625rem;
}
.service-card-image.shoe {
  max-width: 12.9375rem;
}
.service-card-image.four {
  max-width: 18.6875rem;
}
.process-details-wrap {
  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 1fr;
  grid-auto-columns: 1fr;
  place-items: end stretch;
  display: grid;
  position: relative;
  overflow: clip;
}
.process-details {
  grid-column-gap: var(--_sizes---spacing--spacing-xxxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxxsmall);
  height: 34rem;
  display: flex;
}
.process-details._02 {
  transform: translate(0, 7rem);
}
.process-details._03 {
  transform: translate(0, 13rem);
}
.process-details._04 {
  transform: translate(0, 20rem);
}
.process-details._05 {
  transform: translate(0, 25rem);
}
.process-serial {
  grid-column-gap: var(--_sizes---spacing--spacing-xxxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxxsmall);
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.serial-number {
  font-family: var(--font-family--big-shoulders-display);
  color: var(--_colors---background-color--primary-color);
  font-size: var(--_typography---heading-font-sizes--h5);
  line-height: var(--_typography---heading-line-height--h5);
  font-weight: var(--font-weight--bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h5);
  flex: none;
}
.serial-line {
  z-index: 1;
  width: 1px;
  height: var(--_sizes---default-sizes--height);
  background-color: var(--_colors---background-color--text-black);
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.serial-line-two {
  background-color: var(--_colors---background-color--primary-color);
  justify-content: center;
  align-items: center;
  width: 5px;
  height: 30%;
  display: flex;
  position: absolute;
  inset: 0% auto auto;
}
.serial-line-box {
  height: var(--_sizes---default-sizes--height);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}
.process-card-header {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-xxxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxxsmall);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 12.6875rem;
  display: flex;
}
.process-card-title {
  color: var(--_colors---background-color--text-black);
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  font-weight: var(--font-weight--extra-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
  text-transform: uppercase;
}
.process-card-short-desc {
  font-weight: var(--font-weight--semi-bold);
}
.growth-wrap {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.faq-top {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  flex-flow: column;
  max-width: 36rem;
  display: flex;
}
.question-box {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  justify-content: space-between;
  align-items: center;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  display: flex;
}
.faq-box {
  width: var(--_sizes---default-sizes--width);
  padding: var(--_sizes---spacing--spacing-medium);
  background-color: var(--_colors---background-color--background);
  flex-flow: column;
  justify-content: flex-start;
  display: flex;
  overflow: clip;
}
.question-text {
  color: var(--_colors---background-color--text-black);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--extra-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: uppercase;
  white-space: pre-wrap;
  word-break: keep-all;
}
.faq-answer {
  width: var(--_sizes---default-sizes--width);
  background-color: var(--_colors---text-color--transparent);
  min-width: 45.5rem;
  max-width: 45.5rem;
  display: block;
  position: static;
  inset: 5rem 0% 0%;
  overflow: clip;
}
.answer-text {
  width: var(--_sizes---default-sizes--width);
  font-weight: var(--font-weight--semi-bold);
  white-space: pre-wrap;
  word-break: keep-all;
  padding-top: 10px;
}
.pricing-top {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  flex-flow: column;
  max-width: 42rem;
  margin-left: auto;
  margin-right: 0;
  display: flex;
}
.blog-top {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  flex-flow: column;
  max-width: 42rem;
  display: flex;
}
.about-hero-title {
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---heading-font-sizes--display-02);
  line-height: var(--_typography---heading-line-height--display-02);
  letter-spacing: var(--_typography---heading-letter-spacing--display-02);
}
.red-text {
  color: var(--_colors---background-color--primary-color);
}
.impact-box {
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.impact-text {
  color: var(--_colors---text-color--white);
  font-weight: var(--font-weight--semi-bold);
}
.about-hero-image {
  max-width: 11.5625rem;
}
.about-hero-image._02 {
  height: auto;
  position: absolute;
  inset: 10rem 35rem auto auto;
  transform: rotate(8deg);
}
.about-hero-image._01 {
  height: auto;
  position: absolute;
  inset: 22rem auto auto 2rem;
  transform: rotate(-2deg);
}
.career-top {
  top: var(--_sizes---spacing--spacing-medium);
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  flex-flow: column;
  max-width: 18.125rem;
  display: flex;
  position: sticky;
}
.career-bottom {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  flex-flow: column;
  max-width: 61.125rem;
  margin-top: 12rem;
  display: flex;
}
.career-card {
  width: var(--_sizes---default-sizes--width);
  padding: var(--_sizes---spacing--spacing-medium);
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  background-color: var(--_colors---background-color--background);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}
.card-header {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-normal);
  grid-row-gap: var(--_sizes---spacing--spacing-normal);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.apply-box {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.amount-text {
  color: var(--_colors---text-color--battleship-gray);
  font-weight: var(--font-weight--semi-bold);
}
.work-with-title {
  width: var(--_sizes---default-sizes--width);
  max-width: 67.1rem;
  font-size: var(--_typography---heading-font-sizes--h3);
  line-height: var(--_typography---heading-line-height--h3);
  font-weight: var(--font-weight--bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h3);
}
.work-desc-box {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.work-with-desc {
  width: var(--_sizes---default-sizes--width);
  max-width: 20.25rem;
  font-weight: var(--font-weight--semi-bold);
}
.growth-block {
  width: var(--_sizes---default-sizes--width);
  padding-left: var(--_sizes---spacing--spacing-medium);
  grid-column-gap: var(--_sizes---spacing--spacing-colossal);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.growth-box {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  justify-content: space-between;
  align-items: center;
  max-width: 33rem;
  display: flex;
}
.work-quantity {
  font-family: var(--font-family--big-shoulders-display);
  color: var(--_colors---background-color--primary-color);
  font-size: var(--_typography---heading-font-sizes--display-02);
  line-height: var(--_typography---heading-line-height--display-02);
  font-weight: var(--font-weight--extra-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--display-02);
}
.version-card {
  width: var(--_sizes---default-sizes--width);
  max-width: 82.5rem;
  padding: var(--_sizes---spacing--spacing-big);
  grid-column-gap: var(--_sizes---spacing--spacing-large);
  grid-row-gap: var(--_sizes---spacing--spacing-large);
  background-color: var(--_colors---background-color--background);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}
.version-box {
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  flex-flow: column;
  display: flex;
}
.version-date {
  font-size: var(--_typography---texts-font-sizes--caption);
  line-height: var(--_typography---texts-line-height--caption);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--caption);
  text-transform: uppercase;
}
.updates-box {
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  flex-flow: column;
  display: flex;
}
.update-title {
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--extra-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: uppercase;
}
.update-lists {
  padding-left: var(--_sizes---spacing--spacing-normal);
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  font-family: var(--font-family--geist);
  font-weight: var(--font-weight--medium);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 0;
  display: flex;
}
.term-hero-title {
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---heading-font-sizes--display-02);
  line-height: var(--_typography---heading-line-height--display-02);
  font-weight: var(--font-weight--extra-bold);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--display-02);
}
.term-update {
  color: var(--_colors---text-color--white);
  font-weight: var(--font-weight--semi-bold);
}
.term-box {
  grid-column-gap: var(--_sizes---spacing--spacing-xxxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxxsmall);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.term-title {
  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);
}
.term-desc {
  font-weight: var(--font-weight--semi-bold);
}
.desc-box {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  display: flex;
}
.license-top {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  flex-flow: column;
  max-width: 50rem;
  display: flex;
}
.license-short-des {
  color: var(--_colors---text-color--white);
  font-weight: var(--font-weight--semi-bold);
}
.lisence-title {
  font-family: var(--font-family--big-shoulders-display);
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---heading-font-sizes--display-02);
  line-height: var(--_typography---heading-line-height--display-02);
  letter-spacing: var(--_typography---heading-letter-spacing--display-02);
}
.license-block {
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.license-link {
  color: var(--_colors---background-color--text-black);
  text-decoration: none;
}
.license-image-box {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.license-image-box.google {
  background-color: var(--_colors---background-color--background);
  height: 27.25rem;
}
.license-image-flex {
  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;
}
.googlefont-image {
  max-width: 13.75rem;
  height: 13.75rem;
}
.hugeicons-image {
  max-width: 34.9432rem;
  height: 6.25rem;
}
.award-top {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  flex-flow: column;
  max-width: 42rem;
  margin-left: auto;
  margin-right: 0;
  display: flex;
}
.award-block {
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  grid-template-rows: auto;
  grid-template-columns: .5fr 1fr;
  grid-auto-columns: 1fr;
  place-items: start stretch;
  display: grid;
}
.award-images {
  top: var(--_sizes---spacing--spacing-medium);
  position: sticky;
}
.award-image._01 {
  opacity: 1;
}
.award-image._02, .award-image._03, .award-image._04, .award-image._05 {
  opacity: 0;
  position: absolute;
  inset: 0%;
}
.award-info {
  width: 100%;
  padding-top: var(--_sizes---spacing--spacing-medium);
  padding-right: var(--_sizes---spacing--spacing-medium);
  padding-bottom: var(--_sizes---spacing--spacing-medium);
  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;
}
.award-title-box {
  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;
  margin-left: -2.5rem;
  display: flex;
}
.award-title {
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--extra-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: uppercase;
}
.award-short-desc {
  font-weight: var(--font-weight--semi-bold);
}
.progress-line {
  background-color: var(--_colors---background-color--text-black);
  width: 81.5%;
  height: .0625rem;
  position: absolute;
  inset: auto auto 0% 1.2rem;
}
.bracket {
  max-width: 6.875rem;
}
.vision-title {
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---heading-font-sizes--display-03);
  line-height: var(--_typography---heading-line-height--display-03);
  font-weight: var(--font-weight--heavy);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--display-03);
}
.title-info {
  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: 42.1875rem;
  display: flex;
}
.dropdown {
  background-color: var(--_colors---text-color--transparent);
  font-size: var(--_typography---texts-font-sizes--caption);
  line-height: var(--_typography---texts-line-height--caption);
  letter-spacing: var(--_typography---texts-letter-spacing--caption);
  cursor: pointer;
  padding: 0;
}
.nav-menu-wrap {
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  background-color: var(--_colors---text-color--transparent);
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}
.nav-buttons {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: center;
  align-items: center;
  display: flex;
}
.nav-logo.base:where(.navbar-secondary), .nav-logo.secondary {
  display: none;
}
.nav-logo.secondary:where(.navbar-secondary) {
  display: block;
}
.dropdown-link {
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---texts-font-sizes--default-paragraph);
  line-height: var(--_typography---texts-line-height--default-paragraph);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  flex: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  transition: all .25s;
}
.dropdown-link:hover, .dropdown-link[aria-current="page"], .dropdown-link.is-active {
  color: var(--_colors---background-color--primary-color);
}
.dd-flex-wrap {
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
  grid-template-rows: auto;
  grid-template-columns: .5fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  display: grid;
}
.dd-flex-wrap.course {
  grid-template-columns: minmax(0, 1fr);
}
.navbar-brand {
  width: 7rem;
  padding: 0;
}
.navbar {
  width: var(--_sizes---default-sizes--width);
  max-width: var(--_sizes---container--max-width);
  padding: var(--_sizes---spacing--spacing-small);
  background-color: var(--_colors---text-color--transparent);
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: 0 0% auto;
}
.nav-items {
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  display: flex;
}
.dropdown-header {
  margin-bottom: var(--_sizes---spacing--spacing-xregular);
  color: var(--_colors---text-color--white);
  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);
  flex: none;
}
.dropdown-header.off {
  color: var(--_colors---text-color--50-white);
}
.navbar-wrapper {
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
}
.nav-link {
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---texts-font-sizes--caption);
  line-height: var(--_typography---texts-line-height--caption);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--caption);
  text-transform: uppercase;
  padding: 0;
  text-decoration: none;
  transition: all .25s;
}
.nav-link:where(.navbar-secondary) {
  color: var(--_colors---background-color--text-black);
}
.nav-link:hover {
  background-color: var(--_colors---text-color--transparent);
  color: var(--_colors---background-color--primary-color);
}
.nav-link:hover:where(.navbar-red) {
  color: var(--_colors---border-color--light-ash);
}
.nav-link[aria-current="page"], .nav-link.is-active {
  color: var(--_colors---background-color--primary-color);
}
.nav-link[aria-current="page"]:where(.navbar-red), .nav-link.is-active:where(.navbar-red) {
  color: var(--_colors---border-color--light-ash);
}
.nav-pages {
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.dropdown-toggle {
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  color: var(--_colors---text-color--white);
  font-weight: var(--font-weight--semi-bold);
  text-transform: uppercase;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  padding: 0;
  transition: all .25s;
  display: inline-flex;
}
.dropdown-toggle:where(.navbar-secondary) {
  color: var(--_colors---background-color--text-black);
}
.dropdown-toggle:hover, .dropdown-toggle:hover:where(.navbar-secondary) {
  color: var(--_colors---background-color--primary-color);
}
.dropdown-toggle:hover:where(.navbar-red) {
  color: var(--_colors---border-color--light-ash);
}
.tab-menus {
  display: none;
}
.tab-menus.desk {
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.dropdown-arrrow {
  width: .75rem;
  min-width: .75rem;
}
.dd-menu-wrap {
  margin-top: var(--_sizes---spacing--spacing-regular);
  padding: var(--_sizes---spacing--spacing-regular);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  background-color: var(--_colors---background-color--text-black);
  flex-flow: column;
  display: flex;
}
.cart-button {
  background-color: var(--_colors---text-color--transparent);
  width: 1.5rem;
  height: 1.5rem;
  color: var(--_colors---text-color--white);
  justify-content: center;
  align-items: center;
  padding: 0;
}
.cart-button:where(.navbar-secondary) {
  color: var(--_colors---background-color--text-black);
}
.cart-text, .cart-quantity {
  display: none;
}
.cart-block {
  position: absolute;
  inset: auto 9.25rem auto auto;
}
.title-two {
  font-family: var(--font-family--big-shoulders-display);
  color: var(--_colors---background-color--text-black);
  font-size: var(--_typography---heading-font-sizes--h5);
  line-height: var(--_typography---heading-line-height--h5);
  font-weight: var(--font-weight--bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h5);
  text-transform: uppercase;
}
.cta-wrapper {
  height: 100vh;
  position: sticky;
  top: 0;
}
.cta-marquee {
  flex: none;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.logo-content-block {
  flex-flow: column;
  justify-content: flex-end;
  height: 85vh;
  display: flex;
  overflow: clip;
}
.background-image {
  z-index: -1;
  background-image: url('../images/silhouette-in-red-tunnel-1-1.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  inset: 0%;
}
.brand-image-wrap {
  z-index: 5;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
  position: relative;
}
.brand-image {
  width: 120%;
  max-width: none;
  height: auto;
}
.inner-content {
  z-index: 5;
  padding: var(--_sizes---spacing--spacing-normal) var(--_sizes---spacing--spacing-jumbo);
  grid-column-gap: var(--_sizes---spacing--spacing-small);
  grid-row-gap: var(--_sizes---spacing--spacing-small);
  background-color: var(--_colors---background-color--primary-color);
  opacity: 0;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}
.inner-content-wrap {
  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;
}
.cta-logo {
  height: auto;
}
.cta-gradient {
  z-index: 5;
  width: var(--_sizes---default-sizes--width);
  background-image: linear-gradient(180deg, #15151500, var(--_colors---background-color--text-black));
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  height: 7rem;
  position: absolute;
  inset: auto 0% 0%;
}
.footer-logo-link {
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  justify-content: flex-start;
  align-items: center;
  width: 6.8125rem;
}
.social-svg {
  width: .75rem;
}
.dropdown-nav {
  background-color: var(--_colors---text-color--transparent);
  width: 63.4375rem;
  transform: translate(-20%);
}
.dropdown-nav.is-open {
  background-color: #fff0;
}
.dropdown-nav.pages {
  background-color: var(--_colors---text-color--transparent);
  width: 50.875rem;
  margin-left: -16rem;
  overflow: clip;
}
.project-svg {
  width: 1.875rem;
  min-width: 1.875rem;
  height: 1.875rem;
  min-height: 1.875rem;
  color: var(--_colors---background-color--text-black);
  justify-content: center;
  align-items: center;
  display: flex;
}
.project-svg._02 {
  color: var(--_colors---background-color--primary-color);
  position: absolute;
  inset: 0% auto 0% -100%;
}
.project-arrow-box {
  width: 1.875rem;
  min-width: 1.875rem;
  height: 1.875rem;
  min-height: 1.875rem;
  position: relative;
  overflow: clip;
}
.empty-state {
  border-radius: var(--_sizes---border-radius--radius-xsmall);
  background-color: var(--_colors---background-color--primary-color);
  color: var(--_colors---text-color--white);
  text-align: center;
}
.works-button-block {
  width: var(--_sizes---default-sizes--width);
  margin-top: var(--_sizes---spacing--spacing-big);
  justify-content: center;
  align-items: center;
  display: flex;
}
.services-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 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.services-card {
  width: var(--_sizes---default-sizes--width);
  position: relative;
  overflow: clip;
}
.service-card-title {
  color: var(--_colors---background-color--text-black);
  font-size: var(--_typography---heading-font-sizes--h5);
  line-height: var(--_typography---heading-line-height--h5);
  font-weight: var(--font-weight--extra-bold);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--h5);
  text-transform: uppercase;
}
.service-card-para {
  color: var(--_colors---background-color--text-black);
  font-weight: var(--font-weight--semi-bold);
  text-align: center;
}
.service-card-images {
  position: relative;
}
.process-top {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  flex-flow: column;
  max-width: 42.1875rem;
  margin-left: auto;
  margin-right: 0;
  display: flex;
}
.idea-bottom {
  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;
  grid-auto-columns: 1fr;
  display: grid;
}
.idea-nums {
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.idea-all-nums {
  position: relative;
}
.idea-num {
  font-size: var(--_typography---heading-font-sizes--h2);
  line-height: var(--_typography---heading-line-height--h2);
  font-weight: var(--font-weight--extra-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h2);
}
.idea-num._01 {
  opacity: 1;
}
.idea-num._02, .idea-num._03, .idea-num._04, .idea-num._05 {
  opacity: 0;
  position: absolute;
  inset: 0%;
}
.idea-total-num {
  font-size: var(--_typography---heading-font-sizes--h2);
  line-height: var(--_typography---heading-line-height--h2);
  font-weight: var(--font-weight--extra-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h2);
}
.idea-cards {
  display: flex;
  position: relative;
}
.idea-card {
  background-color: var(--_colors---background-color--eerie-black);
  flex: none;
  width: 50%;
  height: 26.5rem;
  position: relative;
  overflow: clip;
}
.idea-card._02, .idea-card._03, .idea-card._04, .idea-card._05 {
  width: 12.5%;
}
.idea-card-details {
  padding: var(--_sizes---spacing--spacing-regular);
  grid-column-gap: var(--_sizes---spacing--spacing-colossal);
  grid-row-gap: var(--_sizes---spacing--spacing-colossal);
  background-image: linear-gradient(0deg, var(--_colors---background-color--50-black), var(--_colors---background-color--50-black));
  opacity: 0;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}
.idea-card-details._01 {
  opacity: 100;
}
.idea-card-title {
  color: var(--_colors---text-color--white);
  text-align: center;
}
.idea-card-para {
  width: var(--_sizes---default-sizes--width);
  max-width: 30.5625rem;
  color: var(--_colors---text-color--white);
  font-weight: var(--font-weight--semi-bold);
  text-align: center;
}
.idea-inactive {
  opacity: 0;
}
.idea-inactive._02, .idea-inactive._03, .idea-inactive._04, .idea-inactive._05 {
  opacity: 100;
}
.idea-active {
  opacity: 1;
  position: absolute;
  inset: 0%;
}
.idea-active._02, .idea-active._03, .idea-active._04, .idea-active._05 {
  opacity: 0;
}
.faq-items {
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  flex-flow: column;
  display: flex;
}
.faq-arrow {
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  min-width: 1.25rem;
  display: flex;
}
.pricing-bottom {
  width: var(--_sizes---default-sizes--width);
  padding-right: var(--_sizes---spacing--spacing-xxsmall);
  grid-column-gap: var(--_sizes---spacing--spacing-large);
  grid-row-gap: var(--_sizes---spacing--spacing-large);
  background-color: var(--_colors---background-color--primary-color);
  grid-template-rows: auto;
  grid-template-columns: .8fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
  position: relative;
}
.pricing-dot {
  border-radius: var(--_sizes---border-radius--radius-circle);
  background-color: var(--_colors---background-color--background);
  width: 1.375rem;
  height: 1.375rem;
  position: absolute;
  inset: -1.5% auto auto -.8%;
}
.pricing-dot.right-top {
  inset: -1.5% -.8% auto auto;
}
.pricing-dot.bottom-right {
  inset: auto -.8% -1.5% auto;
}
.pricing-dot.bottom-left {
  inset: auto auto -1.5% -.8%;
}
.pricing-dot.left-top {
  z-index: 1;
  background-color: var(--_colors---text-color--white);
}
.pricing-dot.plan-right-top {
  z-index: 1;
  background-color: var(--_colors---text-color--white);
  inset: -1.5% -.8% auto auto;
}
.pricing-dot.plan-bottom-left {
  z-index: 1;
  background-color: var(--_colors---text-color--white);
  inset: auto auto -1.5% -.8%;
}
.pricing-dot.plan-bottom-right {
  z-index: 1;
  background-color: var(--_colors---text-color--white);
  inset: auto -.8% -1.5% auto;
}
.pricing-item {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  grid-column-gap: 1.62rem;
  grid-row-gap: 1.62rem;
  flex-flow: column;
  padding: 2rem 1.5rem 2rem 2rem;
  display: flex;
  position: relative;
}
.pricing-item.black {
  background-color: var(--_colors---background-color--text-black);
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
}
.pricing-item.plan {
  background-color: var(--_colors---background-color--text-black);
  height: auto;
  padding-top: 1.4rem;
  padding-bottom: 2rem;
  overflow: clip;
}
.pricing-top-content {
  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;
}
.plan-item-name {
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  font-weight: var(--font-weight--extra-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
  text-transform: uppercase;
}
.plan-short-desp {
  color: var(--_colors---text-color--white);
  font-weight: var(--font-weight--regular);
}
.plan-item-price {
  font-family: var(--font-family--big-shoulders-display);
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---heading-font-sizes--h1);
  line-height: var(--_typography---heading-line-height--h1);
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
}
.includes-list-details {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  display: flex;
}
.includes-list-details.plan {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.includes-text {
  color: var(--_colors---text-color--white);
}
.includes-lists ul {
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  color: var(--_colors---text-color--white);
  font-weight: var(--font-weight--semi-bold);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-bottom: 0;
  padding-left: 20px;
  display: grid;
}
.includes-lists li {
  font-weight: var(--font-weight--regular);
}
.plan-buttons {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.price-dots {
  left: var(--_sizes---spacing--spacing-xxsmall);
  width: 1rem;
  height: auto;
  position: absolute;
  top: auto;
  bottom: auto;
  right: auto;
}
.price-dots.red-left {
  margin-top: -6px;
}
.price-dots.right-red {
  top: auto;
  left: auto;
  right: var(--_sizes---spacing--spacing-xxsmall);
  margin-top: -6px;
  bottom: auto;
}
.pricing-red-dot {
  border-radius: var(--_sizes---border-radius--radius-circle);
  background-color: var(--_colors---background-color--primary-color);
  width: 1.375rem;
  height: 1.375rem;
  position: absolute;
  inset: -1.5% auto auto -.8%;
}
.pricing-red-dot._02 {
  inset: -1.5% -.8% auto auto;
}
.pricing-red-dot._03 {
  inset: auto auto -1.5% -.8%;
}
.pricing-red-dot._04 {
  inset: auto -.8% -1.5% auto;
}
.pricing-red-dot.plan {
  width: 1rem;
  height: 1rem;
  left: -.5%;
}
.pricing-red-dot.plan-right {
  width: 1rem;
  height: 1rem;
  inset: -1.5% -.5% auto auto;
}
.pricing-red-dot.plan-three {
  width: 1rem;
  height: 1rem;
  inset: auto auto -1.5% -.5%;
}
.pricing-red-dot.plan-four {
  width: 1rem;
  height: 1rem;
  inset: auto -.5% -1.5% auto;
}
.blog-front {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  opacity: 1;
  flex-flow: column;
  display: flex;
  position: relative;
  overflow: clip;
}
.blog-front._01 {
  opacity: 0;
}
.blog-items-bottom {
  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 auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  display: flex;
  overflow: clip;
}
.blog-collection-wrapper {
  flex: none;
  width: 32.3%;
}
.blog-collection-wrapper._01 {
  width: 60%;
}
.blog-collection-wrapper._02, .blog-collection-wrapper._03 {
  width: 18.5%;
}
.blog-item-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;
  overflow: clip;
}
.blog-item-detail._02, .blog-item-detail.detail {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
}
.blog-item-name {
  color: var(--_colors---background-color--text-black);
  font-size: var(--_typography---heading-font-sizes--h6);
  line-height: var(--_typography---heading-line-height--h6);
  font-weight: var(--font-weight--extra-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h6);
  text-transform: uppercase;
}
.blog-item-name._02 {
  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-item-name.blog-item {
  color: var(--_colors---background-color--text-black);
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  font-weight: var(--font-weight--extra-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
}
.blog-short-desp {
  max-height: 2.5rem;
  font-weight: var(--font-weight--semi-bold);
  display: -webkit-box;
  overflow: hidden;
}
.blog-short-desp._02 {
  max-height: none;
  overflow: visible;
}
.blog-main-item {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  height: 29.625rem;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: clip;
}
.blog-back {
  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;
  flex: none;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 19.75rem;
  display: flex;
}
.blog-hover-contents {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  opacity: 1;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: clip;
}
.blog-hover-contents._03, .blog-hover-contents._02 {
  opacity: 0;
}
.hide-embed {
  display: none;
}
.team-top {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  flex-flow: column;
  max-width: 32rem;
  display: flex;
}
.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 1fr;
  grid-auto-columns: 1fr;
  display: flex;
}
.team-member-card {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  flex-flow: column;
  display: flex;
}
.team-member-detail {
  grid-column-gap: .13rem;
  grid-row-gap: .13rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}
.team-member-name {
  width: 7.75rem;
  font-family: var(--font-family--big-shoulders-display);
  color: var(--_colors---background-color--text-black);
  font-size: var(--_typography---heading-font-sizes--h5);
  line-height: var(--_typography---heading-line-height--h5);
  text-align: right;
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
  text-transform: uppercase;
}
.team-member-name:where(.team-details-second) {
  width: 6rem;
}
.team-member-desig {
  font-weight: var(--font-weight--semi-bold);
  text-align: right;
}
.member-box {
  width: var(--_sizes---default-sizes--width);
  flex: none;
  max-width: 24rem;
}
.awards-items {
  grid-column-gap: var(--_sizes---spacing--spacing-xxxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxxsmall);
  flex-flow: column;
  display: flex;
}
.award-item {
  border-bottom: 1px dashed var(--_colors---border-color--light-ash);
  background-color: var(--_colors---text-color--transparent);
  justify-content: flex-end;
  display: flex;
  position: relative;
}
.award-arrow {
  opacity: 0;
  width: 1.3125rem;
  height: 1.3125rem;
  color: var(--_colors---text-color--white);
  justify-content: center;
  align-items: center;
  display: flex;
}
.checkout-form {
  padding: 8rem 0 4rem;
}
.career-iitem-box {
  width: var(--_sizes---default-sizes--width);
}
.socials-top {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.socials-title {
  color: var(--_colors---text-color--white);
}
.socials-bottom {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  grid-template-rows: auto;
  grid-template-columns: .4fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.social-circle {
  border: 1px solid var(--_colors---border-color--mid-tone-gray);
  border-radius: var(--_sizes---border-radius--radius-circle);
  width: 28.3125rem;
  height: 28.3125rem;
}
.social-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;
  display: grid;
}
.social-card {
  padding: var(--_sizes---spacing--spacing-medium);
  background-color: var(--_colors---text-color--white);
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
  position: relative;
}
.social-card._01 {
  background-color: var(--_colors---background-color--primary-color);
}
.social-text {
  color: var(--_colors---background-color--text-black);
  font-size: var(--_typography---texts-font-sizes--caption);
  line-height: var(--_typography---texts-line-height--caption);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--caption);
  text-transform: uppercase;
}
.social-text._01 {
  color: var(--_colors---text-color--white);
}
.social-arrow-box {
  left: var(--_sizes---spacing--spacing-medium);
  top: var(--_sizes---spacing--spacing-medium);
  background-color: var(--_colors---text-color--white);
  width: 1.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
  min-height: 1.25rem;
  color: var(--_colors---background-color--text-black);
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: auto;
  right: auto;
}
.social-arrow {
  width: .875rem;
  min-width: .875rem;
  height: .875rem;
  min-height: .875rem;
}
.social-arrow._02 {
  width: 1.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
  min-height: 1.25rem;
}
.social-arrow._03 {
  width: 1rem;
  min-width: 1rem;
  height: 1rem;
  min-height: 1rem;
}
.social-animate-blocks {
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
}
.instagram-card {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.instagram-card._02, .instagram-card._03 {
  opacity: 0;
  position: absolute;
  inset: 0%;
}
.social-num {
  font-family: var(--font-family--manrope);
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---heading-font-sizes--h1);
  line-height: var(--_typography---heading-line-height--h1);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h1);
}
.social-para {
  font-family: var(--font-family--manrope);
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---texts-font-sizes--caption);
  line-height: var(--_typography---texts-line-height--caption);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--caption);
}
.project-hero-top {
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  grid-template-rows: auto;
  grid-template-columns: 1fr .75fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: flex-start;
  display: grid;
}
.project-hero-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: flex-start;
  align-items: flex-start;
  max-width: 37.5rem;
  display: flex;
}
.project-hero-title {
  font-size: var(--_typography---heading-font-sizes--display-02);
  line-height: var(--_typography---heading-line-height--display-02);
  font-weight: var(--font-weight--extra-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--display-02);
}
.project-hero-para {
  font-weight: var(--font-weight--semi-bold);
}
.project-grid {
  z-index: 1;
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  grid-template-rows: auto;
  grid-template-columns: 1fr .75fr;
  grid-auto-columns: 1fr;
  margin-top: -3rem;
  display: grid;
  position: relative;
}
.project-collection-wrapper {
  z-index: 2;
  position: relative;
}
.project-banner-details {
  width: var(--_sizes---default-sizes--width);
  position: relative;
}
.project-single-name {
  font-family: var(--font-family--inter);
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---heading-font-sizes--display-03);
  line-height: var(--_typography---heading-line-height--display-03);
  font-weight: var(--font-weight--heavy);
  letter-spacing: var(--_typography---heading-letter-spacing--display-03);
  position: absolute;
  inset: auto auto 2.81rem 2.81rem;
}
.overview-block {
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}
.project-overview {
  top: 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);
  position: sticky;
}
.overview-flex {
  grid-column-gap: var(--_sizes---spacing--spacing-normal);
  grid-row-gap: var(--_sizes---spacing--spacing-normal);
  flex-flow: column;
  display: flex;
}
.overview-richtexts p {
  margin-bottom: var(--_sizes---spacing--spacing-medium);
  font-weight: var(--font-weight--semi-bold);
}
.overview-informations {
  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;
}
.overview-items {
  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;
}
.overview-services {
  font-size: var(--_typography---texts-font-sizes--caption);
  line-height: var(--_typography---texts-line-height--caption);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--caption);
  text-transform: uppercase;
}
.project-category-name {
  font-size: var(--_typography---heading-font-sizes--h5);
  line-height: var(--_typography---heading-line-height--h5);
  font-weight: var(--font-weight--extra-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h5);
  text-transform: uppercase;
}
.gallery-collection-list {
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.contact-hero-top {
  width: var(--_sizes---default-sizes--width);
  grid-column-gap: var(--_sizes---spacing--spacing-normal);
  grid-row-gap: var(--_sizes---spacing--spacing-normal);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.contact-hero-left {
  width: var(--_sizes---default-sizes--width);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 51.75rem;
  display: flex;
}
.contact-hero-title {
  margin-top: var(--_sizes---spacing--spacing-medium);
  margin-bottom: var(--_sizes---spacing--spacing-xxsmall);
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---heading-font-sizes--display-02);
  line-height: var(--_typography---heading-line-height--display-02);
  font-weight: var(--font-weight--extra-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--display-02);
}
.contact-hero-para {
  color: var(--_colors---text-color--white);
  font-weight: var(--font-weight--semi-bold);
}
.contact-hero-para.blog {
  width: var(--_sizes---default-sizes--width);
  max-width: 37.5rem;
}
.contact-hero-para.plan {
  color: var(--_colors---background-color--text-black);
}
.contact-hero-right {
  width: var(--_sizes---default-sizes--width);
  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;
  max-width: 20.5rem;
  margin-top: 4rem;
  display: flex;
}
.contact-link {
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---texts-font-sizes--caption);
  line-height: var(--_typography---texts-line-height--caption);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--caption);
  text-transform: uppercase;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}
.contact-arrow {
  opacity: 0;
  justify-content: center;
  align-items: center;
  width: 1rem;
  height: 1rem;
  margin-left: -1.5rem;
  display: flex;
}
.contact-form-block {
  width: var(--_sizes---default-sizes--width);
  margin-bottom: 0;
}
.contact-form {
  width: var(--_sizes---default-sizes--width);
}
.success-message {
  background-color: var(--_colors---text-color--white);
  color: var(--_colors---background-color--text-black);
  font-weight: var(--font-weight--semi-bold);
}
.error-message {
  width: var(--_sizes---default-sizes--width);
  background-color: var(--_colors---background-color--primary-color);
  color: var(--_colors---text-color--white);
  text-align: center;
}
.text-field {
  padding: 0px 0px var(--_sizes---spacing--spacing-small) var(--_sizes---spacing--spacing-medium);
  border: 1px solid var(--_colors---text-color--transparent);
  background-color: var(--_colors---text-color--transparent);
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---texts-font-sizes--default-paragraph);
  line-height: var(--_typography---texts-line-height--default-paragraph);
  font-style: italic;
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  margin-bottom: 0;
}
.text-field:focus {
  border-color: var(--_colors---text-color--transparent);
}
.text-field::placeholder {
  color: var(--_colors---text-color--50-white);
}
.field-label {
  margin-bottom: 0;
  margin-left: var(--_sizes---spacing--spacing-medium);
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--extra-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
  text-transform: uppercase;
}
.field-label.protected {
  color: var(--_colors---background-color--text-black);
}
.contact-form-fields {
  padding-top: var(--_sizes---spacing--spacing-medium);
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  border-bottom: 1px solid var(--_colors---text-color--white);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.contact-form-fields.protected {
  width: var(--_sizes---default-sizes--width);
  max-width: 434.625rem;
}
.contact-all-fields {
  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;
  display: grid;
}
.select-field {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: var(--_sizes---spacing--spacing-small);
  padding-left: var(--_sizes---spacing--spacing-medium);
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--_colors---text-color--transparent);
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--_colors---text-color--transparent);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--_colors---text-color--transparent);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--_colors---text-color--transparent);
  background-color: var(--_colors---text-color--transparent);
  color: var(--_colors---text-color--50-white);
  font-size: var(--_typography---texts-font-sizes--default-paragraph);
  line-height: var(--_typography---texts-line-height--default-paragraph);
  font-style: italic;
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  appearance: none;
  background-image: url('../images/caretdown.webp');
  background-position: 96%;
  background-repeat: no-repeat;
  background-size: 1.5rem;
  margin-bottom: 0;
}
.select-field:focus {
  border-color: var(--_colors---text-color--transparent);
}
.select-field::placeholder {
  color: var(--_colors---text-color--50-white);
}
.text-area {
  padding: 0px 0px 0px var(--_sizes---spacing--spacing-medium);
  border: 1px solid var(--_colors---text-color--transparent);
  background-color: var(--_colors---text-color--transparent);
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---texts-font-sizes--default-paragraph);
  line-height: var(--_typography---texts-line-height--default-paragraph);
  font-style: italic;
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  margin-bottom: 0;
}
.text-area:focus {
  border-color: var(--_colors---text-color--transparent);
}
.text-area::placeholder {
  color: var(--_colors---text-color--50-white);
}
.contact-button {
  margin-top: var(--_sizes---spacing--spacing-large);
  border: 1px solid var(--_colors---text-color--white);
  border-radius: var(--_sizes---border-radius--radius-pill);
  background-color: var(--_colors---text-color--transparent);
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---texts-font-sizes--caption);
  line-height: var(--_typography---texts-line-height--caption);
  font-weight: var(--font-weight--semi-bold);
  text-align: center;
  letter-spacing: var(--_typography---texts-letter-spacing--caption);
  text-transform: uppercase;
  cursor: pointer;
  padding: .44rem 1rem;
  transition: all .25s;
}
.contact-button:hover {
  background-color: var(--_colors---text-color--white);
  color: var(--_colors---background-color--primary-color);
}
.blog-hero-left {
  width: var(--_sizes---default-sizes--width);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 28rem;
  display: flex;
}
.blog-item-link {
  width: var(--_sizes---default-sizes--width);
  padding: var(--_sizes---spacing--spacing-medium);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  background-color: var(--_colors---text-color--white);
  grid-template-rows: auto;
  grid-template-columns: 1fr .75fr;
  grid-auto-columns: 1fr;
  text-decoration: none;
  display: grid;
  position: relative;
  overflow: clip;
}
.blogs-tabs {
  width: var(--_sizes---default-sizes--width);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.blogs-tabs-menu {
  margin-bottom: var(--_sizes---spacing--spacing-jumbo);
  grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  display: flex;
}
.blogs-tabs-content {
  width: var(--_sizes---default-sizes--width);
}
.blog-tab-link {
  border: 1px solid var(--_colors---background-color--text-black);
  border-radius: var(--_sizes---border-radius--radius-pill);
  background-color: var(--_colors---text-color--transparent);
  color: var(--_colors---background-color--text-black);
  font-size: var(--_typography---texts-font-sizes--caption);
  line-height: var(--_typography---texts-line-height--caption);
  font-weight: var(--font-weight--semi-bold);
  text-align: center;
  letter-spacing: var(--_typography---texts-letter-spacing--caption);
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  padding: .44rem .63rem;
  display: flex;
}
.blog-tab-link[aria-current="page"], .blog-tab-link.is-active {
  border-color: var(--_colors---background-color--primary-color);
  background-color: var(--_colors---text-color--transparent);
  color: var(--_colors---background-color--primary-color);
}
.blogs-collections {
  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-link-item {
  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;
  text-decoration: none;
  display: flex;
}
.category-informations {
  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;
}
.blog-category {
  border-radius: var(--_sizes---border-radius--radius-pill);
  background-color: var(--_colors---background-color--background);
  color: var(--_colors---background-color--text-black);
  font-size: var(--_typography---texts-font-sizes--caption);
  line-height: var(--_typography---texts-line-height--caption);
  font-weight: var(--font-weight--semi-bold);
  text-align: center;
  letter-spacing: var(--_typography---texts-letter-spacing--caption);
  text-transform: uppercase;
  padding: .44rem .63rem;
}
.published-date {
  font-weight: var(--font-weight--semi-bold);
}
.blog-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;
}
.item-blog-name {
  color: var(--_colors---background-color--text-black);
  font-size: var(--_typography---heading-font-sizes--h6);
  line-height: var(--_typography---heading-line-height--h6);
  letter-spacing: var(--_typography---heading-letter-spacing--h6);
}
.item-blog-desp {
  font-weight: var(--font-weight--semi-bold);
}
.blog-single-left {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.blog-single-title {
  margin-top: var(--_sizes---spacing--spacing-medium);
  margin-bottom: var(--_sizes---spacing--spacing-xxsmall);
  color: var(--_colors---text-color--white);
}
.left-blog-single {
  grid-column-gap: var(--_sizes---spacing--spacing-normal);
  grid-row-gap: var(--_sizes---spacing--spacing-normal);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}
.blog-top-flex {
  grid-column-gap: var(--_sizes---spacing--spacing-big);
  grid-row-gap: var(--_sizes---spacing--spacing-big);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.blog-author-details {
  grid-column-gap: var(--_sizes---spacing--spacing-xxxsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xxxsmall);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-author-icon {
  width: 3rem;
  height: auto;
}
.blog-author-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;
}
.blog-author-name {
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---heading-font-sizes--h6);
  line-height: var(--_typography---heading-line-height--h6);
  letter-spacing: var(--_typography---heading-letter-spacing--h6);
}
.blog-author-desig {
  color: var(--_colors---text-color--white);
}
.blog-richtexts h5:where(:not([class*="heading-scale-"])), .blog-richtexts :where(.heading-scale-5) {
  margin-bottom: var(--_sizes---spacing--spacing-xxxsmall);
  font-size: var(--_typography---heading-font-sizes--h6);
  line-height: var(--_typography---heading-line-height--h6);
  letter-spacing: var(--_typography---heading-letter-spacing--h6);
}
.blog-richtexts p {
  margin-bottom: var(--_sizes---spacing--spacing-medium);
  font-weight: var(--font-weight--semi-bold);
}
.blog-richtexts h6:where(:not([class*="heading-scale-"])), .blog-richtexts :where(.heading-scale-6) {
  margin-top: var(--_sizes---spacing--spacing-big);
  margin-bottom: var(--_sizes---spacing--spacing-xxxsmall);
  font-size: var(--_typography---heading-font-sizes--h6);
  line-height: var(--_typography---heading-line-height--h6);
  font-weight: var(--font-weight--extra-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h6);
  text-transform: uppercase;
}
.related-top {
  grid-column-gap: var(--_sizes---spacing--spacing-normal);
  grid-row-gap: var(--_sizes---spacing--spacing-normal);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.pricing-hero-title {
  margin-top: var(--_sizes---spacing--spacing-medium);
  margin-bottom: var(--_sizes---spacing--spacing-xxsmall);
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---heading-font-sizes--display-02);
  line-height: var(--_typography---heading-line-height--display-02);
  font-weight: var(--font-weight--extra-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--display-02);
}
.pricing-hero-title.black {
  color: var(--_colors---background-color--text-black);
}
.pricing-hero-left {
  width: var(--_sizes---default-sizes--width);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 34.375rem;
  display: flex;
}
.plan-detail-card {
  width: var(--_sizes---default-sizes--width);
  height: var(--_sizes---default-sizes--height);
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  background-color: var(--_colors---background-color--primary-color);
  flex-flow: column;
  padding: .62rem .62rem 2rem;
  display: flex;
  position: relative;
}
.buy-now-button, .option-list, .quantity {
  display: none;
}
.default-state {
  margin-bottom: 0;
}
.add-to-cart-button {
  border: 1px solid var(--_colors---text-color--white);
  border-radius: var(--_sizes---border-radius--radius-pill);
  background-color: var(--_colors---text-color--transparent);
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---texts-font-sizes--caption);
  line-height: var(--_typography---texts-line-height--caption);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--caption);
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  padding: .44rem .62rem;
  transition: all .25s;
}
.add-to-cart-button:hover {
  background-color: var(--_colors---text-color--white);
  color: var(--_colors---background-color--primary-color);
}
.cookies-card {
  top: auto;
  left: auto;
  right: var(--_sizes---spacing--spacing-medium);
  bottom: var(--_sizes---spacing--spacing-medium);
  z-index: 100;
  width: var(--_sizes---default-sizes--width);
  max-width: 26.875rem;
  padding: var(--_sizes---spacing--spacing-regular);
  grid-column-gap: var(--_sizes---spacing--spacing-regular);
  grid-row-gap: var(--_sizes---spacing--spacing-regular);
  background-color: var(--_colors---text-color--white);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
  position: fixed;
}
.cookies-flex {
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.cookies-title {
  color: var(--_colors---background-color--text-black);
  font-size: var(--_typography---heading-font-sizes--h6);
  line-height: var(--_typography---heading-line-height--h6);
  font-weight: var(--font-weight--extra-bold);
  letter-spacing: var(--_typography---heading-letter-spacing--h6);
  text-transform: uppercase;
}
.cookies-link {
  color: var(--_colors---background-color--primary-color);
  font-weight: var(--font-weight--semi-bold);
  text-decoration: none;
}
.cookies-buttons {
  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;
}
.dropdown-betwwen {
  grid-column-gap: var(--_sizes---spacing--spacing-medium);
  grid-row-gap: var(--_sizes---spacing--spacing-medium);
  justify-content: space-between;
  align-items: center;
  padding: .94rem 1rem;
  display: flex;
}
.reserved-text {
  color: var(--_colors---text-color--50-white);
}
.powered-text {
  color: var(--_colors---text-color--white);
}
.mobile-dropdown-contents {
  display: none;
}
.error-image {
  max-width: 31.375rem;
  height: auto;
}
.error-title {
  font-family: var(--font-family--big-shoulders-display);
  font-size: var(--_typography---heading-font-sizes--display-02);
  line-height: var(--_typography---heading-line-height--display-02);
  text-align: center;
  letter-spacing: var(--_typography---heading-letter-spacing--display-02);
  margin-top: .62rem;
  margin-bottom: .62rem;
}
.error-para {
  font-weight: var(--font-weight--semi-bold);
  text-align: center;
}
.error-buttons {
  margin-top: var(--_sizes---spacing--spacing-large);
  justify-content: center;
  align-items: center;
  display: flex;
}
.back-arrow {
  width: 1rem;
  height: 1rem;
  display: none;
}
.back-arrow:where(.button-back) {
  display: block;
}
.protected-title {
  font-family: var(--font-family--big-shoulders-display);
  font-size: var(--_typography---heading-font-sizes--display-02);
  line-height: var(--_typography---heading-line-height--display-02);
  letter-spacing: var(--_typography---heading-letter-spacing--display-02);
}
.protected-para {
  font-weight: var(--font-weight--semi-bold);
  margin-bottom: 0;
}
.protected-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: center;
  display: flex;
}
.protected-text-field {
  padding: 0px 0px var(--_sizes---spacing--spacing-small) var(--_sizes---spacing--spacing-medium);
  border: 1px solid var(--_colors---text-color--transparent);
  background-color: var(--_colors---text-color--transparent);
  color: var(--_colors---text-color--white);
  font-size: var(--_typography---texts-font-sizes--default-paragraph);
  line-height: var(--_typography---texts-line-height--default-paragraph);
  font-style: italic;
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---texts-letter-spacing--default-paragraph);
  margin-bottom: 0;
}
.protected-text-field:focus {
  border-color: var(--_colors---text-color--transparent);
}
.protected-text-field::placeholder {
  color: var(--_colors---text-color--50-white);
}
.protected-text-field.password {
  border-bottom-color: var(--_colors---background-color--text-black);
  color: var(--_colors---background-color--text-black);
}
.protected-text-field.password::placeholder {
  color: var(--_colors---background-color--text-black);
  opacity: .5;
}
.protected-button {
  border: 1px solid var(--_colors---background-color--primary-color);
  border-radius: var(--_sizes---border-radius--radius-pill);
  background-color: var(--_colors---text-color--transparent);
  color: var(--_colors---background-color--primary-color);
  font-size: var(--_typography---texts-font-sizes--caption);
  line-height: var(--_typography---texts-line-height--caption);
  font-weight: var(--font-weight--semi-bold);
  text-align: center;
  letter-spacing: var(--_typography---texts-letter-spacing--caption);
  text-transform: uppercase;
  cursor: pointer;
  padding: .44rem 1rem;
  transition: all .25s;
}
.protected-button:hover {
  background-color: var(--_colors---background-color--primary-color);
  color: var(--_colors---text-color--white);
}
.changelog-hero-left {
  width: var(--_sizes---default-sizes--width);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 46rem;
  display: flex;
}
.close-button {
  cursor: pointer;
}
.web-payments {
  display: none;
}
.subtotal {
  font-weight: var(--font-weight--semi-bold);
}
.price-plan {
  font-weight: var(--font-weight--bold);
}
.cart-quantity-2 {
  display: none;
}
.item-block {
  grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
  grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  margin-left: 0;
  margin-right: 0;
  position: relative;
}
.remove-button {
  color: var(--_colors---background-color--primary-color);
  text-decoration: none;
  position: absolute;
  inset: auto 0% auto auto;
}
.checkout-button {
  border-style: solid;
  border-color: var(--_colors---background-color--primary-color);
  background-color: var(--_colors---background-color--primary-color);
  color: var(--_colors---text-color--white);
  margin-bottom: 0;
  transition: all .25s;
}
.checkout-button:hover {
  background-color: var(--_colors---background-color--text-black);
}
.product-icon {
  display: none;
}
.order-items {
  margin-bottom: 0;
}
.customer-info {
  font-size: var(--_typography---heading-font-sizes--h4);
  line-height: var(--_typography---heading-line-height--h4);
  letter-spacing: var(--_typography---heading-letter-spacing--h4);
}
.block-header {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}
.order-item {
  padding: 0;
}
.order-item-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;
  margin-left: 0;
  margin-right: 0;
  display: flex;
}
.error-state {
  background-color: var(--_colors---background-color--primary-color);
  color: var(--_colors---text-color--white);
  text-align: center;
}
.process-height {
  height: 400vh;
}
.team-height {
  height: 350vh;
}
.total {
  font-size: var(--_typography---texts-font-sizes--paragraph-l);
  line-height: var(--_typography---texts-line-height--paragraph-l);
  font-weight: var(--font-weight--bold);
  letter-spacing: var(--_typography---texts-letter-spacing--paragraph-l);
}@media screen and (min-width: 1440px) {

  body {
    --_typography---texts-font-sizes--default-paragraph: 1rem;
    --_typography---texts-line-height--default-paragraph: 120%;
    --_typography---texts-letter-spacing--default-paragraph: 0rem;
    --_typography---heading-font-sizes--h1: 4.6875rem;
    --_typography---heading-line-height--h1: 120%;
    --_typography---heading-letter-spacing--h1: 0rem;
    --_typography---heading-font-sizes--h2: 2.5rem;
    --_typography---heading-line-height--h2: 112%;
    --_typography---heading-letter-spacing--h2: 0rem;
    --_typography---heading-font-sizes--h3: 2.1875rem;
    --_typography---heading-line-height--h3: 110%;
    --_typography---heading-letter-spacing--h3: 0rem;
    --_typography---heading-font-sizes--h4: 1.875rem;
    --_typography---heading-line-height--h4: 117%;
    --_typography---heading-letter-spacing--h4: 0rem;
    --_typography---heading-font-sizes--h5: 1.5625rem;
    --_typography---heading-line-height--h5: 120%;
    --_typography---heading-letter-spacing--h5: 0rem;
    --_typography---heading-line-height--h6: 120%;
    --_typography---heading-letter-spacing--h6: 0rem;
    --_typography---heading-font-sizes--display-02: 5.9375rem;
    --_typography---heading-line-height--display-02: 120%;
    --_typography---heading-letter-spacing--display-02: 0rem;
    --_typography---heading-font-sizes--h6: 1.25rem;
    --_typography---heading-font-sizes--display-01: 10.9rem;
    --_typography---heading-line-height--display-01: 106%;
    --_typography---heading-letter-spacing--display-01: 0rem;
    --_typography---heading-font-sizes--display-03: 5rem;
    --_typography---heading-line-height--display-03: 100%;
    --_typography---heading-letter-spacing--display-03: 0rem;
    --_typography---texts-font-sizes--paragraph-l: 1.25rem;
    --_typography---texts-line-height--paragraph-l: 125%;
    --_typography---texts-letter-spacing--paragraph-l: 0rem;
    --_typography---texts-font-sizes--caption: .875rem;
    --_typography---texts-line-height--caption: 100%;
    --_typography---texts-letter-spacing--caption: 0rem;
    --_typography---texts-font-sizes--tag: .75rem;
    --_typography---texts-line-height--tag: 100%;
    --_typography---texts-letter-spacing--tag: 0rem;
  }
  .wrapper.about-us {
    grid-template-columns: .3fr 1fr;
  }
  .work-with-title {
    max-width: 73rem;
  }
  .progress-line {
    width: 81.4%;
    left: 1.36rem;
  }
  .pricing-item {
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-right: .5rem;
  }}
@media screen and (min-width: 1920px) {

  body {
    --_typography---texts-font-sizes--default-paragraph: 1rem;
    --_typography---texts-line-height--default-paragraph: 120%;
    --_typography---texts-letter-spacing--default-paragraph: 0rem;
    --_typography---heading-font-sizes--h1: 4.6875rem;
    --_typography---heading-line-height--h1: 120%;
    --_typography---heading-letter-spacing--h1: 0rem;
    --_typography---heading-font-sizes--h2: 2.5rem;
    --_typography---heading-line-height--h2: 112%;
    --_typography---heading-letter-spacing--h2: 0rem;
    --_typography---heading-font-sizes--h3: 2.1875rem;
    --_typography---heading-line-height--h3: 110%;
    --_typography---heading-letter-spacing--h3: 0rem;
    --_typography---heading-font-sizes--h4: 1.875rem;
    --_typography---heading-line-height--h4: 117%;
    --_typography---heading-letter-spacing--h4: 0rem;
    --_typography---heading-font-sizes--h5: 1.5625rem;
    --_typography---heading-line-height--h5: 120%;
    --_typography---heading-letter-spacing--h5: 0rem;
    --_typography---heading-line-height--h6: 120%;
    --_typography---heading-letter-spacing--h6: 0rem;
    --_typography---heading-font-sizes--display-02: 5.9375rem;
    --_typography---heading-line-height--display-02: 120%;
    --_typography---heading-letter-spacing--display-02: 0rem;
    --_typography---heading-font-sizes--h6: 1.25rem;
    --_typography---heading-font-sizes--display-01: 11rem;
    --_typography---heading-line-height--display-01: 106%;
    --_typography---heading-letter-spacing--display-01: 0rem;
    --_typography---heading-font-sizes--display-03: 5rem;
    --_typography---heading-line-height--display-03: 100%;
    --_typography---heading-letter-spacing--display-03: 0rem;
    --_typography---texts-font-sizes--paragraph-l: 1.25rem;
    --_typography---texts-line-height--paragraph-l: 125%;
    --_typography---texts-letter-spacing--paragraph-l: 0rem;
    --_typography---texts-font-sizes--caption: .875rem;
    --_typography---texts-line-height--caption: 100%;
    --_typography---texts-letter-spacing--caption: 0rem;
    --_typography---texts-font-sizes--tag: .75rem;
    --_typography---texts-line-height--tag: 100%;
    --_typography---texts-letter-spacing--tag: 0rem;
  }}
@media screen and (max-width: 991px) {

  body {
    --_typography---texts-font-sizes--default-paragraph: 1rem;
    --_typography---texts-line-height--default-paragraph: 120%;
    --_typography---texts-letter-spacing--default-paragraph: -.04rem;
    --_typography---heading-font-sizes--h1: 3.5rem;
    --_typography---heading-line-height--h1: 120%;
    --_typography---heading-letter-spacing--h1: 0rem;
    --_typography---heading-font-sizes--h2: 2.25rem;
    --_typography---heading-line-height--h2: 112%;
    --_typography---heading-letter-spacing--h2: -.125rem;
    --_typography---heading-font-sizes--h3: 2rem;
    --_typography---heading-line-height--h3: 110%;
    --_typography---heading-letter-spacing--h3: -.10938rem;
    --_typography---heading-font-sizes--h4: 1.875rem;
    --_typography---heading-line-height--h4: 117%;
    --_typography---heading-letter-spacing--h4: -.09375rem;
    --_typography---heading-font-sizes--h5: 1.5625rem;
    --_typography---heading-line-height--h5: 120%;
    --_typography---heading-letter-spacing--h5: -.07813rem;
    --_typography---heading-line-height--h6: 120%;
    --_typography---heading-letter-spacing--h6: -.0625rem;
    --_typography---heading-font-sizes--display-02: 4.5rem;
    --_typography---heading-line-height--display-02: 120%;
    --_typography---heading-letter-spacing--display-02: 0rem;
    --_typography---heading-font-sizes--h6: 1.25rem;
    --_typography---heading-font-sizes--display-01: 5.7rem;
    --_typography---heading-line-height--display-01: 106%;
    --_typography---heading-letter-spacing--display-01: 0rem;
    --_typography---heading-font-sizes--display-03: 4rem;
    --_typography---heading-line-height--display-03: 100%;
    --_typography---heading-letter-spacing--display-03: 0rem;
    --_typography---texts-font-sizes--paragraph-l: 1.25rem;
    --_typography---texts-line-height--paragraph-l: 125%;
    --_typography---texts-letter-spacing--paragraph-l: -.0625rem;
    --_typography---texts-font-sizes--caption: .875rem;
    --_typography---texts-line-height--caption: 100%;
    --_typography---texts-letter-spacing--caption: -.035rem;
    --_typography---texts-font-sizes--tag: .75rem;
    --_typography---texts-line-height--tag: 100%;
    --_typography---texts-letter-spacing--tag: -.03rem;
    --_sizes---default-sizes--width: 100%;
    --_sizes---default-sizes--height: 100%;
    --_sizes---spacing--spacing-big: 2.5rem;
    --_sizes---spacing--spacing-small: 1rem;
    --_sizes---spacing--spacing-large: 2.25rem;
    --_sizes---container--max-width: 91rem;
    --_sizes---spacing--spacing-jumbo: 3rem;
    --_sizes---spacing--spacing-massive: 3.75rem;
    --_sizes---spacing--spacing-colossal: 5rem;
    --_sizes---spacing--spacing-medium: 1.25rem;
    --_sizes---spacing--spacing-normal: 2rem;
    --_sizes---spacing--spacing-regular: 1.5rem;
    --_sizes---spacing--spacing-xxsmall: .62rem;
    --_sizes---spacing--spacing-tiny: .25rem;
    --_sizes---spacing--spacing-xregular: 1.5rem;
    --_sizes---border-radius--radius-pill: 5rem;
    --_sizes---spacing--spacing-xsmall: .5rem;
    --_sizes---spacing--spacing-xxxsmall: .75rem;
    --_sizes---border-radius--radius-xsmall: .5rem;
    --_sizes---border-radius--radius-circle: 100%;
    --_sizes---border-radius--radius-tiny: .25rem;
    --_sizes---border-radius--radius-xxsmall: .75rem;
    --_sizes---border-radius--radius-small: 1rem;
    --_sizes---border-radius--radius-medium: 1.25rem;
    --_sizes---border-radius--radius-regular: 1.5rem;
    --_sizes---border-radius--radius-large: 1.875rem;
    --_sizes---border-radius--radius-big: 2rem;
    --_sizes---border-radius--radius-soft: 3.75rem;
  }
  .section.styleguide-hero {
    background-image: linear-gradient(#0000004d, #0000004d), url('../images/desktop-11.webp');
    background-position: 0 0, 50%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
  }
  .section.cta {
    height: auto;
  }
  .wrapper.styleguide-hero {
    padding-top: 8rem;
    padding-bottom: 6rem;
  }
  .wrapper.home-hero {
    padding-top: 5rem;
  }
  .wrapper.about-us, .wrapper.work-wrap {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
  }
  .wrapper.service {
    grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
    grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
  }
  .wrapper.process-wrap {
    grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
    grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
    height: auto;
  }
  .wrapper.faq {
    grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
    grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
    max-width: 48rem;
  }
  .wrapper.pricing-wrap, .wrapper.blog {
    grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
    grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
  }
  .wrapper.about-hero {
    padding-top: var(--_sizes---spacing--spacing-colossal);
    grid-column-gap: var(--_sizes---spacing--spacing-colossal);
    grid-row-gap: var(--_sizes---spacing--spacing-colossal);
  }
  .wrapper.term-hero {
    padding-top: 9rem;
    padding-bottom: 7rem;
  }
  .wrapper.privacy {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
  }
  .wrapper.license-hero {
    padding-bottom: 10rem;
  }
  .wrapper.pricing-hero {
    padding-bottom: 16rem;
  }
  .wrapper.vision-hero {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
  .wrapper.members-wrap {
    height: auto;
  }
  .wrapper.socials-wrapper {
    grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
    grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
  }
  .wrapper.project-hero-wrapper, .wrapper.project-single-hero {
    padding-top: 5rem;
  }
  .wrapper.blog-hero-wrapper, .wrapper.blog-single-hero {
    grid-column-gap: var(--_sizes---spacing--spacing-big);
    grid-row-gap: var(--_sizes---spacing--spacing-big);
    grid-template-columns: minmax(0, 1fr);
    padding-top: 7rem;
  }
  .wrapper.related-blogs {
    grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
    grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
  }
  .wrapper.pricing-single-hero {
    grid-column-gap: var(--_sizes---spacing--spacing-big);
    grid-row-gap: var(--_sizes---spacing--spacing-big);
    grid-template-columns: minmax(0, 1fr);
  }
  .wrapper.more-works {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
  }
  .styleguide-hero-contents {
    max-width: 38rem;
  }
  .text-details {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
    grid-template-columns: .4fr 1fr;
  }
  .text-title {
    font-size: var(--_typography---heading-font-sizes--h6);
    line-height: var(--_typography---heading-line-height--h6);
    letter-spacing: var(--_typography---heading-letter-spacing--h6);
  }
  .color-details-box {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .color-box {
    height: 12rem;
    padding: var(--_sizes---spacing--spacing-medium);
  }
  .color-name {
    font-size: var(--_typography---heading-font-sizes--h6);
    line-height: var(--_typography---heading-line-height--h6);
    letter-spacing: var(--_typography---heading-letter-spacing--h6);
  }
  .footer-details {
    grid-column-gap: var(--_sizes---spacing--spacing-big);
    grid-row-gap: var(--_sizes---spacing--spacing-big);
    flex-flow: column;
  }
  .footer-left {
    grid-column-gap: var(--_sizes---spacing--spacing-regular);
    grid-row-gap: var(--_sizes---spacing--spacing-regular);
    max-width: none;
  }
  .social-link.dropdown-social:where(.navbar-secondary) {
    color: var(--_colors---background-color--text-black);
  }
  .social-link.dropdown-social:hover:where(.navbar-secondary) {
    color: var(--_colors---background-color--primary-color);
  }
  .footer-right {
    width: var(--_sizes---default-sizes--width);
    justify-content: space-between;
    align-items: flex-start;
  }
  .overflow-hidden.project {
    height: 18rem;
  }
  .overflow-hidden.project._01 {
    height: 15rem;
  }
  .overflow-hidden.member {
    height: auto;
  }
  .overflow-hidden.project-update {
    height: 18rem;
  }
  .overflow-hidden.blog {
    height: 18.1309rem;
  }
  .image-flex._03 {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
    flex-flow: wrap;
  }
  .about-us-image._02, .about-us-image._05, .about-us-image._07 {
    position: static;
  }
  .home-hero-content {
    grid-column-gap: 6rem;
    grid-row-gap: 6rem;
  }
  .about-button-box {
    order: 9999;
    position: static;
  }
  .project-item-name.project {
    font-size: var(--_typography---heading-font-sizes--h5);
    line-height: var(--_typography---heading-line-height--h5);
    letter-spacing: var(--_typography---heading-letter-spacing--h5);
  }
  .work-top {
    max-width: 38rem;
  }
  .service-top {
    width: var(--_sizes---default-sizes--width);
    max-width: 30rem;
    margin-left: 0;
    margin-right: 0;
  }
  .service-background-image {
    object-fit: fill;
  }
  .card-short-desc.growth {
    max-width: none;
  }
  .service-card-image {
    height: 14rem;
  }
  .process-details-wrap {
    grid-row-gap: var(--_sizes---spacing--spacing-big);
    grid-template-columns: 1fr 1fr;
  }
  .process-details._02, .process-details._03, .process-details._04, .process-details._05 {
    height: auto;
    transform: none;
  }
  .process-details._01 {
    height: auto;
  }
  .serial-line-two._02 {
    height: 8rem;
  }
  .serial-line-two._03 {
    height: 7rem;
  }
  .serial-line-two._01 {
    height: 10rem;
  }
  .serial-line-box {
    display: none;
  }
  .process-card-header {
    max-width: none;
  }
  .process-card-title {
    font-size: var(--_typography---heading-font-sizes--h5);
    line-height: var(--_typography---heading-line-height--h5);
    letter-spacing: var(--_typography---heading-letter-spacing--h5);
  }
  .growth-wrap {
    grid-column-gap: var(--_sizes---spacing--spacing-regular);
    grid-row-gap: var(--_sizes---spacing--spacing-regular);
  }
  .faq-top {
    max-width: 38rem;
  }
  .faq-answer {
    min-width: 36rem;
    max-width: 36rem;
  }
  .pricing-top {
    max-width: 37rem;
    margin-left: 0;
    margin-right: 0;
  }
  .blog-top {
    max-width: 38rem;
  }
  .about-hero-title {
    font-size: var(--_typography---heading-font-sizes--h1);
    line-height: var(--_typography---heading-line-height--h1);
    letter-spacing: var(--_typography---heading-letter-spacing--h1);
  }
  .about-hero-image._02 {
    max-width: 8rem;
    right: 15rem;
  }
  .about-hero-image._01 {
    max-width: 6rem;
    top: 20rem;
  }
  .career-top {
    max-width: 38rem;
  }
  .career-bottom {
    transform: translate(0);
  }
  .career-card {
    grid-column-gap: var(--_sizes---spacing--spacing-xregular);
    grid-row-gap: var(--_sizes---spacing--spacing-xregular);
  }
  .card-header {
    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;
  }
  .apply-box {
    grid-column-gap: var(--_sizes---spacing--spacing-small);
    grid-row-gap: var(--_sizes---spacing--spacing-small);
  }
  .growth-block {
    grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
    grid-row-gap: var(--_sizes---spacing--spacing-big);
    grid-template-columns: minmax(0, 1fr) 1fr;
    padding-left: 0;
  }
  .growth-box {
    grid-column-gap: var(--_sizes---spacing--spacing-small);
    grid-row-gap: var(--_sizes---spacing--spacing-small);
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .version-card {
    padding: var(--_sizes---spacing--spacing-normal);
    grid-template-columns: .5fr 1fr;
  }
  .license-top {
    max-width: 38rem;
  }
  .lisence-title {
    font-size: var(--_typography---heading-font-sizes--h1);
    line-height: var(--_typography---heading-line-height--h1);
    letter-spacing: var(--_typography---heading-letter-spacing--h1);
  }
  .license-image-box.google {
    height: 22rem;
  }
  .award-top {
    margin-left: 0;
    margin-right: 0;
  }
  .progress-line {
    display: none;
  }
  .bracket {
    max-width: 5rem;
  }
  .vision-title {
    font-size: var(--_typography---heading-font-sizes--h1);
    line-height: var(--_typography---heading-line-height--h1);
    letter-spacing: var(--_typography---heading-letter-spacing--h1);
  }
  .title-info {
    max-width: 32rem;
  }
  .dropdown {
    margin-left: 0;
    margin-right: 0;
    display: none;
  }
  .nav-menu-wrap {
    padding-top: .5rem;
  }
  .nav-buttons, .nav-logo.base:where(.navbar-secondary) {
    display: none;
  }
  .nav-logo.secondary:where(.navbar-secondary) {
    display: block;
  }
  .dropdown-link {
    cursor: pointer;
  }
  .dropdown-link:where(.navbar-secondary) {
    color: var(--_colors---background-color--text-black);
  }
  .dropdown-link:hover, .dropdown-link[aria-current="page"], .dropdown-link.is-active {
    color: var(--_colors---background-color--primary-color);
  }
  .dd-flex-wrap.course {
    width: var(--_sizes---default-sizes--width);
    display: block;
  }
  .nav-items {
    grid-column-gap: 2.5rem;
    grid-row-gap: 2.5rem;
  }
  .dropdown-header {
    color: var(--_colors---text-color--50-white);
    text-align: left;
  }
  .dropdown-header:where(.navbar-secondary) {
    color: var(--_colors---background-color--text-black);
  }
  .pages-items {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
    display: flex;
  }
  .nav-menu {
    background-color: var(--_colors---text-color--transparent);
  }
  .nav-link {
    display: none;
  }
  .tab-menus {
    grid-column-gap: var(--_sizes---spacing--spacing-big);
    grid-row-gap: var(--_sizes---spacing--spacing-big);
    background-color: var(--_colors---background-color--text-black);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 100vh;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem;
    display: flex;
    overflow: clip;
  }
  .tab-menus.desk {
    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;
    height: auto;
    padding: 0;
    display: grid;
  }
  .tab-menus.desk:where(.navbar-secondary) {
    background-color: var(--_colors---text-color--white);
  }
  .nav-lottie {
    width: var(--_sizes---default-sizes--width);
    height: var(--_sizes---default-sizes--height);
    justify-content: center;
    align-items: center;
    display: flex;
  }
  .nav-lottie.base:where(.navbar-secondary), .nav-lottie.secondary {
    display: none;
  }
  .nav-lottie.secondary:where(.navbar-secondary) {
    display: block;
  }
  .menu-button {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
  }
  .menu-button.is-open {
    background-color: #fff0;
  }
  .cart-button {
    width: 1.25rem;
    height: 1.25rem;
  }
  .cart-block {
    right: 3rem;
  }
  .cta-wrapper {
    height: auto;
  }
  .logo-content-block {
    height: auto;
    padding-top: 16rem;
  }
  .brand-image {
    width: var(--_sizes---default-sizes--width);
  }
  .inner-content {
    display: none;
  }
  .cta-gradient {
    height: 4rem;
  }
  .dropdown-nav {
    transform: none;
  }
  .services-cards {
    grid-template-columns: 1fr 1fr;
  }
  .services-card {
    height: 22rem;
  }
  .process-top {
    max-width: 37rem;
    margin-left: 0;
    margin-right: 0;
  }
  .pricing-bottom {
    grid-column-gap: var(--_sizes---spacing--spacing-big);
    grid-row-gap: var(--_sizes---spacing--spacing-big);
    grid-template-columns: minmax(0, 1fr);
    padding: 0 0 1rem;
  }
  .pricing-dot, .pricing-dot.right-top {
    top: -1%;
  }
  .pricing-dot.bottom-right, .pricing-dot.bottom-left {
    bottom: -1%;
  }
  .pricing-dot.plan-right-top {
    top: -1%;
  }
  .pricing-dot.plan-bottom-left, .pricing-dot.plan-bottom-right {
    bottom: -1%;
  }
  .pricing-item {
    padding-bottom: 0;
  }
  .pricing-item.black, .pricing-item.plan {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
  }
  .price-dots {
    height: 98%;
  }
  .price-dots.red-left, .price-dots.right-red {
    height: 86%;
  }
  .blog-front._01 {
    opacity: 100;
    display: flex;
  }
  .blog-items-bottom {
    grid-column-gap: var(--_sizes---spacing--spacing-medium);
    grid-row-gap: var(--_sizes---spacing--spacing-large);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .blog-collection-wrapper, .blog-collection-wrapper._01, .blog-collection-wrapper._02, .blog-collection-wrapper._03 {
    width: var(--_sizes---default-sizes--width);
  }
  .blog-hover-contents._03, .blog-hover-contents._02, .blog-hover-contents._01 {
    display: none;
  }
  .team-top {
    max-width: 28rem;
  }
  .team-members {
    grid-column-gap: var(--_sizes---spacing--spacing-medium);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .team-member-name, .team-member-name:where(.team-details-second) {
    width: auto;
  }
  .member-box {
    max-width: none;
  }
  .checkout-form {
    padding-top: 7rem;
  }
  .socials-bottom {
    grid-template-columns: minmax(0, 1fr);
  }
  .social-circle {
    display: none;
  }
  .social-card {
    height: 10rem;
  }
  .project-hero-title {
    font-size: var(--_typography---heading-font-sizes--display-03);
    line-height: var(--_typography---heading-line-height--display-03);
    letter-spacing: var(--_typography---heading-letter-spacing--display-03);
  }
  .project-grid {
    margin-top: -2rem;
  }
  .project-single-name {
    left: var(--_sizes---spacing--spacing-regular);
    bottom: var(--_sizes---spacing--spacing-regular);
    font-size: var(--_typography---heading-font-sizes--h1);
    line-height: var(--_typography---heading-line-height--h1);
    letter-spacing: var(--_typography---heading-letter-spacing--h1);
  }
  .overview-block {
    grid-template-columns: .75fr 1fr;
  }
  .overview-informations {
    grid-template-columns: 1fr 1fr;
  }
  .gallery-collection-list {
    grid-column-gap: var(--_sizes---spacing--spacing-small);
    grid-row-gap: var(--_sizes---spacing--spacing-small);
  }
  .contact-hero-top {
    flex-flow: column;
  }
  .contact-hero-right {
    margin-top: 0;
  }
  .contact-all-fields {
    grid-template-columns: 1fr 1fr;
  }
  .select-field {
    background-position: 97%;
    background-size: 1.1rem;
  }
  .blog-hero-left {
    max-width: none;
  }
  .blogs-collections {
    grid-template-columns: 1fr 1fr;
  }
  .blog-single-left {
    max-width: none;
  }
  .blog-banner {
    height: 28rem;
  }
  .pricing-hero-left {
    max-width: 30rem;
  }
  .dropdown-betwwen {
    width: var(--_sizes---default-sizes--width);
    padding: 0;
  }
  .reserved-text:where(.navbar-secondary), .powered-text:where(.navbar-secondary) {
    color: var(--_colors---background-color--text-black);
  }
  .mobile-dropdown-contents {
    grid-column-gap: var(--_sizes---spacing--spacing-big);
    grid-row-gap: var(--_sizes---spacing--spacing-big);
    background-color: var(--_colors---background-color--text-black);
    flex-flow: column;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 94vh;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 2rem 4rem;
    display: flex;
    overflow: clip;
    box-shadow: 0 2px 5px #0003;
  }
  .mobile-dropdown-contents:where(.navbar-secondary) {
    background-color: var(--_colors---text-color--white);
  }
  .error-image {
    max-width: 26rem;
  }
  .changelog-hero-left {
    max-width: 30rem;
  }
  .customer-info {
    font-size: var(--_typography---heading-font-sizes--h4);
    line-height: var(--_typography---heading-line-height--h4);
    letter-spacing: var(--_typography---heading-letter-spacing--h4);
  }
  .row {
    flex-flow: column;
  }
  .billing-address-toggle {
    justify-content: flex-start;
    align-items: center;
  }
  .checkbox {
    margin-top: 0;
  }
  .checkbox-label, .order-summary {
    margin-bottom: 0;
  }
  .process-height, .team-height {
    height: auto;
  }}
@media screen and (max-width: 767px) {

  body {
    --_typography---texts-font-sizes--default-paragraph: 1rem;
    --_typography---texts-line-height--default-paragraph: 120%;
    --_typography---texts-letter-spacing--default-paragraph: 0rem;
    --_typography---heading-font-sizes--h1: 2.75rem;
    --_typography---heading-line-height--h1: 120%;
    --_typography---heading-letter-spacing--h1: 0rem;
    --_typography---heading-font-sizes--h2: 2rem;
    --_typography---heading-line-height--h2: 112%;
    --_typography---heading-letter-spacing--h2: 0rem;
    --_typography---heading-font-sizes--h3: 1.5rem;
    --_typography---heading-line-height--h3: 110%;
    --_typography---heading-letter-spacing--h3: 0rem;
    --_typography---heading-font-sizes--h4: 1.25rem;
    --_typography---heading-line-height--h4: 117%;
    --_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---heading-line-height--h6: 120%;
    --_typography---heading-letter-spacing--h6: 0rem;
    --_typography---heading-font-sizes--display-02: 3.75rem;
    --_typography---heading-line-height--display-02: 120%;
    --_typography---heading-letter-spacing--display-02: 0rem;
    --_typography---heading-font-sizes--h6: 1rem;
    --_typography---heading-font-sizes--display-01: 4.1rem;
    --_typography---heading-line-height--display-01: 106%;
    --_typography---heading-letter-spacing--display-01: 0rem;
    --_typography---heading-font-sizes--display-03: 3rem;
    --_typography---heading-line-height--display-03: 100%;
    --_typography---heading-letter-spacing--display-03: 0rem;
    --_typography---texts-font-sizes--paragraph-l: 1.125rem;
    --_typography---texts-line-height--paragraph-l: 125%;
    --_typography---texts-letter-spacing--paragraph-l: 0rem;
    --_typography---texts-font-sizes--caption: .875rem;
    --_typography---texts-line-height--caption: 100%;
    --_typography---texts-letter-spacing--caption: 0rem;
    --_typography---texts-font-sizes--tag: .75rem;
    --_typography---texts-line-height--tag: 100%;
    --_typography---texts-letter-spacing--tag: 0rem;
    --_sizes---default-sizes--width: 100%;
    --_sizes---default-sizes--height: 100%;
    --_sizes---spacing--spacing-big: 2rem;
    --_sizes---spacing--spacing-small: 1rem;
    --_sizes---spacing--spacing-large: 2rem;
    --_sizes---container--max-width: 91rem;
    --_sizes---spacing--spacing-jumbo: 2.5rem;
    --_sizes---spacing--spacing-massive: 3rem;
    --_sizes---spacing--spacing-colossal: 3.75rem;
    --_sizes---spacing--spacing-medium: 1rem;
    --_sizes---spacing--spacing-normal: 1.25rem;
    --_sizes---spacing--spacing-regular: 1rem;
    --_sizes---spacing--spacing-xxsmall: .625rem;
    --_sizes---spacing--spacing-tiny: .25rem;
    --_sizes---spacing--spacing-xregular: 1.25rem;
    --_sizes---border-radius--radius-pill: 5rem;
    --_sizes---spacing--spacing-xsmall: .5rem;
    --_sizes---spacing--spacing-xxxsmall: .75rem;
    --_sizes---border-radius--radius-xsmall: .5rem;
    --_sizes---border-radius--radius-circle: 100%;
    --_sizes---border-radius--radius-tiny: .25rem;
    --_sizes---border-radius--radius-xxsmall: .75rem;
    --_sizes---border-radius--radius-small: 1rem;
    --_sizes---border-radius--radius-medium: 1.25rem;
    --_sizes---border-radius--radius-regular: 1.5rem;
    --_sizes---border-radius--radius-large: 1.875rem;
    --_sizes---border-radius--radius-big: 2rem;
    --_sizes---border-radius--radius-soft: 3.75rem;
  }
  .utility-page-wrap {
    height: auto;
  }
  .utility-page-content {
    max-width: 32rem;
    padding-top: 8rem;
    padding-bottom: 5rem;
  }
  .wrapper.styleguide-hero {
    padding-bottom: 5rem;
  }
  .wrapper.styleguide-details {
    grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
    grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
  }
  .wrapper.about-us, .wrapper.work-wrap, .wrapper.work-two {
    grid-template-columns: minmax(0, 1fr);
  }
  .wrapper.about-hero {
    grid-column-gap: 5rem;
    grid-row-gap: 5rem;
    padding-top: 5rem;
  }
  .wrapper.career {
    grid-template-columns: minmax(0, 1fr);
  }
  .wrapper.license-hero {
    left: var(--_sizes---spacing--spacing-small);
    padding-bottom: 5rem;
  }
  .wrapper.pricing-hero {
    padding-top: 6rem;
    padding-bottom: 10rem;
  }
  .wrapper.vision-hero {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .wrapper.project-hero-wrapper {
    grid-column-gap: var(--_sizes---spacing--spacing-large);
    grid-row-gap: var(--_sizes---spacing--spacing-large);
  }
  .wrapper.contact-hero-wrapper, .wrapper.blog-single-hero, .wrapper.pricing-single-hero {
    padding-top: 6rem;
  }
  .wrapper.more-works {
    grid-template-columns: minmax(0, 1fr);
  }
  .styleguide-hero-contents {
    max-width: 30rem;
  }
  .text-details {
    grid-column-gap: var(--_sizes---spacing--spacing-small);
    grid-row-gap: var(--_sizes---spacing--spacing-small);
    grid-template-columns: minmax(0, 1fr);
  }
  .text-subtite-box {
    position: static;
  }
  .color-box {
    height: 10rem;
  }
  .footer-details {
    grid-column-gap: var(--_sizes---spacing--spacing-large);
    grid-row-gap: var(--_sizes---spacing--spacing-large);
  }
  .overflow-hidden.project._01 {
    height: auto;
  }
  .overflow-hidden.blog-one {
    height: 16rem;
  }
  .overflow-hidden.project-update {
    height: auto;
  }
  .overflow-hidden.blog {
    height: 14rem;
  }
  .about-us-left {
    position: static;
  }
  .image-flex._03 {
    grid-row-gap: var(--_sizes---spacing--spacing-large);
  }
  .about-us-image {
    max-width: 7.5rem;
    height: 7rem;
  }
  .home-hero-content {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
  }
  .works-collection-list {
    grid-column-gap: var(--_sizes---spacing--spacing-large);
    grid-row-gap: var(--_sizes---spacing--spacing-large);
    grid-template-columns: 1fr;
  }
  .work-top {
    max-width: 30rem;
  }
  .work-top.two {
    max-width: 32rem;
  }
  .service-top {
    margin-left: 0;
    margin-right: 0;
  }
  .service-card-details {
    padding-right: var(--_sizes---spacing--spacing-small);
    padding-left: var(--_sizes---spacing--spacing-small);
  }
  .service-card-image {
    height: 10rem;
  }
  .process-details-wrap {
    grid-column-gap: var(--_sizes---spacing--spacing-large);
  }
  .process-details {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .process-details._01 {
    grid-column-gap: var(--_sizes---spacing--spacing-small);
    grid-row-gap: var(--_sizes---spacing--spacing-small);
  }
  .serial-line-two._04 {
    height: 6rem;
  }
  .serial-line-two._05 {
    height: 5rem;
  }
  .faq-top {
    max-width: 30rem;
  }
  .faq-answer {
    min-width: auto;
    max-width: none;
  }
  .pricing-top {
    max-width: 30rem;
  }
  .blog-top {
    max-width: 28rem;
  }
  .about-hero-title {
    width: var(--_sizes---default-sizes--width);
    max-width: 42rem;
  }
  .about-hero-image._02 {
    max-width: 6rem;
    height: 8rem;
    top: 7rem;
    right: 10rem;
  }
  .about-hero-image._01 {
    top: 14rem;
    left: 1rem;
  }
  .career-top {
    max-width: 30rem;
  }
  .career-bottom {
    margin-top: 0;
  }
  .work-quantity {
    font-size: var(--_typography---heading-font-sizes--display-03);
    line-height: var(--_typography---heading-line-height--display-03);
    letter-spacing: var(--_typography---heading-letter-spacing--display-03);
  }
  .version-card {
    grid-template-columns: .5fr 1fr;
  }
  .license-top {
    max-width: 30rem;
  }
  .license-image-box.google {
    height: 18rem;
  }
  .googlefont-image {
    max-width: 10rem;
    height: 10rem;
  }
  .hugeicons-image {
    max-width: 22rem;
    height: 4rem;
  }
  .award-top {
    max-width: 32rem;
  }
  .award-block {
    grid-column-gap: var(--_sizes---spacing--spacing-regular);
    grid-row-gap: var(--_sizes---spacing--spacing-regular);
    grid-template-columns: minmax(0, 1fr);
  }
  .award-images {
    display: none;
  }
  .award-image {
    height: 16rem;
  }
  .award-info {
    height: var(--_sizes---default-sizes--height);
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 0;
    padding-left: 0;
  }
  .award-title-box {
    flex-flow: column;
    margin-left: 0;
  }
  .bracket {
    max-width: 2.5rem;
  }
  .title-info {
    max-width: 24rem;
  }
  .dd-flex-wrap {
    grid-column-gap: 15px;
    grid-row-gap: 40px;
    flex-flow: wrap;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .nav-items {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }
  .tab-menus {
    flex-flow: wrap;
    grid-template-columns: 1fr 1fr;
    max-width: 32rem;
  }
  .tab-menus.desk {
    grid-template-columns: 1fr 1fr;
  }
  .logo-content-block {
    padding-top: 12rem;
  }
  .cta-gradient {
    height: 3rem;
  }
  .dropdown-nav {
    width: 420px;
  }
  .services-card {
    height: 18rem;
  }
  .process-top {
    margin-left: 0;
    margin-right: 0;
  }
  .idea-nums {
    display: none;
  }
  .idea-cards {
    grid-column-gap: var(--_sizes---spacing--spacing-small);
    grid-row-gap: var(--_sizes---spacing--spacing-small);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .idea-card {
    width: var(--_sizes---default-sizes--width);
    height: 16rem;
  }
  .idea-card._02, .idea-card._03, .idea-card._04, .idea-card._05 {
    width: var(--_sizes---default-sizes--width);
  }
  .idea-card-details {
    grid-column-gap: var(--_sizes---spacing--spacing-small);
    grid-row-gap: var(--_sizes---spacing--spacing-small);
  }
  .idea-card-details._02, .idea-card-details._03, .idea-card-details._04, .idea-card-details._05 {
    opacity: 100;
  }
  .idea-inactive._02, .idea-inactive._03, .idea-inactive._04, .idea-inactive._05 {
    opacity: 0;
  }
  .idea-active._02, .idea-active._03, .idea-active._04, .idea-active._05 {
    opacity: 100;
  }
  .pricing-bottom {
    grid-column-gap: var(--_sizes---spacing--spacing-jumbo);
    grid-row-gap: var(--_sizes---spacing--spacing-jumbo);
  }
  .pricing-dot {
    width: 1rem;
    height: 1rem;
    top: -.5%;
  }
  .pricing-dot.right-top {
    top: -.5%;
  }
  .pricing-dot.bottom-right, .pricing-dot.bottom-left {
    bottom: -.5%;
  }
  .pricing-dot.plan-right-top {
    top: -.5%;
  }
  .pricing-dot.plan-bottom-left, .pricing-dot.plan-bottom-right {
    bottom: -.5%;
  }
  .pricing-item {
    padding-left: 2.75rem;
    padding-right: 1rem;
  }
  .includes-list-details.plan {
    width: 90%;
  }
  .includes-lists ul {
    grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
    grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
    grid-template-columns: 1fr;
  }
  .price-dots, .price-dots.red-left, .price-dots.right-red {
    height: auto;
  }
  .pricing-red-dot {
    width: 1rem;
    height: 1rem;
    top: -1%;
  }
  .pricing-red-dot._02 {
    top: -1%;
  }
  .pricing-red-dot._03, .pricing-red-dot._04 {
    bottom: -1%;
  }
  .pricing-red-dot.plan-right {
    top: -1%;
  }
  .pricing-red-dot.plan-three, .pricing-red-dot.plan-four {
    bottom: -1%;
  }
  .blog-main-item._01, .blog-main-item._02, .blog-main-item._03 {
    height: auto;
  }
  .team-top {
    max-width: 24rem;
  }
  .team-members {
    grid-row-gap: var(--_sizes---spacing--spacing-large);
    grid-template-columns: 1fr 1fr;
  }
  .awards-items {
    grid-column-gap: var(--_sizes---spacing--spacing-xregular);
    grid-row-gap: var(--_sizes---spacing--spacing-xregular);
    flex-flow: row;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: flex;
    overflow: auto;
  }
  .award-item {
    flex: none;
    width: 17rem;
  }
  .award-arrow {
    display: none;
  }
  .career-iitem-box {
    position: sticky;
    top: 13rem;
  }
  .social-card {
    height: 8rem;
  }
  .project-hero-top {
    grid-column-gap: var(--_sizes---spacing--spacing-large);
    grid-row-gap: var(--_sizes---spacing--spacing-large);
    grid-template-columns: minmax(0, 1fr);
  }
  .blank-block {
    display: none;
  }
  .project-grid {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 0;
  }
  .overview-block {
    grid-template-columns: minmax(0, 1fr);
  }
  .project-overview {
    position: static;
  }
  .overview-informations {
    flex-flow: wrap;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }
  .contact-hero-left {
    max-width: 36rem;
  }
  .text-field {
    padding-left: var(--_sizes---spacing--spacing-xsmall);
  }
  .field-label {
    margin-left: var(--_sizes---spacing--spacing-xsmall);
  }
  .contact-form-fields.protected {
    max-width: 32rem;
  }
  .contact-all-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .select-field {
    padding-left: var(--_sizes---spacing--spacing-xsmall);
  }
  .text-area {
    height: 4rem;
    min-height: 4rem;
    padding-left: var(--_sizes---spacing--spacing-xsmall);
  }
  .blog-hero-left {
    max-width: 36rem;
  }
  .category-informations {
    grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
    grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
    flex-flow: wrap;
  }
  .blog-category {
    font-size: var(--_typography---texts-font-sizes--tag);
    line-height: var(--_typography---texts-line-height--tag);
    letter-spacing: var(--_typography---texts-letter-spacing--tag);
  }
  .published-date {
    font-size: var(--_typography---texts-font-sizes--caption);
    line-height: var(--_typography---texts-line-height--caption);
    letter-spacing: var(--_typography---texts-letter-spacing--caption);
  }
  .blog-single-left {
    max-width: 36rem;
  }
  .blog-banner {
    height: 20rem;
  }
  .blog-top-flex {
    flex-flow: wrap;
  }
  .cookies-card {
    max-width: 24rem;
  }
  .mobile-dropdown-contents {
    grid-template-columns: 1fr 1fr;
  }
  .error-image {
    max-width: 20rem;
  }
  .protected-title {
    font-size: var(--_typography---heading-font-sizes--display-03);
    line-height: var(--_typography---heading-line-height--display-03);
    letter-spacing: var(--_typography---heading-letter-spacing--display-03);
  }
  .protected-text-field {
    padding-left: var(--_sizes---spacing--spacing-xsmall);
  }
  .customer-info {
    font-size: var(--_typography---heading-font-sizes--h3);
    line-height: var(--_typography---heading-line-height--h3);
    letter-spacing: var(--_typography---heading-letter-spacing--h3);
  }}
@media screen and (max-width: 479px) {

  body {
    --_typography---texts-font-sizes--default-paragraph: 1rem;
    --_typography---texts-line-height--default-paragraph: 120%;
    --_typography---texts-letter-spacing--default-paragraph: 0rem;
    --_typography---heading-font-sizes--h1: 1.75rem;
    --_typography---heading-line-height--h1: 120%;
    --_typography---heading-letter-spacing--h1: 0rem;
    --_typography---heading-font-sizes--h2: 1.625rem;
    --_typography---heading-line-height--h2: 112%;
    --_typography---heading-letter-spacing--h2: 0rem;
    --_typography---heading-font-sizes--h3: 1.5rem;
    --_typography---heading-line-height--h3: 110%;
    --_typography---heading-letter-spacing--h3: 0rem;
    --_typography---heading-font-sizes--h4: 1.25rem;
    --_typography---heading-line-height--h4: 117%;
    --_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---heading-line-height--h6: 120%;
    --_typography---heading-letter-spacing--h6: 0rem;
    --_typography---heading-font-sizes--display-02: 3rem;
    --_typography---heading-line-height--display-02: 120%;
    --_typography---heading-letter-spacing--display-02: 0rem;
    --_typography---heading-font-sizes--h6: 1rem;
    --_typography---heading-font-sizes--display-01: 4rem;
    --_typography---heading-line-height--display-01: 106%;
    --_typography---heading-letter-spacing--display-01: 0rem;
    --_typography---heading-font-sizes--display-03: 2rem;
    --_typography---heading-line-height--display-03: 100%;
    --_typography---heading-letter-spacing--display-03: 0rem;
    --_typography---texts-font-sizes--paragraph-l: 1.125rem;
    --_typography---texts-line-height--paragraph-l: 125%;
    --_typography---texts-letter-spacing--paragraph-l: 0rem;
    --_typography---texts-font-sizes--caption: .875rem;
    --_typography---texts-line-height--caption: 100%;
    --_typography---texts-letter-spacing--caption: 0rem;
    --_typography---texts-font-sizes--tag: .75rem;
    --_typography---texts-line-height--tag: 100%;
    --_typography---texts-letter-spacing--tag: 0rem;
    --_sizes---default-sizes--width: 100%;
    --_sizes---default-sizes--height: 100%;
    --_sizes---spacing--spacing-big: 2rem;
    --_sizes---spacing--spacing-small: 1rem;
    --_sizes---spacing--spacing-large: 2rem;
    --_sizes---container--max-width: 91rem;
    --_sizes---spacing--spacing-jumbo: 2.25rem;
    --_sizes---spacing--spacing-massive: 2.5rem;
    --_sizes---spacing--spacing-colossal: 3.75rem;
    --_sizes---spacing--spacing-medium: 1rem;
    --_sizes---spacing--spacing-normal: 1.25rem;
    --_sizes---spacing--spacing-regular: 1rem;
    --_sizes---spacing--spacing-xxsmall: .625rem;
    --_sizes---spacing--spacing-tiny: .25rem;
    --_sizes---spacing--spacing-xregular: 1.25rem;
    --_sizes---border-radius--radius-pill: 5rem;
    --_sizes---spacing--spacing-xsmall: .5rem;
    --_sizes---spacing--spacing-xxxsmall: .75rem;
    --_sizes---border-radius--radius-xsmall: .5rem;
    --_sizes---border-radius--radius-circle: 100%;
    --_sizes---border-radius--radius-tiny: .25rem;
    --_sizes---border-radius--radius-xxsmall: .75rem;
    --_sizes---border-radius--radius-small: 1rem;
    --_sizes---border-radius--radius-medium: 1.25rem;
    --_sizes---border-radius--radius-regular: 1.5rem;
    --_sizes---border-radius--radius-large: 1.875rem;
    --_sizes---border-radius--radius-big: 2rem;
    --_sizes---border-radius--radius-soft: 3.75rem;
  }
  .utility-page-content {
    max-width: 26rem;
    padding-bottom: 4rem;
  }
  .wrapper.styleguide-hero {
    padding-bottom: 4rem;
  }
  .wrapper.about-hero {
    grid-column-gap: var(--_sizes---spacing--spacing-small);
    grid-row-gap: var(--_sizes---spacing--spacing-small);
  }
  .wrapper.term-hero {
    padding-top: 7rem;
    padding-bottom: 5rem;
  }
  .wrapper.term-details {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
  }
  .wrapper.license-hero {
    padding-top: 6rem;
    padding-bottom: 4rem;
  }
  .wrapper.pricing-hero {
    padding-bottom: 4rem;
  }
  .wrapper.vision-hero {
    grid-column-gap: var(--_sizes---spacing--spacing-small);
    grid-row-gap: var(--_sizes---spacing--spacing-small);
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .wrapper.blog-hero-wrapper, .wrapper.blog-single-hero {
    padding-top: 6rem;
  }
  .styleguide-hero-contents {
    max-width: 24rem;
  }
  .text-details {
    grid-template-columns: minmax(0, 1fr);
  }
  .text-details-box {
    padding-top: var(--_sizes---spacing--spacing-regular);
    padding-left: var(--_sizes---spacing--spacing-regular);
  }
  .color-box {
    height: 8rem;
  }
  .social-link-box {
    grid-column-gap: var(--_sizes---spacing--spacing-medium);
    grid-row-gap: var(--_sizes---spacing--spacing-medium);
    flex-flow: wrap;
  }
  .footer-right, .copyright-box {
    flex-flow: wrap;
  }
  .overflow-hidden, .overflow-hidden.project {
    height: 16rem;
  }
  .overflow-hidden.project._01, .overflow-hidden.project-update {
    height: 14rem;
  }
  .digital-block {
    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;
  }
  .digital-texts, .digital-texts._02 {
    text-align: center;
  }
  .about-us-right {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
    justify-content: space-between;
    align-items: flex-start;
  }
  .image-flex {
    display: none;
  }
  .image-flex._03 {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-regular);
    grid-template-rows: auto;
    grid-template-columns: minmax(200px, 1fr);
    grid-auto-columns: 1fr;
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }
  .about-us-image {
    max-width: none;
    height: auto;
    display: none;
  }
  .home-hero-content {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }
  .work-top {
    max-width: 18rem;
  }
  .work-top.two {
    top: var(--_sizes---spacing--spacing-jumbo);
    position: sticky;
  }
  .service-top {
    top: var(--_sizes---spacing--spacing-jumbo);
    max-width: 24rem;
    position: sticky;
  }
  .service-card-header {
    max-width: 14rem;
  }
  .process-details-wrap {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    flex-flow: column;
    grid-template-columns: minmax(0, 1fr);
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
  }
  .process-details {
    border: 1px solid var(--_colors---background-color--background);
    background-color: var(--_colors---text-color--white);
    flex: none;
    height: auto;
    padding: 1rem;
    position: sticky;
    top: 13rem;
  }
  .blog-top {
    top: var(--_sizes---spacing--spacing-jumbo);
    max-width: 22rem;
    position: sticky;
  }
  .about-hero-title {
    max-width: 24.875rem;
  }
  .impact-box {
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
  }
  .about-hero-image._02, .about-hero-image._01 {
    display: none;
  }
  .work-with-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);
  }
  .work-desc-box {
    flex-flow: wrap;
  }
  .growth-block {
    grid-row-gap: var(--_sizes---spacing--spacing-large);
    grid-template-columns: minmax(0, 1fr);
    display: flex;
    overflow: auto;
  }
  .growth-box {
    grid-column-gap: var(--_sizes---spacing--spacing-xxxsmall);
    grid-row-gap: var(--_sizes---spacing--spacing-xxxsmall);
    flex-flow: wrap;
    flex: none;
    max-width: 16rem;
  }
  .version-card {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
    grid-template-columns: minmax(0, 1fr);
  }
  .term-hero-title {
    font-size: var(--_typography---heading-font-sizes--display-03);
    line-height: var(--_typography---heading-line-height--display-03);
    letter-spacing: var(--_typography---heading-letter-spacing--display-03);
  }
  .term-box {
    grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
    grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  }
  .license-block {
    grid-column-gap: var(--_sizes---spacing--spacing-normal);
    grid-row-gap: var(--_sizes---spacing--spacing-normal);
  }
  .license-image-box {
    grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
    grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
  }
  .license-image-box.google {
    height: 12rem;
  }
  .license-image-flex {
    grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
    grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
    grid-template-columns: minmax(0, 1fr);
  }
  .googlefont-image {
    max-width: 6rem;
    height: 6rem;
  }
  .hugeicons-image {
    max-width: 14rem;
    height: 2.5rem;
  }
  .license-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);
  }
  .award-image {
    height: 10rem;
  }
  .bracket {
    max-width: 1.5rem;
  }
  .title-info {
    max-width: 16rem;
  }
  .dropdown-link {
    text-align: left;
  }
  .dd-flex-wrap {
    grid-column-gap: 32px;
    grid-row-gap: 40px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    display: flex;
  }
  .nav-items {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }
  .dropdown-header {
    margin-bottom: var(--_sizes---spacing--spacing-small);
  }
  .pages-items {
    width: 100%;
  }
  .tab-menus {
    flex-flow: column;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .logo-content-block {
    padding-top: 8rem;
  }
  .cta-gradient {
    height: 2rem;
  }
  .dropdown-nav {
    width: auto;
  }
  .project-svg, .project-arrow-box {
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    min-height: 1.5rem;
  }
  .services-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .services-card {
    position: sticky;
    top: 16rem;
  }
  .process-top {
    top: var(--_sizes---spacing--spacing-jumbo);
    max-width: 24rem;
    position: sticky;
  }
  .idea-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .idea-card {
    position: sticky;
    top: 16rem;
  }
  .pricing-bottom {
    padding-bottom: .5rem;
  }
  .pricing-dot {
    width: .75rem;
    height: .75rem;
    top: -.3%;
  }
  .pricing-dot.right-top {
    top: -.3%;
  }
  .pricing-dot.bottom-right, .pricing-dot.bottom-left {
    bottom: -.3%;
  }
  .pricing-dot.plan-right-top {
    top: -.3%;
  }
  .pricing-dot.plan-bottom-left, .pricing-dot.plan-bottom-right {
    bottom: -.3%;
  }
  .pricing-item {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .includes-lists ul {
    grid-column-gap: var(--_sizes---spacing--spacing-xxsmall);
    grid-row-gap: var(--_sizes---spacing--spacing-xxsmall);
    grid-template-columns: 1fr;
  }
  .price-dots {
    display: none;
  }
  .pricing-red-dot {
    width: .75rem;
    height: .75rem;
    top: -.5%;
  }
  .pricing-red-dot._02 {
    top: -.5%;
  }
  .pricing-red-dot._03, .pricing-red-dot._04 {
    bottom: -.5%;
  }
  .pricing-red-dot.plan {
    width: .75rem;
    height: .75rem;
    top: -.8%;
    left: -.8%;
  }
  .pricing-red-dot.plan-right {
    width: .75rem;
    height: .75rem;
    right: -.8%;
  }
  .pricing-red-dot.plan-three, .pricing-red-dot.plan-four {
    width: .75rem;
    height: .75rem;
  }
  .blog-items-bottom {
    grid-column-gap: var(--_sizes---spacing--spacing-large);
    grid-row-gap: var(--_sizes---spacing--spacing-large);
    grid-template-columns: minmax(0, 1fr);
  }
  .blog-collection-wrapper {
    background-color: var(--_colors---text-color--white);
    position: sticky;
    top: 14rem;
  }
  .blog-item-detail.detail {
    grid-column-gap: var(--_sizes---spacing--spacing-xxxsmall);
    grid-row-gap: var(--_sizes---spacing--spacing-xxxsmall);
  }
  .team-top {
    top: var(--_sizes---spacing--spacing-jumbo);
    max-width: 18rem;
    position: sticky;
  }
  .team-members {
    grid-column-gap: var(--_sizes---spacing--spacing-large);
    grid-row-gap: var(--_sizes---spacing--spacing-large);
    grid-template-columns: minmax(0, 1fr);
  }
  .team-member-card {
    background-color: var(--_colors---text-color--white);
  }
  .team-member-detail {
    justify-content: flex-start;
    align-items: flex-start;
  }
  .team-member-name {
    width: auto;
  }
  .member-box {
    position: sticky;
    top: 14.5rem;
  }
  .checkout-form {
    padding-top: 6rem;
  }
  .social-card {
    height: 6rem;
  }
  .social-arrow-box {
    left: var(--_sizes---spacing--spacing-xsmall);
    top: var(--_sizes---spacing--spacing-xsmall);
    width: 1rem;
    min-width: 1rem;
    height: 1rem;
    min-height: 1rem;
  }
  .social-arrow {
    width: .75rem;
    min-width: .75rem;
    height: .75rem;
    min-height: .75rem;
  }
  .social-arrow._02 {
    width: 1rem;
    min-width: 1rem;
    height: 1rem;
    min-height: 1rem;
  }
  .social-arrow._03 {
    width: .875rem;
    min-width: .875rem;
    height: .875rem;
    min-height: .875rem;
  }
  .gallery-collection-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact-hero-title {
    font-size: var(--_typography---heading-font-sizes--display-03);
    line-height: var(--_typography---heading-line-height--display-03);
    letter-spacing: var(--_typography---heading-letter-spacing--display-03);
  }
  .text-field {
    font-size: var(--_typography---texts-font-sizes--caption);
    line-height: var(--_typography---texts-line-height--caption);
    letter-spacing: var(--_typography---texts-letter-spacing--caption);
  }
  .field-label {
    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);
  }
  .select-field, .text-area {
    font-size: var(--_typography---texts-font-sizes--caption);
    line-height: var(--_typography---texts-line-height--caption);
    letter-spacing: var(--_typography---texts-letter-spacing--caption);
  }
  .blog-item-link, .blogs-collections {
    grid-template-columns: minmax(0, 1fr);
  }
  .blog-single-left {
    max-width: 24rem;
  }
  .blog-single-title {
    font-size: var(--_typography---heading-font-sizes--display-03);
    line-height: var(--_typography---heading-line-height--display-03);
    letter-spacing: var(--_typography---heading-letter-spacing--display-03);
  }
  .blog-banner {
    height: 16rem;
  }
  .related-top {
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
  }
  .pricing-hero-title {
    font-size: var(--_typography---heading-font-sizes--display-03);
    line-height: var(--_typography---heading-line-height--display-03);
    letter-spacing: var(--_typography---heading-letter-spacing--display-03);
  }
  .cookies-card {
    display: none;
  }
  .dropdown-betwwen {
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
  }
  .mobile-dropdown-contents {
    flex-flow: column;
    padding-bottom: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .error-image {
    max-width: 16rem;
  }
  .error-title {
    font-size: var(--_typography---heading-font-sizes--display-03);
    line-height: var(--_typography---heading-line-height--display-03);
    letter-spacing: var(--_typography---heading-letter-spacing--display-03);
  }
  .protected-text-field {
    font-size: var(--_typography---texts-font-sizes--caption);
    line-height: var(--_typography---texts-line-height--caption);
    letter-spacing: var(--_typography---texts-letter-spacing--caption);
  }
  .customer-info {
    text-align: center;
  }
  .block-header {
    grid-column-gap: var(--_sizes---spacing--spacing-xsmall);
    grid-row-gap: var(--_sizes---spacing--spacing-xsmall);
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }
  .billing-address-toggle {
    font-size: var(--_typography---texts-font-sizes--caption);
    line-height: var(--_typography---texts-line-height--caption);
    letter-spacing: var(--_typography---texts-letter-spacing--caption);
  }}


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

   Everything below implements behaviour the export delegated to
   webflow.js: the reveals, the hovers, the three scroll scrubs, the CTA
   marquee, the navbar overlay and its hamburger, the Pages dropdown, the
   FAQ accordion, the two tab sets, the about-hero pointer drift, the
   cookies banner, the project lightbox and the localStorage cart. main.js
   drives the state classes; this sheet owns every keyframe and transition.

   Conventions, learned the hard way across this series:

     * REVEALS ARE ANIMATIONS, NEVER TRANSITIONS. A `transition` shorthand
       on a reveal class REPLACES whatever transition the element already
       had, which is how an earlier conversion deleted a card's own hover.
     * A FINISHED REVEAL HANDS OVER TO `.is-shown`. `animation-fill-mode`
       pins the last keyframe forever and outranks every normal
       declaration, so an element left on `is-revealed` could never be
       moved by anything else again.
     * EVERY REST STATE THE HEAD'S IX2 BLOCK CARRIED IS EITHER HERE OR IN
       THE DESIGN SHEET. The export wrote its no-JS hide-states inline in
       <head>; build_head deletes that block, and the design sheet already
       carries the idea-card widths and every `._0N` opacity -- what it did
       not carry (the reveals' opacity 0) is restated below, gated on `.js`
       so a visitor without JavaScript sees the page rather than 215
       invisible boxes.
     * COLOURS COME FROM THE VARIABLES. Where an IX2 action carries a
       `globalSwatchId`, the runtime used the variable, not the rgb triple
       serialised beside it.

   The three easings this payload uses:
     outQuart                     cubic-bezier(0.165, 0.84, 0.44, 1)
     [0.25, 0.46, 0.45, 0.94]    (easeOutQuad -- every hover and widget)
     ease                         the keyword
*/

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

/* The <main> wrapper transform.py introduces for the skip link and the
   document outline. `display: contents` keeps it out of layout entirely:
   the home hero is a flex child of `.main-wrapper`, and an ordinary <div>
   opened in the middle of that once collapsed a hero from 900px to 539px. */
main {
  display: contents;
}

/* The skip link: visually hidden until it has focus. */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 2000;
  padding: 0.5rem 1rem;
  background-color: var(--_colors---text-color--white);
  color: var(--_colors---background-color--text-black);
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

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

/* --------------------------------------------------------------- reveals
   IX2's six stock scroll presets, 215 elements. All six are opacity 0 -> 1
   over 1000ms `outQuart`; they differ only in the transform group 1 starts
   from. Delays of 50-400ms arrive per element as `--reveal-delay`.

   FIVE OF THE GATED ONES EXIST ONLY AT SOME WIDTHS. An event whose
   `mediaQueries` is `["medium","small","tiny"]` never fires at desktop, so
   its rest state must not apply there either -- a hidden box with no event
   to reveal it stays hidden forever, and the parity harness cannot see it
   because it forces reveals visible before measuring. Each gate below
   wraps BOTH the rest state and nothing else; main.js checks the same gate
   before revealing.

   The rest state is gated on `.js` -- the class build_head's one-line
   script writes onto <html> -- so a visitor with JavaScript off sees the
   page. */
:where(.js) .reveal:not([data-reveal-mq]) {
  opacity: 0;
}@media (max-width: 991px) {

  :where(.js) .reveal[data-reveal-mq="below-main"] {
    opacity: 0;
  }}
@media (max-width: 767px) {

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

  :where(.js) .reveal[data-reveal-mq="main"] {
    opacity: 0;
  }}
@media (min-width: 768px) {

  :where(.js) .reveal[data-reveal-mq="medium"] {
    opacity: 0;
  }}
@media (min-width: 480px) {

  :where(.js) .reveal[data-reveal-mq="small"] {
    opacity: 0;
  }}


/* The transform half of each preset's rest state. These are ungated on
   purpose: a transform with no opacity 0 beside it is invisible to the eye
   at rest only when the element also starts transparent, and the reveal
   animation below restates both from its own `from` keyframe -- so at a
   width where the gate is closed, `.is-shown` (set immediately by main.js)
   clears them and nothing ever moves. */
:where(.js) .reveal-up:not(.is-shown):not(.is-revealed) {
  transform: translate(0, 100px);
}

:where(.js) .reveal-left:not(.is-shown):not(.is-revealed) {
  transform: translate(-100px, 0);
}

:where(.js) .reveal-right:not(.is-shown):not(.is-revealed) {
  transform: translate(100px, 0);
}

:where(.js) .reveal-grow:not(.is-shown):not(.is-revealed) {
  transform: scale(0);
}

:where(.js) .reveal-shrink:not(.is-shown):not(.is-revealed) {
  transform: scale(1.25);
}

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

/* The state main.js hands over to on `animationend`. Opacity ONLY, and
   deliberately: the rest-transform rules above already stop matching at
   `.is-shown`, so the element returns to ITS OWN transform -- and five of
   this design's revealed elements have one (`.process-details._02` rests
   at translate(0, 7rem) by the design's own hand, which a `transform:
   none` here silently flattened until a screenshot showed the five
   process cards sitting level). */
.reveal.is-shown {
  opacity: 1;
}

.reveal-up.is-revealed {
  animation-name: reveal-fade, reveal-from-bottom;
}

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

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

.reveal-grow.is-revealed {
  animation-name: reveal-fade, reveal-from-small;
}

.reveal-shrink.is-revealed {
  animation-name: reveal-fade, reveal-from-large;
}@keyframes reveal-fade {

  from { opacity: 0; }
  to   { opacity: 1; }}
@keyframes reveal-from-bottom {

  from { transform: translate(0, 100px); }
  to   { transform: none; }}
@keyframes reveal-from-left {

  from { transform: translate(-100px, 0); }
  to   { transform: none; }}
@keyframes reveal-from-right {

  from { transform: translate(100px, 0); }
  to   { transform: none; }}
@keyframes reveal-from-small {

  from { transform: scale(0); }
  to   { transform: none; }}
@keyframes reveal-from-large {

  from { transform: scale(1.25); }
  to   { transform: none; }}


/* ---------------------------------------------------------------- navbar
   The hamburger, drawn from the export's own Lottie geometry: three
   358-unit lines, stroke 45, on a 430x350 canvas. IX2 played the file to
   45%, where the outer lines have moved 40 units right and rotated +/-45deg
   about a pivot 8 units in from their left end, and the middle line's
   scale-X is 0. The two players' only difference was ink: white for the
   dark navbar variants, #111 for the light. */
.nav-lottie.base {
  color: #fff;
}

.nav-lottie.secondary {
  color: #111;
}

.nav-lottie svg {
  width: 100%;
  height: 100%;
  display: block;
}

.burger-line {
  transition: transform 0.5s var(--ease-out-quad);
  transform-origin: 55px 50px;
}

.burger-line.middle {
  transform-origin: 215px 170px;
}

.burger-line.bottom {
  transform-origin: 55px 290px;
}

.menu-button.is-open .burger-line.top {
  transform: translateX(40px) rotate(45deg);
}

.menu-button.is-open .burger-line.middle {
  transform: scaleX(0);
}

.menu-button.is-open .burger-line.bottom {
  transform: translateX(40px) rotate(-45deg);
}

/* The open panel's ink. The overlay drops below the bar over the page, so
   it takes the page's own background rather than the framework's grey. */
[data-nav-menu-open] {
  background-color: var(--_colors---text-color--white);
}

/* -------------------------------------------------- the Pages dropdown
   IX2 a-20/a-21: the panel unfolds from height 0 to auto over 400ms while
   the chevron flips 180deg (250ms). The widget's `display: none` is gone
   with the framework rules, so the closed state is a height collapse --
   gated on `.js`, because without the script nothing could ever open it.

   The design gives `.dropdown-nav.pages` `overflow: clip` itself; height
   is what main.js animates, measuring the panel before letting it go to
   auto. Below 992px the design hides the whole `.dropdown` and shows the
   inline `.mobile-dropdown-contents` panel instead, so this is
   desktop-only behaviour by the sheet's own hand. */
:where(.js) .dropdown-nav {
  height: 0;
  overflow: clip;
  transition: height 0.4s ease;
}

.dropdown-nav.is-open {
  height: auto;
}

.dropdown-arrrow {
  transition: transform 0.25s;
}

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

/* ---------------------------------------------------------- FAQ accordion
   IX2 a-31/a-32, on the seven home-page rows: the answer unfolds (400ms),
   its text slides up from -10px, the chevron flips (250ms) and the question
   goes primary-red. The answer's closed state is the same `.js`-gated
   height collapse as the dropdown's. */
:where(.js) .faq-answer {
  height: 0;
  overflow: clip;
  transition: height 0.4s var(--ease-out-quad);
}

.faq-answer.is-open {
  height: auto;
}

.answer-text {
  transform: translate(0, -10px);
  transition: transform 0.4s var(--ease-out-quad);
}

.faq-box.is-open .answer-text {
  transform: none;
}

.question-text {
  transition: color 0.4s var(--ease-out-quad);
}

.faq-box.is-open .question-text {
  color: var(--_colors---background-color--primary-color);
}

.faq-arrow {
  width: 1.25rem;
  min-width: 1.25rem;
  transition: transform 0.25s;
}

.faq-box.is-open .faq-arrow {
  transform: rotate(180deg);
}

/* The inserted heading wrapper. `display: contents` keeps the button and
   the panel as `.faq-box`'s own flex children, so nothing moves. */
.faq-heading {
  display: contents;
}

/* The toggle is a full-width flex row in the design; the <button> retag
   must not shrink it to its content. */
.question-box {
  width: 100%;
}

/* ------------------------------------------------------------------ tabs
   Both tab sets keep Webflow's own renamed classes (`.tabset-*`), and
   `.is-active` -- where the runtime wrote `.w--current` -- is moved by
   main.js. The widget faded panes over 300ms in, 100ms out on the works
   set; the blogs set is instant (`data-duration-in="0"`). */
.tabset-pane.is-active {
  animation: tab-fade 0.3s ease both;
}

.blogs-tabs .tabset-pane.is-active {
  animation: none;
}@keyframes tab-fade {

  from { opacity: 0; }
  to   { opacity: 1; }}


/* ------------------------------------------------------------ CTA marquee
   IX2 a-18: each `.cta-marquee` rail crawls -100% of its own width over
   140 SECONDS, and the two identical rails sit side by side, so the pair
   loops seamlessly. Started by main.js when the CTA scrolls into view --
   which is what the SCROLL_INTO_VIEW trigger did -- and paused until then. */
[data-marquee="cta"] .cta-marquee {
  animation: cta-marquee 140s linear infinite paused;
}

[data-marquee="cta"].is-revealed .cta-marquee,
[data-marquee="cta"].is-shown .cta-marquee {
  animation-play-state: running;
}@keyframes cta-marquee {

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

  [data-marquee="cta"] .cta-marquee {
    animation: none;
  }}


/* ------------------------------------------------------------ button roll
   IX2's "Primary Button [Hover In/Out]", authored four times and used from
   51 buttons (the cookie banner's pair included): both stacked labels roll
   up 100% of their own height over 350ms, revealing the duplicate below.
   The design's `.button-texts` already clips (`overflow: clip`, height
   .875rem). */
[data-roll="button"] .primary-button-text {
  transition: transform 0.35s var(--ease-out-quad);
}

[data-roll="button"]:hover .primary-button-text {
  transform: translate(0, -100%);
}

/* The second label sits in flow under the first inside the clipped column,
   so the -100% roll pulls it exactly into view. */

/* ---------------------------------------------------------------- hovers
   Every pair below is a CSS `:hover` because the payload's [Hover Out]
   list is byte-for-byte the [Hover In] list's group 0 -- the exact shape a
   transition plays both ways. Colours are the variables the swatch ids
   name. */

/* a-22/a-23 -- project cards (35 live uses): photo to 1.1, name to
   primary-red, both stacked arrow glyphs slide right. The `.project-svg`
   pair: `._02` rests at `left: -100%` (design), and both travel 100%. */
[data-hover="project-card"] .project-image {
  transition: transform 0.5s var(--ease-out-quad);
}

[data-hover="project-card"]:hover .project-image {
  transform: scale(1.1);
}

[data-hover="project-card"] .project-item-name {
  transition: color 0.5s var(--ease-out-quad);
}

[data-hover="project-card"]:hover .project-item-name {
  color: var(--_colors---background-color--primary-color);
}

[data-hover="project-card"] .project-svg._01,
[data-hover="project-card"] .project-svg._02 {
  transition: transform 0.5s var(--ease-out-quad);
}

[data-hover="project-card"]:hover .project-svg._01,
[data-hover="project-card"]:hover .project-svg._02 {
  transform: translate(100%, 0);
}

/* a-64/a-65 and a-43/a-44 -- blog cards: photo to 1.1, title to
   primary-red. Two names in the payload, one gesture. */
[data-hover="blog-card"] .blog-image,
[data-hover="blog-feature"] .blog-image {
  transition: transform 0.5s var(--ease-out-quad);
}

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

[data-hover="blog-card"] .item-blog-name,
[data-hover="blog-card"] .blog-item-name,
[data-hover="blog-feature"] .blog-item-name {
  transition: color 0.4s var(--ease-out-quad);
}

[data-hover="blog-card"]:hover .item-blog-name,
[data-hover="blog-card"]:hover .blog-item-name,
[data-hover="blog-feature"]:hover .blog-item-name {
  color: var(--_colors---background-color--primary-color);
}

/* a-62's third act: the featured card's read-more button rolls too. */
[data-hover="blog-feature"] .primary-button-text {
  transition: transform 0.4s var(--ease-out-quad);
}

[data-hover="blog-feature"]:hover .primary-button-text {
  transform: translate(0, -100%);
}

/* a-24/a-25 -- the four service cards: title and copy to primary-red, the
   grey icon swaps for the red one (both stacked, `.active` resting at 0). */
[data-hover="service-card"] .service-card-title,
[data-hover="service-card"] .service-card-para {
  transition: color 0.4s var(--ease-out-quad);
}

[data-hover="service-card"]:hover .service-card-title,
[data-hover="service-card"]:hover .service-card-para {
  color: var(--_colors---background-color--primary-color);
}

[data-hover="service-card"] .service-card-image.inactive,
[data-hover="service-card"] .service-card-image.active {
  transition: opacity 0.4s var(--ease-out-quad);
}

[data-hover="service-card"]:hover .service-card-image.inactive {
  opacity: 0;
}

[data-hover="service-card"]:hover .service-card-image.active {
  opacity: 1;
}

/* a-60/a-61 -- the contact page's three address rows: the arrow fades in
   and slides 1.5rem right (its own margin rests it -1.5rem left). */
[data-hover="contact-link"] .contact-arrow {
  transition: opacity 0.35s var(--ease-out-quad),
    transform 0.35s var(--ease-out-quad);
}

[data-hover="contact-link"]:hover .contact-arrow {
  opacity: 1;
  transform: translate(1.5rem, 0);
}

/* a-55/a-56 -- the about page's career card: the card floods primary-red,
   every text goes white, the button roll follows after 100ms. */
/* THE TRIGGER IS THE CARD. IX2's target list says `.career-card
   (CHILDREN)`, but the element carrying the hook is the `.career-card`
   link itself -- a descendant selector alone never matches, so the card's
   texts went white while its backdrop stayed grey. Written both ways, as
   every earlier conversion that hit this had to. */
.career-card[data-hover="career-card"],
[data-hover="career-card"] .career-card {
  transition: background-color 0.5s var(--ease-out-quad);
}

.career-card[data-hover="career-card"]:hover,
[data-hover="career-card"]:hover .career-card {
  background-color: var(--_colors---background-color--primary-color);
}

[data-hover="career-card"] .card-title.career,
[data-hover="career-card"] .card-short-desc.career,
[data-hover="career-card"] .amount-text,
[data-hover="career-card"] .primary-button {
  transition: color 0.5s var(--ease-out-quad),
    border-color 0.5s var(--ease-out-quad);
}

[data-hover="career-card"]:hover .card-title.career,
[data-hover="career-card"]:hover .card-short-desc.career,
[data-hover="career-card"]:hover .amount-text,
[data-hover="career-card"]:hover .primary-button {
  color: var(--_colors---text-color--white);
  border-color: var(--_colors---text-color--white);
}

[data-hover="career-card"] .primary-button-text {
  transition: transform 0.4s var(--ease-out-quad) 0.1s;
}

[data-hover="career-card"]:hover .primary-button-text {
  transform: translate(0, -100%);
}

/* a-72/a-73 -- the five team member cards: the grey backdrop floods
   primary-red and the photograph regains its colour. */
[data-hover="team-card"] .overflow-hidden.member {
  transition: background-color 0.5s var(--ease-out-quad);
}

[data-hover="team-card"]:hover .overflow-hidden.member {
  background-color: var(--_colors---background-color--primary-color);
}

[data-hover="team-card"] .team-member-image {
  filter: saturate(0%);
  transition: filter 0.5s var(--ease-out-quad);
}

[data-hover="team-card"]:hover .team-member-image {
  filter: saturate(100%);
}

/* --------------------------------------------------------- social cards
   IX2 a-57/58/59: three exclusive cards. The design rests card 1 red with
   white text; hovering another moves the red (and its instagram shot) to
   it. `:has()` on the row is what lets a hover on card 2 restyle card 1;
   every selector keeps the argument low-specificity. */
.social-card,
.social-text {
  transition: background-color 0.5s var(--ease-out-quad),
    color 0.5s var(--ease-out-quad);
}

.instagram-card {
  transition: opacity 0.5s var(--ease-out-quad);
}

/* ANOTHER card is hovered: card 1 gives up its rest highlight. The
   `:not(._01)` inside the `:has()` is load-bearing twice over: without it,
   hovering card 1 ITSELF also fired this rule -- and because `:has()`
   takes its argument's specificity, it BEAT card 1's own `:hover` rule
   below and washed the red out of the card under the pointer. */
.social-cards:has([data-social-card]:hover:not(._01)) .social-card._01 {
  background-color: var(--_colors---text-color--white);
}

.social-cards:has([data-social-card]:hover:not(._01)) .social-text._01 {
  color: var(--_colors---background-color--text-black);
}

.social-cards:has([data-social-card="2"]:hover) .instagram-card._01,
.social-cards:has([data-social-card="3"]:hover) .instagram-card._01 {
  opacity: 0;
}

/* ...and the hovered card takes it. */
.social-card[data-social-card]:hover {
  background-color: var(--_colors---background-color--primary-color);
}

.social-card[data-social-card]:hover .social-text {
  color: var(--_colors---text-color--white);
}

.social-cards:has([data-social-card="2"]:hover) .instagram-card._02,
.social-cards:has([data-social-card="3"]:hover) .instagram-card._03 {
  opacity: 1;
}

/* ----------------------------------------------------------- award rows
   IX2 a-50..a-54, on the about page, >= 768px (the payload gates all five
   events to main+medium; below that the design hides the arrows and
   restacks the rows). The hovered row floods text-black, its title goes
   white and indents 2.5rem, its arrow appears, its info bar narrows to
   97%, and the hanging photograph beside the list swaps to its number. */
@media (min-width: 768px) {
  .award-item {
    transition: background-color 0.4s var(--ease-out-quad);
  }

  .award-title-box {
    transition: color 0.4s var(--ease-out-quad),
      transform 0.4s var(--ease-out-quad);
  }

  .award-arrow,
  .award-image {
    transition: opacity 0.4s var(--ease-out-quad);
  }

  .award-info {
    transition: width 0.4s var(--ease-out-quad);
  }

  .award-item[data-award-item]:hover {
    background-color: var(--_colors---background-color--text-black);
  }

  .award-item[data-award-item]:hover .award-title-box {
    color: var(--_colors---text-color--white);
    transform: translate(2.5rem, 0);
  }

  .award-item[data-award-item]:hover .award-arrow {
    opacity: 1;
  }

  .award-item[data-award-item]:hover .award-info {
    width: 97%;
  }

  /* The photograph column. Rest shows `._01` (design); hovering any OTHER
     row hands the frame to that row's number -- `:not(._01)`, or row 1's
     own hover blanks the frame it is supposed to keep. */
  .award-block:has([data-award-item]:hover:not(._01)) .award-image._01 {
    opacity: 0;
  }

  .award-block:has([data-award-item="1"]:hover) .award-image._01,
  .award-block:has([data-award-item="2"]:hover) .award-image._02,
  .award-block:has([data-award-item="3"]:hover) .award-image._03,
  .award-block:has([data-award-item="4"]:hover) .award-image._04,
  .award-block:has([data-award-item="5"]:hover) .award-image._05 {
    opacity: 1;
  }
}

/* ------------------------------------------------------------ idea cards
   IX2 a-26..a-30, on the home page, >= 768px (main+medium in the payload;
   below 768 the design stacks all five full-width with every panel
   visible). The design rests card 1 open at 50% with the others at 12.5%;
   hovering another card hands the 50% to it, swaps its grey `.inactive`
   image for the colour `.active` one, raises its details and its counter
   digit. */
@media (min-width: 768px) {
  .idea-card {
    transition: width 0.35s;
  }

  .idea-active,
  .idea-inactive,
  .idea-num {
    transition: opacity 0.35s;
  }

  .idea-card-details {
    transition: opacity 0.1s 0.25s;
  }

  /* A hover on any OTHER card: card 1 yields its rest state. The
     `:not(._01)` is what keeps card 1's own hover from collapsing the
     card under the pointer -- `:has()` takes its argument's specificity,
     so without it this rule outranked the `:hover` rule below and the
     whole rail shrank to five closed cards. */
  .idea-bottom:has([data-idea-card]:hover:not(._01)) .idea-card._01 {
    width: 12.5%;
  }

  .idea-bottom:has([data-idea-card]:hover:not(._01)) .idea-active._01,
  .idea-bottom:has([data-idea-card]:hover:not(._01)) .idea-card-details._01 {
    opacity: 0;
  }

  .idea-bottom:has([data-idea-card]:hover:not(._01)) .idea-inactive._01 {
    opacity: 1;
  }

  .idea-bottom:has([data-idea-card]:hover:not(._01)) .idea-num._01 {
    opacity: 0;
  }

  /* ...and the hovered card takes all of it. The details fade in 100ms
     after a 250ms hold, exactly as a-26's delayed step did. */
  .idea-card[data-idea-card]:hover {
    width: 50%;
  }

  .idea-card[data-idea-card]:hover .idea-active {
    opacity: 1;
  }

  .idea-card[data-idea-card]:hover .idea-inactive {
    opacity: 0;
  }

  .idea-card[data-idea-card]:hover .idea-card-details {
    opacity: 1;
  }

  .idea-bottom:has([data-idea-card="1"]:hover) .idea-num._01,
  .idea-bottom:has([data-idea-card="2"]:hover) .idea-num._02,
  .idea-bottom:has([data-idea-card="3"]:hover) .idea-num._03,
  .idea-bottom:has([data-idea-card="4"]:hover) .idea-num._04,
  .idea-bottom:has([data-idea-card="5"]:hover) .idea-num._05 {
    opacity: 1;
  }
}

/* ------------------------------------------------------- blog cover rail
   IX2 a-76/77/78, on the home and about pages, >= 992px only (the design
   stacks the three columns below that). The design rests column 1 open at
   60% showing its hover contents; hovering another column hands the 60%
   to it and swaps which face shows. The payload toggles `display` as well
   as opacity so the hidden face stops catching its column's hover. */
@media (min-width: 992px) {
  .blog-collection-wrapper {
    transition: width 0.3s;
  }

  .blog-front,
  .blog-hover-contents {
    transition: opacity 0.3s;
  }

  .blog-items-bottom:has([data-blog-expand]:hover:not(._01)) .blog-collection-wrapper._01 {
    width: 18.5%;
  }

  .blog-items-bottom:has([data-blog-expand]:hover:not(._01)) .blog-hover-contents._01 {
    opacity: 0;
    display: none;
  }

  .blog-items-bottom:has([data-blog-expand]:hover:not(._01)) .blog-front._01 {
    opacity: 1;
    display: flex;
  }

  .blog-collection-wrapper[data-blog-expand]:hover {
    width: 60%;
  }

  .blog-collection-wrapper[data-blog-expand]:hover .blog-front {
    opacity: 0;
    display: none;
  }

  .blog-collection-wrapper[data-blog-expand]:hover .blog-hover-contents {
    opacity: 1;
    display: flex;
  }
}

/* ---------------------------------------------------------------- scrubs
   Three SCROLLING_IN_VIEW lists, every one gated to `main` (>= 992px) by
   the payload. main.js writes the section's progress through the viewport
   to `--scroll-progress`; each animated child runs a PAUSED one-second
   animation pulled to that point with a negative delay, so the keyframe
   percentages below are the payload's own numbers verbatim
   (audit_scrub_values.py diffs every one against the payload).

   The keyframes hold each property at its first keyframe's value before
   it, which is IX2's own semantics for a continuous group. The DRIVER rule
   lists every scrubbed element by exactly the selector its animation-name
   rule uses -- audit_scrubs.py holds the two sets equal, because an
   element on only one half is a scrub that silently does not move. */
@media (min-width: 992px) {
  [data-scrub="cta"] .inner-content,
  [data-scrub="cta"] .inner-content-wrap,
  [data-scrub="cta"] .brand-image,
  [data-scrub="cta"] .brand-image-wrap,
  [data-scrub="cta"] .background-image,
  [data-scrub="process"] .process-details._01,
  [data-scrub="process"] .process-details._02,
  [data-scrub="process"] .process-details._03,
  [data-scrub="process"] .process-details._04,
  [data-scrub="process"] .process-details._05,
  [data-scrub="process"] .serial-line-two._01,
  [data-scrub="process"] .serial-line-two._02,
  [data-scrub="process"] .serial-line-two._03,
  [data-scrub="process"] .serial-line-two._04,
  [data-scrub="process"] .serial-line-two._05,
  [data-scrub="team"] .member-box._02,
  [data-scrub="team"] .member-box._03,
  [data-scrub="team"] .member-box._04,
  [data-scrub="team"] .member-box._05 {
    animation-duration: 1s;
    animation-play-state: paused;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-delay: calc(var(--scroll-progress, 0) * -1s);
  }

  /* ---- a-19, the CTA brand zoom (on every page's CTA section) -------- */
  [data-scrub="cta"] .inner-content {
    animation-name: scrub-cta-content;
  }

  [data-scrub="cta"] .inner-content-wrap {
    animation-name: scrub-cta-content-wrap;
  }

  [data-scrub="cta"] .brand-image {
    animation-name: scrub-cta-brand;
  }

  [data-scrub="cta"] .brand-image-wrap {
    animation-name: scrub-cta-brand-wrap;
  }

  [data-scrub="cta"] .background-image {
    animation-name: scrub-cta-background;
  }

  /* ---- a-71, the process rail (home page) ---------------------------- */
  [data-scrub="process"] .process-details._01 {
    animation-name: scrub-process-card-1;
  }

  [data-scrub="process"] .process-details._02 {
    animation-name: scrub-process-card-2;
  }

  [data-scrub="process"] .process-details._03 {
    animation-name: scrub-process-card-3;
  }

  [data-scrub="process"] .process-details._04 {
    animation-name: scrub-process-card-4;
  }

  [data-scrub="process"] .process-details._05 {
    animation-name: scrub-process-card-5;
  }

  [data-scrub="process"] .serial-line-two._01 {
    animation-name: scrub-process-line-1;
  }

  [data-scrub="process"] .serial-line-two._02 {
    animation-name: scrub-process-line-2;
  }

  [data-scrub="process"] .serial-line-two._03 {
    animation-name: scrub-process-line-3;
  }

  [data-scrub="process"] .serial-line-two._04 {
    animation-name: scrub-process-line-4;
  }

  [data-scrub="process"] .serial-line-two._05 {
    animation-name: scrub-process-line-5;
  }

  /* ---- a-74, the team rail (about page) ------------------------------ */
  [data-scrub="team"] .member-box._02 {
    animation-name: scrub-team-box-2;
  }

  [data-scrub="team"] .member-box._03 {
    animation-name: scrub-team-box-3;
  }

  [data-scrub="team"] .member-box._04 {
    animation-name: scrub-team-box-4;
  }

  [data-scrub="team"] .member-box._05 {
    animation-name: scrub-team-box-5;
  }
}

/* a-19's parameter group, percentages verbatim. */
@keyframes scrub-cta-content {
  0%        { opacity: 0; }
  50%       { opacity: 0; }
  51%, 100% { opacity: 1; }
}@keyframes scrub-cta-content-wrap {

  0%, 50%   { transform: translate(-50%, 0); }
  66%, 100% { transform: translate(0, 0); }}
@keyframes scrub-cta-brand {

  0%, 10%   { transform: scale(1); }
  58%, 100% { transform: scale(6); }}
@keyframes scrub-cta-brand-wrap {

  0%, 16%   { transform: translate(0, 0); }
  55%, 100% { transform: translate(-500%, -60%); }}
@keyframes scrub-cta-background {

  0%, 16%  { transform: scale(1.5); }
  50%      { opacity: 1; }
  53%      { opacity: 0; }
  58%, 100% { transform: scale(1); opacity: 0; }}


/* a-71's parameter group. Each card slides up from the design's own rest
   offset (0 / 7 / 13 / 20 / 25rem) in its own window, and each serial
   line grows 30% -> 100% with it. */
@keyframes scrub-process-card-1 {
  0%, 100% { transform: translate(0, 0); }
}@keyframes scrub-process-card-2 {

  0%, 3%    { transform: translate(0, 7rem); }
  15%, 100% { transform: translate(0, 0); }}
@keyframes scrub-process-card-3 {

  0%, 15%   { transform: translate(0, 13rem); }
  30%, 100% { transform: translate(0, 0); }}
@keyframes scrub-process-card-4 {

  0%, 30%   { transform: translate(0, 20rem); }
  45%, 100% { transform: translate(0, 0); }}
@keyframes scrub-process-card-5 {

  0%, 45%   { transform: translate(0, 25rem); }
  66%, 100% { transform: translate(0, 0); }}
@keyframes scrub-process-line-1 {

  0%, 3%    { height: 30%; }
  15%, 100% { height: 100%; }}
@keyframes scrub-process-line-2 {

  0%, 3%    { height: 30%; }
  15%, 100% { height: 100%; }}
@keyframes scrub-process-line-3 {

  0%, 15%   { height: 30%; }
  30%, 100% { height: 100%; }}
@keyframes scrub-process-line-4 {

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

  0%, 45%   { height: 30%; }
  66%, 100% { height: 100%; }}


/* a-74's parameter group: the rail rolls left card by card. */
@keyframes scrub-team-box-2 {
  0%, 3%    { transform: translate(0, 0); }
  18%, 100% { transform: translate(-40%, 0); }
}@keyframes scrub-team-box-3 {

  0%, 3%   { transform: translate(0, 0); }
  18%      { transform: translate(-40%, 0); }
  36%, 100% { transform: translate(-85%, 0); }}
@keyframes scrub-team-box-4 {

  0%, 3%   { transform: translate(0, 0); }
  18%      { transform: translate(-40%, 0); }
  36%      { transform: translate(-85%, 0); }
  55%, 100% { transform: translate(-130%, 0); }}
@keyframes scrub-team-box-5 {

  0%, 3%   { transform: translate(0, 0); }
  18%      { transform: translate(-40%, 0); }
  36%      { transform: translate(-85%, 0); }
  55%      { transform: translate(-130%, 0); }
  67%, 100% { transform: translate(-172%, 0); }}


/* ------------------------------------------------------ about-hero drift
   IX2 a-45, >= 768px: the two hanging photographs follow the pointer
   across the hero. The payload's smoothing of 98 is a heavy lag; a long
   ease-out transition expresses it better than a per-frame lerp. The
   design's own rotations travel in the same transform so they survive. */
@media (min-width: 768px) {
  [data-mousemove] .about-hero-image._01 {
    transform: translate(var(--drift-1-x, 30vw), var(--drift-1-y, -10vh))
      rotate(-2deg);
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
  }

  [data-mousemove] .about-hero-image._02 {
    transform: translate(var(--drift-2-x, 0vw), var(--drift-2-y, 0vh))
      rotate(8deg);
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
  }
}

/* ----------------------------------------------------- the form selects
   The contact form's two selects sit white-on-red, and the browser paints
   their POPUP lists with the same white ink on its own white sheet -- so
   the open list showed nothing but the highlighted row. The popup styles
   only accept color/background, which is all this needs. (The published
   site has the same defect; a form a visitor cannot read is corrected, not
   preserved.) */
.select-field option {
  color: var(--_colors---background-color--text-black);
  background-color: var(--_colors---text-color--white);
}

/* --------------------------------------------------------------- cookies
   The about page's demo banner. main.js hides it when either button is
   pressed; there is nothing to consent to in a static template. */
.cookies-card.is-dismissed {
  display: none;
}

/* -------------------------------------------------------------- lightbox
   The project gallery. The links go to the full image with JavaScript off;
   with it, main.js opens this overlay instead. */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem;
  background-color: rgba(0, 0, 0, 0.9);
}

.lightbox-overlay[hidden] {
  display: none;
}

.lightbox-overlay img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  border: 0;
  background: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 1rem;
}

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

.lightbox-prev {
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-next {
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

/* ------------------------------------------------------------------ cart
   The drawer's open state. The wrapper's inline `display: none` was the
   runtime's closed state and travels as this class pair instead; the
   design supplies everything else. */
.cart-modal {
  display: none;
}

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

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