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

   Fonts: assets/fonts/fonts.css -- Jersey 10 (display), Figtree
   (body) and EB Garamond (the .tertiary-font accent), all three
   self-hosted woff2 and all three SIL OFL 1.1.

   TWO OF THOSE ARE SUBSTITUTES. The export uploaded Satoshi and PP
   Mondwest, and neither may be redistributed inside a template that
   is sold -- Satoshi is under the Fontshare/ITF Free Font License,
   PP Mondwest is licensed for personal use only. Figtree stands in
   for Satoshi (+1.8% advance width, matching colour and
   letterforms) and EB Garamond for PP Mondwest (-3.2%, and Mondwest
   is an old-style serif despite the name). The
   `--_typography---font-family--*` tokens in :root below name the
   substitutes; build_fonts.py carries the measurements. */

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

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

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

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

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

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

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

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

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

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


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

   build_css drops the framework rules that only existed for the Webflow
   runtime to drive -- the nav overlay, the slider, the dropdown, the icon
   webfont, the dyn empty state. Several of them were also carrying real
   LAYOUT, and dropping a rule is not the same as dropping the geometry it
   provided. Everything load-bearing is restated here against this design's
   OWN class names, so the shipped markup never mentions a widget.

   THIS SHEET IS EMITTED BETWEEN THE FRAMEWORK AND THE DESIGN, which is where
   the rules it replaces used to sit. That ordering is the whole point: every
   one of these declarations was being overridden by the design sheet in the
   export, and it still is. Moving this block after the design would silently
   win those fights instead -- the mistake that threw a slider arrow across
   the page on an earlier conversion.

   Specificity is kept at (0,1,0) -- one class, no `!important`, no `:is()`
   stacking -- for the same reason, with the one documented exception marked
   below.

   Rules deliberately NOT transcribed, each because the design already
   overrides it everywhere the export renders:

     .w-nav            { background: #dddddd }   .navbar sets --color--transparent
     .w-nav-brand      { float: left }           .brand-logo-link is a flex item
     .w-nav-menu       { float: right }          same
     .w-nav-button     { float: right; padding: 18px }
                                                 .menu-button is a flex item and
                                                 the design sets padding: 0
     .w-nav-brand @767 { padding-left: 10px }    the design's padding-left: 0 is
                                                 base and later in the cascade
     .w-slider         { background: #dddddd; height: 300px; text-align: center }
                                                 both sliders set
                                                 background: transparent and
                                                 height: auto
     .w-slider-mask    { height: 100% }          both masks set height: auto
     .w-nav-link       { color: #222; padding: 20px }
                                                 .nav-link sets both
     .w-slider-nav     { position: absolute }    .slide-nav sets position: static
   */

/* ---- the header bar ------------------------------------------------- */

/* `.w-nav { position: relative }` is what the mobile panel's `top: 100%`
   measures from, so it is the one declaration here the nav genuinely cannot
   lose. None of .container / .nav-inner / .nav-left is positioned, so the
   panel resolves against the bar exactly as it did inside Webflow's injected
   overlay -- which is why main.js does not need to move the menu into one. */
.navbar {
  z-index: 1000;
  position: relative;
}

/* Webflow's clearfix on the bar. Both pseudo-elements are `display: table`
   inside a block container, so they add no height here -- but a previous
   conversion found the same pair acting as real flex items and costing a
   header 20px, so they are transcribed rather than assumed inert. */
.navbar:before,
.navbar:after {
  content: " ";
  display: table;
  grid-area: 1 / 1 / 2 / 2;
}

.navbar:after {
  clear: both;
}

.brand-logo-link {
  color: #333;
  text-decoration: none;
  position: relative;
}

.nav-menu {
  position: relative;
}

.nav-link {
  text-align: left;
  vertical-align: top;
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.menu-button {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: #0000;
  font-size: 24px;
  display: none;
  position: relative;
}

/* The collapse breakpoint is the export's own: the navbar is
   `data-collapse="tiny"`, which is Webflow's 479px. Above it the whole menu
   sits inline in the bar and there is no hamburger at all. */
@media screen and (max-width: 479px) {
  .nav-menu {
    display: none;
  }

  .menu-button {
    display: block;
  }

  /* `[data-nav-menu-open]` in the framework sheet. The `!important` is the
     runtime's own and is kept for the same reason it was there: this rule has
     to beat the `display: none` immediately above it, which it ties with on
     specificity. The design's own ≤479 rule paints the panel black and pads
     it; only the geometry is here. */
  .nav-menu[data-nav-open] {
    text-align: center;
    min-width: 200px;
    display: block !important;
    position: absolute;
    inset: 100% 0 auto;
    overflow: visible;
  }
}

/* ---- the two sliders on index ---------------------------------------- */
/* `.project-slider` (arrows, one project per slide) and `.testimonial-slider`
   (crossfade, autoplay, dot nav). main.js drives both; this is the geometry
   Webflow's `.w-slider*` rules used to provide, minus the three declarations
   listed at the top that the design overrides anyway. */

.project-slider,
.testimonial-slider {
  clear: both;
  -webkit-tap-highlight-color: #0000;
  position: relative;
}

.project-mask,
.mask {
  z-index: 1;
  white-space: nowrap;
  display: block;
  position: relative;
  left: 0;
  right: 0;
  overflow: hidden;
}

.project-slide,
.testimonial-slide {
  text-align: left;
  white-space: normal;
  vertical-align: top;
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;
}

/* The arrows. `.project-slider-arrow` is `.w-slider-arrow-left/right` in the
   export; the design re-places both with `inset` and a transform, so only the
   parts it does NOT set are transcribed -- `position: absolute` and the
   cursor, plus the left/right z-index pair. The 80px width, `font-size: 40px`
   and `color: white` are all overridden. */
.project-slider-arrow {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: #0000;
  /* `margin: auto` is the one part of the widget's placement the design does
     not restate, and it is load-bearing below 480px: there the design
     switches both arrows to `position: relative` with `right: 0%`, and the
     auto margins are what keep the 37px circles centred instead of pinned to
     the left edge. */
  margin: auto;
  position: absolute;
  overflow: hidden;
}

.project-slider-arrow {
  z-index: 3;
}

.project-slider-arrow.is-right {
  z-index: 4;
}

/* The testimonial dot strip. main.js writes one `.slide-dot` per slide into
   `.slide-nav` and marks the current one `.is-active`, which is what
   `.w-slider-dot` / `.w-active` did. The design sets `position: static` and
   the margin; the rest is the widget's. */
.slide-nav {
  z-index: 2;
  text-align: center;
  -webkit-tap-highlight-color: #0000;
  height: 40px;
  margin: auto;
  padding-top: 10px;
}

.slide-dot {
  cursor: pointer;
  background-color: #22222266;
  border-radius: 100%;
  width: 1em;
  height: 1em;
  margin: 0 3px .5em;
  transition: background-color .1s, color .1s;
  display: inline-block;
  position: relative;
  box-shadow: 0 0 3px #33333366;
}

.slide-dot.is-active {
  background-color: #222;
}

.slide-dot:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff;
}

.slide-dot:focus.is-active {
  box-shadow: none;
}

/* ---- CMS list states -------------------------------------------------- */
/* `.w-dyn-empty`'s padded grey box, which the design restyles as
   `.empty-state`; only the padding was the framework's and the design sets
   its own. Nothing to transcribe. `.w-dyn-hide { display: none !important }`
   is the one that matters -- it is how a collection list with no items hides
   its item template, and generate_cms leaves it on exactly those lists. */
.dyn-hide {
  display: none !important;
}

/* ---- the code block on the instructions page -------------------------- */
/* `pre.w-code-block code > span { display: block !important }` is what turns
   the highlighter's inline spans into lines. Without it the whole snippet
   runs together on one line. */
.code-block {
  margin: unset;
}

pre.code-block code {
  all: inherit;
}

pre.code-block code > span {
  display: block !important;
}

/* ======================================================================
   3. Pexora design
   ====================================================================== */
:root {
  --_typography---font-family--primary-font: Figtree, Arial, sans-serif;
  --color--grey: #565656;
  --_typography---text-default--font-size: 16px;
  --_typography---text-default--line-height: 1.4em;
  --_typography---text-default--font-weight: var(--_typography---font-weight--medium);
  --_typography---text-default--letter-spacing: var(--_typography---letter-spacing--xlarge);
  --_typography---font-family--secondary-font: "Jersey 10", sans-serif;
  --_typography---h1--font-size: 70px;
  --_typography---h1--line-height: .9em;
  --_typography---font-weight--semi-bold: 600;
  --_typography---h1--letter-spacing: var(--_typography---letter-spacing--none);
  --_responsive---element-spacing--spacing-zero: 0px;
  --_typography---h2--font-size: 50px;
  --_typography---h2--line-height: 1em;
  --_typography---h2--font-weight: var(--_typography---font-weight--regular);
  --_typography---h2--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---h3--font-size: 40px;
  --_typography---h3--line-height: 1em;
  --_typography---h3--font-weight: var(--_typography---font-weight--regular);
  --_typography---h3--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---h4--font-size: 32px;
  --_typography---h4--line-height: 1em;
  --_typography---h4--font-weight: var(--_typography---font-weight--regular);
  --_typography---h4--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---h5--font-size: 24px;
  --_typography---h5--line-height: 1em;
  --_typography---h5--font-weight: var(--_typography---font-weight--regular);
  --_typography---h5--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---h6--font-size: 20px;
  --_typography---h6--line-height: 1em;
  --_typography---h6--font-weight: var(--_typography---font-weight--regular);
  --_typography---h6--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---text-medium--letter-spacing: var(--_typography---letter-spacing--xlarge);
  --_responsive---full-size: 100%;
  --_responsive---section-padding--banner: 160px;
  --_responsive---section-padding--semi-medium: 80px;
  --_typography---text-medium--font-size: 18px;
  --_typography---text-medium--line-height: 1.4em;
  --_typography---font-weight--regular: 400;
  --_typography---text-small--font-size: 14px;
  --_typography---text-small--line-height: 1.4em;
  --_typography---font-weight--medium: 500;
  --_responsive---padding--padding-124-px\<deleted\|variable-782a0208-0c4c-12ec-f120-df745dc3e1c9\>: 124px;
  --_responsive---element-spacing--spacing-normal: 32px;
  --_responsive---element-spacing--spacing-xlarge: 40px;
  --_responsive---padding--padding-24-px\<deleted\|variable-196d802f-ff13-2ac3-ba10-124bbb631713\>: 24px;
  --_responsive---element-spacing--spacing-medium: 24px;
  --color--white: white;
  --color--black: #191919;
  --color--stroke: #e5e5e5;
  --color--background: #f8f8f8;
  --_responsive---element-spacing--spacing-xxxlarge: 48px;
  --_responsive---34-px\<deleted\|variable-7e30a8d3-7687-4a52-d404-74d261b5dc62\>: 34px;
  --_responsive---element-spacing--spacing-regular: 30px;
  --_responsive---element-spacing--spacing-xsmall: 12px;
  --_typography---text-large--font-size: 20px;
  --_typography---text-large--line-height: 1.4em;
  --_responsive---padding--padding-20-px\<deleted\|variable-d17a61b6-efda-bbbb-5d7e-4e3f7d2e9eb5\>: 20px;
  --color--transparent: #0000;
  --_typography---text-small--letter-spacing: var(--_typography---letter-spacing--medium);
  --_responsive---section-padding--large: 120px;
  --_typography---button-text--font-size: 14px;
  --_typography---button-text--line-height: 1.28em;
  --_typography---button-text--font-weight: var(--_typography---font-weight--medium);
  --_typography---button-text--letter-spacing: var(--_typography---letter-spacing--medium);
  --_typography---text-xlarge--font-size: 24px;
  --color--bright-lilac: #d4a8ff;
  --_responsive---section-padding--medium: 100px;
  --_responsive---section-padding--xlarge: 140px;
  --_typography---text-xlarge--line-height: 1.2em;
  --_typography---text-xlarge--font-weight: var(--_typography---font-weight--medium);
  --_typography---text-xlarge--letter-spacing: var(--_typography---letter-spacing--xlarge);
  --_responsive---element-spacing--spacing-immense: 100px;
  --color--light-green: #97f586;
  --color--simple-yellow: #ffe659;
  --_typography---font-family--tertiary-font: "EB Garamond", Georgia, serif;
  --_typography---letter-spacing--none: 0em;
  --_responsive---element-spacing--spacing-big: 50px;
  --_responsive---border-radius--radius-xxlarge: 30px;
  --_typography---display-01--font-size: 110px;
  --_responsive---element-spacing--spacing-xxbig: 60px;
  --_responsive---border-radius--radius-small: 10px;
  --_responsive---border-radius--radius-round: 50%;
  --_responsive---element-spacing--spacing-xjumbo: 72px;
  --_responsive---section-padding--default: 60px;
  --_responsive---border-radius--radius-large: 20px;
  --_responsive---element-spacing--spacing-massive: 80px;
  --_responsive---element-spacing--spacing-slim: 20px;
  --_responsive---element-spacing--spacing-small: 16px;
  --_typography---text-large--font-weight: var(--_typography---font-weight--regular);
  --_typography---text-large--letter-spacing: var(--_typography---letter-spacing--none);
  --_responsive---border-radius--radius-medium: 12px;
  --color--fashion-gray: #8d8d8d;
  --_typography---font-weight--bold: 700;
  --_typography---display-01--line-height: 1em;
  --_typography---display-01--letter-spacing: var(--_typography---letter-spacing--none);
  --_responsive---element-spacing--spacing-tiny: 4px;
  --_responsive---element-spacing--spacing-xxsmall: 8px;
  --_responsive---element-spacing--spacing-medium-rare: 28px;
  --_responsive---element-spacing--spacing-large: 36px;
  --_responsive---element-spacing--spacing-xxlarge: 44px;
  --_responsive---element-spacing--spacing-xbig: 56px;
  --_responsive---element-spacing--spacing-xxxbig: 64px;
  --_responsive---element-spacing--spacing-jumbo: 68px;
  --_responsive---element-spacing--spacing-xxjumbo: 76px;
  --_responsive---element-spacing--spacing-giant: 90px;
  --_typography---display-01--font-weight: var(--_typography---font-weight--regular);
  --_responsive---element-spacing--spacing-colossal: 120px;
  --_typography---display-02--font-size: 76px;
  --_typography---display-02--line-height: 1em;
  --_typography---display-02--font-weight: var(--_typography---font-weight--regular);
  --_typography---display-02--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---h1--font-weight: var(--_typography---font-weight--regular);
  --_responsive---border-radius--radius-tiny: 4px;
  --_responsive---border-radius--radius-xxsmall: 6px;
  --_responsive---border-radius--radius-xsmall: 8px;
  --_responsive---border-radius--radius-regular: 16px;
  --_responsive---border-radius--radius-xlarge: 24px;
  --_responsive---border-radius--radius-xxxlarge: 40px;
  --_responsive---border-radius--radius-circle: 100%;
  --_typography---text-medium--font-weight: var(--_typography---font-weight--regular);
  --_typography---text-small--font-weight: var(--_typography---font-weight--regular);
  --_typography---tag--font-size: 16px;
  --_typography---tag--line-height: 1.2em;
  --_typography---tag--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---tag--font-weight: var(--_typography---font-weight--regular);
  --_typography---font-weight--light: 300;
  --_typography---letter-spacing--tiny: .01em;
  --_typography---letter-spacing--small: -.01em;
  --_typography---letter-spacing--default: -.02em;
  --_typography---letter-spacing--medium: -.03em;
  --_typography---letter-spacing--large: -.04em;
  --_typography---letter-spacing--xlarge: -.05em;
}
.wf-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.wf-commerce-commercecartwrapper {
  display: inline-block;
  position: relative;
}
.wf-commerce-commercecartopenlink {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: flex;
}
.wf-commerce-commercecartopenlinkcount {
  color: #3898ec;
  text-align: center;
  background-color: #fff;
  border-radius: 9px;
  min-width: 18px;
  height: 18px;
  margin-left: 8px;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  display: inline-block;
}
.wf-commerce-commercecartcontainerwrapper {
  z-index: 1001;
  background-color: #000c;
  position: fixed;
  inset: 0;
}
.wf-commerce-commercecartcontainerwrapper--cartType-modal {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.wf-commerce-commercecartcontainer {
  background-color: #fff;
  flex-direction: column;
  width: 100%;
  min-width: 320px;
  max-width: 480px;
  display: flex;
  overflow: auto;
  box-shadow: 0 5px 25px #00000040;
}
.wf-commerce-commercecartheader {
  border-bottom: 1px solid #e6e6e6;
  flex: none;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  display: flex;
  position: relative;
}
.wf-commerce-commercecartheading {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}
.wf-commerce-commercecartcloselink {
  width: 16px;
  height: 16px;
}
.wf-commerce-commercecartformwrapper {
  flex-direction: column;
  flex: 1;
  display: flex;
}
.wf-commerce-commercecartform {
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  display: flex;
}
.wf-commerce-commercecartlist {
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: 12px 24px;
  overflow: auto;
}
.wf-commerce-commercecartitem {
  align-items: flex-start;
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
}
.wf-commerce-commercecartitemimage {
  width: 60px;
  height: 0%;
}
.wf-commerce-commercecartiteminfo {
  flex-direction: column;
  flex: 1;
  margin-left: 16px;
  margin-right: 16px;
  display: flex;
}
.wf-commerce-commercecartproductname {
  font-weight: 700;
}
.wf-commerce-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-commercebuynowbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  margin-top: 10px;
  padding: 9px 15px;
  text-decoration: none;
  display: inline-block;
}
.wf-commerce-commercebuynowbutton.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-commercelayoutsidebar {
  flex: 0 0 320px;
  position: sticky;
  top: 20px;
}
.wf-commerce-commercecheckoutordersummarywrapper {
  margin-bottom: 20px;
}.wf-commerce-commercecheckoutsummarylineitem {
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 8px;
  display: flex;
}

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

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

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

  .wf-commerce-commercecartcontainerwrapper--cartType-modal {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }  .wf-commerce-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 {
  font-family: var(--_typography---font-family--primary-font);
  color: var(--color--grey);
  font-size: var(--_typography---text-default--font-size);
  line-height: var(--_typography---text-default--line-height);
  font-weight: var(--_typography---text-default--font-weight);
  letter-spacing: var(--_typography---text-default--letter-spacing);
  --_responsive---element-spacing--spacing-zero: 0px;
  --_responsive---full-size: 100%;
  --_responsive---section-padding--banner: 160px;
  --_responsive---section-padding--semi-medium: 80px;
  --_responsive---padding--padding-124-px\<deleted\|variable-782a0208-0c4c-12ec-f120-df745dc3e1c9\>: 124px;
  --_responsive---element-spacing--spacing-normal: 32px;
  --_responsive---element-spacing--spacing-xlarge: 40px;
  --_responsive---padding--padding-24-px\<deleted\|variable-196d802f-ff13-2ac3-ba10-124bbb631713\>: 24px;
  --_responsive---element-spacing--spacing-medium: 24px;
  --_responsive---element-spacing--spacing-xxxlarge: 48px;
  --_responsive---34-px\<deleted\|variable-7e30a8d3-7687-4a52-d404-74d261b5dc62\>: 34px;
  --_responsive---element-spacing--spacing-regular: 30px;
  --_responsive---element-spacing--spacing-xsmall: 12px;
  --_responsive---padding--padding-20-px\<deleted\|variable-d17a61b6-efda-bbbb-5d7e-4e3f7d2e9eb5\>: 20px;
  --_responsive---section-padding--large: 120px;
  --_responsive---section-padding--medium: 100px;
  --_responsive---section-padding--xlarge: 140px;
  --_responsive---element-spacing--spacing-immense: 100px;
  --_responsive---element-spacing--spacing-big: 50px;
  --_responsive---border-radius--radius-xxlarge: 30px;
  --_responsive---element-spacing--spacing-xxbig: 60px;
  --_responsive---border-radius--radius-small: 10px;
  --_responsive---border-radius--radius-round: 50%;
  --_responsive---element-spacing--spacing-xjumbo: 72px;
  --_responsive---section-padding--default: 60px;
  --_responsive---border-radius--radius-large: 20px;
  --_responsive---element-spacing--spacing-massive: 80px;
  --_responsive---element-spacing--spacing-slim: 20px;
  --_responsive---element-spacing--spacing-small: 16px;
  --_responsive---border-radius--radius-medium: 12px;
  --_responsive---element-spacing--spacing-tiny: 4px;
  --_responsive---element-spacing--spacing-xxsmall: 8px;
  --_responsive---element-spacing--spacing-medium-rare: 28px;
  --_responsive---element-spacing--spacing-large: 36px;
  --_responsive---element-spacing--spacing-xxlarge: 44px;
  --_responsive---element-spacing--spacing-xbig: 56px;
  --_responsive---element-spacing--spacing-xxxbig: 64px;
  --_responsive---element-spacing--spacing-jumbo: 68px;
  --_responsive---element-spacing--spacing-xxjumbo: 76px;
  --_responsive---element-spacing--spacing-giant: 90px;
  --_responsive---element-spacing--spacing-colossal: 120px;
  --_responsive---border-radius--radius-tiny: 4px;
  --_responsive---border-radius--radius-xxsmall: 6px;
  --_responsive---border-radius--radius-xsmall: 8px;
  --_responsive---border-radius--radius-regular: 16px;
  --_responsive---border-radius--radius-xlarge: 24px;
  --_responsive---border-radius--radius-xxxlarge: 40px;
  --_responsive---border-radius--radius-circle: 100%;
  --color--grey: #565656;
  --color--white: white;
  --color--black: #191919;
  --color--stroke: #e5e5e5;
  --color--background: #f8f8f8;
  --color--transparent: #0000;
  --color--bright-lilac: #d4a8ff;
  --color--light-green: #97f586;
  --color--simple-yellow: #ffe659;
  --color--fashion-gray: #8d8d8d;
  --_typography---font-family--primary-font: Figtree, Arial, sans-serif;
  --_typography---text-default--font-size: 16px;
  --_typography---text-default--line-height: 1.4em;
  --_typography---text-default--font-weight: var(--_typography---font-weight--medium);
  --_typography---text-default--letter-spacing: var(--_typography---letter-spacing--xlarge);
  --_typography---font-family--secondary-font: "Jersey 10", sans-serif;
  --_typography---h1--font-size: 70px;
  --_typography---h1--line-height: .9em;
  --_typography---font-weight--semi-bold: 600;
  --_typography---h1--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---h2--font-size: 50px;
  --_typography---h2--line-height: 1em;
  --_typography---h2--font-weight: var(--_typography---font-weight--regular);
  --_typography---h2--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---h3--font-size: 40px;
  --_typography---h3--line-height: 1em;
  --_typography---h3--font-weight: var(--_typography---font-weight--regular);
  --_typography---h3--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---h4--font-size: 32px;
  --_typography---h4--line-height: 1em;
  --_typography---h4--font-weight: var(--_typography---font-weight--regular);
  --_typography---h4--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---h5--font-size: 24px;
  --_typography---h5--line-height: 1em;
  --_typography---h5--font-weight: var(--_typography---font-weight--regular);
  --_typography---h5--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---h6--font-size: 20px;
  --_typography---h6--line-height: 1em;
  --_typography---h6--font-weight: var(--_typography---font-weight--regular);
  --_typography---h6--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---text-medium--letter-spacing: var(--_typography---letter-spacing--xlarge);
  --_typography---text-medium--font-size: 18px;
  --_typography---text-medium--line-height: 1.4em;
  --_typography---font-weight--regular: 400;
  --_typography---text-small--font-size: 14px;
  --_typography---text-small--line-height: 1.4em;
  --_typography---font-weight--medium: 500;
  --_typography---text-large--font-size: 20px;
  --_typography---text-large--line-height: 1.4em;
  --_typography---text-small--letter-spacing: var(--_typography---letter-spacing--medium);
  --_typography---button-text--font-size: 14px;
  --_typography---button-text--line-height: 1.28em;
  --_typography---button-text--font-weight: var(--_typography---font-weight--medium);
  --_typography---button-text--letter-spacing: var(--_typography---letter-spacing--medium);
  --_typography---text-xlarge--font-size: 24px;
  --_typography---text-xlarge--line-height: 1.2em;
  --_typography---text-xlarge--font-weight: var(--_typography---font-weight--medium);
  --_typography---text-xlarge--letter-spacing: var(--_typography---letter-spacing--xlarge);
  --_typography---font-family--tertiary-font: "EB Garamond", Georgia, serif;
  --_typography---letter-spacing--none: 0em;
  --_typography---display-01--font-size: 110px;
  --_typography---text-large--font-weight: var(--_typography---font-weight--regular);
  --_typography---text-large--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---font-weight--bold: 700;
  --_typography---display-01--line-height: 1em;
  --_typography---display-01--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---display-01--font-weight: var(--_typography---font-weight--regular);
  --_typography---display-02--font-size: 76px;
  --_typography---display-02--line-height: 1em;
  --_typography---display-02--font-weight: var(--_typography---font-weight--regular);
  --_typography---display-02--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---h1--font-weight: var(--_typography---font-weight--regular);
  --_typography---text-medium--font-weight: var(--_typography---font-weight--regular);
  --_typography---text-small--font-weight: var(--_typography---font-weight--regular);
  --_typography---tag--font-size: 16px;
  --_typography---tag--line-height: 1.2em;
  --_typography---tag--letter-spacing: var(--_typography---letter-spacing--none);
  --_typography---tag--font-weight: var(--_typography---font-weight--regular);
  --_typography---font-weight--light: 300;
  --_typography---letter-spacing--tiny: .01em;
  --_typography---letter-spacing--small: -.01em;
  --_typography---letter-spacing--default: -.02em;
  --_typography---letter-spacing--medium: -.03em;
  --_typography---letter-spacing--large: -.04em;
  --_typography---letter-spacing--xlarge: -.05em;
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h1--font-size);
  line-height: var(--_typography---h1--line-height);
  font-weight: var(--_typography---font-weight--semi-bold);
  letter-spacing: var(--_typography---h1--letter-spacing);
  margin-top: 0;
  margin-bottom: 0;
}
h2:where(:not([class*="heading-scale-"])), :where(.heading-scale-2) {
  margin-top: var(--_responsive---element-spacing--spacing-zero);
  margin-bottom: var(--_responsive---element-spacing--spacing-zero);
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h2--font-size);
  line-height: var(--_typography---h2--line-height);
  font-weight: var(--_typography---h2--font-weight);
  letter-spacing: var(--_typography---h2--letter-spacing);
}
h3:where(:not([class*="heading-scale-"])), :where(.heading-scale-3) {
  margin-top: var(--_responsive---element-spacing--spacing-zero);
  margin-bottom: var(--_responsive---element-spacing--spacing-zero);
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h3--font-size);
  line-height: var(--_typography---h3--line-height);
  font-weight: var(--_typography---h3--font-weight);
  letter-spacing: var(--_typography---h3--letter-spacing);
}
h4:where(:not([class*="heading-scale-"])), :where(.heading-scale-4) {
  margin-top: var(--_responsive---element-spacing--spacing-zero);
  margin-bottom: var(--_responsive---element-spacing--spacing-zero);
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h4--font-size);
  line-height: var(--_typography---h4--line-height);
  font-weight: var(--_typography---h4--font-weight);
  letter-spacing: var(--_typography---h4--letter-spacing);
}
h5:where(:not([class*="heading-scale-"])), :where(.heading-scale-5) {
  margin-top: var(--_responsive---element-spacing--spacing-zero);
  margin-bottom: var(--_responsive---element-spacing--spacing-zero);
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h5--font-size);
  line-height: var(--_typography---h5--line-height);
  font-weight: var(--_typography---h5--font-weight);
  letter-spacing: var(--_typography---h5--letter-spacing);
  text-transform: uppercase;
}
h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-6) {
  margin-top: var(--_responsive---element-spacing--spacing-zero);
  margin-bottom: var(--_responsive---element-spacing--spacing-zero);
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h6--font-size);
  line-height: var(--_typography---h6--line-height);
  font-weight: var(--_typography---h6--font-weight);
  letter-spacing: var(--_typography---h6--letter-spacing);
  text-transform: uppercase;
}
p {
  margin-top: var(--_responsive---element-spacing--spacing-zero);
  margin-bottom: var(--_responsive---element-spacing--spacing-zero);
  letter-spacing: var(--_typography---text-medium--letter-spacing);
}
ul {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}
img {
  width: var(--_responsive---full-size);
  height: var(--_responsive---full-size);
  object-fit: cover;
  display: inline-block;
}
.utility-page-wrap {
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  padding-top: var(--_responsive---section-padding--banner);
  padding-bottom: var(--_responsive---section-padding--semi-medium);
  justify-content: center;
  align-items: center;
  display: flex;
}
.utility-page-content {
  text-align: center;
  flex-direction: column;
  margin-bottom: 0;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
}
.page-wrapper {
  position: relative;
}
.container {
  width: var(--_responsive---full-size);
  max-width: 1380px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.heading-02 {
  margin-top: var(--_responsive---element-spacing--spacing-zero);
  margin-bottom: var(--_responsive---element-spacing--spacing-zero);
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h2--font-size);
  line-height: var(--_typography---h2--line-height);
  font-weight: var(--_typography---h2--font-weight);
  letter-spacing: var(--_typography---h2--letter-spacing);
}
.heading-03 {
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h3--font-size);
  line-height: var(--_typography---h3--line-height);
  font-weight: var(--_typography---h3--font-weight);
  letter-spacing: var(--_typography---h3--letter-spacing);
}
.heading-04 {
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h4--font-size);
  line-height: var(--_typography---h4--line-height);
  font-weight: var(--_typography---h4--font-weight);
  letter-spacing: var(--_typography---h4--letter-spacing);
}
.heading-05 {
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h5--font-size);
  line-height: var(--_typography---h5--line-height);
  font-weight: var(--_typography---h5--font-weight);
  letter-spacing: var(--_typography---h5--letter-spacing);
}
.heading-06 {
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h6--font-size);
  line-height: var(--_typography---h6--line-height);
  font-weight: var(--_typography---h6--font-weight);
  letter-spacing: var(--_typography---h6--letter-spacing);
  text-transform: uppercase;
}
.text-medium {
  font-size: var(--_typography---text-medium--font-size);
  line-height: var(--_typography---text-medium--line-height);
  font-weight: var(--_typography---font-weight--regular);
  letter-spacing: var(--_typography---text-medium--letter-spacing);
}
.text-default {
  font-size: var(--_typography---text-default--font-size);
  line-height: var(--_typography---text-default--line-height);
  font-weight: var(--_typography---font-weight--regular);
  letter-spacing: var(--_typography---text-medium--letter-spacing);
}
.text-small {
  font-size: var(--_typography---text-small--font-size);
  line-height: var(--_typography---text-small--line-height);
  letter-spacing: var(--_typography---text-medium--letter-spacing);
}
.text-small.medium {
  font-weight: var(--_typography---font-weight--medium);
}
.style-guide {
  padding-top: var(--_responsive---padding--padding-124-px\<deleted\|variable-782a0208-0c4c-12ec-f120-df745dc3e1c9\>);
  padding-bottom: var(--_responsive---padding--padding-124-px\<deleted\|variable-782a0208-0c4c-12ec-f120-df745dc3e1c9\>);
}
.style-guide-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-normal);
  grid-row-gap: var(--_responsive---element-spacing--spacing-normal);
  flex-flow: column;
  display: flex;
}
.color-wrap, .typography-wrap, .components-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  flex-flow: row;
  justify-content: space-between;
  display: flex;
}
.style-guide-box-title {
  padding-bottom: var(--_responsive---padding--padding-24-px\<deleted\|variable-196d802f-ff13-2ac3-ba10-124bbb631713\>);
}
.color-block-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-normal);
  grid-row-gap: var(--_responsive---element-spacing--spacing-normal);
  flex-flow: column;
  display: flex;
}
.color-block-inner-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-medium);
  grid-row-gap: var(--_responsive---element-spacing--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.color-thumb {
  background-color: var(--color--white);
  height: 178px;
  color: var(--color--black);
  justify-content: center;
  align-items: center;
  display: flex;
}
.color-thumb.white {
  border: 1px solid var(--color--stroke);
}
.color-thumb.is-stroke {
  background-color: var(--color--stroke);
}
.color-thumb.is-background {
  background-color: var(--color--background);
}
.color-thumb.is-grey {
  background-color: var(--color--grey);
  color: var(--color--white);
}
.color-thumb.is-dark {
  background-color: var(--color--black);
  color: var(--color--white);
}
.color-block-main-wrap {
  width: var(--_responsive---full-size);
  grid-column-gap: var(--_responsive---element-spacing--spacing-xxxlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xxxlarge);
  flex-flow: column;
  max-width: 776px;
  display: flex;
}
.typography-box-wrap {
  width: var(--_responsive---full-size);
  grid-column-gap: var(--_responsive---element-spacing--spacing-normal);
  grid-row-gap: var(--_responsive---element-spacing--spacing-normal);
  flex-flow: column;
  max-width: 776px;
  display: flex;
}
.typography-box-inner-wrap {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  flex-flow: column;
  display: flex;
}
.text-block {
  grid-column-gap: var(--_responsive---element-spacing--spacing-xsmall);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xsmall);
  color: var(--color--black);
  flex-flow: column;
  display: flex;
}
.text-large {
  font-size: var(--_typography---text-large--font-size);
  line-height: var(--_typography---text-large--line-height);
  letter-spacing: var(--_typography---text-medium--letter-spacing);
}
.text-large.is-job-title {
  text-shadow: 0 28px 0 var(--color--black);
  overflow: hidden;
}
.header-section {
  position: absolute;
  inset: 0% 0% auto;
}
.navbar {
  width: var(--_responsive---full-size);
  padding-top: var(--_responsive---padding--padding-20-px\<deleted\|variable-d17a61b6-efda-bbbb-5d7e-4e3f7d2e9eb5\>);
  padding-bottom: var(--_responsive---padding--padding-20-px\<deleted\|variable-d17a61b6-efda-bbbb-5d7e-4e3f7d2e9eb5\>);
  background-color: var(--color--transparent);
}
.brand-logo-link {
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 55px;
  padding-left: 0;
  display: flex;
}
.nav-button-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  display: flex;
}
.nav-button-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex: none;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}
.nav-inner {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.nav-menu {
  justify-content: space-between;
  align-items: center;
}
.nav-link {
  color: var(--color--white);
  font-size: var(--_typography---text-small--font-size);
  line-height: var(--_typography---text-small--line-height);
  font-weight: var(--_typography---font-weight--medium);
  letter-spacing: var(--_typography---text-small--letter-spacing);
  border-top: 1px solid #fff0;
  border-bottom: 1px solid #fff0;
  border-radius: 4px;
  padding: 4px 10px;
  transition: all .3s;
}
.nav-link:hover {
  border-top: 1px solid var(--color--white);
  border-bottom: 1px solid var(--color--white);
}
.nav-link[aria-current="page"], .nav-link.is-active {
  border-top: 1px solid var(--color--white);
  border-bottom: 1px solid var(--color--white);
  color: var(--color--white);
}
.utility-content-block {
  grid-row-gap: 36px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 848px;
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
  display: flex;
}
.text-dark {
  color: var(--color--black);
  text-decoration: none;
}
.heading-7 {
  letter-spacing: 0;
  font-size: 24px;
  line-height: 24px;
}
.text-lg-2 {
  letter-spacing: -.03em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 20px;
  line-height: 1.32em;
}
.utility-list-block {
  width: var(--_responsive---full-size);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}
.text-large-2 {
  letter-spacing: 0;
  font-size: 20px;
  line-height: 1.5em;
}
.utility-section {
  padding-top: var(--_responsive---section-padding--large);
  padding-bottom: var(--_responsive---section-padding--large);
}
.terms-link {
  color: var(--color--grey);
  transition: color .3s;
}
.terms-link:hover {
  color: var(--color--black);
}
.utility-text-wrap {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  border-top: 1px solid var(--color--stroke);
  border-bottom: 1px solid var(--color--stroke);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-top: 24px;
  padding-bottom: 44px;
  text-decoration: none;
  display: flex;
}
.instruction-list {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 20px;
}
.utility-content-wrap {
  grid-row-gap: 44px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}
.button-text {
  height: 17.9219px;
  font-size: var(--_typography---button-text--font-size);
  line-height: var(--_typography---button-text--line-height);
  font-weight: var(--_typography---button-text--font-weight);
  letter-spacing: var(--_typography---button-text--letter-spacing);
  text-shadow: 0 17.92px 0 var(--color--black);
  overflow: hidden;
}
.button-text:where(.button-bright-lilac) {
  height: auto;
  font-size: var(--_typography---text-xlarge--font-size);
  text-shadow: 0 30.71px 0 var(--color--black);
}
.accordion-block {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  max-width: 670px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.hero-text-block {
  grid-row-gap: 30px;
  width: 100%;
  max-width: 535px;
  color: var(--color--white);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}
.hero-text-block.is-service {
  max-width: 745px;
}
.button {
  grid-column-gap: 10px;
  background-color: var(--color--white);
  color: var(--color--black);
  border-radius: 4px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 8px 10px;
  text-decoration: none;
  transition: background-color .3s;
  display: flex;
  overflow: hidden;
}
.button:where(.button-black) {
  background-color: var(--color--black);
  color: var(--color--white);
}
.button:where(.button-bright-lilac) {
  background-color: var(--color--bright-lilac);
  border-radius: 16px;
  padding: 29px 50px;
}
.button:hover {
  background-color: var(--color--bright-lilac);
}
.button:hover:where(.button-black) {
  color: var(--color--black);
}
.button.black {
  background-color: var(--color--black);
  color: var(--color--white);
  position: relative;
}
.button.black:hover {
  background-color: var(--color--bright-lilac);
  color: var(--color--black);
}
.button.is-pricing-details {
  border: 1px solid var(--color--stroke);
  position: relative;
}
.button.is-cart {
  border: 1px solid var(--color--stroke);
}
.hero-section {
  z-index: 1;
  height: 100vh;
  padding-bottom: var(--_responsive---section-padding--medium);
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
  position: relative;
  overflow: hidden;
}
.hero-background-wrap {
  z-index: -1;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}
.heading-01 {
  font-family: var(--_typography---font-family--secondary-font);
  font-size: var(--_typography---h1--font-size);
  line-height: var(--_typography---h1--line-height);
  font-weight: var(--_typography---font-weight--regular);
}
.nav-left {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  background-color: var(--color--black);
  border-radius: 4px;
  justify-content: flex-start;
  align-items: center;
  padding: 7px 7px 7px 15px;
  display: flex;
}
.nav-button {
  flex: none;
}
.cart {
  grid-column-gap: 20px;
  background-color: var(--color--black);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  padding: 7px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}
.home-about {
  padding-top: var(--_responsive---section-padding--xlarge);
  padding-bottom: var(--_responsive---section-padding--xlarge);
}
.section-title-block {
  grid-row-gap: 30px;
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 90px;
  display: flex;
}
.section-title-block.is-home-about {
  margin-bottom: 0;
}
.section-title-block.is-faq {
  margin-bottom: 60px;
}
.section-title-block.is-project {
  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 525px;
}
.section-title-block.is-studio {
  max-width: 536px;
  margin-left: auto;
  margin-right: auto;
}
.section-title-block.is-principles {
  max-width: 576px;
  margin-left: auto;
  margin-right: auto;
}
.section-title-block.is-job {
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
}
.section-title-block.is-service-main, .section-title-block.is-step {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.section-title-block.is-blog-main {
  max-width: 525px;
  margin-left: auto;
  margin-right: auto;
}
.section-description {
  max-width: 350px;
}
.section-description.isfeature {
  max-width: 386px;
}
.section-description.is-project, .section-description.is-studio, .section-description.is-priciples, .section-description.is-job, .section-description.is-service-main, .section-description.is-step, .section-description.is-blog {
  max-width: none;
}
.home-about-image-wrap {
  z-index: -1;
  margin-top: -140px;
  position: relative;
}
.home-about-text-block {
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 522px;
  margin-top: -100px;
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
  display: flex;
}
.home-about-image-02 {
  object-fit: cover;
  max-width: 245px;
}
.home-about-text-wrap {
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  width: 100%;
  color: var(--color--black);
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.text-xlarge {
  font-family: var(--_typography---font-family--primary-font);
  font-size: var(--_typography---text-xlarge--font-size);
  line-height: var(--_typography---text-xlarge--line-height);
  font-weight: var(--_typography---text-xlarge--font-weight);
  letter-spacing: var(--_typography---text-xlarge--letter-spacing);
}
.team-section {
  padding-bottom: var(--_responsive---section-padding--xlarge);
}
.team-content-block {
  background-image: url('../images/team-background-1.webp');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: 100%;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  padding-top: 278px;
}
.team-widget-block {
  width: var(--_responsive---full-size);
  max-width: 550px;
  margin-right: auto;
  margin-bottom: var(--_responsive---element-spacing--spacing-immense);
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: end;
  margin-left: auto;
  display: grid;
}
.team-widget {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  height: 135px;
  color: var(--color--black);
  text-align: center;
  flex-flow: column;
  justify-content: flex-end;
  display: flex;
}
.team-widget-image-wrap {
  border-radius: 10px;
  overflow: hidden;
}
.team-text-block {
  width: var(--_responsive---full-size);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  max-width: 522px;
  color: var(--color--black);
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.faq-image {
  max-width: 215px;
  margin-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.faq-section {
  padding-bottom: var(--_responsive---section-padding--xlarge);
}
.animated-section {
  height: 300vh;
}
.animated-sticky {
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
  position: sticky;
  top: 0;
}
.animated-title-wrap {
  max-width: 630px;
  color: var(--color--black);
  text-align: center;
}
.animated-tag-wrapper {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}
.animated-tag {
  background-color: var(--color--bright-lilac);
  color: var(--color--black);
  border-radius: 16px;
  padding: 30px 50px;
  display: inline-block;
}
.animated-tag.two {
  background-color: var(--color--light-green);
  position: absolute;
  inset: auto auto 10% 0%;
}
.animated-tag.three {
  background-color: var(--color--black);
  color: var(--color--white);
  position: absolute;
  inset: auto 0% 0% auto;
}
.animated-tag.one {
  position: absolute;
  inset: 23% 0% auto auto;
}
.animated-tag.four {
  background-color: var(--color--light-green);
  position: absolute;
  inset: 23% 0% auto auto;
}
.animated-tag.five {
  background-color: var(--color--simple-yellow);
  position: absolute;
  inset: auto auto 10% 0%;
}
.animated-tag.six {
  background-color: var(--color--black);
  color: var(--color--white);
  position: absolute;
  inset: auto 0% -20% auto;
}
.animated-tag-wrap {
  width: var(--_responsive---full-size);
  max-width: 835px;
  min-height: 527px;
  position: relative;
}
.animated-button-wrap {
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}
.process-section {
  padding-top: var(--_responsive---section-padding--xlarge);
  padding-bottom: var(--_responsive---section-padding--xlarge);
}
.process-card {
  grid-row-gap: 17px;
  border: 1px solid var(--color--stroke);
  background-color: var(--color--background);
  border-radius: 13px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 15px 5px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
  box-shadow: 0 0 #f7f7f7;
}
.process-card-title-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  color: var(--color--black);
  justify-content: flex-start;
  align-items: center;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
}
.process-card-image-wrap {
  background-color: #bfa1a1;
  border-radius: 10px;
  overflow: hidden;
}
.process-card-image {
  object-fit: cover;
}
.process-card-text-wrap {
  grid-row-gap: 15px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  padding-bottom: 15px;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
}
.process-image-wrap {
  z-index: -1;
  margin-top: -140px;
  position: relative;
}
.process-card-block {
  max-width: 1156px;
  padding-top: var(--_responsive---section-padding--large);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}
.tertiary-font {
  font-family: var(--_typography---font-family--tertiary-font);
  letter-spacing: var(--_typography---letter-spacing--none);
}
.process-card-divider {
  border-top: 1px dashed var(--color--stroke);
}
.project-section {
  padding-top: var(--_responsive---section-padding--xlarge);
  padding-bottom: var(--_responsive---section-padding--xlarge);
}
.project-slider {
  background-color: var(--color--transparent);
  height: auto;
}
.hide {
  display: none;
}
.project-mask {
  height: auto;
}
.project-widget-text-block {
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 38%;
  max-width: 523px;
  margin-top: auto;
  padding-top: 60px;
  display: flex;
}
.project-widget-text-block.is-main {
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 0;
  padding-top: 0;
}
.project-widget {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  display: flex;
}
.project-widget-image-block {
  background-image: url('../images/project-background.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 30px;
  width: 57%;
  max-width: 777px;
  padding: 90px 67px;
  text-decoration: none;
}
.project-widget-image-wrapper {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: #ebfcffa6;
  border-radius: 10px;
  padding: 25px;
  overflow: hidden;
}
.project-widget-image-wrap {
  border-radius: 8px;
  overflow: hidden;
}
.project-widget-tag-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  color: var(--color--black);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  display: flex;
}
.project-slider-arrow {
  aspect-ratio: 1;
  border: 1px solid var(--color--stroke);
  background-color: var(--color--white);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 37px;
  display: flex;
  inset: 0% 38% auto auto;
  transform: translate(37px);
  box-shadow: 0 1px 1px #d5d5d5;
}
.project-slider-arrow:focus {
  background-color: var(--color--bright-lilac);
}
.project-slider-arrow.is-right {
  transform: translate(84px);
}
.project-arrow-icon {
  justify-content: center;
  align-items: center;
  display: flex;
}
.service-section {
  padding-bottom: var(--_responsive---section-padding--xlarge);
}
.service-top-image {
  max-width: 600px;
  margin-bottom: 42px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.service-content-block {
  height: 400vh;
}
.service-sticky {
  height: 100vh;
  padding: 10px;
  position: sticky;
  top: 0;
}
.service-widget {
  height: var(--_responsive---full-size);
  background-color: var(--color--black);
  border-radius: 30px;
  position: relative;
  overflow: hidden;
}
.service-widget-left {
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}
.service-widget-text-block {
  z-index: 5;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
  position: absolute;
  inset: 0%;
}
.service-widget-image-wrap {
  z-index: 1;
  width: var(--_responsive---full-size);
  height: var(--_responsive---full-size);
  position: relative;
  overflow: hidden;
}
.service-widget-image._01 {
  z-index: 4;
  position: relative;
}
.service-widget-image._02 {
  z-index: 3;
  position: absolute;
  inset: 0%;
}
.service-widget-image._03 {
  z-index: 2;
  position: absolute;
  inset: 0%;
}
.service-widget-image._04 {
  z-index: 1;
  position: absolute;
  inset: 0%;
}
.service-widget-text-wrapper {
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 50px;
  display: flex;
}
.service-widget-description {
  width: var(--_responsive---full-size);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  max-width: 524px;
  height: 160px;
  color: var(--color--white);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-bottom: 40px;
  display: flex;
}
.service-widget-title {
  color: #ffffff80;
}
.service-widget-title.one {
  color: #fff;
}
.service-bottom {
  max-width: 875px;
  color: var(--color--black);
  text-align: center;
  margin-top: 60px;
  margin-left: auto;
  margin-right: auto;
}
.feature-widget-block {
  width: var(--_responsive---full-size);
  grid-row-gap: 20px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 970px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.feature-widget {
  grid-column-gap: 70px;
  background-color: var(--color--white);
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
  position: sticky;
  top: 40px;
}
.feature-widget-image-block {
  width: var(--_responsive---full-size);
  background-color: #f8f8f8;
  border-radius: 10px;
  max-width: 560px;
  overflow: hidden;
}
.feature-widget-image {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}
.feature-widget-text-block {
  grid-row-gap: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 340px;
  display: flex;
}
.feature-section, .testimonial-section {
  padding-top: var(--_responsive---section-padding--xlarge);
  padding-bottom: var(--_responsive---section-padding--xlarge);
}
.testimonial-text-block {
  grid-column-gap: 110px;
  grid-row-gap: 110px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 720px;
  margin-bottom: 70px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.testimonial-top {
  grid-row-gap: 30px;
  width: 100%;
  color: var(--color--black);
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.quote-icon {
  max-width: 60px;
}
.testimonial-bottom {
  grid-row-gap: 7px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 172px;
  text-decoration: none;
  display: flex;
}
.pricing-section {
  padding-top: var(--_responsive---section-padding--xlarge);
  padding-bottom: var(--_responsive---section-padding--xlarge);
}
.pricing-section.is-main {
  padding-top: var(--_responsive---element-spacing--spacing-zero);
}
.pricing-image-wrap {
  z-index: -1;
  margin-top: -260px;
  margin-bottom: -180px;
  position: relative;
}
.pricing-card-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.pricing-card {
  border: 1px solid var(--color--stroke);
  border-radius: 13px;
  padding: 20px;
}
.pricing-card.slide-bottom.is-highlighted {
  background-color: var(--color--background);
  box-shadow: 0 0 0 4px #f7f7f7;
}
.pricing-card-text-block {
  grid-row-gap: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 332px;
  margin-bottom: 56px;
  text-decoration: none;
  display: flex;
}
.pricing-card-title-block {
  grid-row-gap: 5px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.pricing-list {
  grid-row-gap: 8px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.pricing-list-item {
  grid-column-gap: 11px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.pricing-list-icon {
  object-fit: cover;
  max-width: 16px;
  overflow: hidden;
}
.pricing-card-image-wrap {
  max-width: 84px;
  margin-bottom: 30px;
}
.pricing-button {
  grid-column-gap: 10px;
  border: 1px solid var(--color--stroke);
  background-color: var(--color--white);
  width: 100%;
  color: var(--color--black);
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  padding: 8px 10px;
  text-decoration: none;
  transition: background-color .3s;
  display: flex;
  overflow: hidden;
}
.pricing-button:hover {
  background-color: var(--color--bright-lilac);
}
.blog-section {
  padding-top: var(--_responsive---section-padding--xlarge);
  padding-bottom: var(--_responsive---section-padding--xlarge);
}
.blog-title-wrap {
  grid-row-gap: 30px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 258px;
  margin-right: auto;
  text-decoration: none;
  display: flex;
}
.blog-title-block {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 60px;
  display: flex;
}
.blog-widget {
  border-bottom: 1px dashed var(--color--stroke);
  color: var(--color--grey);
  justify-content: flex-end;
  align-items: center;
  padding-top: 50px;
  padding-bottom: 50px;
  text-decoration: none;
  transition: background-color .3s;
  display: flex;
}
.blog-widget:hover {
  background-color: var(--color--background);
}
.blog-widget-text-block {
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 410px;
  padding-top: 20px;
  padding-bottom: 20px;
  text-decoration: none;
  display: flex;
}
.blog-widget-text-wrapper {
  grid-row-gap: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.blog-widget-image-wrap {
  width: var(--_responsive---full-size);
  border-radius: 10px;
  max-width: 340px;
  overflow: hidden;
}
.blog-widget-inner {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  width: 63%;
  padding-right: 50px;
  display: flex;
}
.blog-title-wrapper {
  width: 63%;
  padding-right: 50px;
}
.blog-widget-block {
  margin-bottom: 50px;
}
.blog-widget-info-wrap {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: var(--color--black);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-link {
  border-bottom: 1px solid var(--color--transparent);
  color: var(--color--black);
  text-decoration: none;
  transition: all .4s;
}
.blog-link:hover {
  border-bottom-color: var(--color--black);
}
.blog-link-wrap {
  justify-content: center;
  align-items: center;
  display: flex;
}
.footer {
  padding: 20px;
}
.footer-content-block {
  min-height: 725px;
  padding-bottom: var(--_responsive---element-spacing--spacing-big);
  border-radius: var(--_responsive---border-radius--radius-xxlarge);
  background-color: var(--color--black);
  background-image: url('../images/footer-background-1.webp');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
  position: relative;
  overflow: hidden;
}
.footer-text-block {
  grid-row-gap: 30px;
  width: 100%;
  max-width: 650px;
  color: var(--color--white);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}
.footer-content-wrapper {
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.footer-copyright-link-block {
  width: var(--_responsive---full-size);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  color: #ffffff80;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.link {
  color: var(--color--white);
  text-decoration: none;
}
.footer-description-wrap {
  max-width: 525px;
}
.about-banner-section {
  background-image: url('../images/about-background.webp');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 848px;
  padding-top: 100px;
  padding-bottom: 100px;
}
.about-banner-image {
  max-width: 917px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.studio-section {
  padding-bottom: var(--_responsive---section-padding--xlarge);
}
.studio-image-wrap {
  position: relative;
}
.studio-image-overlay {
  background-image: linear-gradient(180deg, #ffffffba, #fff0 0%, var(--color--white) 0%, #fff3 50%, #fff0 70%, #ffffffdb 85%, var(--color--white));
  pointer-events: none;
  position: absolute;
  inset: 0%;
}
.studio-text-block {
  width: 100%;
  max-width: 522px;
  padding-top: var(--_responsive---section-padding--medium);
  grid-row-gap: 40px;
  color: var(--color--black);
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.principles-section {
  padding-bottom: var(--_responsive---section-padding--xlarge);
}
.principles-image-wrap {
  position: relative;
}
.principles-image-overlay {
  background-image: linear-gradient(180deg, var(--color--white), #ffffffba 15%, #fff0 30%, #fff3 50%, #fff0 70%, #ffffffdb 85%, var(--color--white));
  position: absolute;
  inset: 0%;
}
.principles-card-block {
  max-width: 766px;
  padding-top: var(--_responsive---section-padding--large);
  grid-column-gap: 20px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}
.principles-card {
  grid-row-gap: 17px;
  border: 1px solid var(--color--stroke);
  background-color: var(--color--background);
  border-radius: 13px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 5px 5px 15px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
  box-shadow: 0 0 #f7f7f7;
}
.principles-card-text-wrap {
  grid-row-gap: 15px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  padding-bottom: 15px;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
}
.principles-card-image-wrap {
  background-color: #bfa1a1;
  border-radius: 10px;
  overflow: hidden;
}
.principles-card-image {
  object-fit: cover;
}
.reality-section {
  height: 300vh;
}
.reality-title-wrap {
  width: var(--_responsive---full-size);
  max-width: 790px;
  color: var(--color--black);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.display-01 {
  font-size: var(--_typography---display-01--font-size);
}
.reality-sticky {
  height: 100vh;
  padding-top: var(--_responsive---section-padding--xlarge);
  padding-bottom: var(--_responsive---section-padding--xlarge);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: sticky;
  top: 0;
}
.reality-card-block {
  width: var(--_responsive---full-size);
  max-width: 884px;
  min-height: 670px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.reality-card {
  width: var(--_responsive---full-size);
  grid-row-gap: 24px;
  background-color: var(--color--simple-yellow);
  max-width: 280px;
  color: var(--color--black);
  border-radius: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 30px;
  display: flex;
  box-shadow: 11px 10px 54px #00000026;
}
.reality-card.one {
  transform: rotate(-16deg);
}
.reality-card.two {
  background-color: var(--color--light-green);
  position: absolute;
  inset: -3% 8% auto auto;
  transform: rotate(3deg);
}
.reality-card.three {
  background-color: var(--color--black);
  color: var(--color--white);
  position: absolute;
  inset: auto auto 0% 50%;
  transform: rotate(4deg)translate(-50%);
}
.reality-title-block {
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}
.job-image-wrap {
  margin-bottom: var(--_responsive---element-spacing--spacing-xxbig);
  border-radius: var(--_responsive---border-radius--radius-xxlarge);
  background-color: var(--color--black);
  position: relative;
  overflow: hidden;
}
.job-text-wrapper {
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  padding: 35px;
  display: flex;
  position: absolute;
  inset: 0%;
}
.job-text-wrap {
  width: var(--_responsive---full-size);
  max-width: 875px;
  color: var(--color--white);
  text-align: center;
}
.job-card-block {
  width: var(--_responsive---full-size);
  grid-row-gap: 20px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
  display: flex;
}
.job-card {
  width: var(--_responsive---full-size);
  grid-row-gap: 23px;
  border: 1px dashed var(--color--stroke);
  border-radius: var(--_responsive---border-radius--radius-small);
  background-color: var(--color--background);
  color: var(--color--grey);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  text-decoration: none;
  display: flex;
}
.job-card:hover {
  box-shadow: 0 0 0 4px #f7f7f7;
}
.job-card-title-block {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.job-card-icon {
  object-fit: cover;
  flex: none;
  max-width: 22px;
  overflow: hidden;
}
.job-card-info-block {
  grid-column-gap: 10px;
  color: var(--color--black);
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.job-card-dot {
  aspect-ratio: 1;
  border-radius: var(--_responsive---border-radius--radius-round);
  background-color: var(--color--black);
  color: #191919;
  letter-spacing: -.05em;
  width: 4px;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Figtree, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 100%;
  text-decoration: none;
}
.job-image-wrap-two {
  width: var(--_responsive---full-size);
  max-width: 409px;
  margin-right: auto;
  margin-bottom: var(--_responsive---element-spacing--spacing-xjumbo);
  margin-left: auto;
}
.job-section {
  padding-right: 10px;
  padding-bottom: var(--_responsive---section-padding--xlarge);
  padding-left: 10px;
}
.service-main-section {
  padding-top: var(--_responsive---section-padding--xlarge);
  padding-bottom: var(--_responsive---section-padding--default);
}
.service-card-block {
  margin-bottom: var(--_responsive---element-spacing--spacing-xlarge);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.service-card {
  border-radius: var(--_responsive---border-radius--radius-xxlarge);
  position: relative;
  overflow: hidden;
}
.service-text-wrap {
  width: var(--_responsive---full-size);
  grid-row-gap: 15px;
  color: var(--color--white);
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}
.service-text-wrap.is-large {
  max-width: 525px;
}
.service-text-block {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: #00000080;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
  position: absolute;
  inset: 0%;
}
.service-icon {
  max-width: 90px;
}
.service-text-wrapper {
  width: var(--_responsive---full-size);
  grid-column-gap: var(--_responsive---element-spacing--spacing-regular);
  grid-row-gap: var(--_responsive---element-spacing--spacing-regular);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 465px;
  display: flex;
}
.service-text-wrapper.is-large {
  max-width: 525px;
}
.service-description-wrap {
  width: var(--_responsive---full-size);
  max-width: 875px;
  color: var(--color--black);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.step-section {
  padding-top: var(--_responsive---section-padding--xlarge);
  padding-bottom: var(--_responsive---section-padding--xlarge);
}
.step-card-block {
  width: var(--_responsive---full-size);
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  flex-flow: column;
  max-width: 636px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.step-card-body {
  grid-row-gap: 15px;
  width: 100%;
  max-width: 360px;
  color: var(--color--white);
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.step-card {
  border-radius: var(--_responsive---border-radius--radius-large);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: #0006;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 370px;
  padding-bottom: 50px;
  display: flex;
}
.step-card.two, .step-card.three {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  padding-top: 40px;
}
.step-card-no {
  object-fit: contain;
  max-width: 189px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.step-card-no.small {
  max-width: 90px;
}
.step-card-no.one {
  margin-bottom: -16px;
}
.step-image-block {
  position: relative;
}
.step-image {
  pointer-events: none;
}
.step-bottom-particle {
  pointer-events: none;
  height: auto;
  position: absolute;
  inset: auto 0% 0%;
}
.step-top-particle {
  pointer-events: none;
  height: auto;
  position: absolute;
  inset: 0% 0% auto;
}
.step-card-block-wrap {
  position: absolute;
  inset: 0%;
  overflow: hidden;
}
.banner-text-wrap {
  width: var(--_responsive---full-size);
  grid-row-gap: 30px;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 524px;
  display: flex;
}
.banner-text-wrap.is-pricing {
  margin-bottom: 80px;
  margin-left: auto;
  margin-right: auto;
}
.banner-section {
  z-index: 1;
  position: relative;
}
.banner-content-block {
  min-height: 640px;
  padding-top: var(--_responsive---section-padding--banner);
  padding-bottom: var(--_responsive---element-spacing--spacing-massive);
  justify-content: center;
  align-items: flex-end;
  display: flex;
}
.banner-content-block.is-blog {
  justify-content: center;
  align-items: center;
}
.contact-section {
  padding-top: var(--_responsive---section-padding--default);
  padding-bottom: var(--_responsive---section-padding--default);
}
.contact-image {
  max-width: 130px;
  margin-bottom: 70px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.form-block {
  max-width: 569px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}
.field-label {
  color: var(--color--black);
  font-size: var(--_typography---text-large--font-size);
  font-weight: var(--_typography---font-weight--medium);
  margin-bottom: 0;
}
.input-field {
  border-style: none none dashed;
  border-width: 1px;
  border-color: black black var(--color--stroke);
  background-color: var(--color--transparent);
  height: auto;
  color: var(--color--black);
  margin-bottom: 0;
  padding: 20px;
}
.input-field:focus {
  border-bottom-color: var(--color--bright-lilac);
}
.input-field::placeholder {
  color: var(--color--grey);
}
.input-block {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  flex-flow: column;
  display: flex;
}
.contact-button-wrap {
  justify-content: center;
  align-items: center;
  padding-top: 5px;
  display: flex;
}
.submit-button {
  z-index: 5;
  opacity: 0;
  position: absolute;
  inset: 0%;
}
.banner-image {
  z-index: -1;
  position: absolute;
  inset: 0%;
}
.project-widget-block {
  width: var(--_responsive---full-size);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  max-width: 1340px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.project-tag-block {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 26px;
  display: flex;
}
.project-tag-block.is-details {
  margin-top: 0;
}
.project-tag {
  grid-column-gap: 10px;
  color: var(--color--black);
  background-color: #f8f8f8;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 10px;
  display: flex;
}
.project-details-section {
  padding-top: var(--_responsive---section-padding--xlarge);
  padding-bottom: var(--_responsive---section-padding--xlarge);
}
.project-details-content-block {
  width: var(--_responsive---full-size);
  grid-row-gap: 40px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 1156px;
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
  display: flex;
}
.project-details-title-block {
  width: var(--_responsive---full-size);
  grid-row-gap: 20px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 774px;
  display: flex;
}
.project-gallery-block {
  grid-column-gap: var(--_responsive---element-spacing--spacing-slim);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin-top: -40px;
  text-decoration: none;
  display: grid;
}
.project-gallery-image-wrap {
  border-radius: var(--_responsive---element-spacing--spacing-small);
  overflow: hidden;
}
.project-rich-text h2:where(:not([class*="heading-scale-"])), .project-rich-text :where(.heading-scale-2) {
  color: var(--color--black);
  font-size: var(--_typography---h3--font-size);
  line-height: var(--_typography---h3--line-height);
  font-weight: var(--_typography---h3--font-weight);
  letter-spacing: var(--_typography---h3--letter-spacing);
  margin-bottom: 16px;
}
.project-rich-text p {
  margin-bottom: var(--_responsive---element-spacing--spacing-xlarge);
  font-size: var(--_typography---text-large--font-size);
  line-height: var(--_typography---text-large--line-height);
  font-weight: var(--_typography---text-large--font-weight);
  letter-spacing: var(--_typography---text-xlarge--letter-spacing);
}
.project-rich-text ul {
  margin-top: -40px;
  margin-bottom: var(--_responsive---element-spacing--spacing-xlarge);
  font-size: var(--_typography---text-large--font-size);
  line-height: var(--_typography---text-large--line-height);
  font-weight: var(--_typography---text-large--font-weight);
  letter-spacing: var(--_typography---text-large--letter-spacing);
  padding-left: 0;
  list-style-type: none;
}
.project-details-image-wrap {
  width: var(--_responsive---full-size);
  border-top-left-radius: var(--_responsive---border-radius--radius-large);
  border-top-right-radius: var(--_responsive---border-radius--radius-large);
  overflow: hidden;
}
.blog-main-section {
  padding-top: var(--_responsive---section-padding--medium);
  padding-bottom: var(--_responsive---section-padding--medium);
}
.blog-tab-link {
  background-color: var(--color--transparent);
  border-radius: 4px;
  padding: 8px 10px;
}
.blog-tab-link[aria-current="page"], .blog-tab-link.is-active {
  background-color: var(--color--black);
  color: var(--color--white);
}
.blog-tabs {
  width: var(--_responsive---full-size);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 1156px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.tabs-content {
  width: var(--_responsive---full-size);
  padding: 4px;
}
.blog-tabs-menu {
  margin-bottom: var(--_responsive---section-padding--medium);
  border: 1px solid var(--color--stroke);
  border-radius: 7px;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  padding: 5px;
  display: flex;
}
.blog-card-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.blog-card {
  border: 1px solid var(--color--stroke);
  border-radius: var(--_responsive---border-radius--radius-medium);
  box-shadow: none;
  color: var(--color--grey);
  text-decoration: none;
  transition: box-shadow .3s, background-color .3s;
  overflow: hidden;
}
.blog-card:hover {
  background-color: var(--color--background);
  box-shadow: 0 0 0 4px #f7f7f7;
}
.blog-card-image-wrap {
  overflow: hidden;
}
.blog-card-body {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px 20px 30px;
  display: flex;
}
.blog-card-description {
  border-top: 1px dashed var(--color--stroke);
  padding-top: 15px;
}
.blog-card-button {
  grid-column-gap: 10px;
  border: 1px solid var(--color--stroke);
  color: var(--color--black);
  border-radius: 4px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 8px 10px;
  text-decoration: none;
  display: flex;
}
.empty-state {
  background-color: var(--color--stroke);
  color: var(--color--black);
  text-align: center;
  padding: 16px;
}
.blog-meta-data {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-details-section {
  padding-bottom: var(--_responsive---section-padding--xlarge);
}
.blog-meta-icon {
  display: flex;
}
.blog-meta-block {
  grid-column-gap: var(--_responsive---element-spacing--spacing-normal);
  grid-row-gap: var(--_responsive---element-spacing--spacing-normal);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-details-title-block {
  margin-bottom: var(--_responsive---element-spacing--spacing-xlarge);
  grid-column-gap: var(--_responsive---element-spacing--spacing-slim);
  grid-row-gap: var(--_responsive---element-spacing--spacing-slim);
  flex-flow: column;
  display: flex;
}
.blog-rich-text h2:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-2) {
  margin-bottom: var(--_responsive---element-spacing--spacing-small);
  color: var(--color--black);
  font-size: var(--_typography---h3--font-size);
  line-height: var(--_typography---h3--line-height);
  font-weight: var(--_typography---h3--font-weight);
  letter-spacing: var(--_typography---h3--letter-spacing);
}
.blog-rich-text p {
  margin-bottom: var(--_responsive---element-spacing--spacing-xlarge);
  font-size: var(--_typography---text-large--font-size);
  line-height: var(--_typography---text-large--line-height);
  font-weight: var(--_typography---text-large--font-weight);
  letter-spacing: var(--_typography---text-large--letter-spacing);
}
.blog-rich-text h3:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-3) {
  font-family: var(--_typography---font-family--primary-font);
  font-size: var(--_typography---text-large--font-size);
  line-height: var(--_typography---text-large--line-height);
  font-weight: var(--_typography---text-large--font-weight);
  letter-spacing: var(--_typography---text-large--letter-spacing);
}
.blog-rich-text ul {
  margin-bottom: var(--_responsive---element-spacing--spacing-xlarge);
  font-size: var(--_typography---text-large--font-size);
  line-height: var(--_typography---text-large--line-height);
  font-weight: var(--_typography---text-large--font-weight);
  letter-spacing: var(--_typography---text-large--letter-spacing);
  padding-left: 30px;
}
.blog-gallery-image-wrap {
  margin-bottom: var(--_responsive---element-spacing--spacing-xlarge);
  border-radius: var(--_responsive---element-spacing--spacing-small);
  overflow: hidden;
}
.blog-details-content-block {
  max-width: 1156px;
  margin-left: auto;
  margin-right: auto;
}
.blog-info-block {
  grid-column-gap: var(--_responsive---element-spacing--spacing-small);
  grid-row-gap: var(--_responsive---element-spacing--spacing-small);
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}
.blog-social-block {
  grid-row-gap: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.blog-social-link-wrap {
  grid-column-gap: 12px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-social-link {
  color: var(--color--fashion-gray);
}
.blog-social-link:hover {
  color: var(--color--black);
}
.blog-socila-link-icon {
  display: flex;
}
.blog-details-author-block {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-author-image-wrap {
  width: var(--_responsive---full-size);
  flex: none;
  max-width: 45px;
}
.blog-author-image {
  height: auto;
}
.blog-author-info {
  grid-row-gap: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}
.related-blog-section {
  padding-top: var(--_responsive---element-spacing--spacing-massive);
  padding-bottom: var(--_responsive---element-spacing--spacing-massive);
  background-color: var(--color--background);
}
.related-blog-content-block {
  width: var(--_responsive---full-size);
  max-width: 1156px;
  margin-left: auto;
  margin-right: auto;
}
.related-blog-title-block {
  margin-bottom: var(--_responsive---element-spacing--spacing-massive);
  grid-column-gap: var(--_responsive---element-spacing--spacing-xxbig);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xxbig);
  flex-flow: wrap;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.banner-image-overlay {
  z-index: -1;
  background-image: linear-gradient(180deg, #fff0, var(--color--white) 0%, var(--color--transparent) 0%, #fff3 46%, #fff0 62%, #ffffffdb 85%, var(--color--white));
  position: absolute;
  inset: 0%;
}
.pricing-details-content-block {
  width: var(--_responsive---full-size);
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 715px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.pricing-details-block {
  grid-row-gap: 40px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.pricing-details {
  border: 1px solid var(--color--stroke);
  background-color: var(--color--background);
  border-radius: 13px;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-end;
  padding: 32px;
  display: flex;
  overflow: hidden;
  box-shadow: 0 0 0 4px #f7f7f7;
}
.pricing-details-title-block {
  grid-row-gap: 5px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 278px;
  text-decoration: none;
  display: flex;
}
.pricing-details-list {
  grid-row-gap: 8px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}
.pricing-details-list-item {
  grid-column-gap: 11px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}
.pricing-details-list-icon {
  object-fit: cover;
  max-width: 16px;
  overflow: hidden;
}
.pricing-details-icon {
  object-fit: cover;
  max-width: 80px;
  height: auto;
}
.pricing-details-bottom {
  grid-row-gap: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.pricing-details-left {
  grid-column-gap: var(--_responsive---element-spacing--spacing-normal);
  grid-row-gap: var(--_responsive---element-spacing--spacing-normal);
  flex-flow: column;
  display: flex;
}
.pricing-details-right {
  width: var(--_responsive---full-size);
  grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
  grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  flex-flow: column;
  max-width: 294px;
  display: flex;
}
.add-to-cart-button {
  z-index: 5;
  opacity: 0;
  position: absolute;
  inset: 0%;
}
.default-state {
  margin-bottom: 0;
}
.pricing-details-section {
  padding-bottom: var(--_responsive---section-padding--semi-medium);
}
.utility-text-block-wrap {
  grid-row-gap: 40px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 1156px;
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
  display: flex;
}
.utility-text-block {
  grid-row-gap: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.utility-title {
  font-family: var(--_typography---font-family--secondary-font);
  color: var(--color--black);
  font-size: var(--_typography---h3--font-size);
  line-height: var(--_typography---h3--line-height);
  margin-top: 0;
  margin-bottom: 0;
  text-decoration: none;
}
.utility-link {
  color: var(--color--black);
  text-decoration: none;
}
.changelog-card {
  grid-row-gap: 20px;
  border: 1px solid var(--color--stroke);
  background-color: var(--color--background);
  border-radius: 13px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 715px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px;
  text-decoration: none;
  display: flex;
  box-shadow: 0 0 0 4px #f7f7f7;
}
.changelog-list-block {
  grid-row-gap: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.hero-description.is-pricing {
  max-width: 350px;
}
.team-widget-text-wrap {
  overflow: hidden;
}
.accordion-item-title-icon {
  width: 1rem;
}
.accordion-item-body {
  color: #0000008c;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  line-height: 1.35em;
}
.accordion-item-title {
  z-index: 9;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  color: var(--color--black);
  cursor: pointer;
  border-bottom: 1px #d3d3d3;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  display: flex;
  position: relative;
}
.accordion-item {
  z-index: 1;
  background-color: var(--color--background);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.accordion-item-body-wrapper {
  z-index: 9;
  position: relative;
  overflow: hidden;
}
.collection-list-wrapper {
  border-top: 1px dashed var(--color--stroke);
}
.testimonial-slider {
  background-color: var(--color--transparent);
  height: auto;
}
.mask {
  height: auto;
}
.testimonial-author-image-block {
  grid-column-gap: 18px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}
.testimonial-author-image-wrap {
  width: var(--_responsive---full-size);
  background-color: #f8f8f8;
  border-radius: 9.21053px;
  max-width: 184px;
  position: relative;
  overflow: hidden;
}
.testimonial-author-image {
  object-fit: cover;
}
.testimonial-author-overlay {
  object-fit: cover;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
  position: absolute;
  inset: 0%;
}
.service-widget-right {
  width: var(--_responsive---full-size);
  max-width: 524px;
  height: 160px;
  overflow: hidden;
}
.job-card-icon-wrap {
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 22px;
  display: flex;
  overflow: hidden;
}
.project-widget-title {
  color: var(--color--black);
  text-decoration: none;
}
.step-sticky {
  position: sticky;
  top: 60px;
}
.step-sticky-wrap {
  height: 300vh;
}
.license-content-block {
  grid-row-gap: 80px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
  display: flex;
}
.license-link-widget {
  grid-row-gap: 20px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.license-link-card {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  background-color: var(--color--background);
  text-align: center;
  border: 1px solid #e5e5e5;
  border-radius: 13px;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  min-height: 250px;
  padding: 40px;
  display: flex;
  overflow: hidden;
  box-shadow: 0 0 0 4px #f7f7f7;
}
.license-icon {
  object-fit: cover;
  width: auto;
  overflow: hidden;
}
.license-link {
  color: var(--color--black);
  font-weight: var(--_typography---font-weight--medium);
  border-bottom: 1px solid #0000;
  text-decoration: none;
}
.license-link:hover {
  border-bottom: 1px solid var(--color--black);
}
.license-title {
  font-family: var(--_typography---font-family--primary-font);
  font-size: var(--_typography---h5--font-size);
  line-height: var(--_typography---h5--line-height);
  font-weight: var(--_typography---h5--font-weight);
  text-align: center;
  letter-spacing: var(--_typography---h5--letter-spacing);
}
.list {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  margin-bottom: 0;
  padding-left: 25px;
  display: flex;
}
.pricing-title-wrap {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: var(--color--black);
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}
.checkut-section {
  padding: var(--_responsive---section-padding--banner) 0px var(--_responsive---section-padding--large);
  background-color: var(--color--transparent);
}
.block-header {
  color: var(--color--black);
}
.total-text {
  color: var(--color--black);
  font-weight: var(--_typography---font-weight--bold);
}
.cart-button {
  background-color: var(--color--transparent);
  padding: 0;
}
.cart-quantity {
  color: var(--color--black);
  margin-top: -17px;
  margin-left: -8px;
  font-size: 10px;
}
.close-button {
  cursor: pointer;
}
.cart-title-wrap {
  width: var(--_responsive---full-size);
  color: var(--color--black);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.cart-text-wrapper {
  justify-content: flex-start;
  align-items: flex-start;
}
.remove-button {
  color: var(--color--grey);
}
.cart-header {
  color: var(--color--black);
}
.nav-link-wrap {
  width: var(--_responsive---full-size);
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}
.nav-dropdown-text {
  font-size: var(--_typography---text-small--font-size);
  letter-spacing: var(--_typography---letter-spacing--none);
  padding-bottom: 0;
  padding-right: 0;
}
.nav-dropdown-menu-arcive {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: flex;
}
.nav-dropdown-menu-inner {
  grid-column-gap: 74px;
  grid-row-gap: 74px;
  display: flex;
}
.nav-dropdown-item {
  z-index: 1;
  color: var(--color--black);
  white-space: nowrap;
  border-bottom: 1px solid #0000;
  margin: 0;
  padding: 0;
  text-decoration: none;
  transition: all .3s linear;
  position: relative;
  overflow: hidden;
}
.nav-dropdown-item:hover {
  border-bottom: 1px solid var(--color--black);
}
.nav-dropdown-item[aria-current="page"], .nav-dropdown-item.is-active {
  color: #fff;
  text-decoration: none;
}
.nav-dropdown {
  position: static;
}
.nav-dropdown.megamenu {
  cursor: pointer;
}
.nav-dropdown-toggle-content {
  background-color: #0000;
  width: 100%;
  padding-top: 16px;
  position: absolute;
  left: 0;
}
.nav-dropdown-toggle-content.is-open {
  max-width: 100%;
}
.nav-dropdown-toggle-content.megamenu {
  z-index: 99999;
  width: fit-content;
  height: 0;
  padding-top: 0;
  display: flex;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%);
}
.nav-dropdown-menu {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  align-items: flex-start;
  margin-top: 0;
  display: flex;
}
.nav-link-two {
  color: var(--color--white);
  border-top: 1px solid #fff0;
  border-bottom: 1px solid #fff0;
  border-radius: 4px;
  padding: 4px 10px;
  text-decoration: none;
}
.nav-link-two[aria-current="page"], .nav-link-two.is-active {
  color: #f9f9f7;
}
.nav-dropdown-menu-arcive-first {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: var(--color--white);
  border-radius: 8px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  margin-top: 16px;
  padding: 20px;
  display: grid;
  box-shadow: 0 2px 8px #00000008;
}
.error-image {
  max-width: 650px;
}
.error-title-block {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 600px;
  margin-bottom: 70px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.password-input-wrap {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 30px;
  display: flex;
}
.password-level {
  color: var(--color--black);
  font-size: var(--_typography---text-large--font-size);
  font-weight: var(--_typography---font-weight--medium);
  margin-bottom: 0;
}
.password-button-wrap {
  justify-content: center;
  align-items: center;
  display: flex;
}
.password-image {
  max-width: 57px;
  margin-left: auto;
  margin-right: auto;
}
.password-title-wrap {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  display: flex;
}
.password-form {
  width: var(--_responsive---full-size);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-direction: column;
  align-items: stretch;
  max-width: 569px;
  display: flex;
}
.success-message {
  background-color: var(--color--light-green);
  color: var(--color--black);
}
.error-message {
  background-color: var(--color--background);
  color: var(--color--black);
  text-align: center;
  padding: 20px;
}
.slide-nav {
  font-size: var(--_typography---text-small--font-size);
  margin-top: 24px;
  position: static;
}
.nav-dropdown-underline {
  background-color: var(--color--black);
  width: 0%;
  height: 1px;
}
.footer-link-block {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.footer-link {
  color: var(--color--white);
  border-top: 1px solid #fff0;
  border-bottom: 1px solid #fff0;
  border-radius: 4px;
  padding: 2px 4px;
  text-decoration: none;
  transition: all .3s;
}
.footer-link:hover {
  border-top-color: #fff;
  border-bottom-color: #fff;
}
.footer-link[aria-current="page"], .footer-link.is-active {
  border-top: 1px solid var(--color--white);
  border-bottom: 1px solid var(--color--white);
  border-radius: 4px;
  padding-left: 4px;
  padding-right: 4px;
}
.footer-link-wrap {
  grid-column-gap: 24px;
  grid-row-gap: 16px;
  flex-flow: wrap;
  display: flex;
}
.style-button-wrap {
  width: var(--_responsive---full-size);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  max-width: 776px;
  display: grid;
}@media screen and (max-width: 991px) {

  body {
    --_responsive---element-spacing--spacing-zero: 0px;
    --_responsive---full-size: 100%;
    --_responsive---section-padding--banner: 160px;
    --_responsive---section-padding--semi-medium: 80px;
    --_responsive---padding--padding-124-px\<deleted\|variable-782a0208-0c4c-12ec-f120-df745dc3e1c9\>: 100px;
    --_responsive---element-spacing--spacing-normal: 28px;
    --_responsive---element-spacing--spacing-xlarge: 36px;
    --_responsive---padding--padding-24-px\<deleted\|variable-196d802f-ff13-2ac3-ba10-124bbb631713\>: 20px;
    --_responsive---element-spacing--spacing-medium: 20px;
    --_responsive---element-spacing--spacing-xxxlarge: 40px;
    --_responsive---34-px\<deleted\|variable-7e30a8d3-7687-4a52-d404-74d261b5dc62\>: 34px;
    --_responsive---element-spacing--spacing-regular: 24px;
    --_responsive---element-spacing--spacing-xsmall: 12px;
    --_responsive---padding--padding-20-px\<deleted\|variable-d17a61b6-efda-bbbb-5d7e-4e3f7d2e9eb5\>: 20px;
    --_responsive---section-padding--large: 100px;
    --_responsive---section-padding--medium: 80px;
    --_responsive---section-padding--xlarge: 100px;
    --_responsive---element-spacing--spacing-immense: 60px;
    --_responsive---element-spacing--spacing-big: 44px;
    --_responsive---border-radius--radius-xxlarge: 24px;
    --_responsive---element-spacing--spacing-xxbig: 48px;
    --_responsive---border-radius--radius-small: 8px;
    --_responsive---border-radius--radius-round: 50%;
    --_responsive---element-spacing--spacing-xjumbo: 52px;
    --_responsive---section-padding--default: 60px;
    --_responsive---border-radius--radius-large: 16px;
    --_responsive---element-spacing--spacing-massive: 60px;
    --_responsive---element-spacing--spacing-slim: 20px;
    --_responsive---element-spacing--spacing-small: 16px;
    --_responsive---border-radius--radius-medium: 8px;
    --_responsive---element-spacing--spacing-tiny: 4px;
    --_responsive---element-spacing--spacing-xxsmall: 8px;
    --_responsive---element-spacing--spacing-medium-rare: 24px;
    --_responsive---element-spacing--spacing-large: 32px;
    --_responsive---element-spacing--spacing-xxlarge: 40px;
    --_responsive---element-spacing--spacing-xbig: 48px;
    --_responsive---element-spacing--spacing-xxxbig: 52px;
    --_responsive---element-spacing--spacing-jumbo: 52px;
    --_responsive---element-spacing--spacing-xxjumbo: 52px;
    --_responsive---element-spacing--spacing-giant: 60px;
    --_responsive---element-spacing--spacing-colossal: 80px;
    --_responsive---border-radius--radius-tiny: 4px;
    --_responsive---border-radius--radius-xxsmall: 6px;
    --_responsive---border-radius--radius-xsmall: 8px;
    --_responsive---border-radius--radius-regular: 12px;
    --_responsive---border-radius--radius-xlarge: 16px;
    --_responsive---border-radius--radius-xxxlarge: 24px;
    --_responsive---border-radius--radius-circle: 100%;
    --_typography---font-family--primary-font: Figtree, Arial, sans-serif;
    --_typography---text-default--font-size: 16px;
    --_typography---text-default--line-height: 1.4em;
    --_typography---text-default--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-default--letter-spacing: var(--_typography---letter-spacing--xlarge);
    --_typography---font-family--secondary-font: "Jersey 10", sans-serif;
    --_typography---h1--font-size: 66px;
    --_typography---h1--line-height: .9em;
    --_typography---font-weight--semi-bold: 600;
    --_typography---h1--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---h2--font-size: 50px;
    --_typography---h2--line-height: 1em;
    --_typography---h2--font-weight: var(--_typography---font-weight--regular);
    --_typography---h2--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---h3--font-size: 36px;
    --_typography---h3--line-height: 1em;
    --_typography---h3--font-weight: var(--_typography---font-weight--regular);
    --_typography---h3--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---h4--font-size: 30px;
    --_typography---h4--line-height: 1em;
    --_typography---h4--font-weight: var(--_typography---font-weight--regular);
    --_typography---h4--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---h5--font-size: 22px;
    --_typography---h5--line-height: 1em;
    --_typography---h5--font-weight: var(--_typography---font-weight--regular);
    --_typography---h5--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---h6--font-size: 20px;
    --_typography---h6--line-height: 1em;
    --_typography---h6--font-weight: var(--_typography---font-weight--regular);
    --_typography---h6--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---text-medium--letter-spacing: var(--_typography---letter-spacing--xlarge);
    --_typography---text-medium--font-size: 16px;
    --_typography---text-medium--line-height: 1.4em;
    --_typography---font-weight--regular: 400;
    --_typography---text-small--font-size: 14px;
    --_typography---text-small--line-height: 1.4em;
    --_typography---font-weight--medium: 500;
    --_typography---text-large--font-size: 20px;
    --_typography---text-large--line-height: 1.4em;
    --_typography---text-small--letter-spacing: var(--_typography---letter-spacing--medium);
    --_typography---button-text--font-size: 14px;
    --_typography---button-text--line-height: 1.28em;
    --_typography---button-text--font-weight: var(--_typography---font-weight--medium);
    --_typography---button-text--letter-spacing: var(--_typography---letter-spacing--medium);
    --_typography---text-xlarge--font-size: 22px;
    --_typography---text-xlarge--line-height: 1.2em;
    --_typography---text-xlarge--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-xlarge--letter-spacing: var(--_typography---letter-spacing--xlarge);
    --_typography---font-family--tertiary-font: "EB Garamond", Georgia, serif;
    --_typography---letter-spacing--none: 0em;
    --_typography---display-01--font-size: 78px;
    --_typography---text-large--font-weight: var(--_typography---font-weight--regular);
    --_typography---text-large--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---font-weight--bold: 700;
    --_typography---display-01--line-height: 1em;
    --_typography---display-01--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---display-01--font-weight: var(--_typography---font-weight--regular);
    --_typography---display-02--font-size: 72px;
    --_typography---display-02--line-height: 1em;
    --_typography---display-02--font-weight: var(--_typography---font-weight--regular);
    --_typography---display-02--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---h1--font-weight: var(--_typography---font-weight--regular);
    --_typography---text-medium--font-weight: var(--_typography---font-weight--regular);
    --_typography---text-small--font-weight: var(--_typography---font-weight--regular);
    --_typography---tag--font-size: 16px;
    --_typography---tag--line-height: 1.2em;
    --_typography---tag--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---tag--font-weight: var(--_typography---font-weight--regular);
    --_typography---font-weight--light: 300;
    --_typography---letter-spacing--tiny: .01em;
    --_typography---letter-spacing--small: -.01em;
    --_typography---letter-spacing--default: -.02em;
    --_typography---letter-spacing--medium: -.03em;
    --_typography---letter-spacing--large: -.04em;
    --_typography---letter-spacing--xlarge: -.05em;
  }
  .color-thumb {
    height: 150px;
  }
  .color-block-main-wrap, .typography-box-wrap {
    max-width: 500px;
  }
  .hamburger-line-middle {
    background-color: var(--color--white);
    border-radius: 16px;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 2px;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
  }
  .hamburger-line-top, .hamburger-line-bottom {
    background-color: var(--color--white);
    border-radius: 16px;
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }
  .menu-button {
    padding: 0;
  }
  .menu-button.is-open {
    background-color: #0000;
  }
  .nav-button-wrapper {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    justify-content: flex-end;
    align-items: center;
  }
  .hamburger {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    display: flex;
  }
  .text-lg-2 {
    font-size: 18px;
  }
  .utility-content-wrap {
    grid-row-gap: 32px;
  }
  .button-text:where(.button-bright-lilac) {
    height: auto;
    text-shadow: 0 28.15px 0 var(--color--black);
  }
  .hero-text-block {
    grid-row-gap: 24px;
    max-width: 510px;
  }
  .button:where(.button-bright-lilac) {
    padding: 24px 40px;
  }
  .hero-section {
    height: 600px;
  }
  .section-title-block {
    grid-row-gap: 24px;
    margin-bottom: 60px;
  }
  .section-title-block.is-faq {
    margin-bottom: 40px;
  }
  .home-about-image-02 {
    max-width: 200px;
  }
  .team-content-block {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding-top: 100px;
  }
  .team-widget-block {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .team-widget {
    height: auto;
  }
  .faq-image {
    max-width: 160px;
    margin-bottom: 40px;
  }
  .animated-tag {
    padding: 24px 40px;
  }
  .process-card-title-wrap {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .process-image-wrap {
    margin-top: -100px;
  }
  .project-widget-text-block {
    grid-row-gap: 20px;
  }
  .project-widget {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .project-widget-image-block {
    border-radius: 24px;
    padding: 40px 32px;
  }
  .project-widget-image-wrapper {
    padding: 20px;
  }
  .service-widget {
    border-radius: 24px;
  }
  .service-widget-text-block {
    background-color: #0006;
  }
  .service-widget-text-wrapper {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 20px;
  }
  .service-widget-description {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .testimonial-text-block {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    margin-bottom: 40px;
  }
  .testimonial-top {
    grid-row-gap: 24px;
  }
  .quote-icon {
    max-width: 50px;
  }
  .pricing-image-wrap {
    margin-top: -200px;
    margin-bottom: -130px;
  }
  .pricing-card-block {
    grid-template-columns: 1fr 1fr;
  }
  .pricing-card-image-wrap {
    max-width: 80px;
    margin-bottom: 24px;
  }
  .blog-title-block {
    margin-bottom: 40px;
  }
  .blog-widget {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .blog-widget-inner, .blog-title-wrapper {
    width: 75%;
  }
  .footer-content-block {
    min-height: 700px;
  }
  .footer-text-block {
    grid-row-gap: 24px;
  }
  .footer-copyright-link-block {
    grid-column-gap: 32px;
    grid-row-gap: 16px;
    flex-flow: wrap;
  }
  .about-banner-section {
    min-height: auto;
  }
  .studio-text-block, .principles-card-block {
    grid-row-gap: 32px;
  }
  .step-card {
    padding: 32px;
  }
  .step-image {
    min-height: 700px;
  }
  .service-card-image {
    min-height: 400px;
  }
  .banner-text-wrap {
    grid-row-gap: 24px;
  }
  .banner-text-wrap.is-pricing {
    margin-bottom: 60px;
  }
  .banner-content-block.is-utility {
    min-height: 500px;
  }
  .project-tag-block {
    flex-flow: wrap;
    margin-top: 20px;
  }
  .project-gallery-block, .project-rich-text ul {
    margin-top: -36px;
  }
  .blog-card-block {
    grid-template-columns: 1fr 1fr;
  }
  .utility-text-block-wrap {
    grid-row-gap: 32px;
  }
  .utility-text-block {
    grid-row-gap: 12px;
  }
  .accordion-item-body {
    padding-left: 20px;
    padding-right: 20px;
  }
  .accordion-item-title {
    padding: 20px;
  }
  .testimonial-author-image-block {
    grid-column-gap: 16px;
  }
  .testimonial-author-image-wrap {
    border-radius: 8px;
  }
  .nav-dropdown-menu-arcive {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
  }
  .nav-dropdown {
    width: 100%;
    margin: 0;
  }
  .nav-dropdown-toggle-content {
    width: 100%;
  }
  .nav-dropdown-toggle-content.is-open {
    position: relative;
  }
  .nav-dropdown-toggle-content.megamenu {
    left: -29%;
    transform: translate(0%);
  }
  .nav-link-two {
    justify-content: flex-start;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    display: flex;
  }
  .nav-dropdown-menu-arcive-first {
    flex-flow: column;
    width: 100%;
  }
  .slide-nav {
    margin-top: 20px;
  }
  .footer-link-block {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .footer-link-wrap {
    grid-row-gap: 8px;
  }
  .style-button-wrap {
    max-width: 500px;
  }}
@media screen and (max-width: 767px) {

  body {
    --_responsive---element-spacing--spacing-zero: 0px;
    --_responsive---full-size: 100%;
    --_responsive---section-padding--banner: 160px;
    --_responsive---section-padding--semi-medium: 60px;
    --_responsive---padding--padding-124-px\<deleted\|variable-782a0208-0c4c-12ec-f120-df745dc3e1c9\>: 80px;
    --_responsive---element-spacing--spacing-normal: 24px;
    --_responsive---element-spacing--spacing-xlarge: 24px;
    --_responsive---padding--padding-24-px\<deleted\|variable-196d802f-ff13-2ac3-ba10-124bbb631713\>: 18px;
    --_responsive---element-spacing--spacing-medium: 16px;
    --_responsive---element-spacing--spacing-xxxlarge: 36px;
    --_responsive---34-px\<deleted\|variable-7e30a8d3-7687-4a52-d404-74d261b5dc62\>: 34px;
    --_responsive---element-spacing--spacing-regular: 20px;
    --_responsive---element-spacing--spacing-xsmall: 12px;
    --_responsive---padding--padding-20-px\<deleted\|variable-d17a61b6-efda-bbbb-5d7e-4e3f7d2e9eb5\>: 18px;
    --_responsive---section-padding--large: 80px;
    --_responsive---section-padding--medium: 60px;
    --_responsive---section-padding--xlarge: 80px;
    --_responsive---element-spacing--spacing-immense: 60px;
    --_responsive---element-spacing--spacing-big: 40px;
    --_responsive---border-radius--radius-xxlarge: 20px;
    --_responsive---element-spacing--spacing-xxbig: 40px;
    --_responsive---border-radius--radius-small: 6px;
    --_responsive---border-radius--radius-round: 50%;
    --_responsive---element-spacing--spacing-xjumbo: 44px;
    --_responsive---section-padding--default: 60px;
    --_responsive---border-radius--radius-large: 12px;
    --_responsive---element-spacing--spacing-massive: 48px;
    --_responsive---element-spacing--spacing-slim: 16px;
    --_responsive---element-spacing--spacing-small: 12px;
    --_responsive---border-radius--radius-medium: 6px;
    --_responsive---element-spacing--spacing-tiny: 4px;
    --_responsive---element-spacing--spacing-xxsmall: 8px;
    --_responsive---element-spacing--spacing-medium-rare: 20px;
    --_responsive---element-spacing--spacing-large: 24px;
    --_responsive---element-spacing--spacing-xxlarge: 36px;
    --_responsive---element-spacing--spacing-xbig: 40px;
    --_responsive---element-spacing--spacing-xxxbig: 40px;
    --_responsive---element-spacing--spacing-jumbo: 44px;
    --_responsive---element-spacing--spacing-xxjumbo: 48px;
    --_responsive---element-spacing--spacing-giant: 48px;
    --_responsive---element-spacing--spacing-colossal: 60px;
    --_responsive---border-radius--radius-tiny: 4px;
    --_responsive---border-radius--radius-xxsmall: 4px;
    --_responsive---border-radius--radius-xsmall: 4px;
    --_responsive---border-radius--radius-regular: 8px;
    --_responsive---border-radius--radius-xlarge: 12px;
    --_responsive---border-radius--radius-xxxlarge: 20px;
    --_responsive---border-radius--radius-circle: 100%;
    --_typography---font-family--primary-font: Figtree, Arial, sans-serif;
    --_typography---text-default--font-size: 16px;
    --_typography---text-default--line-height: 1.4em;
    --_typography---text-default--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-default--letter-spacing: var(--_typography---letter-spacing--xlarge);
    --_typography---font-family--secondary-font: "Jersey 10", sans-serif;
    --_typography---h1--font-size: 48px;
    --_typography---h1--line-height: .9em;
    --_typography---font-weight--semi-bold: 600;
    --_typography---h1--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---h2--font-size: 50px;
    --_typography---h2--line-height: 1em;
    --_typography---h2--font-weight: var(--_typography---font-weight--regular);
    --_typography---h2--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---h3--font-size: 32px;
    --_typography---h3--line-height: 1em;
    --_typography---h3--font-weight: var(--_typography---font-weight--regular);
    --_typography---h3--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---h4--font-size: 26px;
    --_typography---h4--line-height: 1em;
    --_typography---h4--font-weight: var(--_typography---font-weight--regular);
    --_typography---h4--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---h5--font-size: 20px;
    --_typography---h5--line-height: 1em;
    --_typography---h5--font-weight: var(--_typography---font-weight--regular);
    --_typography---h5--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---h6--font-size: 18px;
    --_typography---h6--line-height: 1em;
    --_typography---h6--font-weight: var(--_typography---font-weight--regular);
    --_typography---h6--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---text-medium--letter-spacing: var(--_typography---letter-spacing--xlarge);
    --_typography---text-medium--font-size: 16px;
    --_typography---text-medium--line-height: 1.4em;
    --_typography---font-weight--regular: 400;
    --_typography---text-small--font-size: 14px;
    --_typography---text-small--line-height: 1.4em;
    --_typography---font-weight--medium: 500;
    --_typography---text-large--font-size: 18px;
    --_typography---text-large--line-height: 1.4em;
    --_typography---text-small--letter-spacing: var(--_typography---letter-spacing--medium);
    --_typography---button-text--font-size: 14px;
    --_typography---button-text--line-height: 1.28em;
    --_typography---button-text--font-weight: var(--_typography---font-weight--medium);
    --_typography---button-text--letter-spacing: var(--_typography---letter-spacing--medium);
    --_typography---text-xlarge--font-size: 20px;
    --_typography---text-xlarge--line-height: 1.2em;
    --_typography---text-xlarge--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-xlarge--letter-spacing: var(--_typography---letter-spacing--xlarge);
    --_typography---font-family--tertiary-font: "EB Garamond", Georgia, serif;
    --_typography---letter-spacing--none: 0em;
    --_typography---display-01--font-size: 54px;
    --_typography---text-large--font-weight: var(--_typography---font-weight--regular);
    --_typography---text-large--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---font-weight--bold: 700;
    --_typography---display-01--line-height: 1em;
    --_typography---display-01--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---display-01--font-weight: var(--_typography---font-weight--regular);
    --_typography---display-02--font-size: 54px;
    --_typography---display-02--line-height: 1em;
    --_typography---display-02--font-weight: var(--_typography---font-weight--regular);
    --_typography---display-02--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---h1--font-weight: var(--_typography---font-weight--regular);
    --_typography---text-medium--font-weight: var(--_typography---font-weight--regular);
    --_typography---text-small--font-weight: var(--_typography---font-weight--regular);
    --_typography---tag--font-size: 16px;
    --_typography---tag--line-height: 1.2em;
    --_typography---tag--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---tag--font-weight: var(--_typography---font-weight--regular);
    --_typography---font-weight--light: 300;
    --_typography---letter-spacing--tiny: .01em;
    --_typography---letter-spacing--small: -.01em;
    --_typography---letter-spacing--default: -.02em;
    --_typography---letter-spacing--medium: -.03em;
    --_typography---letter-spacing--large: -.04em;
    --_typography---letter-spacing--xlarge: -.05em;
  }
  .utility-page-content {
    padding-left: 16px;
    padding-right: 16px;
  }
  .container {
    padding-left: 18px;
    padding-right: 18px;
  }
  .color-wrap, .typography-wrap, .components-wrap {
    flex-flow: column;
  }
  .color-block-inner-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .color-thumb {
    height: 130px;
  }
  .color-block-main-wrap, .typography-box-wrap {
    max-width: none;
  }
  .text-large.is-job-title {
    text-shadow: 0 25.2px 0 var(--color--black);
  }
  .nav-button-wrapper {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
  .hamburger {
    width: 44px;
    height: 44px;
  }
  .text-lg-2 {
    font-size: 16px;
  }
  .text-large-2 {
    font-size: 18px;
  }
  .utility-content-wrap {
    grid-row-gap: 24px;
  }
  .button-text:where(.button-bright-lilac) {
    text-shadow: 0 25.59px 0 var(--color--black);
  }
  .hero-text-block {
    grid-row-gap: 20px;
    max-width: 400px;
  }
  .button:where(.button-bright-lilac) {
    padding: 16px 24px;
  }
  .hero-section {
    height: 500px;
  }
  .section-title-block {
    grid-row-gap: 20px;
    margin-bottom: 40px;
  }
  .section-title-block.is-faq {
    margin-bottom: 32px;
  }
  .home-about-image-02 {
    max-width: 160px;
  }
  .team-content-block {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding-top: 70px;
  }
  .team-widget-block {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .faq-image {
    max-width: 140px;
    margin-bottom: 24px;
  }
  .animated-tag {
    padding: 16px 24px;
  }
  .process-card-title-wrap {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
  .process-image-wrap {
    margin-top: -60px;
  }
  .process-card-block {
    grid-template-columns: 1fr 1fr;
  }
  .project-widget-text-block {
    grid-row-gap: 16px;
  }
  .project-widget {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .project-widget-image-block {
    border-radius: 20px;
    padding: 24px 20px;
  }
  .project-widget-image-wrapper {
    padding: 16px;
  }
  .project-widget-tag-wrap {
    grid-row-gap: 8px;
    flex-flow: wrap;
  }
  .service-widget {
    border-radius: 20px;
  }
  .service-widget-description {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .feature-widget {
    grid-column-gap: 40px;
    flex-flow: column;
  }
  .testimonial-text-block {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    margin-bottom: 32px;
  }
  .testimonial-top {
    grid-row-gap: 20px;
  }
  .quote-icon {
    max-width: 40px;
  }
  .pricing-image-wrap {
    margin-top: -170px;
    margin-bottom: -120px;
  }
  .pricing-card-image-wrap {
    max-width: 70px;
    margin-bottom: 20px;
  }
  .blog-title-block {
    margin-bottom: 32px;
  }
  .blog-widget {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .footer-content-block {
    min-height: 600px;
  }
  .footer-text-block {
    grid-row-gap: 20px;
  }
  .footer-content-wrapper {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-flow: column;
    align-items: stretch;
  }
  .footer-copyright-link-block {
    width: auto;
  }
  .studio-text-block {
    grid-row-gap: 24px;
  }
  .principles-card-block {
    grid-row-gap: 24px;
    grid-template-columns: 1fr 1fr;
  }
  .job-text-wrapper {
    padding: 10px;
  }
  .service-card-block {
    grid-template-columns: 1fr;
  }
  .step-card {
    padding: 24px;
  }
  .step-image {
    min-height: 600px;
  }
  .banner-text-wrap {
    grid-row-gap: 20px;
  }
  .banner-text-wrap.is-pricing {
    margin-bottom: 40px;
  }
  .banner-content-block.is-utility {
    min-height: 400px;
  }
  .input-field {
    padding-left: 16px;
    padding-right: 16px;
  }
  .project-tag-block {
    margin-top: 16px;
  }
  .project-gallery-block, .project-rich-text ul {
    margin-top: -24px;
  }
  .blog-card {
    height: var(--_responsive---full-size);
  }
  .utility-text-block-wrap {
    grid-row-gap: 24px;
  }
  .utility-text-block {
    grid-row-gap: 8px;
  }
  .accordion-item-body {
    padding-left: 20px;
    padding-right: 20px;
  }
  .accordion-item-title {
    padding: 20px;
  }
  .testimonial-author-image-block {
    grid-column-gap: 12px;
  }
  .testimonial-author-image-wrap {
    border-radius: 6px;
  }
  .nav-dropdown-menu-inner {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .nav-dropdown-toggle-content.megamenu {
    left: 0%;
  }
  .nav-dropdown-menu {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
  .slide-nav {
    margin-top: 16px;
  }
  .footer-link-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .footer-link-wrap {
    width: var(--_responsive---full-size);
  }
  .style-button-wrap {
    max-width: none;
  }}
@media screen and (max-width: 479px) {

  body {
    --_responsive---element-spacing--spacing-zero: 0px;
    --_responsive---full-size: 100%;
    --_responsive---section-padding--banner: 160px;
    --_responsive---section-padding--semi-medium: 50px;
    --_responsive---padding--padding-124-px\<deleted\|variable-782a0208-0c4c-12ec-f120-df745dc3e1c9\>: 60px;
    --_responsive---element-spacing--spacing-normal: 24px;
    --_responsive---element-spacing--spacing-xlarge: 24px;
    --_responsive---padding--padding-24-px\<deleted\|variable-196d802f-ff13-2ac3-ba10-124bbb631713\>: 16px;
    --_responsive---element-spacing--spacing-medium: 16px;
    --_responsive---element-spacing--spacing-xxxlarge: 32px;
    --_responsive---34-px\<deleted\|variable-7e30a8d3-7687-4a52-d404-74d261b5dc62\>: 34px;
    --_responsive---element-spacing--spacing-regular: 20px;
    --_responsive---element-spacing--spacing-xsmall: 12px;
    --_responsive---padding--padding-20-px\<deleted\|variable-d17a61b6-efda-bbbb-5d7e-4e3f7d2e9eb5\>: 16px;
    --_responsive---section-padding--large: 50px;
    --_responsive---section-padding--medium: 50px;
    --_responsive---section-padding--xlarge: 60px;
    --_responsive---element-spacing--spacing-immense: 50px;
    --_responsive---element-spacing--spacing-big: 36px;
    --_responsive---border-radius--radius-xxlarge: 20px;
    --_responsive---element-spacing--spacing-xxbig: 36px;
    --_responsive---border-radius--radius-small: 6px;
    --_responsive---border-radius--radius-round: 50%;
    --_responsive---element-spacing--spacing-xjumbo: 40px;
    --_responsive---section-padding--default: 50px;
    --_responsive---border-radius--radius-large: 12px;
    --_responsive---element-spacing--spacing-massive: 40px;
    --_responsive---element-spacing--spacing-slim: 16px;
    --_responsive---element-spacing--spacing-small: 12px;
    --_responsive---border-radius--radius-medium: 6px;
    --_responsive---element-spacing--spacing-tiny: 4px;
    --_responsive---element-spacing--spacing-xxsmall: 8px;
    --_responsive---element-spacing--spacing-medium-rare: 20px;
    --_responsive---element-spacing--spacing-large: 24px;
    --_responsive---element-spacing--spacing-xxlarge: 32px;
    --_responsive---element-spacing--spacing-xbig: 36px;
    --_responsive---element-spacing--spacing-xxxbig: 36px;
    --_responsive---element-spacing--spacing-jumbo: 40px;
    --_responsive---element-spacing--spacing-xxjumbo: 40px;
    --_responsive---element-spacing--spacing-giant: 40px;
    --_responsive---element-spacing--spacing-colossal: 60px;
    --_responsive---border-radius--radius-tiny: 4px;
    --_responsive---border-radius--radius-xxsmall: 4px;
    --_responsive---border-radius--radius-xsmall: 4px;
    --_responsive---border-radius--radius-regular: 8px;
    --_responsive---border-radius--radius-xlarge: 12px;
    --_responsive---border-radius--radius-xxxlarge: 20px;
    --_responsive---border-radius--radius-circle: 100%;
    --_typography---font-family--primary-font: Figtree, Arial, sans-serif;
    --_typography---text-default--font-size: 16px;
    --_typography---text-default--line-height: 1.4em;
    --_typography---text-default--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-default--letter-spacing: var(--_typography---letter-spacing--xlarge);
    --_typography---font-family--secondary-font: "Jersey 10", sans-serif;
    --_typography---h1--font-size: 40px;
    --_typography---h1--line-height: .9em;
    --_typography---font-weight--semi-bold: 600;
    --_typography---h1--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---h2--font-size: 36px;
    --_typography---h2--line-height: 1em;
    --_typography---h2--font-weight: var(--_typography---font-weight--regular);
    --_typography---h2--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---h3--font-size: 30px;
    --_typography---h3--line-height: 1em;
    --_typography---h3--font-weight: var(--_typography---font-weight--regular);
    --_typography---h3--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---h4--font-size: 24px;
    --_typography---h4--line-height: 1em;
    --_typography---h4--font-weight: var(--_typography---font-weight--regular);
    --_typography---h4--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---h5--font-size: 20px;
    --_typography---h5--line-height: 1em;
    --_typography---h5--font-weight: var(--_typography---font-weight--regular);
    --_typography---h5--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---h6--font-size: 16px;
    --_typography---h6--line-height: 1em;
    --_typography---h6--font-weight: var(--_typography---font-weight--regular);
    --_typography---h6--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---text-medium--letter-spacing: var(--_typography---letter-spacing--xlarge);
    --_typography---text-medium--font-size: 16px;
    --_typography---text-medium--line-height: 1.4em;
    --_typography---font-weight--regular: 400;
    --_typography---text-small--font-size: 14px;
    --_typography---text-small--line-height: 1.4em;
    --_typography---font-weight--medium: 500;
    --_typography---text-large--font-size: 18px;
    --_typography---text-large--line-height: 1.4em;
    --_typography---text-small--letter-spacing: var(--_typography---letter-spacing--medium);
    --_typography---button-text--font-size: 14px;
    --_typography---button-text--line-height: 1.28em;
    --_typography---button-text--font-weight: var(--_typography---font-weight--medium);
    --_typography---button-text--letter-spacing: var(--_typography---letter-spacing--medium);
    --_typography---text-xlarge--font-size: 20px;
    --_typography---text-xlarge--line-height: 1.2em;
    --_typography---text-xlarge--font-weight: var(--_typography---font-weight--medium);
    --_typography---text-xlarge--letter-spacing: var(--_typography---letter-spacing--xlarge);
    --_typography---font-family--tertiary-font: "EB Garamond", Georgia, serif;
    --_typography---letter-spacing--none: 0em;
    --_typography---display-01--font-size: 40px;
    --_typography---text-large--font-weight: var(--_typography---font-weight--regular);
    --_typography---text-large--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---font-weight--bold: 700;
    --_typography---display-01--line-height: 1em;
    --_typography---display-01--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---display-01--font-weight: var(--_typography---font-weight--regular);
    --_typography---display-02--font-size: 40px;
    --_typography---display-02--line-height: 1em;
    --_typography---display-02--font-weight: var(--_typography---font-weight--regular);
    --_typography---display-02--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---h1--font-weight: var(--_typography---font-weight--regular);
    --_typography---text-medium--font-weight: var(--_typography---font-weight--regular);
    --_typography---text-small--font-weight: var(--_typography---font-weight--regular);
    --_typography---tag--font-size: 16px;
    --_typography---tag--line-height: 1.2em;
    --_typography---tag--letter-spacing: var(--_typography---letter-spacing--none);
    --_typography---tag--font-weight: var(--_typography---font-weight--regular);
    --_typography---font-weight--light: 300;
    --_typography---letter-spacing--tiny: .01em;
    --_typography---letter-spacing--small: -.01em;
    --_typography---letter-spacing--default: -.02em;
    --_typography---letter-spacing--medium: -.03em;
    --_typography---letter-spacing--large: -.04em;
    --_typography---letter-spacing--xlarge: -.05em;
  }
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .style-guide-wrap {
    grid-column-gap: var(--_responsive---element-spacing--spacing-xlarge);
    grid-row-gap: var(--_responsive---element-spacing--spacing-xlarge);
  }
  .color-block-inner-wrap {
    grid-column-gap: var(--_responsive---element-spacing--spacing-normal);
    grid-row-gap: var(--_responsive---element-spacing--spacing-normal);
    grid-template-columns: 1fr;
  }
  .color-thumb {
    height: 120px;
  }
  .typography-box-wrap {
    grid-column-gap: var(--_responsive---34-px\<deleted\|variable-7e30a8d3-7687-4a52-d404-74d261b5dc62\>);
    grid-row-gap: var(--_responsive---34-px\<deleted\|variable-7e30a8d3-7687-4a52-d404-74d261b5dc62\>);
  }
  .typography-box-inner-wrap {
    grid-column-gap: var(--_responsive---element-spacing--spacing-regular);
    grid-row-gap: var(--_responsive---element-spacing--spacing-regular);
  }
  .hamburger {
    background-color: var(--color--black);
    border-radius: 4px;
    width: 48px;
    height: 48px;
  }
  .nav-menu {
    background-color: var(--color--black);
    padding: 20px 16px;
  }
  .nav-link {
    margin-left: 0;
  }
  .hero-text-block {
    grid-row-gap: 16px;
    max-width: 370px;
  }
  .cart {
    border-radius: 4px;
  }
  .section-title-block {
    grid-row-gap: 16px;
  }
  .home-about-image-wrap, .home-about-text-block {
    margin-top: -80px;
  }
  .home-about-image-02 {
    max-width: 120px;
  }
  .team-content-block {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding-top: 60px;
  }
  .team-widget-block {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    grid-template-columns: 1fr 1fr;
  }
  .faq-image {
    max-width: 100px;
  }
  .div-block-2 {
    display: none;
  }
  .animated-tag {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .process-section {
    padding-bottom: var(--_responsive---element-spacing--spacing-zero);
  }
  .process-card-block {
    grid-template-columns: 1fr;
  }
  .project-widget-text-block {
    width: var(--_responsive---full-size);
    max-width: none;
    padding-top: 0;
  }
  .project-widget {
    flex-flow: column;
  }
  .project-widget-image-block {
    width: var(--_responsive---full-size);
    max-width: none;
  }
  .project-slider-arrow {
    margin-top: 32px;
    position: relative;
    right: 0%;
    transform: translate(-25px);
  }
  .project-slider-arrow.is-right {
    margin-top: -37px;
    transform: translate(25px);
  }
  .service-widget-description {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .pricing-image-wrap {
    margin-top: -120px;
    margin-bottom: -60px;
  }
  .pricing-card-block {
    grid-template-columns: 1fr;
  }
  .pricing-card-image-wrap {
    max-width: 60px;
  }
  .blog-widget-text-block {
    max-width: none;
    padding-top: 0;
    padding-bottom: 0;
  }
  .blog-widget-text-wrapper {
    grid-row-gap: 14px;
  }
  .blog-widget-image-wrap {
    max-width: none;
  }
  .blog-widget-inner {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    width: 100%;
    padding-right: 0;
  }
  .footer-content-block {
    background-image: linear-gradient(#0006, #0000004d), url('../images/footer-background-1.webp');
    background-position: 0 0, 50% 100%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    min-height: 500px;
  }
  .principles-card-block {
    grid-template-columns: 1fr;
  }
  .step-card {
    padding-left: 16px;
    padding-right: 16px;
  }
  .service-card-image {
    min-height: 360px;
  }
  .banner-text-wrap {
    grid-row-gap: 16px;
  }
  .blog-card-block {
    grid-template-columns: 1fr;
  }
  .blog-info-block {
    flex-flow: wrap;
  }
  .blog-social-block {
    grid-row-gap: 8px;
  }
  .blog-author-info {
    grid-row-gap: 4px;
  }
  .accordion-item-body {
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .accordion-item-title {
    padding: 10px;
  }
  .testimonial-author-image-block {
    grid-column-gap: 8px;
  }
  .testimonial-author-image-wrap {
    border-radius: 4px;
  }
  .job-image {
    min-height: 350px;
  }
  .nav-link-wrap {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
  }
  .nav-dropdown.megamenu {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
  }
  .nav-dropdown-toggle-content.megamenu {
    position: static;
  }
  .nav-link-two {
    padding: 4px 10px;
  }
  .nav-dropdown-menu-arcive-first {
    padding-left: 16px;
    padding-right: 16px;
  }
  .style-button-wrap {
    grid-template-columns: 1fr 1fr;
    display: flex;
  }}

#node-_18eee7ce-2e4a-1438-27a8-9cc5038ab8da-1691abbe {
  grid-area: span 1 / span 2 / span 1 / span 2;
}
#node-e284e23b-78b4-4c8d-73e1-4803d722e571-1691abbe, #node-_35227b43-f0d4-b738-91dc-5a41e9a71a0e-1691abbe, #node-_5ba369f9-0fba-0ea9-e410-c53bd122d60d-1691abbe, #node-_523a5582-aff6-57e0-06ea-f6ad71af8ac5-1691abbe {
  grid-area: span 1 / span 1 / span 1 / span 1;
}
#node-_3da76454-9c0e-3db7-68b4-33d854c33690-76eb7857 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

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

   Everything the Webflow runtime and its IX3 interactions used to do, in
   plain CSS driven by assets/js/main.js. Twenty-one IX3 interactions were
   transcribed; three are dead and ix3_map.json records why. Nothing here is
   guessed -- every duration, offset, easing and value comes from the
   export's own payload, and audit_scrubs.py diffs the keyframes below
   against it.

   THREE RULES THIS SHEET FOLLOWS, each learned the expensive way:

   1. A REVEAL IS AN ANIMATION, NEVER A TRANSITION. Writing `transition:` on
      an element to reveal it DELETES whatever transition the design had
      given it. Every reveal below is an `animation` with
      `animation-fill-mode: forwards`, so the finished frame simply stays and
      there is no second class to hand over to. (A handover that removes the
      reveal class is how a hero shipped that UNDID itself.)

   2. NO STYLED HOOK THAT NOTHING WRITES. Every class named here is either
      the design's own or one main.js provably sets; audit_hooks.py fails the
      build on any other. A hook that is styled and never written is
      invisible to every other check -- it is how ten scroll scrubs once
      shipped doing nothing.

   3. EVERY REST STATE IS GATED ON `:where(.js)`. The export hid its animated
      elements with `html.w-mod-js:not(.w-mod-ix3) :is(...) { visibility:
      hidden }` in the head, which transform.py removes. Without the gate a
      reader with scripting off gets a blank page. `:where()` keeps the gate
      at specificity zero so it never wins an argument the design was
      winning.

   ---------------------------------------------------------------------- */

/* ---- 4.0  the basics ------------------------------------------------- */

.skip-link {
  color: var(--color--white);
  z-index: 10000;
  background-color: var(--color--black);
  border-radius: 4px;
  padding: 10px 16px;
  text-decoration: none;
  position: absolute;
  top: 8px;
  left: 8px;
  transform: translateY(-200%);
}

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

/* What a <button> loses that a <div> or an <a> had.
   transform.py turns six kinds of element into real buttons: the hamburger,
   the Pages toggle, the five tab links, the FAQ toggles, the two slider
   arrows and the cart's open and close controls. Five of the six were DIVS,
   which inherited the page's type; a form control does not. `font: inherit`
   restores family, size, weight and line-height and NOT letter-spacing,
   word-spacing or text-transform, so those are named too.

   Bare element selector on purpose: at specificity (0,0,1) it loses to every
   design class, exactly as the design's own type rules already did. */
button {
  color: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
}

/* ---- 4.1  scroll reveals --------------------------------------------- */
/*
   Three reveals, all on the IX3 scroll trigger `start: "top bottom"`,
   `enter: "play"` -- they run once, the first time any part of the element
   is inside the viewport. main.js fires them from an IntersectionObserver
   and from a layout-position sweep on scroll, because an observer CLIPS its
   target against every overflow-hiding ancestor and several of these sit
   inside one.

   `.slide-bottom` carries 138 elements across the site and is the workhorse.
   The two title reveals are per-CHARACTER: the payload asks for
   `splitText: {type: "chars", mask: "chars"}` and main.js splits accordingly.

   NO MASK WRAPPER IS EMITTED. GSAP's `mask` option wraps each character in a
   second span with `overflow: clip`, which matters when the character
   TRANSLATES out of its box. The only property animated here is an in-place
   `rotationX`, so the wrapper would clip nothing that moves -- while the
   headings run at `line-height: .9em`, where a clip box that tight cuts the
   descenders of every g, y and p. The visible result is the same and the
   glyphs stay whole. */

:where(.js) .slide-bottom {
  opacity: 0;
  transform: translateY(50px);
}

:where(.js) .slide-bottom.is-revealed {
  animation: reveal-slide-bottom .5s cubic-bezier(.25, .46, .45, .94) .3s
             forwards;
}@keyframes reveal-slide-bottom {

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


/* The split titles. Until main.js has split them the whole heading is
   hidden, which is what the export's own head <style> did -- otherwise the
   unsplit line paints once at full opacity and then jumps. */
:where(.js) .section-title:not(.is-split),
:where(.js) .section-description:not(.is-split) {
  visibility: hidden;
}

.split-char {
  display: inline-block;
  position: relative;
}

/* The word wrapper. Each character has to be an inline-block for its own
   transform to apply, and every inline-block is a line-break opportunity --
   so without this a split heading breaks mid-word. */
.split-word {
  white-space: nowrap;
  display: inline-block;
}

/* `--index` is the character's position and `--stagger` the per-character
   step main.js computes from the payload's `stagger.amount` divided by the
   number of characters. The title spreads its characters over 1s, the
   description over 0.5s. */
:where(.js) .section-title .split-char {
  opacity: 0;
  transform: rotateX(180deg);
}

:where(.js) .section-description .split-char {
  transform: rotateX(180deg);
}

:where(.js) .section-title.is-revealed .split-char {
  animation: reveal-char-flip .5s linear
             calc(var(--index) * var(--stagger)) forwards;
}

:where(.js) .section-description.is-revealed .split-char {
  animation: reveal-char-turn .5s linear
             calc(var(--index) * var(--stagger)) forwards;
}@keyframes reveal-char-flip {

  from { opacity: 0; transform: rotateX(180deg); }
  to   { opacity: 1; transform: rotateX(0deg); }}
@keyframes reveal-char-turn {

  from { transform: rotateX(180deg); }
  to   { transform: rotateX(0deg); }}


/* ---- 4.2  page-load animations --------------------------------------- */
/*
   Four `wf:load` timelines. main.js adds `.is-loaded` to <html> on
   DOMContentLoaded, which starts all of them together -- the payload runs
   them off one clock, and the offsets below are its own `position` values.

   The hero copy rises (0.4s each, characters staggered over 0.5s by GSAP's
   stagger, which for a handful of block elements is a plain per-element
   delay), the button fades in at 0.9s, and the background settles out of a
   2x scale over a full second. */

/* The hero copy rises LINE BY LINE from behind a mask. main.js splits both
   elements with `splitLines(element, true)`, which is the payload's
   `splitText: {type: "lines", mask: "lines"}`; the mask is what the line
   comes out from behind, and it is also why a split heading is as wide as
   its longest line instead of filling its flex track. */
.split-line-mask {
  display: block;
  overflow: clip;
}

.split-line {
  display: block;
  position: relative;
}

:where(.js) .hero-title:not(.is-split),
:where(.js) .hero-description:not(.is-split) {
  visibility: hidden;
}

:where(.js) .hero-title .split-line,
:where(.js) .hero-description .split-line {
  opacity: 0;
  transform: translateY(100%);
}

:where(.js) .hero-button-wrap {
  opacity: 0;
}

:where(.js) .hero-background {
  opacity: .9;
  transform: translateY(50%) scale(2);
}

:where(.js.is-loaded) .hero-title .split-line {
  animation: hero-rise .4s cubic-bezier(.25, .46, .45, .94)
             calc(var(--index, 0) * var(--stagger, 0s)) forwards;
}

:where(.js.is-loaded) .hero-description .split-line {
  animation: hero-rise .5s cubic-bezier(.25, .46, .45, .94)
             calc(.4s + var(--index, 0) * var(--stagger, 0s)) forwards;
}

:where(.js.is-loaded) .hero-button-wrap {
  animation: hero-fade .3s cubic-bezier(.25, .46, .45, .94) .9s forwards;
}

:where(.js.is-loaded) .hero-background {
  animation: hero-settle 1s cubic-bezier(.25, .46, .45, .94) forwards;
}@keyframes hero-rise {

  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }}
@keyframes hero-fade {

  from { opacity: 0; }
  to   { opacity: 1; }}
@keyframes hero-settle {

  from { opacity: .9; transform: translateY(50%) scale(2); }
  to   { opacity: 1; transform: translateY(0) scale(1); }}


/* The contact page's own load timeline. */
:where(.js) .utility-page-content {
  opacity: 0;
  transform: translateY(50px);
}

:where(.js.is-loaded) .utility-page-content {
  animation: reveal-slide-bottom .5s cubic-bezier(.25, .46, .45, .94)
             forwards;
}

/* The about page's banner wobble: 15deg out, 15deg back the other way, then
   level -- three 0.2s steps at 0, 0.18 and 0.33, which overlap. Written as
   one 0.53s keyframe run with the steps at their own share of it. */
:where(.js.is-loaded) .about-banner-image {
  animation: banner-wobble .53s cubic-bezier(.25, .46, .45, .94) forwards;
}@keyframes banner-wobble {

  0%     { transform: rotate(0deg); }
  37.7%  { transform: rotate(15deg); }
  62.3%  { transform: rotate(-15deg); }
  100%   { transform: rotate(0deg); }}


/* A HEIGHT COLLAPSE IS `0fr` -> `1fr`, AND BOTH HALVES MATTER.

   `minmax(0, 1fr)` for the OPEN state pins the track's minimum at 0, and in a
   grid whose own height is indefinite -- which every one of these is -- a
   flexible track with a zero base size resolves to zero. Written that way the
   FAQ, the team caption and the Pages panel all opened to nothing, with
   `aria-expanded="true"` set and the rule matching.

   `minmax(0, 0fr)` for the CLOSED state collapses correctly, and is NOT
   INTERPOLABLE with a bare `1fr`: the two track lists use different
   functions, so the browser has nothing to animate between and the panel
   snaps open with no transition at all. Measured in a real browser, 0px at
   80ms and 22.4px at 700ms with nothing in between.

   A bare `0fr` interpolates -- 4.1px at 120ms, 14.4px at 270ms, 20.9px at
   420ms, 22.4px at 800ms -- and it collapses ONLY IF THE ITEM HAS NO BOX OF
   ITS OWN. `0fr` is `minmax(auto, 0fr)`, and `min-height: 0` answers the
   `auto` minimum for the item's CONTENT box; its padding and border are
   still there underneath, and its margin outside that again. The Pages panel
   closed to 56px (16px card margin + 40px card padding) and the FAQ answer
   to 20px, both against a published 0. So transform.py wraps the contents of
   every collapse in a `.collapse-inner` that has none of the three. */

/* ---- 4.3  hovers ----------------------------------------------------- */
/*
   Six hover timelines. Each is written BOTH ways where the payload's target
   could be the trigger itself or a descendant of it -- a state class lands
   on the trigger, and an earlier conversion lost eleven of fourteen hovers
   by only writing the descendant form.

   Durations are the payload's; where it gives none, GSAP's default 0.5s and
   default ease (power1.out) apply, and that is what is written. */

.blog-card-button,
.blog-card-image {
  transition: background-color .3s linear, color .3s linear,
              transform .5s cubic-bezier(.25, .46, .45, .94);
}

.blog-card:hover .blog-card-button {
  background-color: var(--color--black);
  color: var(--color--white);
}

.blog-card:hover .blog-card-image {
  transform: scale(1.05);
}

/* The team card opens its name block from height 0.

   ABOVE 992px ONLY, and that gate is measured rather than assumed. The
   design gives `.team-widget` a fixed `height: 135px` with
   `justify-content: flex-end`, which squeezes the caption to nothing on its
   own -- the resting collapse is the flex algorithm, not this rule. Below
   992px the design switches the card to `height: auto` and the caption is
   simply VISIBLE: measured on the published page it is 22px tall at 991 and
   0px at 1440. Applying the collapse at every width made every card 22px
   shorter than the published one and moved everything below the team section
   up by 67px on three pages. */
@media screen and (min-width: 992px) {
  .team-widget-text-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .5s cubic-bezier(.25, .46, .45, .94);
  }

  .team-widget-text-wrap > * {
    min-height: 0;
  }

  .team-widget:hover .team-widget-text-wrap,
  .team-widget:focus-within .team-widget-text-wrap {
    grid-template-rows: 1fr;
  }
}

/* The job card rolls its title up to the text-shadow twin the design draws
   28px below it, and slides the arrow out of its 22px window. The payload
   splits the title into CHARACTERS with no stagger, so every character moves
   together -- the split still matters, because it is what the published page
   measures. */
.is-job-title .split-char,
.job-card-icon {
  transition: transform .5s cubic-bezier(.25, .46, .45, .94);
}

.job-card:hover .is-job-title .split-char,
.job-card:focus-visible .is-job-title .split-char {
  transform: translateY(-100%);
}

.job-card:hover .job-card-icon,
.job-card:focus-visible .job-card-icon {
  transform: translateX(100%);
}

/* The service card's blurred caption panel. */
.service-text-block {
  opacity: 0;
  transition: opacity .5s cubic-bezier(.25, .46, .45, .94);
}

.service-card:hover .service-text-block,
.service-card:focus-visible .service-text-block {
  opacity: 1;
}

/* Every button rolls its label up to the text-shadow twin the design draws
   one line below it. `.button-text` is `overflow: hidden` with a fixed
   height in the design, so the shadow copy arrives exactly as the label
   leaves -- and the payload rolls it CHARACTER BY CHARACTER, spreading 0.4s
   across the label, which is the difference between a block sliding and a
   word turning over. */
.button-text .split-char {
  transition: transform .5s cubic-bezier(.25, .46, .45, .94)
              calc(var(--index, 0) * var(--stagger, 0s));
}

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

/* ---- 4.4  the header ------------------------------------------------- */
/*
   The mobile panel. framework.hand.css carries the geometry Webflow's
   `[data-nav-menu-open]` rule provided; main.js writes that attribute and
   flips `aria-expanded` on the button.

   The hamburger folds into a cross. The three bars are the export's own
   divs, retagged to spans, and their size and colour still come from the
   design sheet -- only the folded state is new. */

.hamburger-line-top,
.hamburger-line-middle,
.hamburger-line-bottom {
  transition: transform .3s ease, opacity .3s ease;
}

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

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

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

/* The Pages mega-dropdown. The design already gives the panel `height: 0`
   and `overflow: hidden`; IX3 animated that to `auto` on hover of the whole
   `.nav-dropdown`, and animated the toggle's border from transparent to
   white at the same time.

   `height: auto` is not animatable, so the panel becomes a one-row grid and
   the row goes from `minmax(0, 0fr)` to `minmax(0, 1fr)`. The design's own
   `height: 0` has to give way for that, which is the one place this sheet
   overrides the design on purpose -- and it is written at the same
   specificity, after it, rather than with `!important`. */
.nav-dropdown-toggle-content.megamenu {
  height: auto;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.25, .46, .45, .94);
}

/* The wrapper transform.py inserts inside every height collapse. It exists
   only so the collapsing grid item has no padding, border or margin of its
   own -- a `0fr` track cannot go below those. See wrap_children.

   `clip`, NOT `hidden`. `overflow: hidden` makes the wrapper a SCROLL
   CONTAINER, whose min-content contribution is zero; the Pages panel is
   `width: fit-content`, which is min(max-content, max(min-content,
   available)), so a zero min-content handed it the 152px of its toggle
   instead of its own 474px and the whole mega-menu rendered a third of its
   width with the cards squeezed. `clip` is not a scroll container, so the
   min-content contribution survives -- and it is still an overflow other
   than `visible`, which is all the grid track needs to take the item's
   automatic minimum to zero. */
.collapse-inner {
  min-height: 0;
  overflow: clip;
}

.nav-dropdown.megamenu:hover .nav-dropdown-toggle-content.megamenu,
.nav-dropdown.megamenu:focus-within .nav-dropdown-toggle-content.megamenu,
.nav-dropdown-toggle-content.megamenu.is-open {
  grid-template-rows: 1fr;
}

.nav-link-two {
  transition: border-color .5s cubic-bezier(.25, .46, .45, .94);
}

.nav-dropdown.megamenu:hover .nav-link-two,
.nav-dropdown.megamenu:focus-within .nav-link-two,
.nav-link-two[aria-expanded="true"] {
  border-top-color: var(--color--white);
  border-bottom-color: var(--color--white);
}

/* Below the collapse breakpoint the panel is part of the stacked menu and
   the design makes it `position: static`, so it opens on tap rather than on
   hover -- which a touch device cannot do. main.js binds the click. */
@media (hover: none) {
  .nav-dropdown.megamenu:hover .nav-dropdown-toggle-content.megamenu {
    grid-template-rows: 0fr;
  }

  .nav-dropdown-toggle-content.megamenu.is-open {
    grid-template-rows: 1fr;
  }
}

/* ---- 4.5  the FAQ accordion ------------------------------------------ */
/*
   IX3 toggles this on click: the body wrapper's height 0 -> auto over
   power2.out, the answer's LINES rising in 0.1s steps from 0.13s, and the
   chevron rotating 180deg. The design already gives the wrapper
   `overflow: hidden`, so only the collapse and the two children are new. */

/* The toggle was a <div> filling its row, and a <button> is shrink-to-fit
   whatever its `display` -- so the same `display: flex;
   justify-content: space-between` left five 300px-ish buttons in a 670px
   column, with the chevron beside the question instead of at the edge and a
   hit area less than half the row. Measured against the published page: 670. */
.accordion-item-title {
  width: 100%;
}

.accordion-item-body-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.215, .61, .355, 1);
}



.accordion-item-title[aria-expanded="true"] + .accordion-item-body-wrapper {
  grid-template-rows: 1fr;
}

.accordion-item-title-icon {
  transition: transform .5s cubic-bezier(.215, .61, .355, 1);
}

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

/* The answer's lines. main.js wraps each rendered line of the paragraph in a
   `.split-line`, which is what the payload's `splitText: {type: "lines"}`
   asks for, and they rise in 0.1s steps once the row is open. */
:where(.js) .accordion-item-body .split-line {
  opacity: 0;
  transform: translateY(100%);
}

:where(.js) .accordion-item-title[aria-expanded="true"]
+ .accordion-item-body-wrapper .split-line {
  animation: reveal-line .5s cubic-bezier(.215, .61, .355, 1)
             calc(.13s + var(--index) * .1s) forwards;
}@keyframes reveal-line {

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


/* ---- 4.6  the blog tab set ------------------------------------------- */
/* The framework's own `.tabset-pane { display: none }` and
   `.tabset-pane.is-active { display: block }` still do the switching; main.js
   only moves `.is-active` and the ARIA state. Nothing to add. */

/* ---- 4.7  the two sliders on index ----------------------------------- */
/*
   `.project-slider` slides (500ms, `data-animation="slide"`) and
   `.testimonial-slider` cross-fades (500ms, autoplay every 3s). The
   transition goes on the ELEMENT MAIN.JS ACTUALLY TRANSFORMS -- the mask for
   the sliding one, each slide for the fading one. Putting it on the wrong
   box is how a slider once moved with no animation at all. */

.project-mask {
  display: flex;
  transition: transform .5s ease;
}

.project-mask > .project-slide {
  flex: 0 0 100%;
}

.mask > .testimonial-slide {
  transition: opacity .5s ease;
}

/* The cross-fade stacks its slides; only the current one is opaque and
   reachable. */
.mask {
  display: grid;
}

.mask > .testimonial-slide {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
}

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

/* ---- 4.8  the cart drawer -------------------------------------------- */
/*
   A localStorage basket (`pexora:cart`). The drawer's closed state is the
   `hidden` attribute transform.py writes, not an inline `display:none` --
   an inline style beats the attribute, which is how a drawer once shipped
   permanently invisible. */

/* THE CLOSED STATE NEEDS A RULE OF ITS OWN. `hidden` is a UA-level
   `display: none`, and the design gives the drawer's backdrop
   `display: flex` -- any author declaration beats the UA one, so the
   attribute alone left the cart open over a dimmed page on every load. An id
   selector puts this above the class that was winning; it is the same trap
   as an inline `display:none` beating `hidden` from the other side.

   The drawer's own layout is entirely the design sheet's, through the
   renamed commerce classes -- there is nothing else to add here. The one thing
   that is new is the line template: transform.py puts a `<template>` inside
   the list carrying the export's own `commercecartitem` markup, and main.js
   clones it per basket line, so every line is styled by rules that were
   already in the export rather than by anything invented for this build.

   `<template>` renders nothing on its own, so a reader with scripting off
   sees the empty-cart message, which is true. */

#cart-drawer[hidden] {
  display: none;
}

/* WHAT A RETAGGED <button> DOES NOT INHERIT: the width of the <a> it
   replaced. "Place Order" ships as an `<a>` with `display: block`, which
   fills the sidebar column; a form control's `width: auto` is its INTRINSIC
   size whatever its `display` is, so the same rule left a 97px button in a
   320px column. Measured against the published page, which is 320px wide. */
.wf-commerce-commercecheckoutplaceorderbutton {
  width: 100%;
}

/* ---- 4.9  the four scroll scrubs ------------------------------------- */
/*
   Each scrub is a PAUSED 1s animation whose delay main.js drives from scroll
   progress: `animation-delay: calc(var(--scrub) * -1s)` with `--scrub` in
   [0, 1] shows exactly that fraction of the timeline. The values live in
   `@keyframes` where audit_scrubs.py can diff them against the payload,
   rather than in JavaScript where nothing could.

   The offsets below are the payload's own `position` and `duration` in
   seconds, divided by the timeline's total length:

     animated-section       4.00s   (index)
     service-content-block  1.13s   (index)
     reality-section        1.10s   (about)
     step-sticky-wrap       0.50s   (service)

   `animation-fill-mode: both` is required, not decorative: without it the
   frames at progress 0 and 1 fall back to the element's own styles and the
   rail snaps at both ends. */

[data-scrub] {
  --scrub: 0;
}

:where(.js) .animated-tag-wrap,
:where(.js) .animated-button-wrap,
:where(.js) .service-widget-title,
:where(.js) .service-widget-description-wrap,
:where(.js) .service-widget-image._01,
:where(.js) .service-widget-image._02,
:where(.js) .service-widget-image._03,
:where(.js) .reality-card,
:where(.js) .step-card-block {
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: calc(var(--scrub, 0) * -1s);
  animation-iteration-count: 1;
  animation-fill-mode: both;
  animation-play-state: paused;
}

/* -- index: the tag rail ("Define / Discover / Design", then the second
      trio, then the button). Timeline 4.00s, every step linear. */
:where(.js) .animated-tag-wrap._01 {
  animation-name: scrub-tag-one;
}

:where(.js) .animated-tag-wrap._02 {
  animation-name: scrub-tag-two;
}

:where(.js) .animated-button-wrap {
  animation-name: scrub-tag-button;
}@keyframes scrub-tag-one {

  0%     { opacity: 0; transform: scale(1); }
  25%    { opacity: 1; transform: scale(1); }
  37.5%  { opacity: 1; transform: scale(0); }
  100%   { opacity: 1; transform: scale(0); }}
@keyframes scrub-tag-two {

  0%      { opacity: 0; transform: scale(1); }
  37.25%  { opacity: 0; transform: scale(1); }
  62.25%  { opacity: 1; transform: scale(1); }
  62.5%   { opacity: 1; transform: scale(1); }
  75%     { opacity: 1; transform: scale(0); }
  100%    { opacity: 1; transform: scale(0); }}
@keyframes scrub-tag-button {

  0%    { opacity: 0; }
  75%   { opacity: 0; }
  100%  { opacity: 1; }}


/* -- index: the service rail. Four titles take it in turns to be white
      while the description block slides up a quarter at a time and the top
      three images fade away. Timeline 1.13s; the three steps run
      0.2-0.5, 0.51-0.81 and 0.83-1.13. */
:where(.js) .service-widget-title.one {
  animation-name: scrub-service-title-one;
}

:where(.js) .service-widget-title.two {
  animation-name: scrub-service-title-two;
}

:where(.js) .service-widget-title.three {
  animation-name: scrub-service-title-three;
}

:where(.js) .service-widget-title.four {
  animation-name: scrub-service-title-four;
}

:where(.js) .service-widget-description-wrap {
  animation-name: scrub-service-rail;
}

:where(.js) .service-widget-image._01 {
  animation-name: scrub-service-image-one;
}

:where(.js) .service-widget-image._02 {
  animation-name: scrub-service-image-two;
}

:where(.js) .service-widget-image._03 {
  animation-name: scrub-service-image-three;
}@keyframes scrub-service-title-one {

  0%       { color: #fff; }
  17.699%  { color: #fff; }
  44.248%  { color: #ffffff80; }
  100%     { color: #ffffff80; }}
@keyframes scrub-service-title-two {

  0%       { color: #ffffff80; }
  17.699%  { color: #ffffff80; }
  44.248%  { color: #fff; }
  45.133%  { color: #fff; }
  71.681%  { color: #ffffff80; }
  100%     { color: #ffffff80; }}
@keyframes scrub-service-title-three {

  0%       { color: #ffffff80; }
  45.133%  { color: #ffffff80; }
  71.681%  { color: #fff; }
  73.451%  { color: #ffffff80; }
  100%     { color: #ffffff80; }}
@keyframes scrub-service-title-four {

  0%       { color: #ffffff80; }
  73.451%  { color: #ffffff80; }
  100%     { color: #fff; }}
@keyframes scrub-service-rail {

  0%       { transform: translateY(0); }
  17.699%  { transform: translateY(0); }
  44.248%  { transform: translateY(-25%); }
  45.133%  { transform: translateY(-25%); }
  71.681%  { transform: translateY(-50%); }
  73.451%  { transform: translateY(-50%); }
  100%     { transform: translateY(-75%); }}
@keyframes scrub-service-image-one {

  0%       { opacity: 1; }
  17.699%  { opacity: 1; }
  44.248%  { opacity: 0; }
  100%     { opacity: 0; }}
@keyframes scrub-service-image-two {

  0%       { opacity: 1; }
  45.133%  { opacity: 1; }
  71.681%  { opacity: 0; }
  100%     { opacity: 0; }}
@keyframes scrub-service-image-three {

  0%       { opacity: 1; }
  73.451%  { opacity: 1; }
  100%     { opacity: 0; }}


/* -- about: the three "reality" cards deal themselves onto the table.
      Timeline 1.10s. Every step uses GSAP's ExpoScaleEase(0.05, 1, none),
      which is not a CSS ease -- the cubic-bezier below is a numeric fit to
      it, maximum error 0.0005 over the unit interval, measured against
      (0.05 * 20^t - 0.05) / 0.95.

      The design rests these cards at rotate(-16deg) / 3deg / 4deg and the
      payload animates them from 0deg to -15deg / 2deg / 3.75deg, so the
      scrub CONTRADICTS the sheet by a degree -- deliberately transcribed as
      the payload has it, because that is what the running export shows.

      ONE DEVIATION, on card one. The payload turns it TWICE: 0deg to -15deg
      over the first 27.273%, and then 0deg to -15deg again from there to
      72.727%. Because that second tween declares an explicit start of 0deg,
      the published site snaps the card back upright partway through the
      scroll and turns it a second time. The other two cards start their
      second action from "wherever you are", which is what an author writes
      on purpose, so card one is a duplicated action. Here it turns once,
      over the payload's own first range, and holds -15deg -- the same
      positions as the published site everywhere except the snap.
      audit_scrub_values carries the exception and the reason.
      Card three's `translate(-50%)` is the design's own horizontal
      centring and is kept inside every frame; dropping it would throw the
      card half its width to the right. */
:where(.js) .reality-card {
  animation-timing-function: cubic-bezier(.512, .079, .784, .323);
}

:where(.js) .reality-card.one {
  animation-name: scrub-reality-one;
}

:where(.js) .reality-card.two {
  animation-name: scrub-reality-two;
}

:where(.js) .reality-card.three {
  animation-name: scrub-reality-three;
}@keyframes scrub-reality-one {

  0%       { opacity: 0; transform: rotate(0deg); }
  27.273%  { opacity: 1; transform: rotate(-15deg); }
  100%     { opacity: 1; transform: rotate(-15deg); }}
@keyframes scrub-reality-two {

  0%       { opacity: 0; transform: rotate(0deg); }
  27.273%  { opacity: 0; transform: rotate(0deg); }
  54.545%  { opacity: 1; transform: rotate(2deg); }
  100%     { opacity: 1; transform: rotate(2deg); }}
@keyframes scrub-reality-three {

  0%       { opacity: 0; transform: translateY(-200px) rotate(0deg) translate(-50%); }
  54.545%  { opacity: 0; transform: translateY(-200px) rotate(0deg) translate(-50%); }
  81.818%  { opacity: 1; transform: translateY(0) rotate(3.75deg) translate(-50%); }
  100%     { opacity: 1; transform: translateY(0) rotate(3.75deg) translate(-50%); }}


/* -- service: the step rail slides through its sticky window,
      y 30% -> -60% across the whole 300vh, linear. */
:where(.js) .step-card-block {
  animation-name: scrub-step-rail;
}@keyframes scrub-step-rail {

  from { transform: translateY(30%); }
  to   { transform: translateY(-60%); }}


/* ---- 4.10  reduced motion -------------------------------------------- */
/*
   Everything above is decoration. A reader who has asked for less of it
   gets the finished state immediately: reveals resolve, hovers still change
   colour, and the scrubs still track scroll -- a scrub that stopped would
   leave the sticky sections showing one frame for 300vh of scrolling, which
   is worse than the motion. Only the DURATIONS go. */
@media (prefers-reduced-motion: reduce) {
  :where(.js) .slide-bottom,
  :where(.js) .hero-title .split-line,
  :where(.js) .hero-description .split-line,
  :where(.js) .hero-button-wrap,
  :where(.js) .hero-background,
  :where(.js) .utility-page-content,
  :where(.js) .section-title .split-char,
  :where(.js) .section-description .split-char,
  :where(.js) .accordion-item-body .split-line {
    opacity: 1;
    transform: none;
    animation: none;
  }

  :where(.js) .section-title:not(.is-split),
  :where(.js) .section-description:not(.is-split),
  :where(.js) .hero-title:not(.is-split),
  :where(.js) .hero-description:not(.is-split) {
    visibility: visible;
  }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
  }
}