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

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

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

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

.wf-dyn-bind-empty {
  display: none !important;
}
.wf-condition-invisible {
  display: none !important;
}
.wf-layout-grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-row-gap: 16px;
  grid-column-gap: 16px;
}

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

   Section 2 drops every webflow.css rule that only existed for the runtime
   to drive. Three of those families were carrying real LAYOUT as well as
   behaviour, and this file restates that layout against the design's own
   class names so the pages measure the same without the framework's.

   It is emitted BETWEEN the framework and the design sheet, in the same
   place webflow.css sat, so the design keeps overriding it exactly as it
   did before -- `.nav-link { padding: 0 }` still beats `.w-nav-link`'s
   20px, `.video-image { height: 100% }` still beats the widget's 500px.
   Moving any of it after the design silently wins arguments it used to
   lose.

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

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

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

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

:where(.link-button) {
  color: var(--color--white);
  line-height: var(--line-height--line-height-xl);
  text-decoration: none;
}

/* ---- the navbar (.w-nav / -brand / -menu / -link / -button) ---------- */
.navbar {
  z-index: 1000;
}

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

.navbar::after {
  clear: both;
}

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

.nave-menu {
  position: relative;
}

/* `.nav-link` is the design's own name for `.w-nav-link`, and it is on 441
   elements. The design supplies the colour, the family, `padding: 0` and
   `text-decoration: none`; these four are what the framework was still
   contributing that nothing else does. */
.nav-link,
.nav-menu {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-align: left;
}

/* The hamburger's wrapper. `display: none` here is what hides it above 991px;
   the design turns it back on inside its own `max-width: 991px` block, which
   is why this rule can stay unconditional -- and is also why the widget's own
   `padding: 18px` is NOT restated: the design sets `padding: 0` on the same
   element in both bands, so restating it would be a declaration that never
   applies. */
.menu-button {
  position: relative;
  display: none;
  font-size: 24px;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
}@media screen and (max-width: 991px) {

  /* `data-collapse="medium"` on the navbar: the menu leaves the bar. The
     BUTTON's half of that rule is not restated -- the design's own
     `.menu-button { display: flex }` sits in the same band and in a later
     sheet, so the framework's `display: block` never applied to it. */
  .nave-menu {
    display: none;
  }}


/* The open menu. See the header: this is the rule that has to win. */
.nave-menu[data-nav-menu-open] {
  display: block !important;
  position: absolute;
  inset: 100% 0 auto;
  overflow: visible;
  min-width: 200px;
  text-align: center;
}

/* ---- the accordion shell (.w-dropdown / -toggle / -list) ------------- */
/* The design already gives `.accordion` `position: static`, `display: flex`
   and `overflow: hidden`, and `.accordion-title-wrap` its padding and its
   flex row, so all that is left of the widget is the cursor and the fact
   that the toggle must not be selectable when it is being clicked. */
.accordion-title-wrap {
  cursor: pointer;
  user-select: none;
}

/* ---- background video (.w-background-video / -atom / --control) ------ */
/* Three of these: the home page's partner film, the about page's CTA film
   and the career page's full-bleed one. The design names the first two
   `.video-image` and the third `.animated-image`, and overrides the size on
   both -- so what is restated is the containment and the video's own
   cover positioning, which nothing else supplies. */
.video-image,
.animated-image {
  position: relative;
  overflow: hidden;
  color: #fff;
}

/* The widget's own 500px default, on the ONE of the three the design does not
   size itself. `.video-image` gets `height: 100%` from the design sheet in
   both bands, so restating 500px for it would never apply. */
.animated-image {
  height: 500px;
}

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

.video-image > video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

/* The play/pause control. Two of the three carry no design class at all, so
   transform.py gives every one of them `.video-control` and this is the
   only rule that styles it; `.partners-video-stop-button` (the home page's)
   raises it above the card beside it and keeps working on top. */
.video-control {
  position: absolute;
  right: 1em;
  bottom: 1em;
  padding: 0;
  background-color: transparent;
}

.video-control > [hidden] {
  display: none !important;
}

/* ======================================================================
   3. Obliq Studio design
   ====================================================================== */
:root {
  --color--rich-black: #040404;
  --font-family--primary-font: Interdisplay, Arial, sans-serif;
  --color--light-gray: #d8d8d8;
  --_typography---paragraph--font-size: 16px;
  --_typography---paragraph-large--line-height: var(--line-height--line-height-xl);
  --font-weight--regular: 400;
  --_spacing---margin-padding--space-none: 0px;
  --color--white: white;
  --_typography---heading-h1--font-size: 72px;
  --_typography---heading-h1--line-height: var(--line-height--line-height-s);
  --_typography---heading-h1--font-weight: var(--font-weight--medium);
  --_typography---heading-h1--letter-spacing: -2.88px;
  --_typography---heading-h2--font-size: 64px;
  --_typography---heading-h2--line-height: var(--line-height--line-height-s);
  --_typography---heading-h2--font-weight: var(--font-weight--medium);
  --_typography---heading-h2--letter-spacing: -2.56px;
  --_typography---heading-h3--font-size: 48px;
  --_typography---heading-h3--line-height: var(--line-height--line-height-l);
  --_typography---heading-h3--font-weight: var(--font-weight--medium);
  --_typography---heading-h3--letter-spacing: -1.44px;
  --_typography---heading-h4--font-size: 32px;
  --_typography---heading-h4--line-height: var(--line-height--line-height-l);
  --_typography---heading-h4--font-weight: var(--font-weight--medium);
  --_typography---heading-h4--letter-spacing: -.96px;
  --_typography---heading-h5--font-size: 24px;
  --_typography---heading-h5--line-height: var(--line-height--line-height-x);
  --_typography---heading-h5--font-weight: var(--font-weight--semi-bold);
  --_typography---heading-h5--letter-spacing: -.48px;
  --_typography---heading-h6--font-size: 20px;
  --_typography---heading-h6--line-height: var(--line-height--line-height-xl);
  --_typography---heading-h6--font-weight: var(--font-weight--medium);
  --_typography---heading-h6--letter-spacing: -.2px;
  --line-height--line-height-xl: 140%;
  --color--cool-gray: #8a8a8a;
  --_typography---paragraph-large--font-size: 18px;
  --_spacing---margin-padding--container: 15px;
  --line-height--line-height-m: 110%;
  --_spacing---margin-padding--space-3xl: 75px;
  --_spacing---margin-padding--space-8xl: 132px;
  --_spacing---margin-padding--space-2xl: 60px;
  --_spacing---margin-padding--space-md: 30px;
  --_spacing---margin-padding--space-10xl: 150px;
  --_spacing---margin-padding--space-l: 40px;
  --_spacing---margin-padding--space-6xl: 100px;
  --_spacing---margin-padding--space-xl: 50px;
  --_spacing---margin-padding--space-11xl: 154px;
  --_spacing---margin-padding--space-5xl: 90px;
  --_spacing---margin-padding--space-12xl: 225px;
  --_spacing---margin-padding--space-smd: 24px;
  --color--near-black: #040404;
  --_spacing---margin-padding--space-7xl: 120px;
  --_spacing---margin-padding--space-4xl: 80px;
  --_spacing---margin-padding--space-9xl: 140px;
  --_spacing---radius--radius-s: 12px;
  --color--yellow: #9fadf4;
  --_typography---paragraph--line-height: var(--line-height--line-height-2xl);
  --font-weight--medium: 500;
  --color--charcoal-gray: #383838;
  --font-family--secondary-font: "DM Mono", sans-serif;
  --color--gunmetal-gray: #212123;
  --color--jet-black: #101010;
  --color--snow-gray: #f7f7f7;
  --_spacing---radius--circle-round: 50%;
  --color--transparent: transparent;
  --_spacing---margin-padding--space-s: 16px;
  --_spacing---radius--radius-x: 16px;
  --_spacing---margin-padding--space-xs: 10px;
  --_spacing---margin-padding--space-sm: 20px;
  --_typography---paragraph-large--font-weight: var(--font-weight--regular);
  --color--mint-aqua: #b1f6e3;
  --_spacing---margin-padding--space-m: 22px;
  --_spacing---radius--radius-l: 14px;
  --_spacing---margin-padding--space-mld: 32px;
  --_spacing---radius--radius-xl: 20px;
  --_spacing---margin-padding--space-lg: 48px;
  --color--radical-red: #ff2151;
  --line-height--line-height-s: 100%;
  --font-weight--semi-bold: 600;
  --font-weight--bold: 700;
  --font-weight--extra-bold: 800;
  --color--border-image: 0vw;
  --_spacing---gap--gap-none: 0px;
  --color--slate-blue-gray: #6a787b;
  --line-height--line-height-l: 120%;
  --line-height--line-height-x: 130%;
  --line-height--line-height-2xl: 150%;
  --_typography---paragraph--font-weight: var(--font-weight--regular);
  --_typography---paragraph--letter-spacing: 0px;
  --_typography---paragraph-large--letter-spacing: 0px;
}
.wf-backgroundvideo-backgroundvideoplaypausebutton:focus-visible {
  outline-offset: 2px;
  border-radius: 50%;
  outline: 2px solid #3b79c3;
}
.wf-commerce-commercecartwrapper {
  display: inline-block;
  position: relative;
}
.wf-commerce-commercecartopenlink {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: flex;
}
.wf-commerce-commercecartopenlinkcount {
  color: #3898ec;
  text-align: center;
  background-color: #fff;
  border-radius: 9px;
  min-width: 18px;
  height: 18px;
  margin-left: 8px;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  display: inline-block;
}
.wf-commerce-commercecartcontainerwrapper {
  z-index: 1001;
  background-color: #000c;
  position: fixed;
  inset: 0;
}
.wf-commerce-commercecartcontainerwrapper--cartType-modal {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.wf-commerce-commercecartcontainer {
  background-color: #fff;
  flex-direction: column;
  width: 100%;
  min-width: 320px;
  max-width: 480px;
  display: flex;
  overflow: auto;
  box-shadow: 0 5px 25px #00000040;
}
.wf-commerce-commercecartheader {
  border-bottom: 1px solid #e6e6e6;
  flex: none;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  display: flex;
  position: relative;
}
.wf-commerce-commercecartheading {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}
.wf-commerce-commercecartcloselink {
  width: 16px;
  height: 16px;
}
.wf-commerce-commercecartformwrapper {
  flex-direction: column;
  flex: 1;
  display: flex;
}
.wf-commerce-commercecartform {
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  display: flex;
}
.wf-commerce-commercecartlist {
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: 12px 24px;
  overflow: auto;
}
.wf-commerce-commercecartitem {
  align-items: flex-start;
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
}
.wf-commerce-commercecartitemimage {
  width: 60px;
  height: 0%;
}
.wf-commerce-commercecartiteminfo {
  flex-direction: column;
  flex: 1;
  margin-left: 16px;
  margin-right: 16px;
  display: flex;
}
.wf-commerce-commercecartproductname {
  font-weight: 700;
}
.wf-commerce-commercecartoptionlist {
  margin-bottom: 0;
  padding-left: 0;
  text-decoration: none;
  list-style-type: none;
}
.wf-commerce-commercecartquantity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 60px;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 6px 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecartquantity::placeholder {
  color: #999;
}
.wf-commerce-commercecartquantity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecartfooter {
  border-top: 1px solid #e6e6e6;
  flex-direction: column;
  flex: none;
  padding: 16px 24px 24px;
  display: flex;
}
.wf-commerce-commercecartlineitem {
  flex: none;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  display: flex;
}
.wf-commerce-commercecartordervalue {
  font-weight: 700;
}
.wf-commerce-commercecartcheckoutbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  text-align: center;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 2px;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: block;
}
.wf-commerce-commercecartemptystate {
  flex: 1;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
}
.wf-commerce-commercecarterrorstate {
  background-color: #ffdede;
  flex: none;
  margin: 0 24px 24px;
  padding: 10px;
}
.wf-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.wf-commerce-commerceaddtocartform {
  margin: 0 0 15px;
}
.wf-commerce-commerceaddtocartoptionpillgroup {
  margin-bottom: 10px;
  display: flex;
}
.wf-commerce-commerceaddtocartoptionpill {
  color: #000;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #000;
  margin-right: 10px;
  padding: 8px 15px;
}
.wf-commerce-commerceaddtocartoptionpill.is-selected {
  color: #fff;
  background-color: #000;
}
.wf-commerce-commerceaddtocartoptionpill.is-disabled {
  color: #666;
  cursor: not-allowed;
  background-color: #e6e6e6;
  border-color: #e6e6e6;
  outline-style: none;
}
.wf-commerce-commerceaddtocartquantityinput {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 60px;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 6px 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commerceaddtocartquantityinput::placeholder {
  color: #999;
}
.wf-commerce-commerceaddtocartquantityinput:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commerceaddtocartbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: flex;
}
.wf-commerce-commerceaddtocartbutton.is-disabled {
  color: #666;
  cursor: not-allowed;
  background-color: #e6e6e6;
  border-color: #e6e6e6;
  outline-style: none;
}
.wf-commerce-commerceaddtocartoutofstock {
  background-color: #ddd;
  margin-top: 10px;
  padding: 10px;
}
.wf-commerce-commerceaddtocarterror {
  background-color: #ffdede;
  margin-top: 10px;
  padding: 10px;
}
.wf-commerce-commercecheckoutformcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
.wf-commerce-commercelayoutcontainer {
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.wf-commerce-commercelayoutmain {
  flex: 0 800px;
  margin-right: 20px;
}
.wf-commerce-commercecheckoutcustomerinfowrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutblockheader {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 20px;
  display: flex;
}
.wf-commerce-commercecheckoutblockcontent {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 20px;
}
.wf-commerce-commercecheckoutlabel {
  margin-bottom: 8px;
}
.wf-commerce-commercecheckoutemailinput {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutemailinput::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutemailinput:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingaddresswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutshippingfullname {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingfullname::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingfullname:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstreetaddress {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstreetaddress::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstreetaddress:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutrow {
  margin-left: -8px;
  margin-right: -8px;
  display: flex;
}
.wf-commerce-commercecheckoutcolumn {
  flex: 1;
  padding-left: 8px;
  padding-right: 8px;
}
.wf-commerce-commercecheckoutshippingcity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingcity::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingcity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstateprovince {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstateprovince::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstateprovince:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingzippostalcode {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingzippostalcode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingzippostalcode:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingcountryselector {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingcountryselector::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingcountryselector:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingmethodswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutshippingmethodslist {
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}
.wf-commerce-commercecheckoutshippingmethoditem {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  flex-direction: row;
  align-items: baseline;
  margin-bottom: 0;
  padding: 16px;
  font-weight: 400;
  display: flex;
}
.wf-commerce-commercecheckoutshippingmethoddescriptionblock {
  flex-direction: column;
  flex-grow: 1;
  margin-left: 12px;
  margin-right: 12px;
  display: flex;
}
.wf-commerce-commerceboldtextblock {
  font-weight: 700;
}
.wf-commerce-commercecheckoutshippingmethodsemptystate {
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 64px 16px;
}
.wf-commerce-commercecheckoutpaymentinfowrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutcardnumber {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardnumber::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardnumber:focus, .wf-commerce-commercecheckoutcardnumber.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutcardexpirationdate {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardexpirationdate::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardexpirationdate:focus, .wf-commerce-commercecheckoutcardexpirationdate.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutcardsecuritycode {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardsecuritycode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardsecuritycode:focus, .wf-commerce-commercecheckoutcardsecuritycode.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingaddresstogglewrapper {
  flex-direction: row;
  display: flex;
}
.wf-commerce-commercecheckoutbillingaddresstogglecheckbox {
  margin-top: 4px;
}
.wf-commerce-commercecheckoutbillingaddresstogglelabel {
  margin-left: 8px;
  font-weight: 400;
}
.wf-commerce-commercecheckoutbillingaddresswrapper {
  margin-top: 16px;
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutbillingfullname {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingfullname::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingfullname:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstreetaddress {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstreetaddress::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstreetaddress:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingcity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingcity::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingcity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstateprovince {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstateprovince::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstateprovince:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingzippostalcode {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingzippostalcode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingzippostalcode:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingcountryselector {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingcountryselector::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingcountryselector:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutorderitemswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutsummaryblockheader {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 20px;
  display: flex;
}
.wf-commerce-commercecheckoutorderitemslist {
  margin-bottom: -20px;
}
.wf-commerce-commercecheckoutorderitem {
  margin-bottom: 20px;
  display: flex;
}
.wf-commerce-commercecheckoutorderitemdescriptionwrapper {
  flex-grow: 1;
  margin-left: 16px;
  margin-right: 16px;
}
.wf-commerce-commercecheckoutorderitemquantitywrapper {
  white-space: pre-wrap;
  display: flex;
}
.wf-commerce-commercecheckoutorderitemoptionlist {
  margin-bottom: 0;
  padding-left: 0;
  text-decoration: none;
  list-style-type: none;
}
.wf-commerce-commercelayoutsidebar {
  flex: 0 0 320px;
  position: sticky;
  top: 20px;
}
.wf-commerce-commercecheckoutordersummarywrapper {
  margin-bottom: 20px;
}.wf-commerce-commercecheckoutsummarylineitem {
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 8px;
  display: flex;
}

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

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

  .wf-commerce-commercecartcontainerwrapper--cartType-modal {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }
  .wf-commerce-commercecartquantity, .wf-commerce-commerceaddtocartquantityinput, .wf-commerce-commercecheckoutemailinput, .wf-commerce-commercecheckoutshippingfullname, .wf-commerce-commercecheckoutshippingstreetaddress, .wf-commerce-commercecheckoutshippingstreetaddressoptional {
    font-size: 16px;
  }
  .wf-commerce-commercecheckoutrow {
    flex-direction: column;
  }
  .wf-commerce-commercecheckoutshippingcity, .wf-commerce-commercecheckoutshippingstateprovince, .wf-commerce-commercecheckoutshippingzippostalcode, .wf-commerce-commercecheckoutshippingcountryselector, .wf-commerce-commercecheckoutcardnumber, .wf-commerce-commercecheckoutcardexpirationdate, .wf-commerce-commercecheckoutcardsecuritycode, .wf-commerce-commercecheckoutbillingfullname, .wf-commerce-commercecheckoutbillingstreetaddress, .wf-commerce-commercecheckoutbillingstreetaddressoptional, .wf-commerce-commercecheckoutbillingcity, .wf-commerce-commercecheckoutbillingstateprovince, .wf-commerce-commercecheckoutbillingzippostalcode, .wf-commerce-commercecheckoutbillingcountryselector {
    font-size: 16px;
  }}

body {
  background-color: var(--color--rich-black);
  font-family: var(--font-family--primary-font);
  color: var(--color--light-gray);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  font-weight: var(--font-weight--regular);
  --_typography---paragraph--font-size: 16px;
  --_typography---paragraph-large--line-height: var(--line-height--line-height-xl);
  --_typography---heading-h1--font-size: 72px;
  --_typography---heading-h1--line-height: var(--line-height--line-height-s);
  --_typography---heading-h1--font-weight: var(--font-weight--medium);
  --_typography---heading-h1--letter-spacing: -2.88px;
  --_typography---heading-h2--font-size: 64px;
  --_typography---heading-h2--line-height: var(--line-height--line-height-s);
  --_typography---heading-h2--font-weight: var(--font-weight--medium);
  --_typography---heading-h2--letter-spacing: -2.56px;
  --_typography---heading-h3--font-size: 48px;
  --_typography---heading-h3--line-height: var(--line-height--line-height-l);
  --_typography---heading-h3--font-weight: var(--font-weight--medium);
  --_typography---heading-h3--letter-spacing: -1.44px;
  --_typography---heading-h4--font-size: 32px;
  --_typography---heading-h4--line-height: var(--line-height--line-height-l);
  --_typography---heading-h4--font-weight: var(--font-weight--medium);
  --_typography---heading-h4--letter-spacing: -.96px;
  --_typography---heading-h5--font-size: 24px;
  --_typography---heading-h5--line-height: var(--line-height--line-height-x);
  --_typography---heading-h5--font-weight: var(--font-weight--semi-bold);
  --_typography---heading-h5--letter-spacing: -.48px;
  --_typography---heading-h6--font-size: 20px;
  --_typography---heading-h6--line-height: var(--line-height--line-height-xl);
  --_typography---heading-h6--font-weight: var(--font-weight--medium);
  --_typography---heading-h6--letter-spacing: -.2px;
  --_typography---paragraph-large--font-size: 18px;
  --_typography---paragraph--line-height: var(--line-height--line-height-2xl);
  --_typography---paragraph-large--font-weight: var(--font-weight--regular);
  --_typography---paragraph--font-weight: var(--font-weight--regular);
  --_typography---paragraph--letter-spacing: 0px;
  --_typography---paragraph-large--letter-spacing: 0px;
  --_spacing---margin-padding--space-none: 0px;
  --_spacing---margin-padding--container: 15px;
  --_spacing---margin-padding--space-3xl: 75px;
  --_spacing---margin-padding--space-8xl: 132px;
  --_spacing---margin-padding--space-2xl: 60px;
  --_spacing---margin-padding--space-md: 30px;
  --_spacing---margin-padding--space-10xl: 150px;
  --_spacing---margin-padding--space-l: 40px;
  --_spacing---margin-padding--space-6xl: 100px;
  --_spacing---margin-padding--space-xl: 50px;
  --_spacing---margin-padding--space-11xl: 154px;
  --_spacing---margin-padding--space-5xl: 90px;
  --_spacing---margin-padding--space-12xl: 225px;
  --_spacing---margin-padding--space-smd: 24px;
  --_spacing---margin-padding--space-7xl: 120px;
  --_spacing---margin-padding--space-4xl: 80px;
  --_spacing---margin-padding--space-9xl: 140px;
  --_spacing---radius--radius-s: 12px;
  --_spacing---radius--circle-round: 50%;
  --_spacing---margin-padding--space-s: 16px;
  --_spacing---radius--radius-x: 16px;
  --_spacing---margin-padding--space-xs: 10px;
  --_spacing---margin-padding--space-sm: 20px;
  --_spacing---margin-padding--space-m: 22px;
  --_spacing---radius--radius-l: 14px;
  --_spacing---margin-padding--space-mld: 32px;
  --_spacing---radius--radius-xl: 20px;
  --_spacing---margin-padding--space-lg: 48px;
  --_spacing---gap--gap-none: 0px;
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  margin-top: var(--_spacing---margin-padding--space-none);
  margin-bottom: var(--_spacing---margin-padding--space-none);
  font-family: var(--font-family--primary-font);
  color: var(--color--white);
  font-size: var(--_typography---heading-h1--font-size);
  line-height: var(--_typography---heading-h1--line-height);
  font-weight: var(--_typography---heading-h1--font-weight);
  letter-spacing: var(--_typography---heading-h1--letter-spacing);
}
h2:where(:not([class*="heading-scale-"])), :where(.heading-scale-2) {
  margin-top: var(--_spacing---margin-padding--space-none);
  margin-bottom: var(--_spacing---margin-padding--space-none);
  color: var(--color--white);
  font-size: var(--_typography---heading-h2--font-size);
  line-height: var(--_typography---heading-h2--line-height);
  font-weight: var(--_typography---heading-h2--font-weight);
  letter-spacing: var(--_typography---heading-h2--letter-spacing);
}
h3:where(:not([class*="heading-scale-"])), :where(.heading-scale-3) {
  margin-top: var(--_spacing---margin-padding--space-none);
  margin-bottom: var(--_spacing---margin-padding--space-none);
  color: var(--color--white);
  font-size: var(--_typography---heading-h3--font-size);
  line-height: var(--_typography---heading-h3--line-height);
  font-weight: var(--_typography---heading-h3--font-weight);
  letter-spacing: var(--_typography---heading-h3--letter-spacing);
}
h4:where(:not([class*="heading-scale-"])), :where(.heading-scale-4) {
  margin-top: var(--_spacing---margin-padding--space-none);
  margin-bottom: var(--_spacing---margin-padding--space-none);
  color: var(--color--white);
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  font-weight: var(--_typography---heading-h4--font-weight);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
}
h5:where(:not([class*="heading-scale-"])), :where(.heading-scale-5) {
  margin-top: var(--_spacing---margin-padding--space-none);
  margin-bottom: var(--_spacing---margin-padding--space-none);
  color: var(--color--white);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  font-weight: var(--_typography---heading-h5--font-weight);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-6) {
  margin-top: var(--_spacing---margin-padding--space-none);
  margin-bottom: var(--_spacing---margin-padding--space-none);
  color: var(--color--white);
  font-size: var(--_typography---heading-h6--font-size);
  line-height: var(--_typography---heading-h6--line-height);
  font-weight: var(--_typography---heading-h6--font-weight);
  letter-spacing: var(--_typography---heading-h6--letter-spacing);
}
p {
  margin-bottom: var(--_spacing---margin-padding--space-none);
}
a {
  color: var(--color--white);
  line-height: var(--line-height--line-height-xl);
  text-decoration: none;
}
ul {
  margin-top: 0;
  margin-bottom: var(--_spacing---margin-padding--space-none);
  overflow: visible;
}
img {
  object-fit: cover;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  display: inline-block;
}
label {
  margin-bottom: 5px;
  display: block;
}
strong {
  font-weight: bold;
}
blockquote {
  border-left: 5px solid #e2e2e2;
  margin-bottom: 10px;
  padding: 10px 20px;
  font-size: 18px;
  line-height: 22px;
}
.title-box {
  margin-bottom: 30px;
}
.title-box.margin-none {
  margin-bottom: 0;
}
.style-details {
  color: var(--color--cool-gray);
  font-size: var(--_typography---paragraph-large--font-size);
}
.animation-content-wrap {
  overflow: hidden;
}
.style-container {
  max-width: 1278px;
  padding-right: var(--_spacing---margin-padding--container);
  padding-left: var(--_spacing---margin-padding--container);
  margin-left: auto;
  margin-right: auto;
}
.utlitty-inner-title {
  font-size: 82px;
  line-height: var(--line-height--line-height-m);
  padding-bottom: 4px;
}
.section {
  padding-top: var(--_spacing---margin-padding--space-3xl);
  padding-bottom: var(--_spacing---margin-padding--space-3xl);
}
.section.ulility-hero {
  padding-top: var(--_spacing---margin-padding--space-8xl);
  padding-bottom: var(--_spacing---margin-padding--space-2xl);
}
.section.style {
  padding-top: var(--_spacing---margin-padding--space-none);
  padding-bottom: 45px;
}
.section.footer {
  padding-top: 56px;
  padding-bottom: var(--_spacing---margin-padding--space-md);
}
.section.change-log {
  padding-top: var(--_spacing---margin-padding--space-2xl);
  padding-bottom: var(--_spacing---margin-padding--space-10xl);
}
.section.license {
  padding-top: var(--_spacing---margin-padding--space-l);
  padding-bottom: var(--_spacing---margin-padding--space-10xl);
}
.section.blog-card {
  padding-top: 56px;
  padding-bottom: var(--_spacing---margin-padding--space-6xl);
  background-color: var(--color--white);
}
.section.blog-hero {
  padding-top: var(--_spacing---margin-padding--space-11xl);
  padding-bottom: var(--_spacing---margin-padding--space-5xl);
}
.section.project-card {
  padding-top: var(--_spacing---margin-padding--space-2xl);
  padding-bottom: var(--_spacing---margin-padding--space-10xl);
}
.section.project-hero {
  padding-bottom: var(--_spacing---margin-padding--space-none);
}
.section.project-single {
  padding-top: var(--_spacing---margin-padding--space-12xl);
}
.section.recent-projects {
  padding-bottom: var(--_spacing---margin-padding--space-10xl);
  overflow: clip;
}
.section.contact-hero {
  padding-top: var(--_spacing---margin-padding--space-11xl);
  padding-bottom: var(--_spacing---margin-padding--space-smd);
}
.section.from {
  padding-bottom: var(--_spacing---margin-padding--space-6xl);
}
.section.plan-single {
  padding-top: var(--_spacing---margin-padding--space-11xl);
  padding-bottom: var(--_spacing---margin-padding--space-6xl);
}
.section.brand {
  padding-top: var(--_spacing---margin-padding--space-2xl);
  padding-bottom: var(--_spacing---margin-padding--space-6xl);
}
.section.pricing {
  padding-top: var(--_spacing---margin-padding--space-11xl);
  padding-bottom: var(--_spacing---margin-padding--space-2xl);
}
.section.service {
  padding-top: var(--_spacing---margin-padding--space-xl);
  padding-bottom: var(--_spacing---margin-padding--space-10xl);
  background-color: var(--color--white);
  color: var(--color--near-black);
}
.section.service-single {
  padding-top: var(--_spacing---margin-padding--space-11xl);
  padding-bottom: var(--_spacing---margin-padding--space-10xl);
}
.section.gallery-slider {
  padding-top: var(--_spacing---margin-padding--space-2xl);
  padding-bottom: var(--_spacing---margin-padding--space-2xl);
  display: none;
}
.section.gallery {
  padding-top: var(--_spacing---margin-padding--space-2xl);
  padding-bottom: var(--_spacing---margin-padding--space-2xl);
}
.section.explore {
  padding-bottom: var(--_spacing---margin-padding--space-10xl);
}
.section.career-single {
  padding-top: var(--_spacing---margin-padding--space-11xl);
  padding-bottom: var(--_spacing---margin-padding--space-6xl);
}
.section.career-hero {
  padding-top: var(--_spacing---margin-padding--space-11xl);
  padding-bottom: var(--_spacing---margin-padding--space-2xl);
}
.section.team {
  padding-top: var(--_spacing---margin-padding--space-10xl);
  padding-bottom: var(--_spacing---margin-padding--space-10xl);
  background-color: var(--color--white);
}
.section.without-spacing {
  padding-top: var(--_spacing---margin-padding--space-7xl);
  background-image: url('../images/Spacing-Bg.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
}
.section.process {
  padding-top: var(--_spacing---margin-padding--space-10xl);
  padding-bottom: var(--_spacing---margin-padding--space-10xl);
  background-color: var(--color--white);
}
.section.video {
  padding-top: var(--_spacing---margin-padding--space-none);
  padding-bottom: var(--_spacing---margin-padding--space-none);
  position: relative;
}
.section.goals {
  padding-top: var(--_spacing---margin-padding--space-4xl);
  padding-bottom: var(--_spacing---margin-padding--space-4xl);
  overflow: clip;
}
.section.tracker {
  padding-top: var(--_spacing---margin-padding--space-4xl);
  padding-bottom: var(--_spacing---margin-padding--space-6xl);
  background-color: var(--color--white);
  overflow: hidden;
}
.section.about {
  padding-top: var(--_spacing---margin-padding--space-xl);
  padding-bottom: var(--_spacing---margin-padding--space-4xl);
  background-color: var(--color--white);
}
.section.about-heor {
  padding-bottom: var(--_spacing---margin-padding--space-none);
}
.section.faq {
  background-color: var(--color--white);
}
.section.hero-blog {
  padding-bottom: var(--_spacing---margin-padding--space-10xl);
  background-color: var(--color--white);
}
.section.progress {
  padding-top: var(--_spacing---margin-padding--space-2xl);
  padding-bottom: var(--_spacing---margin-padding--space-10xl);
  background-color: var(--color--white);
}
.section.partners {
  padding-bottom: var(--_spacing---margin-padding--space-4xl);
  background-color: var(--color--white);
}
.section.frame {
  padding-top: var(--_spacing---margin-padding--space-4xl);
  padding-bottom: var(--_spacing---margin-padding--space-none);
  background-color: var(--color--white);
}
.section.metrics-01 {
  padding-top: var(--_spacing---margin-padding--space-none);
  padding-bottom: var(--_spacing---margin-padding--space-none);
  background-color: var(--color--white);
}
.section.review {
  padding-top: var(--_spacing---margin-padding--space-9xl);
  padding-bottom: var(--_spacing---margin-padding--space-7xl);
  position: relative;
}
.section.blog-single {
  padding-top: var(--_spacing---margin-padding--space-11xl);
  padding-bottom: var(--_spacing---margin-padding--space-6xl);
}
.section.lock {
  padding-top: var(--_spacing---margin-padding--space-8xl);
  padding-bottom: var(--_spacing---margin-padding--space-9xl);
}
.section.explore-mobile {
  padding-bottom: var(--_spacing---margin-padding--space-10xl);
  display: none;
}
.section.career {
  padding-top: var(--_spacing---margin-padding--space-6xl);
}
.title-flex {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  display: flex;
}
.uttlity-title-box {
  max-width: 858px;
}
.style-title-box-wrapper {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.style-size-box {
  color: var(--color--white);
  justify-content: flex-start;
  align-items: center;
}
.style-category-box-wrapper {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: column;
  display: flex;
}
.color-inner-title {
  color: var(--color--white);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  font-weight: var(--_typography---heading-h5--font-weight);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.primary-button-icon-box {
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  display: flex;
}
.color-card-wrap {
  position: relative;
}
.color-card-wrap.border {
  border: 1px solid #444;
}
.style-guide-buttion-wrap {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  display: flex;
}
.primary-button {
  z-index: 1;
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--yellow);
  padding: 10px 16px;
  text-decoration: none;
  position: relative;
}
.primary-button.white {
  background-color: var(--color--white);
}
.primary-button.font {
  padding: 13px 20px;
}
.description {
  line-height: var(--_typography---paragraph--line-height);
}
.description.white {
  color: var(--color--white);
}
.description.capital {
  font-weight: var(--font-weight--medium);
  text-transform: uppercase;
}
.description.charcoal-gray {
  color: var(--color--charcoal-gray);
}
.description.cool-gray {
  color: var(--color--cool-gray);
}
.description.near-black {
  color: var(--color--near-black);
}
.primary-button-hover-text {
  opacity: 0;
  font-family: var(--font-family--secondary-font);
  color: var(--color--white);
  line-height: var(--line-height--line-height-m);
  text-transform: uppercase;
  position: absolute;
}
.primary-button-hover-text.black {
  color: var(--color--near-black);
}
.primary-button-hover-text.black.medium, .primary-button-hover-text.medium {
  font-weight: var(--font-weight--medium);
}
.primary-button-hover-text.font {
  font-family: var(--font-family--primary-font);
  font-weight: var(--font-weight--medium);
  text-transform: none;
}
.single-button-box {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.style-inner-ttile-box {
  grid-column-gap: 18px;
  grid-row-gap: 18px;
  flex-flow: column;
  display: flex;
}
.style-category-grid-box {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
}
.primary-button-text-wrap {
  z-index: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.style-category-tob-box {
  border-radius: 12px;
  margin-bottom: 9px;
  padding: 24px 18px;
}
.style-category-tob-box.secondary-color-two {
  color: var(--color--near-black);
  background-color: #f6f6f8;
  margin-top: 45px;
}
.style-category-tob-box.secondary-color {
  color: var(--color--near-black);
  font-size: var(--_typography---paragraph-large--font-size);
  font-weight: var(--font-weight--medium);
  background-color: #f6f6f8;
}
.primary-button-content {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.primary-button-content.left {
  justify-content: flex-start;
  align-items: center;
}
.color-card {
  min-height: 315px;
}
.color-card.linear {
  background-color: var(--color--cool-gray);
}
.color-card.yellow {
  border: 1px solid var(--color--gunmetal-gray);
  background-color: var(--color--yellow);
}
.color-card.stroke-color {
  border: 1px solid var(--color--jet-black);
  background-color: var(--color--gunmetal-gray);
}
.color-card.white {
  background-color: var(--color--white);
}
.color-card.field-color {
  border: 1px solid var(--color--charcoal-gray);
  background-color: var(--color--near-black);
}
.color-card.secondary-text-color {
  background-color: var(--color--charcoal-gray);
}
.color-card.gainsboro {
  background-color: var(--color--light-gray);
}
.color-card.white-smoke {
  background-color: var(--color--snow-gray);
}
.style-category-box {
  justify-content: space-between;
  align-items: stretch;
}
.color-grid-box-wrap {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.color-grid-box-wrap.two {
  grid-row-gap: 40px;
  grid-template-rows: auto auto;
}
.style-single-wrap {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  display: flex;
}
.primary-button-text {
  font-family: var(--font-family--secondary-font);
  color: var(--color--near-black);
  line-height: var(--line-height--line-height-m);
  text-transform: uppercase;
}
.primary-button-text.white {
  color: var(--color--white);
}
.primary-button-text.white.medium, .primary-button-text.medium {
  font-weight: var(--font-weight--medium);
}
.primary-button-text.font {
  font-family: var(--font-family--primary-font);
  font-weight: var(--font-weight--medium);
  text-transform: none;
}
.style-catagory-text {
  font-size: 22px;
  font-weight: 400;
  line-height: 26px;
}
.style-sub-title {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.style-wrapper {
  max-width: 1248px;
  margin-left: auto;
  margin-right: auto;
}
.style-scale-category-box {
  justify-content: flex-start;
  align-items: center;
}
.dot {
  border-radius: var(--_spacing---radius--circle-round);
  background-color: var(--color--cool-gray);
  width: 8px;
  min-width: 8px;
  height: 8px;
  min-height: 8px;
}
.style-color-box-wrapper {
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}
.primary-button-icon-wrap {
  z-index: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.color-wrap {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  flex-flow: column;
  display: flex;
}
.style-title-wrap {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}
.color-code-box {
  color: var(--color--near-black);
  background-color: #fff;
  border-radius: 40px;
  padding: 10px 16px;
  position: absolute;
  bottom: 18px;
  left: 18px;
}
.primary-button-icon {
  z-index: 1;
  position: relative;
}
.style-wrap {
  grid-column-gap: 130px;
  grid-row-gap: 130px;
  flex-flow: column;
  display: flex;
}
.primary-button-hover-icon {
  opacity: 0;
  position: absolute;
}
.footer-wized-title {
  font-family: var(--font-family--secondary-font);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.subscribe-field {
  min-height: 62px;
  margin-bottom: var(--_spacing---margin-padding--space-none);
  padding: 5.5px var(--_spacing---margin-padding--space-none) 25.5px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--color--transparent) var(--color--transparent) var(--color--charcoal-gray);
  background-color: var(--color--transparent);
  color: var(--color--cool-gray);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--font-weight);
  font-weight: var(--_typography---heading-h5--font-weight);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.subscribe-field:focus {
  border-color: var(--color--transparent) var(--color--transparent) var(--color--yellow);
  background-color: var(--color--transparent);
  color: var(--color--white);
}
.subscribe-field::placeholder {
  color: var(--color--cool-gray);
}
.footer-flex-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-7xl);
  grid-row-gap: var(--_spacing---margin-padding--space-7xl);
  flex-flow: column;
  display: flex;
}
.footer-logo-box {
  justify-content: flex-start;
  align-items: flex-start;
}
.footer-bottom-content {
  color: #767877;
  font-size: 14px;
}
.link {
  transition: all .45s;
}
.link:hover {
  color: var(--color--yellow);
}
.footer-left-box {
  grid-column-gap: var(--_spacing---margin-padding--space-md);
  grid-row-gap: var(--_spacing---margin-padding--space-md);
  border-bottom: 1px solid var(--color--jet-black);
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  max-width: 598px;
  padding-bottom: 50px;
  display: flex;
}
.subscribe-title {
  margin-bottom: var(--_spacing---margin-padding--space-s);
}
.footer-bottom-box {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: wrap;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.container {
  max-width: 1358px;
  padding-right: var(--_spacing---margin-padding--container);
  padding-left: var(--_spacing---margin-padding--container);
  margin-left: auto;
  margin-right: auto;
}
.container.project {
  max-width: 100%;
  padding-right: var(--_spacing---margin-padding--space-none);
  padding-left: var(--_spacing---margin-padding--space-none);
}
.container.review {
  width: 100%;
  height: 300vh;
}
.container.gols {
  height: 200vh;
  position: relative;
}
.footer-right-wrap {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  display: flex;
}
.submit-button-two {
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--charcoal-gray);
  font-family: var(--font-family--secondary-font);
  color: var(--color--white);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  text-transform: uppercase;
  margin-right: 0;
  padding: 10px 16px;
  transition: all .55s;
  position: absolute;
  inset: 0% 0% auto auto;
}
.submit-button-two:hover {
  background-color: var(--color--yellow);
  color: var(--color--near-black);
}
.footer-logo {
  max-width: 242px;
  max-height: 45px;
}
.footer-single-widget {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.footer-menu {
  font-family: var(--font-family--secondary-font);
  color: var(--color--light-gray);
  text-transform: uppercase;
  transition: all .4s;
}
.footer-menu:hover {
  color: #fff;
  transform: translate(10px);
}
.error-message {
  border-radius: var(--_spacing---radius--radius-s);
  color: #fff;
  text-align: center;
  background-color: red;
}
.error-message.footer {
  max-width: 348px;
}
.successful-massage {
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--yellow);
  color: var(--color--near-black);
  padding: 16px;
}
.footer-wedget-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 350px;
  display: flex;
}
.footer-inner-flex {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: row;
  justify-content: space-between;
  display: flex;
}
.form-block {
  margin-bottom: 0;
}
.subscribe-field-wrap {
  margin-top: var(--_spacing---margin-padding--space-xl);
  border-radius: 40px;
  position: relative;
}
.change-log-wrap {
  max-width: 1248px;
  padding: var(--_spacing---margin-padding--space-l);
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  background-color: var(--color--gunmetal-gray);
  border-radius: 20px;
  flex-flow: column;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  overflow: hidden;
}
.licenses-image-single-grid-two {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-rows: auto;
  grid-template-columns: minmax(200px, 502px) minmax(200px, 716px);
}
.licenses-flex {
  grid-column-gap: 140px;
  grid-row-gap: 140px;
  flex-flow: column;
  max-width: 1248px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.licenses-image-single-grid {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-rows: auto;
  grid-template-columns: minmax(200px, 716px) minmax(200px, 502px);
}
.license-image-left-box, .license-image-right-box {
  border-radius: var(--_spacing---radius--radius-x);
  overflow: hidden;
}
.licenses-image-grid-wrap {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  margin-top: 40px;
  display: flex;
}
.license-icon-divider {
  background-color: #c9c9c9;
  width: 1px;
  height: 30px;
}
.licenses-image-title {
  margin-top: 12px;
  margin-bottom: var(--_spacing---margin-padding--space-xs);
}
.license-image-description {
  max-width: 905px;
  color: var(--color--cool-gray);
}
.license-image-description.icon {
  max-width: 716px;
}
.license-image-description.font {
  max-width: 744px;
}
.licenses-icon-grid-wrap {
  grid-column-gap: 80px;
  grid-row-gap: 24px;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  margin-top: 40px;
  display: flex;
}
.subtotal {
  font-size: 20px;
  font-weight: 550;
}
.navbar-logo-link {
  justify-content: flex-start;
  align-items: center;
  padding-left: 0;
  display: flex;
}
.nav-link-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 74px;
  margin-right: 0;
  display: flex;
}
.nav-link-wrapper.second {
  max-width: 215px;
  margin-right: 0;
  padding-right: 0;
}
.nav-link-wrapper._3rd {
  max-width: 100%;
  margin-right: 0;
  padding-right: 0;
}
.nav-hamburger-icon {
  opacity: 1;
  width: 24px;
  display: block;
  position: absolute;
}
.navbar-content {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.cart-container {
  border-radius: var(--_spacing---radius--radius-x);
  background-color: var(--color--gunmetal-gray);
  color: var(--color--white);
}
.cart-quantity {
  color: #191919;
  background-color: #fff;
  justify-content: center;
  align-items: center;
  min-width: 14px;
  height: 14px;
  padding-left: 0;
  padding-right: 0;
  font-size: 10px;
  font-weight: 400;
  line-height: 100%;
  display: flex;
  position: absolute;
  top: -10%;
  right: -50%;
}
.cart-quantity.white {
  background-color: var(--color--white);
  color: var(--color--near-black);
}
.nav-menu-flex {
  grid-column-gap: 100px;
  grid-row-gap: 100px;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  display: flex;
}
.cart-button {
  background-color: #0000;
  padding: 0;
  position: relative;
}
.close-button {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  display: flex;
}
.menu-button-wrap {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}
.navbar-right-content {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.nav-hamburger-button {
  z-index: 201;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  transition: background-color .3s;
  display: flex;
}
.cart-quantity-2 {
  display: none;
}
.nav-close-ccon {
  opacity: 0;
  width: 24px;
  position: absolute;
}
.error-state {
  color: #fff;
  text-align: center;
  background-color: red;
  border-radius: 10px;
}
.desktop {
  display: block;
}
.mobile {
  display: none;
}
.nav-right-btn-wrap {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  display: flex;
}
.menu-button {
  padding: 0;
}
.nav-menu {
  color: var(--color--cool-gray);
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  transition: all .5s;
  overflow: hidden;
}
.nav-menu:hover {
  color: var(--color--white);
  transform: translate(8px);
}
.nav-menu[aria-current="page"], .nav-menu.is-active {
  color: var(--color--white);
}
.nav-link {
  font-family: var(--font-family--secondary-font);
  color: var(--color--light-gray);
  text-transform: uppercase;
  padding: 0;
  text-decoration: none;
  transition: all .5s;
}
.nav-link:hover {
  color: var(--color--white);
}
.nav-link[aria-current="page"], .nav-link.is-active {
  color: #fff;
}
.nav-link.hero[aria-current="page"], .nav-link.hero.is-active {
  color: var(--color--white);
}
.nav-menu-content {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.navbar {
  border-bottom: 1px solid var(--color--charcoal-gray);
  background-color: var(--color--rich-black);
  padding-top: 16px;
  padding-bottom: 16px;
  transition: background-color .3s;
  position: absolute;
  inset: 0% 0% auto;
}
.your-cart, .remove-button {
  color: #fff;
}
.nav-dropdown-left-wrap {
  grid-column-gap: 0px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  place-items: start stretch;
  display: grid;
}
.checkout-button {
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--white);
  color: var(--color--near-black);
  transition: all .55s;
}
.checkout-button:hover {
  background-color: var(--color--yellow);
}
.nav-menu-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}
.auto-container {
  max-width: 1358px;
  padding-right: var(--_spacing---margin-padding--container);
  padding-left: var(--_spacing---margin-padding--container);
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.primary-button-wrapper-two.mobile {
  display: none;
}
.primary-button-wrapper-two.desktop {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.remove {
  font-size: 20px;
  font-weight: 550;
}
.accordion-title {
  color: var(--color--near-black);
  font-size: var(--_typography---heading-h6--font-size);
  font-weight: var(--font-weight--medium);
  white-space: normal;
  margin-top: 0;
  margin-bottom: 0;
}
.main-button-hover-text {
  color: var(--color--near-black);
  text-transform: uppercase;
  font-family: DM Mono, sans-serif;
  position: absolute;
}
.accordion-icon-wrapper {
  border-radius: var(--_spacing---radius--circle-round);
  background-color: var(--color--yellow);
  flex: none;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
  position: relative;
}
.accordion-description-wrap {
  background-color: #0000;
  width: 100%;
  position: static;
}
.accordion-text-wrap {
  max-width: 562px;
  padding-bottom: 16px;
}
.main-button-text {
  z-index: 1;
  color: var(--color--near-black);
  text-transform: uppercase;
  font-family: DM Mono, sans-serif;
  position: relative;
}
.faq-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.inner-title-box.faq {
  margin-bottom: var(--_spacing---margin-padding--space-md);
}
.accordion-icon-in {
  max-width: 24px;
  max-height: 24px;
}
.accordion {
  border-bottom: 1px solid var(--color--yellow);
  flex-flow: column;
  width: 100%;
  padding-bottom: 4px;
  display: flex;
  position: static;
  overflow: hidden;
}
.inner-title.faq {
  color: var(--color--near-black);
}
.faq-left-box {
  width: 100%;
  max-width: 468px;
  position: sticky;
  top: 120px;
}
.faq-right-box {
  width: 100%;
  max-width: 654px;
}
.accordion-title-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  color: #fff;
  justify-content: space-between;
  align-items: center;
  margin-left: 0;
  margin-right: 0;
  padding: 24px 0 20px;
  display: flex;
  position: static;
}
.secondary-text {
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
}
.secondary-text.white {
  color: var(--color--white);
}
.secondary-text.black-05 {
  color: var(--color--light-gray);
}
.secondary-button {
  z-index: 1;
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--charcoal-gray);
  padding: 10px 16px;
  text-decoration: none;
  position: relative;
}
.large-button {
  z-index: 1;
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--yellow);
  padding: 17px 30px;
  text-decoration: none;
  position: relative;
}
.primary-button-hover-icon-2 {
  position: absolute;
}
.secondary-button-icon-box {
  justify-content: center;
  align-items: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  display: flex;
}
.footer-address-email-box {
  margin-top: var(--_spacing---margin-padding--space-xs);
  margin-bottom: 4px;
}
.icon-wrapper {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  display: flex;
}
.icon-box {
  background-color: var(--color--charcoal-gray);
  border-radius: 80px;
  justify-content: center;
  align-items: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.socal-icon-image {
  z-index: 2;
  max-width: 10px;
  max-height: 17px;
}
.socal-icon-image.x {
  max-width: 17px;
  max-height: 16px;
}
.socal-icon-image.youtube {
  max-width: 21px;
  max-height: 16px;
}
.socal-icon-hover-image {
  z-index: 2;
  opacity: 0;
  max-width: 10px;
  max-height: 17px;
  position: absolute;
}
.socal-icon-hover-image.x {
  max-width: 17px;
  max-height: 16px;
}
.socal-icon-hover-image.youtube {
  max-width: 21px;
  max-height: 16px;
}
.socal-hover-box {
  z-index: 1;
  background-color: var(--color--yellow);
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
}
.footer-right-box {
  justify-content: space-between;
  width: 100%;
  max-width: 658px;
  display: flex;
}
.font-flex {
  grid-column-gap: var(--_spacing---margin-padding--space-md);
  grid-row-gap: var(--_spacing---margin-padding--space-md);
  flex-flow: wrap;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.blog-collection-list {
  grid-column-gap: 20px;
  grid-row-gap: 30px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.blog-image-box {
  border-radius: var(--_spacing---radius--radius-x);
  overflow: hidden;
}
.blog-image-box.image-02 {
  width: 100%;
  max-width: 100%;
  height: 290px;
}
.blog-image {
  transition: all 1s;
}
.blog-image:hover {
  transform: scale(1.05);
}
.blog-card-content-wrap {
  margin-top: var(--_spacing---margin-padding--space-smd);
}
.blog-post-date {
  color: var(--color--charcoal-gray);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
}
.blog-card-divider {
  background-color: var(--color--light-gray);
  width: 100%;
  height: 1px;
  margin-top: 8px;
}
.blog-card-name-box {
  max-width: 506px;
  margin-top: var(--_spacing---margin-padding--space-smd);
  margin-bottom: var(--_spacing---margin-padding--space-sm);
}
.blog-card-name {
  color: var(--color--rich-black);
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  font-weight: var(--_typography---heading-h4--font-weight);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
}
.blog-card-title {
  margin-bottom: var(--_spacing---margin-padding--space-xl);
  color: var(--color--jet-black);
}
.blog-single-title-box {
  max-width: 490px;
  margin-bottom: 6px;
}
.blog-single-title {
  max-width: none;
}
.blog-single-image-box {
  margin-top: var(--_spacing---margin-padding--space-xl);
  border-radius: var(--_spacing---radius--radius-x);
  overflow: hidden;
}
.image-wrap {
  position: relative;
  overflow: hidden;
}
.view-image-overlay {
  background-color: #010101;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 100% 0% 0%;
}
.view-image-overlay.charcoal-gray {
  background-color: #151515;
}
.blog-post {
  overflow: visible;
}
.blog-post h4:where(:not([class*="heading-scale-"])), .blog-post :where(.heading-scale-4) {
  margin-top: var(--_spacing---margin-padding--space-2xl);
  margin-bottom: 6px;
}
.blog-post p {
  margin-top: var(--_spacing---margin-padding--space-xs);
  color: var(--color--light-gray);
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  font-weight: var(--_typography---paragraph-large--font-weight);
}
.blog-post img {
  margin-top: var(--_spacing---margin-padding--space-2xl);
  border-radius: var(--_spacing---radius--radius-x);
}
.blog-post ul {
  margin-top: var(--_spacing---margin-padding--space-xs);
  color: var(--color--light-gray);
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  padding-left: 24px;
}
.blog-post blockquote {
  margin-top: var(--_spacing---margin-padding--space-2xl);
  margin-bottom: var(--_spacing---margin-padding--space-none);
  padding: var(--_spacing---margin-padding--space-l) var(--_spacing---margin-padding--space-l) 80px;
  border-radius: var(--_spacing---radius--radius-x);
  background-color: var(--color--jet-black);
  color: var(--color--white);
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  font-weight: var(--_typography---heading-h4--font-weight);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
  border-left-style: none;
  position: relative;
}
.blog-post strong {
  left: var(--_spacing---margin-padding--space-l);
  top: auto;
  right: auto;
  bottom: var(--_spacing---margin-padding--space-l);
  color: var(--color--white);
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  font-weight: var(--_typography---paragraph-large--font-weight);
  position: absolute;
}
.blog-post h5:where(:not([class*="heading-scale-"])), .blog-post :where(.heading-scale-5) {
  font-size: var(--_typography---heading-h6--font-size);
  font-weight: var(--font-weight--medium);
}
.blog-post h6:where(:not([class*="heading-scale-"])), .blog-post :where(.heading-scale-6) {
  margin-top: var(--_spacing---margin-padding--space-l);
  color: var(--color--white);
  margin-bottom: 6px;
}
.blog-post-wrap {
  max-width: 878px;
  margin-top: var(--_spacing---margin-padding--space-md);
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
}
.blod-post-date-wrap {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.blog-writer-box {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-introduction-box {
  margin-top: var(--_spacing---margin-padding--space-6xl);
}
.blog-introduction-title {
  margin-bottom: var(--_spacing---margin-padding--space-s);
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  font-weight: var(--_typography---heading-h4--font-weight);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
}
.blog-hero-wrap {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}
.blog-hero-title-box {
  max-width: 759px;
}
.blog-hero-title {
  margin-bottom: var(--_spacing---margin-padding--space-md);
}
.feature-blog-post-wrap {
  margin-top: var(--_spacing---margin-padding--space-7xl);
  grid-column-gap: var(--_spacing---margin-padding--space-md);
  grid-row-gap: var(--_spacing---margin-padding--space-md);
  flex-flow: column;
  display: flex;
}
.primary-text {
  color: var(--color--cool-gray);
  font-size: var(--_typography---heading-h6--font-size);
  line-height: var(--_typography---heading-h6--line-height);
}
.primary-text.uparcase {
  text-transform: uppercase;
}
.primary-text.slate-blue-gray {
  color: var(--color--light-gray);
}
.feature-blog-post {
  border-radius: var(--_spacing---radius--radius-x);
  width: 100%;
  max-width: 1300px;
  display: flex;
  overflow: hidden;
}
.feature-blog-image-box {
  max-width: 59%;
  overflow: hidden;
}
.feature-blog-content-box {
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  background-color: var(--color--gunmetal-gray);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 41%;
  padding: 66px 57px 75px 50px;
  display: flex;
}
.feature-blog-title-box {
  width: 100%;
}
.feature-blog-title {
  font-size: var(--_typography---heading-h3--font-size);
  line-height: var(--_typography---heading-h3--line-height);
  font-weight: var(--_typography---heading-h4--font-weight);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
}
.feature-read-title {
  margin-top: var(--_spacing---margin-padding--space-sm);
}
.blog-feature-image {
  transition: all 1s;
}
.blog-feature-image:hover {
  transform: scale(1.05);
}
.project-single-card {
  background-color: var(--color--gunmetal-gray);
  padding-top: 56px;
  padding-bottom: 56px;
  overflow: hidden;
}
.project-single-card-grid {
  grid-column-gap: 2%;
  grid-row-gap: 2%;
  grid-template-rows: auto;
  grid-template-columns: 40% 58%;
}
.project-single-card-left-box {
  grid-column-gap: var(--_spacing---margin-padding--space-l);
  grid-row-gap: var(--_spacing---margin-padding--space-l);
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}
.project-card-number {
  margin-bottom: var(--_spacing---margin-padding--space-s);
  font-family: var(--font-family--secondary-font);
  color: var(--color--cool-gray);
}
.project-card-title {
  font-size: var(--_typography---heading-h3--font-size);
  line-height: var(--_typography---heading-h3--line-height);
  font-weight: var(--_typography---heading-h3--font-weight);
  letter-spacing: var(--_typography---heading-h3--letter-spacing);
}
.project-card-title._1, .project-card-title._2, .project-card-title._3 {
  color: var(--color--cool-gray);
}
.project-card-description {
  max-width: 317px;
  font-family: var(--font-family--secondary-font);
  color: var(--color--white);
  text-transform: uppercase;
}
.project-card-image-box-wrap {
  position: relative;
  overflow: hidden;
}
.project-card-image {
  transition: all 1s;
}
.project-card-image:hover {
  transform: scale(1.05);
}
.view-button-content {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.view-button-icon-box {
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  display: flex;
}
.view-button-hover-text {
  font-family: var(--font-family--secondary-font);
  color: var(--color--near-black);
  text-transform: uppercase;
  position: absolute;
}
.view-button-hover-text.white {
  color: var(--color--white);
}
.view-button-text {
  z-index: 1;
  font-family: var(--font-family--secondary-font);
  color: var(--color--near-black);
  text-transform: uppercase;
  position: relative;
}
.view-button-text.white {
  color: var(--color--white);
}
.primary-button-hover-icon-3 {
  position: absolute;
}
.primary-button-perview {
  z-index: 1;
  background-color: var(--color--yellow);
  width: 100%;
  padding: 10px 14px 10px 16px;
  position: relative;
}
.primary-button-perview.slider {
  background-color: var(--color--charcoal-gray);
}
.view-button-box {
  position: absolute;
  inset: auto 0% 0%;
}
.project-collection-list {
  grid-column-gap: var(--_spacing---margin-padding--space-s);
  grid-row-gap: var(--_spacing---margin-padding--space-s);
  flex-flow: column;
  display: flex;
}
.project-hero-wrap {
  padding-top: var(--_spacing---margin-padding--space-4xl);
  padding-bottom: var(--_spacing---margin-padding--space-2xl);
  border-right: 1px solid var(--color--gunmetal-gray);
  border-left: 1px solid var(--color--gunmetal-gray);
}
.project-hero-title {
  max-width: 566px;
  margin-left: 225px;
}
.project-title-bottom-box {
  margin-top: var(--_spacing---margin-padding--space-l);
  justify-content: space-between;
  display: flex;
}
.project-title-bottom-left-box {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  max-width: 399px;
  display: flex;
}
.project-description {
  text-align: right;
  max-width: 233px;
}
.project-single-title-box-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: wrap;
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.project-single-title-box {
  max-width: 329px;
}
.project-singel-left-box {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.project-dot {
  background-color: #ff2151;
  width: 8px;
  height: 8px;
}
.project-single-image-box {
  margin-top: var(--_spacing---margin-padding--space-md);
  margin-bottom: var(--_spacing---margin-padding--space-md);
  border-radius: var(--_spacing---radius--radius-x);
  overflow: hidden;
}
.project-single-flex-box {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 6px;
  display: flex;
}
.project-single-left-box {
  top: var(--_spacing---margin-padding--space-sm);
  width: 100%;
  max-width: 317px;
  padding: var(--_spacing---margin-padding--space-md);
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--gunmetal-gray);
  position: sticky;
}
.project-single-right-box {
  grid-column-gap: var(--_spacing---margin-padding--space-l);
  grid-row-gap: var(--_spacing---margin-padding--space-l);
  flex-flow: column;
  width: 100%;
  max-width: 879px;
  display: flex;
}
.project-list {
  grid-column-gap: var(--_spacing---margin-padding--space-md);
  grid-row-gap: var(--_spacing---margin-padding--space-md);
  flex-flow: column;
  display: flex;
}
.project-list-item {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.primary-text-medium {
  font-size: var(--_typography---heading-h6--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--_typography---heading-h6--letter-spacing);
}
.primary-text-medium.white {
  color: var(--color--white);
}
.primary-text-medium.yellow {
  color: var(--color--yellow);
}
.primary-text-medium.black-01 {
  color: var(--color--near-black);
}
.project-single-box {
  grid-column-gap: var(--_spacing---margin-padding--space-s);
  grid-row-gap: var(--_spacing---margin-padding--space-s);
  flex-flow: column;
  display: flex;
}
.project-single-box.last {
  margin-top: var(--_spacing---margin-padding--space-md);
}
.project-common-image-box {
  margin-bottom: var(--_spacing---margin-padding--space-md);
  border-radius: var(--_spacing---radius--radius-s);
  overflow: hidden;
}
.project-common-image-box.margin-none {
  margin-bottom: var(--_spacing---margin-padding--space-none);
}
.project-address-box {
  grid-column-gap: var(--_spacing---margin-padding--space-s);
  grid-row-gap: var(--_spacing---margin-padding--space-s);
  flex-flow: column;
  display: flex;
}
.project-address-single-box {
  border-bottom: 1px solid var(--color--gunmetal-gray);
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  display: flex;
}
.project-single-flex {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.project-single-grid {
  margin-bottom: var(--_spacing---margin-padding--space-md);
  grid-column-gap: var(--_spacing---margin-padding--space-sm);
  grid-row-gap: var(--_spacing---margin-padding--space-sm);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.related-projects-wrap {
  position: sticky;
  top: 120px;
}
.related-projects-title-box {
  max-width: 522px;
  margin-bottom: var(--_spacing---margin-padding--space-xl);
}
.title-black {
  color: var(--color--cool-gray);
}
.related-projects-card-wrap {
  display: flex;
}
.recent-projects-single-card {
  background-color: var(--color--gunmetal-gray);
  padding: 56px;
  overflow: hidden;
}
.contact-hero-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-md);
  grid-row-gap: var(--_spacing---margin-padding--space-md);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.contact-form-block {
  margin-bottom: 0;
}
.contract-list-item {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.gray-color {
  color: #959595;
}
.send-now-button {
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--yellow);
  font-family: var(--font-family--secondary-font);
  color: var(--color--near-black);
  font-size: var(--_typography---paragraph--font-size);
  font-weight: var(--font-weight--medium);
  text-transform: uppercase;
  padding: 17px 30px;
  transition: all .55s;
}
.send-now-button:hover {
  background-color: var(--color--light-gray);
}
.container-left-box {
  width: 100%;
  max-width: 205px;
  position: sticky;
  top: 120px;
}
.container-right-box {
  width: 100%;
  max-width: 767px;
}
.labels {
  color: var(--color--white);
  margin-bottom: 12px;
}
.container-wrap {
  grid-column-gap: 65px;
  grid-row-gap: 65px;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 1104px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.contract-list {
  margin-top: var(--_spacing---margin-padding--space-l);
  grid-column-gap: var(--_spacing---margin-padding--space-smd);
  grid-row-gap: var(--_spacing---margin-padding--space-smd);
  flex-flow: column;
  display: flex;
}
.contract-location-box {
  background-color: var(--color--yellow);
  border-radius: 12px;
  padding: 6px 12px;
  display: inline-block;
}
.field {
  border: 1px solid var(--color--gunmetal-gray);
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--gunmetal-gray);
  min-height: 54px;
  color: var(--color--cool-gray);
  margin-bottom: 0;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
  transition: all .5s;
}
.field:focus {
  border-color: var(--color--yellow);
  color: var(--color--white);
}
.field::placeholder {
  color: var(--color--cool-gray);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--font-weight--regular);
}
.contract-field-box {
  margin-bottom: 24px;
}
.hq-text {
  font-family: var(--font-family--secondary-font);
  color: var(--color--near-black);
  font-weight: var(--font-weight--medium);
}
.contact-address-title {
  font-family: var(--font-family--secondary-font);
  color: var(--color--cool-gray);
  font-weight: var(--font-weight--medium);
  text-transform: uppercase;
}
.textareea {
  border: 1px solid var(--color--gunmetal-gray);
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--gunmetal-gray);
  min-height: 176px;
  color: var(--color--cool-gray);
  margin-bottom: 0;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
  transition: all .5s;
}
.textareea:focus {
  border-color: var(--color--yellow);
  color: var(--color--white);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
}
.textareea::placeholder {
  color: var(--color--cool-gray);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--font-weight--regular);
}
.pricing-tab-active-background {
  background-color: var(--color--mint-aqua);
  border-radius: 8px;
  width: 100%;
}
.pricing-tabs-content {
  margin-top: 30px;
}
.pricing-tab-link {
  background-color: var(--color--transparent);
  width: 50%;
  color: var(--color--white);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 10px;
  display: flex;
}
.pricing-tab-link:hover {
  color: #fff;
}
.pricing-tab-link[aria-current="page"], .pricing-tab-link.is-active {
  background-color: #0000;
  padding: 10px;
}
.pricing-tab-link.first {
  color: var(--color--near-black);
}
.pricing-tab-active {
  display: flex;
  position: absolute;
  inset: 0%;
}
.pricing-tabs {
  margin-top: var(--_spacing---margin-padding--space-4xl);
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
.pricing-tab-text {
  position: relative;
}
.pricing-tabs-menu {
  background-color: #151515;
  border-radius: 12px;
  justify-content: flex-end;
  max-width: 157px;
  min-height: 50px;
  margin-left: auto;
  margin-right: auto;
  padding: 4px;
  display: flex;
}
.default-state {
  margin-bottom: 0;
}
.feature-title {
  color: var(--color--white);
  font-size: var(--_spacing---margin-padding--space-s);
}
.plan-single-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  max-width: 879px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.plan-single-wrapper {
  background-color: #151515;
  border-radius: 22px;
  padding: 30px;
}
.our-plan {
  letter-spacing: -.48px;
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 500;
  line-height: 130%;
}
.plan-feature-list {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  margin-top: 12px;
  margin-bottom: 0;
  display: flex;
}
.plan-short-details-box {
  max-width: 304px;
  margin-bottom: var(--_spacing---margin-padding--space-md);
}
.pricing-single-flex-right-box {
  width: 100%;
  max-width: 420px;
  margin-top: 80px;
  position: relative;
}
.plan-feature-icon {
  max-width: 16px;
  max-height: 16px;
}
.plan-feature-icon.black-04 {
  opacity: .8;
}
.plan-single-title-box-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-md);
  grid-row-gap: var(--_spacing---margin-padding--space-md);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 430px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.display-nome {
  display: none;
}
.primary-text-2 {
  color: #fff;
  letter-spacing: -.2px;
  font-size: 20px;
  font-weight: 400;
}
.primary-text-2.gray-color {
  color: #959595;
}
.plan-price-box {
  margin-top: var(--_spacing---margin-padding--space-md);
  margin-bottom: var(--_spacing---margin-padding--space-m);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}
.add-to-cart-button {
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--yellow);
  font-family: var(--font-family--secondary-font);
  color: var(--color--near-black);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--font-weight--medium);
  letter-spacing: -.2px;
  text-transform: uppercase;
  padding: 16px 30px;
  transition: all .45s;
}
.add-to-cart-button:hover {
  background-color: var(--color--cool-gray);
  color: var(--color--white);
}
.button-group {
  background-color: #151515;
  border-radius: 60px;
  justify-content: space-between;
  align-items: center;
  width: 154px;
  margin-bottom: 0;
  padding: 4px;
  position: absolute;
  top: -80px;
  left: 0%;
}
.plan-feature-icon-box {
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  display: flex;
}
.plan-title-flex {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 12px;
}
.plan-single-left-box {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  max-width: 420px;
  display: flex;
}
.tab-link-tab {
  color: #fff;
  background-color: #0000;
  border-style: none;
  border-radius: 40px;
  margin-right: 0;
  padding: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
}
.tab-link-tab[aria-current="page"], .tab-link-tab.is-active {
  background-color: #fff;
  border-radius: 40px;
  padding: 14px 24px;
}
.tab-link-tab.is-selected {
  background-color: var(--color--yellow);
  color: var(--color--near-black);
}
.plan-feature-list-item {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.pricing-hero-title-box {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 759px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.pricing-hero-title {
  margin-bottom: var(--_spacing---margin-padding--space-md);
}
.pricing-grid {
  padding: var(--_spacing---margin-padding--space-sm);
  grid-column-gap: var(--_spacing---margin-padding--space-none);
  grid-row-gap: var(--_spacing---margin-padding--space-none);
  border-radius: var(--_spacing---radius--radius-x);
  background-color: var(--color--gunmetal-gray);
  grid-template-rows: auto;
  grid-template-columns: 44% 56%;
}
.pricing-single-left-box {
  padding: var(--_spacing---margin-padding--space-md);
  grid-column-gap: var(--_spacing---margin-padding--space-l);
  grid-row-gap: var(--_spacing---margin-padding--space-l);
  flex-flow: column;
  display: flex;
}
.pricing-single-left-box.active {
  border-radius: var(--_spacing---radius--radius-x);
  background-color: #3838384d;
}
.pricign-card-name-box {
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--yellow);
  color: var(--color--near-black);
  padding: 6px 12px;
  display: inline-block;
}
.pricign-card-name-box.active {
  background-color: var(--color--charcoal-gray);
  color: var(--color--white);
}
.pricie-box-wrap {
  margin-top: var(--_spacing---margin-padding--space-md);
  margin-bottom: var(--_spacing---margin-padding--space-m);
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}
.plan-button {
  z-index: 1;
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--charcoal-gray);
  padding: 19px 30px;
  text-decoration: none;
  position: relative;
}
.plan-button.active {
  background-color: var(--color--yellow);
}
.feature-inner-grid {
  grid-column-gap: var(--_spacing---margin-padding--space-l);
  grid-row-gap: var(--_spacing---margin-padding--space-l);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  max-width: 546px;
  margin-top: 12px;
  display: grid;
}
.plan-feature-list-active {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  margin-bottom: 0;
  display: flex;
}
.plan-single-divider {
  width: 100%;
  max-width: 879px;
  height: 1px;
  margin: var(--_spacing---margin-padding--space-2xl) auto;
  background-color: var(--color--jet-black);
}
.brand-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-md);
  grid-row-gap: var(--_spacing---margin-padding--space-md);
  flex-flow: column;
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  overflow: hidden;
}
.primary-tex {
  color: var(--color--white);
  font-size: var(--_typography---heading-h6--font-size);
  line-height: var(--_typography---heading-h6--line-height);
  letter-spacing: var(--_typography---heading-h6--letter-spacing);
}
.primary-tex.center {
  text-align: center;
}
.primary-tex.black-05 {
  color: var(--color--light-gray);
}
.primary-tex.black-03 {
  color: var(--color--charcoal-gray);
}
.logo-content {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: space-between;
  align-items: center;
  display: flex;
  overflow: visible;
}
.logo-block {
  flex: none;
}
.service-single-card {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  border-radius: var(--_spacing---radius--radius-x);
  background-color: var(--color--snow-gray);
  grid-template-rows: auto;
  grid-template-columns: 58% 42%;
  grid-auto-columns: 1fr;
  display: grid;
  overflow: hidden;
}
.service-left-box {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: center;
  padding: 36px 56px 36px 36px;
  display: flex;
}
.service-card-image {
  max-height: 216px;
}
.service-name-box {
  max-width: 325px;
}
.service-card-name {
  color: var(--color--near-black);
  font-size: var(--_typography---heading-h1--font-size);
  line-height: var(--_typography---heading-h1--line-height);
  font-weight: var(--_typography---heading-h1--font-weight);
  letter-spacing: var(--_typography---heading-h1--letter-spacing);
}
.service-card-description-box {
  max-width: 294px;
}
.collection-list {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: flex;
}
.service-single-title-box {
  margin-bottom: var(--_spacing---margin-padding--space-2xl);
}
.service-sinlge-image-box {
  border-radius: var(--_spacing---radius--radius-x);
  overflow: hidden;
}
.service-single-content-wrap {
  margin-top: var(--_spacing---margin-padding--space-2xl);
}
.service-content-divider {
  width: 100%;
  height: .5px;
  margin-top: 12px;
  margin-bottom: var(--_spacing---margin-padding--space-md);
  background-color: var(--color--charcoal-gray);
}
.service-single-content-box {
  max-width: 766px;
  margin-left: auto;
  margin-right: 0;
}
.service-sinlge-common-image-box {
  margin-top: var(--_spacing---margin-padding--space-2xl);
  border-radius: var(--_spacing---radius--radius-x);
  overflow: hidden;
}
.service-sinlge-common-image-grid-box-copy {
  margin-top: var(--_spacing---margin-padding--space-2xl);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  overflow: hidden;
}
.service-common-image-box {
  border-radius: var(--_spacing---radius--radius-x);
  overflow: hidden;
}
.gallery-image-box {
  border-radius: var(--_spacing---radius--radius-l);
  height: 100%;
  overflow: hidden;
}
.gallery-left-box, .gallery-right-box {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}
.gallery-right-box.last {
  justify-content: space-around;
  align-items: stretch;
}
.gallery-grid-box {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: minmax(200px, 372px) minmax(200px, 599px) minmax(200px, 317px);
  grid-auto-columns: 1fr;
  display: grid;
}
.gallery-image {
  object-fit: cover;
}
.gallery-card-ticker-wrap {
  overflow: hidden;
}
.gallery-card-ticker-preview {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.gallery-inner-ticker-wrapper {
  flex: none;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.gallery-single-card {
  border-radius: 10px;
  width: 290px;
  height: 290px;
  margin-right: 14px;
  overflow: hidden;
}
.gallery-single-image {
  object-fit: cover;
}
.explore-title-box {
  max-width: 565px;
  margin-bottom: var(--_spacing---margin-padding--space-l);
}
.span-black-04 {
  color: var(--color--cool-gray);
}
.explore-inner-grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.explore-single-card {
  border-radius: var(--_spacing---radius--radius-l);
  overflow: hidden;
}
.explore-title {
  max-width: 565px;
  margin-bottom: var(--_spacing---margin-padding--space-l);
}
.career-single-card {
  max-width: 904px;
  margin-bottom: var(--_spacing---margin-padding--space-s);
  grid-column-gap: var(--_spacing---margin-padding--space-xs);
  grid-row-gap: var(--_spacing---margin-padding--space-xs);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.career-single-card-left-box {
  min-width: 252px;
}
.career-single-card-center-box {
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  justify-content: flex-start;
  align-items: center;
  min-width: 184px;
  max-width: 184px;
  display: flex;
}
.career-single-card-right-box {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
}
.secondary-text-medium {
  color: var(--color--white);
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  font-weight: var(--font-weight--medium);
}
.secondary-text-medium.black-04 {
  color: var(--color--cool-gray);
}
.career-wrap {
  max-width: 1104px;
  margin-left: auto;
  margin-right: auto;
}
.career-tabs {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  grid-template-rows: auto;
  grid-template-columns: 176px 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  display: grid;
}
.career-tab-link {
  background-color: var(--color--transparent);
  color: var(--color--cool-gray);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--line-height--line-height-xl);
  padding: 0;
}
.career-tab-link[aria-current="page"], .career-tab-link.is-active {
  background-color: var(--color--yellow);
  color: var(--color--near-black);
  border-radius: 8px;
  padding: 8px 13px;
}
.career-tabs-menu {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.career-divider {
  background-color: var(--color--charcoal-gray);
  width: 100%;
  height: 1px;
}
.career-collection-list {
  grid-column-gap: var(--_spacing---margin-padding--space-s);
  grid-row-gap: var(--_spacing---margin-padding--space-s);
  flex-flow: column;
  display: flex;
}
.career-single-title-box {
  margin-bottom: var(--_spacing---margin-padding--space-2xl);
}
.career-info-flex {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  display: flex;
}
.career-info-box {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  flex-flow: column;
  width: 100%;
  display: flex;
}
.career-info-box.three {
  max-width: 205px;
}
.career-info-single-box {
  padding-top: var(--_spacing---margin-padding--space-s);
  border-top: 1px solid var(--color--charcoal-gray);
}
.career-description-box {
  margin-top: var(--_spacing---margin-padding--space-2xl);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  display: flex;
}
.career-post p {
  margin-top: var(--_spacing---margin-padding--space-s);
  color: var(--color--cool-gray);
}
.career-post h4:where(:not([class*="heading-scale-"])), .career-post :where(.heading-scale-4) {
  margin-top: var(--_spacing---margin-padding--space-l);
}
.career-post ul {
  margin-top: var(--_spacing---margin-padding--space-s);
  color: var(--color--cool-gray);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  flex-flow: column;
  padding-left: 30px;
  display: flex;
}
.career-button-box {
  margin-top: var(--_spacing---margin-padding--space-xl);
  margin-bottom: var(--_spacing---margin-padding--space-l);
}
.behind-wrap {
  position: relative;
}
.behind-title-wrap {
  max-width: 644px;
  margin-bottom: var(--_spacing---margin-padding--space-4xl);
}
.behind-title-box {
  margin-bottom: var(--_spacing---margin-padding--space-l);
}
.behind-content-wrap {
  justify-content: space-between;
  display: flex;
}
.behind-content-left-box {
  max-width: 532px;
}
.behind-content-right-box {
  grid-column-gap: var(--_spacing---margin-padding--space-s);
  grid-row-gap: var(--_spacing---margin-padding--space-s);
  flex-flow: column;
  max-width: 542px;
  display: flex;
}
.behind-list-wrap {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  display: flex;
  position: sticky;
  top: 120px;
}
.behind-single-list {
  grid-column-gap: 42px;
  grid-row-gap: 42px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.behind-list-number-box {
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 22px;
  display: flex;
}
.behind-list-number {
  font-family: var(--font-family--secondary-font);
  color: var(--color--cool-gray);
}
.behind-list-title {
  color: var(--color--cool-gray);
}
.behind-list-title._1 {
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  font-weight: var(--_typography---heading-h4--font-weight);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
}
.behind-list-title._2 {
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h3--line-height);
  font-weight: var(--_typography---heading-h3--font-weight);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
}
.behind-single-list-box {
  padding: var(--_spacing---margin-padding--space-l);
  border-radius: var(--_spacing---radius--radius-l);
  background-color: var(--color--gunmetal-gray);
}
.behind-single-list-title {
  margin-bottom: var(--_spacing---margin-padding--space-sm);
}
.behind-description {
  color: var(--color--cool-gray);
  font-weight: var(--font-weight--medium);
}
.team-title-wrap {
  max-width: 788px;
}
.team-title {
  color: var(--color--near-black);
}
.team-title-box {
  margin-bottom: var(--_spacing---margin-padding--space-l);
}
.team-single-card-wrap {
  margin-top: var(--_spacing---margin-padding--space-xl);
}
.team-single-card {
  padding: var(--_spacing---margin-padding--space-md);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.team-single-card-left-box {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 900px;
  display: flex;
}
.team-social-link {
  color: var(--color--charcoal-gray);
}
.team-description-box {
  width: 100%;
  max-width: 305px;
}
.team-about-box {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: flex-start;
  align-items: center;
  min-width: 451px;
  min-height: 86px;
  display: inline-flex;
}
.team-image-box {
  border-radius: var(--_spacing---radius--circle-round);
  justify-content: center;
  align-items: center;
  width: 0;
  min-width: 0;
  height: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
.team-author-box {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}
.team-author-name {
  color: var(--color--near-black);
  font-size: var(--_typography---heading-h3--font-size);
  line-height: var(--_typography---heading-h3--line-height);
  font-weight: var(--_typography---heading-h3--font-weight);
  letter-spacing: var(--_typography---heading-h3--letter-spacing);
}
.team-description {
  font-family: var(--font-family--secondary-font);
  color: var(--color--cool-gray);
  text-transform: uppercase;
}
.spacing-wrap {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.spacing-title-box {
  max-width: 625px;
  margin-bottom: var(--_spacing---margin-padding--space-2xl);
  text-align: center;
  position: sticky;
  top: 120px;
}
.spacing-card-wrap {
  flex-flow: column;
  max-width: 438px;
  display: flex;
}
.spacing-single-card {
  margin-bottom: var(--_spacing---margin-padding--space-s);
  padding: var(--_spacing---margin-padding--space-mld);
  border-radius: var(--_spacing---radius--radius-xl);
  background-color: var(--color--white);
}
.spacing-single-card._2, .spacing-single-card._1, .spacing-single-card._3, .spacing-single-card._4 {
  position: sticky;
  top: 308px;
}
.spacing-card-description {
  color: var(--color--near-black);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.spacing-card-divider {
  width: 100%;
  height: 1px;
  margin-top: var(--_spacing---margin-padding--space-lg);
  margin-bottom: var(--_spacing---margin-padding--space-mld);
  background-color: var(--color--light-gray);
}
.spacing-card-author-box-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-s);
  grid-row-gap: var(--_spacing---margin-padding--space-s);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.spacing-card-author-image-box {
  justify-content: center;
  align-items: center;
  width: 55px;
  height: 55px;
  display: flex;
}
.process-wrap {
  grid-column-gap: 50px;
  grid-row-gap: 30px;
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  display: flex;
}
.process-left-box {
  max-width: 605px;
}
.process-right-box {
  max-width: 663px;
  display: flex;
}
.process-title-box-wrap {
  position: sticky;
  top: 120px;
}
.process-title {
  margin-bottom: var(--_spacing---margin-padding--space-l);
  color: var(--color--near-black);
}
.process-single-card-title {
  margin-bottom: var(--_spacing---margin-padding--space-m);
  color: var(--color--near-black);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  font-weight: var(--_typography---heading-h5--font-weight);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.process-divider {
  width: 100%;
  height: 1px;
  margin-top: var(--_spacing---margin-padding--space-md);
  background-color: var(--color--light-gray);
}
.process-single-card-wrap {
  margin-left: var(--_spacing---margin-padding--space-md);
  grid-column-gap: var(--_spacing---margin-padding--space-md);
  grid-row-gap: var(--_spacing---margin-padding--space-md);
  flex-flow: column;
  display: flex;
}
.process-scroll-divider {
  background-color: var(--color--light-gray);
  width: 3px;
  position: relative;
}
.process-scroll-divider-in {
  background-color: var(--color--yellow);
  width: 3px;
  position: absolute;
  inset: 0%;
}
.video-size-wrap {
  height: 300vh;
}
.video-sticky-wrap {
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}
.video-image-wrapper {
  pointer-events: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}
.video-image-wrap {
  pointer-events: auto;
  justify-content: center;
  align-items: center;
  width: 38%;
  height: 35%;
  display: flex;
  position: relative;
}
.video-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.goals-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.goals-title-box {
  max-width: 788px;
  margin-bottom: var(--_spacing---margin-padding--space-2xl);
}
.goals-title {
  margin-bottom: var(--_spacing---margin-padding--space-l);
}
.goals-single-card {
  width: 429px;
  min-width: 429px;
}
.goals-inner-icon-box {
  border: 1px solid var(--color--white);
  width: 59px;
  height: 59px;
}
.goals-inner-icon-box.right {
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
}
.goals-inner-icon-box.center {
  justify-content: center;
  align-items: center;
  display: flex;
}
.goals-inner-icon-box.left {
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.goals-inner-icon-box-two {
  background-color: #d9d9d9;
  width: 29px;
  height: 29px;
}
.goals-inner-title {
  margin-top: var(--_spacing---margin-padding--space-l);
  margin-bottom: var(--_spacing---margin-padding--space-s);
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  font-weight: var(--_typography---heading-h4--font-weight);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
}
.goals-divider {
  width: 100%;
  height: 1px;
  margin-top: var(--_spacing---margin-padding--space-l);
  background-color: var(--color--charcoal-gray);
}
.last-goals-description {
  max-width: 399px;
}
.brand-single-card {
  flex: none;
  justify-content: center;
  align-items: center;
  min-width: 238px;
  display: flex;
}
.ticker-wrapper {
  grid-column-gap: 108px;
  grid-row-gap: 108px;
  flex-flow: row;
  display: flex;
  overflow: hidden;
}
.ticker-item-wrap {
  grid-column-gap: 108px;
  grid-row-gap: 108px;
  flex-flow: row;
  flex: none;
  display: flex;
}
.brand-wraps {
  position: relative;
}
.brand-wraps.margin-top {
  margin-top: var(--_spacing---margin-padding--space-2xl);
}
.brand-title-box {
  max-width: 550px;
}
.brand-title {
  color: var(--color--near-black);
}
.brand-span {
  color: var(--color--cool-gray);
}
.about-wrap {
  grid-column-gap: 11%;
  grid-row-gap: 11%;
  grid-template-rows: auto;
  grid-template-columns: 62.5% 26.5%;
  grid-auto-columns: 1fr;
  display: grid;
}
.about-left-content-box {
  margin-bottom: var(--_spacing---margin-padding--space-l);
  grid-column-gap: var(--_spacing---margin-padding--space-s);
  grid-row-gap: var(--_spacing---margin-padding--space-s);
  flex-flow: column;
  display: flex;
}
.about-right-box {
  padding: var(--_spacing---margin-padding--space-md);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--snow-gray);
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}
.about-rating-box {
  background-color: var(--color--yellow);
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
}
.about-rating-box-wrap {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.home-whole-counter {
  justify-content: flex-end;
  height: 72px;
  display: flex;
  overflow: hidden;
}
.counter-marque {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  overflow: hidden;
}
.counter-marque-two {
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}
.laboratory-counter-wrapper {
  justify-content: flex-end;
  display: flex;
}
.laboratory-counter-wrapper.two {
  margin-bottom: 8px;
}
.counter-train-two {
  flex-flow: column-reverse;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.hero-counter-single-two {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 159px;
  display: flex;
}
.heading-three {
  color: var(--color--gunmetal-gray);
  font-size: var(--_typography---heading-h1--font-size);
  line-height: 72px;
  font-weight: var(--_typography---heading-h1--font-weight);
}
.counter-train {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.about-content {
  color: var(--color--near-black);
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  font-weight: var(--_typography---heading-h4--font-weight);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
}
.about-hero-image-wrap {
  flex: none;
  display: flex;
}
.about-hero-single-image-box {
  border-radius: 0;
  width: 386px;
  height: 364px;
  margin-right: 20px;
  transition: all .5s;
  overflow: hidden;
}
.about-hero-single-image-box:hover {
  border-radius: 200px;
}
.about-hero-title {
  max-width: 643px;
  margin-left: 225px;
}
.span-about {
  color: var(--color--cool-gray);
}
.about-banner-ticker-wrap {
  margin-top: var(--_spacing---margin-padding--space-2xl);
  overflow: hidden;
}
.about-banner-ticker {
  display: flex;
}
.relative-hero {
  max-width: 496px;
  margin-left: 225px;
  position: relative;
}
.star-box {
  max-width: 54px;
  max-height: 54px;
  margin-right: 56px;
  position: absolute;
  inset: auto 0% 0% auto;
}
.hero-button-box {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: flex-start;
  display: flex;
}
.hero-title-bottom-left-box {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  max-width: 571px;
  display: flex;
}
.hero-title-bottom-box {
  margin-top: var(--_spacing---margin-padding--space-l);
  justify-content: space-between;
  display: flex;
}
.studio-span-color {
  color: var(--color--yellow);
}
.studio-hq-title-bottom-right-box {
  max-width: 118px;
  position: absolute;
  inset: 0% 0% auto auto;
}
.hero-title-box {
  position: relative;
}
.sloder-card-image-box-wrap {
  width: 266px;
  height: 234px;
  position: relative;
  overflow: hidden;
}
.hover-view-button-box {
  position: absolute;
  inset: auto 0% 0%;
}
.slider-project-card-image-box {
  height: 100%;
}
.slider-collection-list-wrapper {
  flex: none;
}
.collection-list-2 {
  grid-column-gap: 88px;
  grid-row-gap: 88px;
  display: flex;
}
.project-ticker-wrap {
  background-image: url('../images/Hero-Shape.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 52px;
  padding-bottom: 104px;
  overflow: hidden;
}
.project-ticker {
  grid-column-gap: 88px;
  grid-row-gap: 88px;
  display: flex;
}
.news-bottom-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  display: flex;
}
.news-card-50 {
  width: 40.8%;
}
.news-card-25 {
  width: 28%;
}
.progress-main-wrap {
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1138px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}
.progress-list-wrap {
  z-index: 1;
  justify-content: space-between;
  width: 100%;
  display: flex;
  position: relative;
}
.progress-image {
  width: 466px;
  height: 516px;
  position: absolute;
}
.progress-list-column {
  grid-column-gap: 186px;
  grid-row-gap: 186px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 398px;
  display: flex;
}
.progress-list {
  padding: var(--_spacing---margin-padding--space-smd);
  background-color: var(--color--near-black);
  border-radius: 10px;
  position: relative;
}
.progress-list._02 {
  max-width: 398px;
  margin-left: -80px;
}
.label-01 {
  margin-bottom: 10px;
}
.progress-title-box-wrap {
  max-width: 581px;
  margin-right: auto;
  margin-bottom: var(--_spacing---margin-padding--space-5xl);
  grid-column-gap: var(--_spacing---margin-padding--space-smd);
  grid-row-gap: var(--_spacing---margin-padding--space-smd);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  display: flex;
}
.progress-title {
  max-width: 507px;
  color: var(--color--near-black);
}
.progress-description {
  color: var(--color--charcoal-gray);
}
.partners-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.partners-right-box {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.partners-sub-title {
  font-family: var(--font-family--secondary-font);
  color: var(--color--near-black);
}
.partners-title {
  max-width: 553px;
  margin-top: var(--_spacing---margin-padding--space-md);
  margin-bottom: var(--_spacing---margin-padding--space-xl);
  color: var(--color--near-black);
  font-size: var(--_typography---heading-h3--font-size);
  line-height: var(--_typography---heading-h3--line-height);
  font-weight: var(--_typography---heading-h3--font-weight);
  letter-spacing: var(--_typography---heading-h3--letter-spacing);
}
.partners-button {
  z-index: 1;
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--yellow);
  width: 100%;
  padding: 10px 16px;
  text-decoration: none;
  position: relative;
}
.partners-video-box-wrap {
  min-height: 424px;
  position: relative;
}
.partners-single-box {
  padding: var(--_spacing---margin-padding--space-xl) var(--_spacing---margin-padding--space-md) var(--_spacing---margin-padding--space-md);
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--yellow);
  overflow: hidden;
}
.partners-single-box.center {
  background-color: var(--color--near-black);
  justify-content: center;
  align-items: center;
  display: flex;
}
.partners-image-wrap {
  border-radius: var(--_spacing---radius--radius-s);
  pointer-events: auto;
  justify-content: center;
  align-items: center;
  height: 424px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.partners-overly-box {
  max-width: 396px;
  margin-top: 30px;
  margin-left: 30px;
}
.partners-video-title {
  margin-bottom: var(--_spacing---margin-padding--space-md);
}
.partners-overly-box-wrap {
  background-image: linear-gradient(#000, #6660);
  position: absolute;
  inset: 0%;
}
.partners-video-stop-button {
  z-index: 99;
}
.great-title {
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  font-weight: var(--_typography---heading-h4--font-weight);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
  margin-bottom: 74px;
}
.great-social-icon-wrap {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  background-color: var(--color--white);
  border-radius: 70px;
  padding: 8px;
  display: inline-flex;
}
.star {
  max-width: 84px;
  max-height: 84px;
}
.frame-wrap {
  grid-column-gap: 1.5%;
  grid-row-gap: 1.5%;
  grid-template-rows: auto;
  grid-template-columns: 41% 57%;
  grid-auto-columns: 1fr;
  display: grid;
}
.frame-sub-title-box {
  margin-bottom: var(--_spacing---margin-padding--space-s);
}
.frame-sbu-title {
  font-family: var(--font-family--secondary-font);
  color: var(--color--near-black);
  text-transform: uppercase;
}
.frame-left-box {
  padding: var(--_spacing---margin-padding--space-md);
  border-radius: var(--_spacing---radius--radius-s);
  background-color: #9fadf433;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
  overflow: hidden;
}
.frame-right-box {
  padding: var(--_spacing---margin-padding--space-md);
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--snow-gray);
  overflow: hidden;
}
.frame-right-top-box {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--white);
  justify-content: center;
  align-items: center;
  padding: 5px 5px 5px 16px;
  display: flex;
}
.frame-studio {
  color: var(--color--gunmetal-gray);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  font-weight: var(--font-weight--medium);
  flex: none;
}
.frame-span {
  color: var(--color--cool-gray);
}
.frame-right-top-title {
  color: var(--color--near-black);
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  font-weight: var(--_typography---heading-h4--font-weight);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
  margin-top: 228px;
}
.frame-rating-box {
  background-color: var(--color--radical-red);
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
}
.counter-single-two {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.hero-works-wrap {
  max-width: 1358px;
  padding-right: var(--_spacing---margin-padding--container);
  padding-left: var(--_spacing---margin-padding--container);
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.hero-works-title-box-wrap {
  margin-bottom: var(--_spacing---margin-padding--space-4xl);
}
.hero-works-title-box {
  max-width: 660px;
  margin-bottom: var(--_spacing---margin-padding--space-l);
}
.hero-works-button-box-wrap {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.hero-works {
  font-family: var(--font-family--secondary-font);
  color: var(--color--white);
  text-transform: uppercase;
}
.hero-works-left-box {
  border-right: 1px solid var(--color--jet-black);
  width: 100%;
  max-width: 520px;
}
.hero-works-list {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  display: flex;
}
.hero-project-title-box {
  grid-column-gap: 42px;
  grid-row-gap: 42px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.hero-project-card-number {
  font-family: var(--font-family--secondary-font);
  color: var(--color--cool-gray);
}
.hero-works-right-box {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  width: 100%;
  max-width: 808px;
  padding-left: 42px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.hero-project-card-image-box-wrap {
  position: relative;
  overflow: hidden;
}
.hero-button-perview {
  z-index: 1;
  background-color: var(--color--charcoal-gray);
  width: 100%;
  padding: 10px 14px 10px 16px;
  position: relative;
}
.metrics-container {
  width: 100%;
  max-width: 100%;
  height: 300vh;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  position: relative;
}
.metrics-sticky-wrapper {
  grid-column-gap: 120px;
  grid-row-gap: 120px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  padding: 160px 32px 224px;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}
.metrics-1st {
  position: absolute;
  transform: translate(0, -100%);
}
.text-wrapper {
  z-index: 10;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
  overflow: clip;
}
.metrics-text {
  color: var(--color--near-black);
  font-size: 180px;
  line-height: var(--line-height--line-height-s);
  font-weight: var(--font-weight--semi-bold);
  padding-bottom: 10px;
}
.metrics-2nd {
  position: absolute;
}
.metrics-3rd {
  position: absolute;
  transform: translate(0, 100%);
}
.review-wrap {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: sticky;
  top: 75px;
}
.review-sub-title-wrap {
  z-index: 99;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 866px;
  margin-left: 0;
  margin-right: auto;
  padding-left: 20px;
  display: flex;
  position: relative;
}
.review-sub-title {
  font-family: var(--font-family--secondary-font);
  color: var(--color--cool-gray);
  text-transform: uppercase;
}
.primary-color {
  color: var(--color--yellow);
}
.heading {
  max-width: 468px;
}
.review-inner-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-l);
  grid-row-gap: var(--_spacing---margin-padding--space-l);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 529px;
  margin-top: 140px;
  display: flex;
}
.review-icon-box {
  justify-content: center;
  align-items: center;
  width: 58px;
  height: 48px;
  display: flex;
}
.review-text-box {
  z-index: 1;
  position: relative;
}
.review-author-box-wrap {
  z-index: 1;
  grid-column-gap: 35px;
  grid-row-gap: 35px;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
  display: flex;
  position: relative;
}
.review-author-box {
  grid-column-gap: 22px;
  grid-row-gap: 22px;
  background-color: var(--color--gunmetal-gray);
  border-radius: 70px;
  justify-content: center;
  align-items: center;
  padding: 20px 30px 20px 20px;
  display: flex;
}
.review-author-imge-box {
  width: 64px;
  height: 64px;
}
.rating-text-medium {
  color: var(--color--white);
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  font-weight: var(--font-weight--medium);
  margin-bottom: 4px;
}
.review-text-1 {
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  font-weight: var(--_typography---heading-h5--font-weight);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.review-text-2, .review-text-3 {
  opacity: 0;
  position: absolute;
  inset: 0%;
}
.review-divider-wrap {
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  display: flex;
  position: absolute;
  inset: -60px 0% -30px;
}
.top-divider {
  background-color: var(--color--charcoal-gray);
  width: 100%;
  height: 1px;
}
.bottom-divider-one {
  background-color: var(--color--charcoal-gray);
  width: 100%;
  height: 1px;
  margin-bottom: 90px;
}
.bottom-divider-two {
  background-color: var(--color--charcoal-gray);
  width: 100%;
  height: 1px;
}
.top-divider-three {
  background-color: var(--color--charcoal-gray);
  width: 100%;
  height: 1px;
  margin-bottom: 236px;
}
.ab-divider-one {
  background-color: var(--color--charcoal-gray);
  width: 1px;
  height: 100%;
  position: absolute;
  inset: 0% auto 0% 0%;
}
.ab-divider-two {
  background-color: var(--color--charcoal-gray);
  width: 1px;
  height: 100%;
  position: absolute;
  inset: 0% auto 0% 322px;
}
.ab-divider-three {
  background-color: var(--color--charcoal-gray);
  width: 1px;
  height: 100%;
  position: absolute;
  inset: 0% 322px 0% auto;
}
.ab-divider-four {
  background-color: var(--color--charcoal-gray);
  width: 1px;
  height: 100%;
  position: absolute;
  inset: 0% 0% 0% auto;
}
.mobile-nav-wrap {
  padding: 30px 16px 16px;
  display: none;
}
.mobile-nav-title-box {
  border-bottom: 1px solid var(--color--charcoal-gray);
  width: 100%;
  margin-bottom: 12px;
  padding-bottom: 12px;
}
.medium-description {
  font-weight: var(--font-weight--medium);
}
.medium-description.white {
  color: var(--color--white);
}
.apple-pay {
  border-radius: var(--_spacing---radius--radius-s);
}
.gols-sticky {
  position: sticky;
  top: 120px;
}
.recent-projects-collection-list {
  flex: none;
  max-width: 1103px;
  margin-right: 20px;
}
.recent-project-sticky {
  height: 200vh;
  position: relative;
}
.feature-link-box {
  max-width: 424px;
}
.checkout-form {
  margin-top: var(--_spacing---margin-padding--space-11xl);
  padding: var(--_spacing---margin-padding--space-sm);
  background-color: var(--color--rich-black);
}
.block-header {
  padding-right: var(--_spacing---margin-padding--space-sm);
  padding-left: var(--_spacing---margin-padding--space-sm);
  border-color: var(--color--charcoal-gray);
  background-color: var(--color--transparent);
}
.block-content {
  padding: var(--_spacing---margin-padding--space-sm) var(--_spacing---margin-padding--container);
  border-right-color: var(--color--charcoal-gray);
  border-bottom-color: var(--color--charcoal-gray);
  border-left-color: var(--color--charcoal-gray);
  background-color: var(--color--transparent);
}
.check-out-input {
  border-color: var(--color--charcoal-gray);
  background-color: var(--color--gunmetal-gray);
  transition: all .55s;
}
.check-out-input:focus, .check-out-input.-wfp-focus {
  border-color: var(--color--yellow);
}
.shipping-method-list {
  border-right-color: var(--color--charcoal-gray);
  border-left-color: var(--color--charcoal-gray);
}
.shipping-method {
  border-bottom-color: var(--color--charcoal-gray);
  background-color: var(--color--transparent);
}
.margin-none {
  margin-top: var(--_spacing---margin-padding--space-none);
  margin-bottom: var(--_spacing---margin-padding--space-none);
}
.place-order-button {
  padding-right: var(--_spacing---margin-padding--container);
  padding-left: var(--_spacing---margin-padding--container);
  background-color: var(--color--yellow);
  color: var(--color--near-black);
  transition: all .5s;
}
.place-order-button:hover {
  background-color: var(--color--snow-gray);
}
.bold-text {
  color: var(--color--white);
  font-size: var(--_typography---heading-h6--font-size);
  font-weight: var(--font-weight--bold);
}
.career-video-text {
  font-size: var(--_typography---heading-h3--font-size);
  line-height: var(--_typography---heading-h3--line-height);
  font-weight: var(--font-weight--extra-bold);
  letter-spacing: var(--_typography---heading-h3--letter-spacing);
  position: absolute;
}
.career-video-text-primary-color {
  color: var(--color--yellow);
}
.lock-utility-page-content {
  max-width: 636px;
  margin-right: auto;
  margin-bottom: var(--_spacing---margin-padding--space-none);
  padding-right: var(--_spacing---margin-padding--container);
  padding-left: var(--_spacing---margin-padding--container);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  display: flex;
}
.lock-utility-page-form {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}
.lock-wrap {
  width: 100%;
  padding: var(--_spacing---margin-padding--space-md);
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  border-radius: var(--_spacing---radius--radius-xl);
  background-color: var(--color--gunmetal-gray);
  justify-content: center;
  align-items: center;
  display: flex;
}
.lock-description {
  max-width: 417px;
  margin-top: var(--_spacing---margin-padding--space-s);
  margin-bottom: var(--_spacing---margin-padding--space-2xl);
  color: var(--color--cool-gray);
  line-height: var(--_typography---paragraph-large--line-height);
  font-weight: var(--font-weight--regular);
}
.field-lock {
  border: 1px solid var(--color--charcoal-gray);
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--gunmetal-gray);
  min-height: 48px;
  color: var(--color--cool-gray);
  margin-bottom: 0;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
  transition: all .5s;
}
.field-lock:focus {
  border-color: var(--color--yellow);
  color: var(--color--white);
}
.field-lock::placeholder {
  color: var(--color--cool-gray);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--font-weight--regular);
}
.lock-button {
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--yellow);
  font-family: var(--font-family--primary-font);
  color: var(--color--near-black);
  font-size: var(--_typography---paragraph--font-size);
  font-weight: var(--font-weight--medium);
  padding: 13px 24px;
  transition: all .55s;
}
.lock-button:hover {
  background-color: var(--color--light-gray);
}
.error {
  max-width: 140px;
}
.error-description {
  margin-top: var(--_spacing---margin-padding--space-s);
  margin-bottom: var(--_spacing---margin-padding--space-md);
  color: var(--color--cool-gray);
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
}
.error-utility-page-content {
  width: 100%;
  max-width: 258px;
  padding-right: var(--_spacing---margin-padding--container);
  padding-left: var(--_spacing---margin-padding--container);
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.errow-utility-page-wrap {
  justify-content: center;
  align-items: center;
  padding-top: 324px;
  padding-bottom: 250px;
  display: flex;
}
.main-project-single-card-grid {
  max-width: 1358px;
  padding-right: var(--_spacing---margin-padding--container);
  padding-left: var(--_spacing---margin-padding--container);
  grid-column-gap: 2%;
  grid-row-gap: 2%;
  grid-template-rows: auto;
  grid-template-columns: 40% 58%;
  margin-left: auto;
  margin-right: auto;
}
.main-project-collection-list {
  grid-column-gap: var(--_spacing---margin-padding--space-4xl);
  grid-row-gap: var(--_spacing---margin-padding--space-4xl);
  flex-flow: column;
  display: flex;
}
.collection-item {
  position: sticky;
  top: 80px;
}
.animated-video-section {
  height: 300vh;
}
.animated-image-wrapper {
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  display: flex;
  position: sticky;
  top: 0;
}
.animated-image-wrap {
  border-radius: var(--color--border-image);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.animated-image {
  background-color: #0006;
  min-width: 100vw;
  min-height: 100vh;
}
.career-title-wrap {
  max-width: 827px;
  margin-bottom: var(--_spacing---margin-padding--space-2xl);
  grid-column-gap: var(--_spacing---margin-padding--space-sm);
  grid-row-gap: var(--_spacing---margin-padding--space-sm);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.career-sub-title {
  color: var(--color--snow-gray);
  text-transform: uppercase;
}
.career-title {
  max-width: 457px;
}
.divider {
  border-top: 1px solid var(--color--jet-black);
  border-bottom: 1px solid var(--color--jet-black);
  position: relative;
}
.inner-single-divider {
  z-index: -99;
  background-color: var(--color--jet-black);
  width: 100%;
  height: 1px;
  position: absolute;
  inset: auto 0% 42px;
}
.project-collection-list-wrapper._1 {
  z-index: 3;
  position: relative;
}
.project-collection-list-wrapper._2 {
  z-index: 2;
  position: absolute;
}
.project-collection-list-wrapper._3 {
  z-index: 1;
  position: absolute;
}
.ticker-sticky {
  position: sticky;
  top: 140px;
}
.ticker-wrap {
  height: 300vh;
  position: relative;
}
.career-hero-title-main {
  max-width: 586px;
  margin-left: 225px;
}
.buy-template-button {
  background-color: #7c7c7c26;
  border-top-left-radius: 1.4rem;
  border-top-right-radius: 1.4rem;
  justify-content: center;
  align-items: center;
  min-width: 20rem;
  position: fixed;
  inset: auto 0% 0% auto;
}
.buy-template-button:hover {
  box-shadow: 4px 4px 25px #0003;
}
.buy-template-button.frosted-glass {
  z-index: 1000;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 10px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: auto;
  min-width: 16rem;
  padding: 8px 12px;
  text-decoration: none;
  display: flex;
  position: relative;
  bottom: auto;
  right: auto;
}
.buy-template-button.frosted-glass:hover {
  border-width: 1px;
  border-color: #0158ff;
}
.image {
  width: 28px;
  height: 28px;
}
.promo-text {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2em;
  text-decoration: none;
}
.promo-cards {
  z-index: 10;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  display: flex;
  position: fixed;
  bottom: 200px;
  right: 20px;
}
.circle {
  background-color: #0158ff;
  border-radius: 1000px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: -4px;
  right: -4px;
}
.unlock-full-access {
  color: #0158ff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2em;
}@media screen and (max-width: 991px) {

  body {
    --_typography---paragraph--font-size: 16px;
    --_typography---paragraph-large--line-height: var(--line-height--line-height-xl);
    --_typography---heading-h1--font-size: 56px;
    --_typography---heading-h1--line-height: var(--line-height--line-height-s);
    --_typography---heading-h1--font-weight: var(--font-weight--medium);
    --_typography---heading-h1--letter-spacing: -2.24px;
    --_typography---heading-h2--font-size: 48px;
    --_typography---heading-h2--line-height: var(--line-height--line-height-s);
    --_typography---heading-h2--font-weight: var(--font-weight--medium);
    --_typography---heading-h2--letter-spacing: -1.92px;
    --_typography---heading-h3--font-size: 40px;
    --_typography---heading-h3--line-height: var(--line-height--line-height-l);
    --_typography---heading-h3--font-weight: var(--font-weight--medium);
    --_typography---heading-h3--letter-spacing: -1.2px;
    --_typography---heading-h4--font-size: 28px;
    --_typography---heading-h4--line-height: var(--line-height--line-height-l);
    --_typography---heading-h4--font-weight: var(--font-weight--medium);
    --_typography---heading-h4--letter-spacing: -.84px;
    --_typography---heading-h5--font-size: 20px;
    --_typography---heading-h5--line-height: var(--line-height--line-height-x);
    --_typography---heading-h5--font-weight: var(--font-weight--semi-bold);
    --_typography---heading-h5--letter-spacing: -.4px;
    --_typography---heading-h6--font-size: 18px;
    --_typography---heading-h6--line-height: var(--line-height--line-height-xl);
    --_typography---heading-h6--font-weight: var(--font-weight--medium);
    --_typography---heading-h6--letter-spacing: 0px;
    --_typography---paragraph-large--font-size: 18px;
    --_typography---paragraph--line-height: var(--line-height--line-height-2xl);
    --_typography---paragraph-large--font-weight: var(--font-weight--regular);
    --_typography---paragraph--font-weight: var(--font-weight--regular);
    --_typography---paragraph--letter-spacing: 0px;
    --_typography---paragraph-large--letter-spacing: 0px;
    --_spacing---margin-padding--space-none: 0px;
    --_spacing---margin-padding--container: 15px;
    --_spacing---margin-padding--space-3xl: 56px;
    --_spacing---margin-padding--space-8xl: 100px;
    --_spacing---margin-padding--space-2xl: 50px;
    --_spacing---margin-padding--space-md: 24px;
    --_spacing---margin-padding--space-10xl: 110px;
    --_spacing---margin-padding--space-l: 30px;
    --_spacing---margin-padding--space-6xl: 80px;
    --_spacing---margin-padding--space-xl: 40px;
    --_spacing---margin-padding--space-11xl: 140px;
    --_spacing---margin-padding--space-5xl: 70px;
    --_spacing---margin-padding--space-12xl: 180px;
    --_spacing---margin-padding--space-smd: 20px;
    --_spacing---margin-padding--space-7xl: 100px;
    --_spacing---margin-padding--space-4xl: 70px;
    --_spacing---margin-padding--space-9xl: 100px;
    --_spacing---radius--radius-s: 12px;
    --_spacing---radius--circle-round: 50%;
    --_spacing---margin-padding--space-s: 14px;
    --_spacing---radius--radius-x: 14px;
    --_spacing---margin-padding--space-xs: 10px;
    --_spacing---margin-padding--space-sm: 18px;
    --_spacing---margin-padding--space-m: 18px;
    --_spacing---radius--radius-l: 12px;
    --_spacing---margin-padding--space-mld: 26px;
    --_spacing---radius--radius-xl: 16px;
    --_spacing---margin-padding--space-lg: 36px;
    --_spacing---gap--gap-none: 0px;
  }
  .title-box {
    margin-bottom: 24px;
  }
  .utlitty-inner-title {
    font-size: var(--_typography---heading-h1--font-size);
  }
  .section.style {
    padding-top: 50px;
  }
  .section.footer {
    padding-top: 40px;
  }
  .section.change-log {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .section.blog-card {
    padding-top: var(--_spacing---margin-padding--space-xl);
  }
  .title-flex {
    text-align: left;
  }
  .style-title-box-wrapper {
    text-align: center;
  }
  .style-guide-buttion-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
  .single-button-box {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .style-category-grid-box {
    grid-template-columns: minmax(30%, 1fr) minmax(26%, 1fr) minmax(23%, .75fr) minmax(15px, 1fr);
  }
  .style-category-tob-box.secondary-color-two, .style-category-tob-box.secondary-color {
    margin-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .color-right-box {
    width: 100%;
  }
  .style-category-box {
    padding-top: 30px;
    padding-bottom: 25px;
  }
  .color-grid-box-wrap {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .color-grid-box-wrap.two {
    grid-row-gap: 30px;
  }
  .style-color-box-wrapper {
    flex-flow: column;
  }
  .color-wrap {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }
  .style-wrap {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
  }
  .footer-left-box {
    max-width: 150px;
    padding-bottom: 20px;
  }
  .container {
    max-width: none;
  }
  .container.gols {
    height: auto;
  }
  .footer-wedget-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    display: grid;
  }
  .footer-inner-flex {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .license-image {
    width: 100%;
    height: 250px;
  }
  .licenses-flex {
    grid-column-gap: 100px;
    grid-row-gap: 100px;
  }
  .navbar-logo-link {
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }
  .nav-hamburger-icon {
    opacity: 1;
    flex: none;
    min-width: 40px;
    min-height: 40px;
    display: block;
    position: absolute;
  }
  .cart-quantity {
    color: #fff;
    background-color: #191919;
  }
  .nav-menu-flex {
    background-color: #0000;
    padding: 0;
  }
  .nav-hamburger-button {
    justify-content: center;
    align-items: center;
    transition: background-color .3s;
    display: flex;
  }
  .nav-close-ccon {
    opacity: 0;
    position: absolute;
  }
  .mobile {
    display: block;
  }
  .menu-button {
    flex-flow: column;
    justify-content: center;
    padding: 0;
    display: flex;
  }
  .menu-button.is-open {
    background-color: #0000;
  }
  .nave-menu {
    background-color: var(--color--rich-black);
    max-height: 90vh;
    overflow: auto;
  }
  .nav-link {
    width: 100%;
  }
  .nav-link[aria-current="page"], .nav-link.is-active {
    color: #191919;
  }
  .nav-menu-content {
    grid-row-gap: 15px;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    padding: 30px 16px;
    overflow: auto;
  }
  .navbar {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .primary-button-wrapper-two.mobile {
    display: flex;
  }
  .primary-button-wrapper-two.desktop {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .faq-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: wrap;
  }
  .faq-left-box {
    width: 100%;
    max-width: 328px;
    position: static;
  }
  .faq-right-box {
    flex: 1;
    min-width: 600px;
    max-width: 100%;
  }
  .icon-wrapper {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .icon-box {
    width: 32px;
    height: 32px;
  }
  .footer-right-box {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .nav-button-none {
    display: none;
  }
  .blog-collection-list {
    grid-template-columns: 1fr 1fr;
  }
  .blog-post blockquote {
    padding-bottom: 60px;
  }
  .blog-hero-title-box {
    max-width: 602px;
  }
  .feature-blog-post-wrap {
    margin-top: var(--_spacing---margin-padding--space-2xl);
  }
  .feature-blog-post {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-columns: 50% 50%;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .feature-blog-image-box {
    max-width: 100%;
  }
  .feature-blog-content-box {
    grid-column-gap: var(--_spacing---margin-padding--space-2xl);
    grid-row-gap: var(--_spacing---margin-padding--space-2xl);
    max-width: 100%;
    padding: 20px;
  }
  .project-single-card {
    padding: var(--_spacing---margin-padding--space-l) var(--_spacing---margin-padding--space-md) var(--_spacing---margin-padding--space-md);
  }
  .project-card-title._1, .project-card-title._2, .project-card-title._3 {
    color: var(--color--white);
  }
  .project-hero-title {
    max-width: 424px;
    margin-left: 106px;
  }
  .project-title-bottom-left-box, .project-single-left-box {
    max-width: 280px;
  }
  .related-projects-title-box {
    max-width: 456px;
  }
  .related-projects-card-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
  }
  .recent-projects-single-card {
    padding: var(--_spacing---margin-padding--space-l) var(--_spacing---margin-padding--space-md) var(--_spacing---margin-padding--space-md);
  }
  .container-left-box {
    top: 80px;
  }
  .container-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
  .plan-single-wrapper {
    padding: 20px;
  }
  .primary-text-2 {
    font-size: 16px;
  }
  .plan-single-left-box {
    max-width: 385px;
  }
  .pricing-hero-title-box {
    max-width: 586px;
  }
  .pricing-grid {
    flex-flow: wrap;
    grid-template-columns: 100%;
    justify-content: space-between;
    display: flex;
  }
  .plan-collection-list-wrapper {
    flex: 1;
    min-width: 581px;
    max-width: 100%;
  }
  .service-left-box {
    padding: var(--_spacing---margin-padding--space-smd) var(--_spacing---margin-padding--space-none) var(--_spacing---margin-padding--space-smd) var(--_spacing---margin-padding--space-sm);
  }
  .service-card-description-box {
    display: none;
  }
  .gallery-image-box {
    height: 100%;
  }
  .gallery-left-box, .gallery-right-box {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .gallery-grid-box {
    display: flex;
  }
  .gallery-image {
    object-fit: cover;
  }
  .explore-inner-grid {
    grid-column-gap: var(--_spacing---margin-padding--space-s);
    grid-row-gap: var(--_spacing---margin-padding--space-s);
  }
  .career-tabs {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
  .career-button-box {
    margin-bottom: var(--_spacing---margin-padding--space-none);
  }
  .behind-wrap {
    height: auto;
  }
  .behind-title-wrap {
    max-width: 485px;
  }
  .behind-content-wrap {
    grid-column-gap: var(--_spacing---margin-padding--space-md);
    grid-row-gap: var(--_spacing---margin-padding--space-md);
    flex-flow: wrap;
    position: static;
  }
  .behind-content-right-box {
    grid-column-gap: var(--_spacing---margin-padding--space-s);
    grid-row-gap: var(--_spacing---margin-padding--space-s);
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    max-width: 100%;
    display: grid;
  }
  .behind-list-wrap {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    position: static;
  }
  .team-title-wrap {
    max-width: 594px;
  }
  .team-single-card {
    padding: var(--_spacing---margin-padding--space-smd);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .team-single-card-left-box {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    max-width: 750px;
  }
  .team-about-box {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex: none;
    min-width: 385px;
  }
  .team-image-box {
    width: 86px;
    height: 86px;
  }
  .spacing-title-box {
    max-width: 484px;
    top: 80px;
  }
  .spacing-single-card._2, .spacing-single-card._1, .spacing-single-card._3, .spacing-single-card._4 {
    top: 226px;
  }
  .process-wrap {
    grid-column-gap: 24px;
    grid-row-gap: 30px;
    flex-flow: wrap;
    grid-template-rows: auto;
    grid-template-columns: 46% 51%;
    grid-auto-columns: 1fr;
    display: flex;
  }
  .process-left-box {
    max-width: 468px;
  }
  .process-right-box {
    max-width: 100%;
  }
  .process-title-box-wrap {
    position: static;
    top: 70px;
  }
  .process-title {
    letter-spacing: var(--_typography---heading-h4--letter-spacing);
  }
  .process-single-card-wrap {
    width: 100%;
  }
  .video-size-wrap {
    height: auto;
  }
  .video-sticky-wrap {
    height: 500px;
  }
  .video-image-wrap {
    width: 100%;
    height: 100%;
  }
  .goals-wrap {
    grid-row-gap: 30px;
    grid-template-columns: 1fr 1fr;
  }
  .goals-single-card {
    width: auto;
    min-width: 0;
  }
  .goals-divider {
    margin-top: var(--_spacing---margin-padding--space-smd);
  }
  .ticker-wrapper, .ticker-item-wrap {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }
  .about-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    display: flex;
  }
  .about-right-box {
    flex: none;
  }
  .home-whole-counter {
    height: 56px;
  }
  .heading-three {
    line-height: 56px;
  }
  .about-hero-single-image-box {
    width: 300px;
    height: 300px;
  }
  .about-hero-title {
    max-width: 434px;
    margin-left: 106px;
  }
  .relative-hero {
    max-width: 424px;
    margin-left: 106px;
  }
  .star-box {
    max-width: 48px;
    max-height: 48px;
  }
  .hero-title-bottom-left-box {
    max-width: 457px;
  }
  .collection-list-2, .project-ticker {
    grid-column-gap: var(--_spacing---margin-padding--space-md);
    grid-row-gap: var(--_spacing---margin-padding--space-md);
  }
  .news-bottom-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 40px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .news-card-50, .news-card-25 {
    width: 100%;
  }
  .progress-list-column {
    grid-column-gap: 230px;
    grid-row-gap: 230px;
  }
  .progress-title {
    max-width: 436px;
  }
  .partners-wrap {
    position: relative;
  }
  .partners-right-box {
    grid-template-columns: 1fr;
  }
  .partners-video-box-wrap {
    min-height: 300px;
  }
  .partners-image-wrap {
    width: 100%;
    height: 100%;
  }
  .great-social-icon-wrap {
    max-width: 200px;
  }
  .partner-sticky {
    position: sticky;
    top: 56px;
  }
  .frame-right-top-title {
    margin-top: var(--_spacing---margin-padding--space-7xl);
  }
  .hero-works-list {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    position: sticky;
    top: 60px;
  }
  .hero-project-title-box {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .hero-works-right-box {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding-left: 0;
    position: static;
  }
  .metrics-sticky-wrapper {
    padding-top: 100px;
    padding-bottom: 140px;
  }
  .metrics-text {
    font-size: 119px;
  }
  .review-author-box-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .review-author-box._1, .review-author-box._2, .review-author-box._3 {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    padding: 16px;
  }
  .recent-projects-collection-list {
    flex: 0 auto;
    margin-right: 0;
  }
  .recent-project-sticky {
    height: auto;
  }
  .feature-link-box {
    max-width: none;
  }
  .lock-wrap {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .errow-utility-page-wrap {
    padding-top: var(--_spacing---margin-padding--space-11xl);
    padding-bottom: var(--_spacing---margin-padding--space-9xl);
  }
  .animated-video-section {
    height: auto;
  }
  .animated-image-wrapper {
    height: 500px;
    min-height: auto;
  }
  .animated-image-wrap {
    width: 100%;
    height: 100%;
  }
  .animated-image {
    min-width: 100%;
    height: 500px;
    min-height: 100%;
  }
  .career-title-wrap {
    flex-flow: wrap;
  }
  .career-title {
    max-width: 352px;
  }
  .project-collection-list-wrapper._2, .project-collection-list-wrapper._3, .ticker-sticky {
    position: static;
  }
  .ticker-wrap {
    height: auto;
  }
  .career-hero-title-main {
    max-width: 453px;
    margin-left: 106px;
  }}
@media screen and (max-width: 767px) {

  body {
    --_typography---paragraph--font-size: 16px;
    --_typography---paragraph-large--line-height: var(--line-height--line-height-xl);
    --_typography---heading-h1--font-size: 44px;
    --_typography---heading-h1--line-height: var(--line-height--line-height-s);
    --_typography---heading-h1--font-weight: var(--font-weight--medium);
    --_typography---heading-h1--letter-spacing: -1.76px;
    --_typography---heading-h2--font-size: 36px;
    --_typography---heading-h2--line-height: var(--line-height--line-height-s);
    --_typography---heading-h2--font-weight: var(--font-weight--medium);
    --_typography---heading-h2--letter-spacing: -.9px;
    --_typography---heading-h3--font-size: 30px;
    --_typography---heading-h3--line-height: var(--line-height--line-height-l);
    --_typography---heading-h3--font-weight: var(--font-weight--medium);
    --_typography---heading-h3--letter-spacing: -.9px;
    --_typography---heading-h4--font-size: 24px;
    --_typography---heading-h4--line-height: var(--line-height--line-height-l);
    --_typography---heading-h4--font-weight: var(--font-weight--medium);
    --_typography---heading-h4--letter-spacing: -.76px;
    --_typography---heading-h5--font-size: 18px;
    --_typography---heading-h5--line-height: var(--line-height--line-height-x);
    --_typography---heading-h5--font-weight: var(--font-weight--semi-bold);
    --_typography---heading-h5--letter-spacing: 0px;
    --_typography---heading-h6--font-size: 18px;
    --_typography---heading-h6--line-height: var(--line-height--line-height-xl);
    --_typography---heading-h6--font-weight: var(--font-weight--medium);
    --_typography---heading-h6--letter-spacing: 0px;
    --_typography---paragraph-large--font-size: 16px;
    --_typography---paragraph--line-height: var(--line-height--line-height-2xl);
    --_typography---paragraph-large--font-weight: var(--font-weight--regular);
    --_typography---paragraph--font-weight: var(--font-weight--regular);
    --_typography---paragraph--letter-spacing: 0px;
    --_typography---paragraph-large--letter-spacing: 0px;
    --_spacing---margin-padding--space-none: 0px;
    --_spacing---margin-padding--container: 15px;
    --_spacing---margin-padding--space-3xl: 48px;
    --_spacing---margin-padding--space-8xl: 90px;
    --_spacing---margin-padding--space-2xl: 40px;
    --_spacing---margin-padding--space-md: 22px;
    --_spacing---margin-padding--space-10xl: 90px;
    --_spacing---margin-padding--space-l: 24px;
    --_spacing---margin-padding--space-6xl: 60px;
    --_spacing---margin-padding--space-xl: 36px;
    --_spacing---margin-padding--space-11xl: 136px;
    --_spacing---margin-padding--space-5xl: 50px;
    --_spacing---margin-padding--space-12xl: 160px;
    --_spacing---margin-padding--space-smd: 18px;
    --_spacing---margin-padding--space-7xl: 80px;
    --_spacing---margin-padding--space-4xl: 60px;
    --_spacing---margin-padding--space-9xl: 80px;
    --_spacing---radius--radius-s: 12px;
    --_spacing---radius--circle-round: 50%;
    --_spacing---margin-padding--space-s: 14px;
    --_spacing---radius--radius-x: 12px;
    --_spacing---margin-padding--space-xs: 10px;
    --_spacing---margin-padding--space-sm: 16px;
    --_spacing---margin-padding--space-m: 16px;
    --_spacing---radius--radius-l: 10px;
    --_spacing---margin-padding--space-mld: 24px;
    --_spacing---radius--radius-xl: 14px;
    --_spacing---margin-padding--space-lg: 30px;
    --_spacing---gap--gap-none: 0px;
  }
  .title-box {
    margin-bottom: 20px;
  }
  .utlitty-inner-title {
    font-size: 46px;
  }
  .section.ulility-hero {
    padding-top: 160px;
    padding-bottom: 40px;
  }
  .section.style, .section.change-log {
    padding-top: 40px;
  }
  .section.gallery-slider {
    display: block;
  }
  .section.gallery {
    display: none;
  }
  .style-guide-buttion-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .style-category-grid-box {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: minmax(auto, 1fr) minmax(auto, 1fr);
  }
  .style-category-tob-box.secondary-color-two, .style-category-tob-box.secondary-color {
    margin-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
  }
  .color-grid-box-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .color-grid-box-wrap.two {
    grid-row-gap: 20px;
  }
  .style-single-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .color-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .style-wrap {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }
  .footer-flex-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .footer-bottom-box {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    text-align: center;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
  }
  .footer-right-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    width: 100%;
  }
  .footer-wedget-wrap {
    flex-flow: wrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 337px;
  }
  .footer-inner-flex {
    grid-row-gap: 40px;
    flex-flow: wrap;
  }
  .form-block {
    width: 100%;
    min-width: 100%;
  }
  .licenses-image-single-grid-two {
    grid-template-columns: minmax(200px, 100%);
  }
  .licenses-flex {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
  }
  .licenses-image-single-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: minmax(200px, 100%);
  }
  .nav-menu-content {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .primary-button-wrapper-two.desktop {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .faq-wrapper {
    flex-flow: wrap;
  }
  .faq-left-box {
    max-width: 258px;
  }
  .faq-right-box {
    flex: 0 auto;
    min-width: 0;
    max-width: 100%;
  }
  .footer-social-icon-wrap {
    justify-content: center;
    align-items: center;
    display: flex;
  }
  .icon-wrapper {
    flex-flow: row;
  }
  .blog-collection-list {
    flex-flow: wrap;
    display: flex;
  }
  .blog-collection-item {
    flex: 1;
  }
  .blog-single-card {
    width: 100%;
    min-width: 300px;
    max-width: 100%;
  }
  .blog-post blockquote {
    padding-bottom: 48px;
  }
  .blog-hero-title-box {
    max-width: 473px;
  }
  .project-single-card-grid {
    grid-column-gap: 5%;
    grid-row-gap: 5%;
    grid-template-columns: 100%;
  }
  .project-hero-wrap {
    border-left-style: none;
    border-right-style: none;
  }
  .project-hero-title {
    max-width: 345px;
    margin-left: 0;
  }
  .project-single-flex-box {
    flex-flow: wrap;
  }
  .project-single-left-box {
    max-width: 100%;
    position: static;
  }
  .contact-hero-wrap {
    max-width: 500px;
  }
  .contract-list-item {
    flex: 1;
    min-width: 170px;
    max-width: 100%;
  }
  .container-left-box {
    max-width: 100%;
    position: static;
  }
  .container-wrap, .contract-list, .plan-single-wrap {
    flex-flow: wrap;
  }
  .plan-single-wrapper {
    width: 100%;
  }
  .plan-short-details-box {
    max-width: 100%;
  }
  .pricing-single-flex-right-box {
    order: -1;
    max-width: 100%;
  }
  .plan-single-left-box {
    max-width: 100%;
  }
  .feature-inner-grid {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-flow: wrap;
    display: flex;
  }
  .plan-feature-list-active {
    flex: 1;
    min-width: 255px;
    max-width: 100%;
  }
  .plan-collection-list-wrapper {
    min-width: 100%;
  }
  .service-single-card {
    flex-flow: wrap;
    grid-template-columns: 50% 50%;
    display: flex;
  }
  .service-left-box {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  .service-right-box {
    flex: 1;
    min-width: 365px;
    max-width: 100%;
  }
  .service-sinlge-common-image-grid-box-copy {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .gallery-image-box {
    height: 100%;
  }
  .gallery-left-box {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .gallery-right-box {
    order: 9999;
  }
  .gallery-right-box.last {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: row;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .gallery-grid-box {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .gallery-image {
    object-fit: cover;
  }
  .secondary-text-medium.black-04 {
    font-size: 14px;
  }
  .career-tabs {
    grid-template-columns: 100%;
  }
  .career-tabs-menu {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-flow: wrap;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: center;
    align-items: center;
    display: flex;
  }
  .behind-title-wrap {
    max-width: 400px;
  }
  .team-title-wrap {
    max-width: 470px;
  }
  .team-single-card {
    justify-content: space-between;
    align-items: center;
  }
  .team-single-card-left-box {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: wrap;
    max-width: 590px;
  }
  .team-about-box {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    min-height: 50px;
  }
  .team-image-box {
    width: 50px;
    height: 50px;
  }
  .spacing-title-box {
    max-width: 367px;
  }
  .spacing-single-card._2, .spacing-single-card._1, .spacing-single-card._3, .spacing-single-card._4 {
    top: 192px;
  }
  .process-wrap {
    grid-column-gap: 24px;
    grid-row-gap: 30px;
    flex-flow: wrap;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    display: flex;
  }
  .process-left-box {
    max-width: 388px;
  }
  .process-right-box {
    flex: 1;
    min-width: 300px;
    max-width: 100%;
  }
  .process-title-box-wrap {
    position: static;
  }
  .video-sticky-wrap {
    height: 300px;
  }
  .ticker-wrapper, .ticker-item-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
  .about-wrap {
    flex-flow: wrap;
    display: flex;
  }
  .about-right-box {
    width: 100%;
  }
  .home-whole-counter {
    height: 44px;
  }
  .heading-three {
    line-height: 44px;
  }
  .about-hero-single-image-box {
    width: 300px;
    height: 300px;
  }
  .about-hero-title, .relative-hero {
    max-width: 345px;
    margin-left: 0;
  }
  .hero-title-bottom-left-box {
    flex-flow: wrap;
    max-width: 355px;
  }
  .project-ticker-wrap {
    padding-top: var(--_spacing---margin-padding--space-2xl);
    padding-bottom: var(--_spacing---margin-padding--space-6xl);
  }
  .news-bottom-wrap {
    grid-template-columns: 1fr;
  }
  .progress-list-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    display: flex;
  }
  .progress-image {
    display: none;
  }
  .progress-list-column {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    max-width: 100%;
  }
  .progress-list._02 {
    max-width: 100%;
    margin-left: 0;
  }
  .progress-title {
    max-width: 321px;
  }
  .partners-wrap {
    grid-template-columns: 1fr;
  }
  .partners-right-box {
    grid-template-columns: 1fr 1fr;
  }
  .great-social-icon-wrap {
    justify-content: center;
    align-items: center;
    display: flex;
  }
  .partner-sticky {
    position: static;
  }
  .frame-wrap {
    grid-template-columns: 100%;
  }
  .metrics-sticky-wrapper {
    padding-top: 80px;
    padding-bottom: 100px;
  }
  .metrics-text {
    font-size: 80px;
  }
  .heading {
    max-width: 309px;
  }
  .review-author-box-wrap {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
  .review-author-box._1, .review-author-box._2, .review-author-box._3 {
    border-radius: 10px;
    padding: 8px;
  }
  .review-author-imge-box {
    width: 40px;
    height: 40px;
  }
  .main-project-single-card-grid {
    grid-column-gap: 5%;
    grid-row-gap: 5%;
    grid-template-columns: 100%;
  }
  .animated-image-wrapper, .animated-image {
    height: 300px;
  }
  .career-title {
    max-width: 261px;
  }
  .career-hero-title-main {
    max-width: 345px;
    margin-left: 0;
  }}
@media screen and (max-width: 479px) {

  body {
    --_typography---paragraph--font-size: 16px;
    --_typography---paragraph-large--line-height: var(--line-height--line-height-xl);
    --_typography---heading-h1--font-size: 36px;
    --_typography---heading-h1--line-height: var(--line-height--line-height-s);
    --_typography---heading-h1--font-weight: var(--font-weight--medium);
    --_typography---heading-h1--letter-spacing: -1px;
    --_typography---heading-h2--font-size: 30px;
    --_typography---heading-h2--line-height: var(--line-height--line-height-s);
    --_typography---heading-h2--font-weight: var(--font-weight--medium);
    --_typography---heading-h2--letter-spacing: -.5px;
    --_typography---heading-h3--font-size: 24px;
    --_typography---heading-h3--line-height: var(--line-height--line-height-l);
    --_typography---heading-h3--font-weight: var(--font-weight--medium);
    --_typography---heading-h3--letter-spacing: 0px;
    --_typography---heading-h4--font-size: 20px;
    --_typography---heading-h4--line-height: var(--line-height--line-height-l);
    --_typography---heading-h4--font-weight: var(--font-weight--medium);
    --_typography---heading-h4--letter-spacing: 0px;
    --_typography---heading-h5--font-size: 18px;
    --_typography---heading-h5--line-height: var(--line-height--line-height-x);
    --_typography---heading-h5--font-weight: var(--font-weight--semi-bold);
    --_typography---heading-h5--letter-spacing: 0px;
    --_typography---heading-h6--font-size: 16px;
    --_typography---heading-h6--line-height: var(--line-height--line-height-xl);
    --_typography---heading-h6--font-weight: var(--font-weight--medium);
    --_typography---heading-h6--letter-spacing: 0px;
    --_typography---paragraph-large--font-size: 16px;
    --_typography---paragraph--line-height: var(--line-height--line-height-2xl);
    --_typography---paragraph-large--font-weight: var(--font-weight--regular);
    --_typography---paragraph--font-weight: var(--font-weight--regular);
    --_typography---paragraph--letter-spacing: 0px;
    --_typography---paragraph-large--letter-spacing: 0px;
    --_spacing---margin-padding--space-none: 0px;
    --_spacing---margin-padding--container: 15px;
    --_spacing---margin-padding--space-3xl: 40px;
    --_spacing---margin-padding--space-8xl: 80px;
    --_spacing---margin-padding--space-2xl: 36px;
    --_spacing---margin-padding--space-md: 18px;
    --_spacing---margin-padding--space-10xl: 80px;
    --_spacing---margin-padding--space-l: 20px;
    --_spacing---margin-padding--space-6xl: 50px;
    --_spacing---margin-padding--space-xl: 30px;
    --_spacing---margin-padding--space-11xl: 130px;
    --_spacing---margin-padding--space-5xl: 40px;
    --_spacing---margin-padding--space-12xl: 150px;
    --_spacing---margin-padding--space-smd: 18px;
    --_spacing---margin-padding--space-7xl: 60px;
    --_spacing---margin-padding--space-4xl: 56px;
    --_spacing---margin-padding--space-9xl: 60px;
    --_spacing---radius--radius-s: 12px;
    --_spacing---radius--circle-round: 50%;
    --_spacing---margin-padding--space-s: 14px;
    --_spacing---radius--radius-x: 10px;
    --_spacing---margin-padding--space-xs: 10px;
    --_spacing---margin-padding--space-sm: 16px;
    --_spacing---margin-padding--space-m: 16px;
    --_spacing---radius--radius-l: 8px;
    --_spacing---margin-padding--space-mld: 18px;
    --_spacing---radius--radius-xl: 12px;
    --_spacing---margin-padding--space-lg: 24px;
    --_spacing---gap--gap-none: 0px;
  }
  .utlitty-inner-title {
    font-size: 40px;
  }
  .section.ulility-hero {
    padding-top: 140px;
    padding-bottom: 40px;
  }
  .section.recent-projects {
    padding-bottom: var(--_spacing---margin-padding--space-3xl);
  }
  .section.explore {
    display: none;
  }
  .section.lock {
    padding-top: var(--_spacing---margin-padding--space-11xl);
  }
  .section.explore-mobile {
    display: block;
  }
  .title-flex {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .description.charcoal-gray.mx-with {
    max-width: 210px;
  }
  .style-category-grid-box {
    grid-template-columns: minmax(auto, 1fr);
  }
  .style-category-box {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .color-grid-box-wrap {
    grid-template-columns: 1fr;
  }
  .style-single-wrap {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .style-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .footer-flex-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
  .footer-single-widget {
    width: 100%;
  }
  .footer-wedget-wrap {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
  }
  .footer-inner-flex {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
  .change-log-wrap {
    padding: 30px 20px;
  }
  .licenses-flex {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }
  .license-icon-divider {
    display: none;
  }
  .nav-link-wrapper {
    max-width: 100%;
    margin-right: 0;
  }
  .nav-link-wrapper.second {
    max-width: 100%;
  }
  .nav-menu-content {
    display: none;
  }
  .navbar-logo-image {
    height: 21px;
  }
  .nav-dropdown-left-wrap {
    grid-column-gap: 0px;
    grid-row-gap: 40px;
    flex-flow: wrap;
    grid-template: "Area"
    / 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    display: grid;
  }
  .nav-menu-wrap {
    width: 100%;
  }
  .primary-button-wrapper-two.desktop {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .footer-right-box {
    flex-flow: wrap;
  }
  .blog-collection-list {
    grid-row-gap: 40px;
  }
  .blog-collection-item {
    flex: 0 auto;
  }
  .blog-single-card {
    min-width: 100%;
  }
  .blog-post blockquote {
    padding-bottom: 44px;
  }
  .blod-post-date-wrap {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: wrap;
  }
  .feature-blog-post {
    grid-template-columns: 100%;
  }
  .feature-blog-content-box {
    padding: var(--_spacing---margin-padding--space-sm);
    grid-column-gap: var(--_spacing---margin-padding--space-l);
    grid-row-gap: var(--_spacing---margin-padding--space-l);
  }
  .project-single-card {
    padding: var(--_spacing---margin-padding--space-sm);
  }
  .project-title-bottom-box {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: wrap;
  }
  .project-title-bottom-left-box {
    order: 9999;
  }
  .project-title-bottom-right-box {
    text-align: right;
    width: 100%;
  }
  .project-description {
    text-align: left;
  }
  .project-single-grid {
    grid-template-columns: 1fr;
  }
  .recent-projects-single-card {
    padding: var(--_spacing---margin-padding--space-sm);
  }
  .contract-list-item {
    flex: 1;
    min-width: 158px;
    max-width: 100%;
  }
  .container-left-box {
    max-width: 100%;
  }
  .plan-single-wrapper {
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .plan-title-flex {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .pricing-grid {
    padding: var(--_spacing---margin-padding--space-xs);
    grid-column-gap: var(--_spacing---margin-padding--space-md);
    grid-row-gap: var(--_spacing---margin-padding--space-md);
  }
  .pricing-single-left-box {
    padding: var(--_spacing---margin-padding--space-xs);
  }
  .plan-feature-list-active {
    min-width: 100%;
  }
  .service-single-card {
    display: flex;
  }
  .service-right-box {
    min-width: 100%;
  }
  .service-sinlge-common-image-grid-box-copy {
    grid-template-columns: 1fr;
  }
  .gallery-right-box.last {
    flex-flow: column;
  }
  .gallery-grid-box {
    flex-flow: column;
    grid-template-columns: minmax(200px, 310px);
    display: flex;
  }
  .explore-inner-grid {
    grid-template-columns: 1fr;
  }
  .career-single-card {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
  }
  .career-single-card-left-box {
    min-width: 0%;
  }
  .career-single-card-center-box {
    min-width: 0;
  }
  .career-single-card-right-box {
    position: absolute;
    inset: 0% 0% 0% auto;
  }
  .career-info-flex {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: wrap;
  }
  .career-info-box {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-flow: row;
  }
  .career-info-box.three {
    max-width: 100%;
  }
  .career-info-single-box {
    border-top-style: none;
    padding-top: 0;
  }
  .behind-title-wrap {
    max-width: 327px;
  }
  .behind-content-right-box {
    grid-template-columns: 1fr;
  }
  .behind-single-list {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
  .team-title-wrap {
    max-width: 328px;
  }
  .team-title {
    font-size: var(--_typography---heading-h2--font-size);
  }
  .team-single-card {
    padding-right: var(--_spacing---margin-padding--container);
    padding-left: var(--_spacing---margin-padding--container);
    flex-flow: wrap;
  }
  .team-about-box {
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    min-width: 0;
    height: 52.7969px;
    min-height: 0;
  }
  .team-image-box {
    justify-content: center;
    align-items: center;
  }
  .team-description {
    margin-bottom: var(--_spacing---margin-padding--space-xs);
  }
  .spacing-title-box {
    top: 60px;
  }
  .spacing-single-card._2, .spacing-single-card._1, .spacing-single-card._3, .spacing-single-card._4 {
    top: 156px;
  }
  .process-left-box {
    max-width: 328px;
  }
  .video-sticky-wrap {
    height: 250px;
  }
  .goals-wrap {
    grid-template-columns: 1fr;
  }
  .about-hero-single-image-box {
    width: 290px;
    height: 290px;
  }
  .star-box {
    margin-right: 40px;
    bottom: -10%;
  }
  .hero-button-box {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: wrap;
  }
  .hero-title-bottom-left-box {
    order: 9999;
  }
  .hero-title-bottom-box {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
  }
  .studio-hq-title-bottom-right-box {
    text-align: right;
    width: 100%;
    max-width: 100%;
    position: static;
  }
  .news-bottom-wrap {
    grid-row-gap: 30px;
  }
  .progress-title {
    max-width: 282px;
  }
  .partners-right-box {
    grid-template-columns: 1fr;
  }
  .partners-overly-box {
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
  }
  .frame-right-top-box {
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: center;
    padding-left: 5px;
  }
  .frame-right-top-title {
    margin-top: var(--_spacing---margin-padding--space-l);
  }
  .hero-works-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: wrap;
  }
  .metrics-sticky-wrapper {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .metrics-text {
    font-size: 40px;
  }
  .review-sub-title-wrap {
    flex-flow: wrap;
  }
  .review-inner-wrap {
    margin-top: 60px;
  }
  .review-author-box-wrap {
    flex-flow: wrap;
    margin-top: 50px;
  }
  .review-divider-wrap {
    display: none;
  }
  .mobile-nav-wrap {
    display: block;
  }
  .mobile-nav-title-box {
    text-align: left;
  }
  .lock-wrap {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: wrap;
  }
  .lock-button {
    width: 100%;
  }
  .animated-image-wrapper, .animated-image {
    height: 250px;
  }
  .career-title {
    max-width: 225px;
  }}

#node-_7cbc7cc6-6a27-b150-9ca4-c74ee21982e4-00a79315 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}
#node-_870bbf8b-df52-5b7a-e868-325ec75dfe26-00a79315, #node-_7e524994-2a57-b58e-35c5-5ff0baecb8ea-baecb8b7 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}
#node-_6bbc58f6-b8c1-2802-385a-c180d32d69e8-00a7931a {
  grid-area: 1 / 1 / 2 / 2;
}
#node-_525e9bed-9b9a-8803-c6a4-9d038c4eaaec-00a7931a {
  grid-area: span 1 / span 2 / span 1 / span 2;
}@media screen and (max-width: 991px) {

  #node-_870bbf8b-df52-5b7a-e868-325ec75dfe26-00a79315 {
    grid-column: span 1 / span 1;
  }
  #node-_69d98e95-08ba-a2e8-6ae2-88da1b41d2c3-00a79315, #node-_6b34cf55-873a-72e5-e9b7-138c6228db74-00a79315 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
  #node-_5133f35a-d6cb-096f-57c3-4621d896057f-d896055e {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
  #node-_771df394-ab76-4c58-7608-1fce6c7dba6a-00a79316 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }}
@media screen and (max-width: 767px) {

  #node-_870bbf8b-df52-5b7a-e868-325ec75dfe26-00a79315 {
    grid-column: span 2 / span 2;
  }
  #node-_5133f35a-d6cb-096f-57c3-4621d896057f-d896055e {
    grid-column: span 1 / span 1;
  }
  #node-_2f99e8d3-ff09-422f-4def-b17ee1038b96-00a7931a, #node-_2f99e8d3-ff09-422f-4def-b17ee1038b97-00a7931a {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
  #pixel5.wf-node-f84f388a-8e6f-390d-7577-14838010aa06-00a7931a {
    grid-area: span 1 / span 2 / span 1 / span 2;
    place-self: center;
  }
  #node-_6bbc58f6-b8c1-2802-385a-c180d32d69e8-00a7931a {
    grid-area: span 1 / span 1 / span 1 / span 1;
    place-self: center;
  }}
@media screen and (max-width: 479px) {

  #node-_870bbf8b-df52-5b7a-e868-325ec75dfe26-00a79315 {
    grid-column: span 1 / span 1;
  }
  #node-_7e524994-2a57-b58e-35c5-5ff0baecb8ea-baecb8b7 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
  #pixel5.wf-node-f84f388a-8e6f-390d-7577-14838010aa06-00a7931a, #node-_525e9bed-9b9a-8803-c6a4-9d038c4eaaec-00a7931a {
    grid-column: span 1 / span 1;
  }}


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

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

   Four rules of thumb run through the whole file:

   * A REVEAL IS AN ANIMATION, NEVER A TRANSITION. A `transition:` shorthand
     on a reveal class REPLACES whatever transition the element already had
     -- which on an earlier conversion silently deleted a slider's own motion
     -- and a transition also cannot express "start from this transform" the
     way `@keyframes` can.
   * WHERE AN IX2 ACTION CARRIES A `globalSwatchId`, THE RUNTIME USES THE
     VARIABLE, not the rgb triple stored beside it, so those colours are
     written as `var(--color--…)` and follow the palette if it is re-themed.
     The ten SCRUB lists are the exception: their colour steps carry a bare
     rgb triple and no swatch, so they are written as the literal the payload
     holds -- and every one of those literals was checked against `:root`
     first, so `#8a8a8a` below really is `--color--cool-gray` and not a near
     miss.
   * A SCRUB IS A PAUSED ANIMATION, NOT A PILE OF THRESHOLDS. main.js writes
     the section's scroll progress to it as `--scroll-progress`, and each
     scrubbed element runs a 1s animation that is paused and pulled to that
     point with a negative delay. The payload's keyframe percentages then
     become the keyframe percentages here, one for one, and the browser does
     the interpolation IX2 used to do.
   * A REVEAL'S REST STATE IS GATED ON `.js`. Without that, a visitor with
     JavaScript off gets a page of `opacity: 0` -- which is what an earlier
     conversion shipped.

   IX2's easings appear four times in this payload: `outQuart` on every
   reveal and every button roll, `inOutExpo` on the price toggle, plain
   `ease` on the hamburger, and one hand-typed cubic-bezier on the counter
   reels. All four are named as custom properties so a reader can see they
   are one decision rather than sixty. */

:root {
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-counter: cubic-bezier(.784, .325, .222, .98);
}


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

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

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

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

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


/* ------------------------------------------------------------- the navbar
   IX2 a-8 / a-9, a MOUSE_CLICK / MOUSE_SECOND_CLICK pair on
   `.nav-hamburger-button` that crossfades two images over 300ms `ease`. The
   images stay -- they are the design's own artwork -- and only the state
   moves from the runtime to an `aria-expanded` a screen reader can read. */
.nav-hamburger-icon,
.nav-close-ccon {
  transition: opacity .3s ease;
}

[data-nav="toggle"][aria-expanded="true"] .nav-hamburger-icon {
  opacity: 0;
}

[data-nav="toggle"][aria-expanded="true"] .nav-close-ccon {
  opacity: 1;
}

/* The hamburger is a real <button> now, so the UA's own chrome has to go.
   The design sizes it (30px square, flex centred) and framework.hand.css
   restates the widget's cursor; this is only the reset. */
.nav-hamburger-button {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
}

/* The open mobile panel. `.nave-menu[data-nav-menu-open]` in section 2b is
   what shows it; this is the scroll lock that goes with it, so the page
   behind a full-height menu does not move under it. */
body.nav-open {
  overflow: hidden;
}


/* ------------------------------------------------------------------- FAQ
   IX2 a-10 / a-12, built on Webflow's DROPDOWN widget: the panel's height
   goes 0 -> auto over 300ms and the chevron rotates 180deg over 500ms.

   "Height to auto" is not animatable, so the panel is a one-row grid that
   opens from `0fr` to `1fr` -- and the row is `minmax(0, Nfr)`, because a
   bare `0fr` does not collapse a row whose content has an intrinsic minimum.
   The content needs `min-height: 0` and `overflow: hidden` for the same
   reason.

   These rules deliberately come AFTER the design sheet. A state the design
   does not know about has to: an earlier conversion shipped a permanently
   open FAQ by putting the closed state in section 2b, where the design's own
   `.accordion-description-wrap` rule reached it. */
.accordion-description-wrap {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows .3s ease;
}

.accordion.is-open .accordion-description-wrap {
  grid-template-rows: minmax(0, 1fr);
}

.accordion-text-wrap {
  min-height: 0;
  overflow: hidden;
}

.accordion-icon-in {
  transition: transform .5s ease;
}

.accordion.is-open .accordion-icon-in {
  transform: rotate(180deg);
}

/* The <h3> rebuild_faq wraps the button in, so the question is a heading
   without the button containing one (a <button> may only hold phrasing
   content, and an <h3> inside one is dropped from the accessibility tree).

   `display: contents` is what makes the wrapper free in `.accordion`'s flex
   column -- but `display: contents` does NOT stop inheritance, and that is
   the part worth stating: the design's `h3` rule sets the type scale, and
   `.accordion-title` inherits its LINE HEIGHT rather than declaring one. Left
   alone the wrapper made every question 18px taller, which is 126px on the
   home page's seven rows. So the heading passes the parent's type through
   unchanged, and `font` does not carry letter-spacing. */
.accordion-heading {
  display: contents;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* The toggle is a <button> now. Same reset as the hamburger; the design's
   `.accordion-title-wrap` supplies the flex row, the padding and the
   colour, and it has to keep supplying them. */
.accordion-title-wrap {
  appearance: none;
  width: 100%;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}/* -------------------------------------------------------------- tab sets
   Two of them: the career page's role filter (`.career-tabs`) and the price
   toggle on the two plan pages (`.pricing-tabs`). Webflow's widget marked
   the open pane `.w--tab-active`; build_css renames that to `.is-active` and
   main.js writes it, kept and renamed in section 2. */
.tabset-link {
  cursor: pointer;
}


/* IX2 a-26 / a-27: the pill slides 100% of the track over 500ms `inOutExpo`
   and the two labels swap colour with it. `.pricing-tab-active` is the pill,
   absolutely positioned across the whole menu, so "100%" is one tab width. */
.pricing-tab-active {
  transition: transform .5s var(--ease-in-out-expo);
}

/* The pill lives INSIDE the first tab link, so it is neither a sibling nor a
   descendant of the second one. `:has()` on the menu is what lets the pill be
   driven by which tab is selected rather than by which one contains it. */
.pricing-tabs-menu:has(.pricing-tab-link.second.is-active) .pricing-tab-active {
  transform: translateX(100%);
}

.pricing-tab-link {
  transition: color .5s var(--ease-in-out-expo);
}

/* The payload's two colours, both from variables that are not in this site's
   `:root`: white for the selected label, #010101 for the other. */
.pricing-tab-link.is-active {
  color: #fff;
}

.pricing-tabs-menu .pricing-tab-link:not(.is-active) {
  color: #010101;
}


/* --------------------------------------------------------------- reveals
   IX2's four stock scroll presets plus one hand-authored fade, 145 elements
   between them. All five are opacity 0 -> 1 on `outQuart`; they differ only
   in the transform group 1 starts from, and `reveal-blur` in its timing.

   The rest state is gated on `.js` -- the class the export's own inline
   script writes onto <html> -- so a visitor with JavaScript off sees the
   page rather than 145 invisible boxes.

   main.js REMOVES all three classes on `animationend`. That is deliberate:
   `animation-fill-mode` would otherwise pin `transform` and `opacity` on the
   element for the rest of the session, and an element whose transform is
   pinned cannot be moved by anything else -- which is how an earlier
   conversion froze four scroll rails at their start value. */
:where(.js) .reveal {
  opacity: 0;
}

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

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

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

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

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

:where(.js) .reveal-blur {
  transform: translate(0, 50px);
  filter: blur(3px);
}

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

/* ...and the state main.js hands over to when the animation ends. A FILLED
   ANIMATION OUTRANKS EVERY NORMAL DECLARATION, so an element still carrying
   `is-revealed` has `transform: none` pinned on it and nothing in CSS can
   move it again -- which is how an earlier conversion froze four scroll rails
   at their start value. This is the same end state as a plain rule, so
   anything else is free to move the element afterwards. */
:where(.js) .reveal.is-shown,
:where(.js) [data-heading-reveal].is-shown .animation-content,
:where(.js) [data-reveal-image].is-shown .view-image-overlay {
  opacity: 1;
  transform: none;
  filter: none;
}

/* The hero image settles at 1.02, not at 1 -- it is the one reveal in this
   payload whose last keyframe is not the element's own rest state. */
:where(.js) [data-reveal-image].is-shown .view-image {
  transform: scale(1.02);
}

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

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

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

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

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

/* a-11, the seven FAQ cards. 1200ms rather than 1000, a 200ms delay of its
   own on top of whatever stagger the event carried, 50px rather than 100,
   and a 3px blur that clears over the FIRST HALF of the move -- the payload
   gives the blur 600ms against the move's 1200. */
.reveal-blur.is-revealed {
  animation-name: reveal-fade, reveal-from-blur;
  animation-duration: 1.2s;
  animation-delay: calc(var(--reveal-delay, 0ms) + 200ms);
}@keyframes reveal-fade {

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

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

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

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

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

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

  from   { transform: translate(0, 50px); filter: blur(3px); }
  50%    { filter: blur(0); }
  to     { transform: none; filter: blur(0); }}


/* IX2 `a`, the page headline, on all twenty pages that have one. The trigger
   is `.animation-content-wrap` and the thing that moves is its own
   `.animation-content` child, which rises 100% of its own height out of the
   wrapper while a 5deg skew straightens. The wrapper clips it. */
[data-heading-reveal] {
  overflow: hidden;
}

:where(.js) [data-heading-reveal] .animation-content {
  opacity: 0;
  transform: translate(0, 100%) skewY(5deg);
}

[data-heading-reveal].is-revealed .animation-content {
  animation: heading-rise 1s var(--ease-out-quart) both;
}@keyframes heading-rise {

  from { opacity: 0; transform: translate(0, 100%) skewY(5deg); }
  to   { opacity: 1; transform: none; }}


/* IX2 a-23, the ten hero images on the blog, service and work detail pages:
   the picture settles from 1.3 to 1.02 over 1100ms while a panel wipes off
   the top of it over 1000ms, both after a 300ms delay. */
:where(.js) [data-reveal-image] .view-image {
  transform: scale(1.3);
}

:where(.js) [data-reveal-image] .view-image-overlay {
  transform: translateY(-100%);
}

[data-reveal-image].is-revealed .view-image {
  animation: view-image-settle 1.1s .3s var(--ease-out-quart) both;
}

[data-reveal-image].is-revealed .view-image-overlay {
  animation: view-overlay-wipe 1s .3s var(--ease-out-quart) both;
}@keyframes view-image-settle {

  from { transform: scale(1.3); }
  to   { transform: scale(1.02); }}
@keyframes view-overlay-wipe {

  from { transform: translateY(-100%); }
  to   { transform: none; }}



/* ---------------------------------------------------------------- hovers
   Fifteen MOUSE_OVER / MOUSE_OUT pairs, all 500ms, all `outQuart` on the way
   in. Every one of them is expressible as a CSS `:hover`, which also gives
   the keyboard the same affordance the pointer had -- so each block matches
   `:focus-visible` and `:focus-within` as well, which the IX2 originals did
   not do at all. */

/* ---- the button family (a-2/a-3, a-13/a-14, a-21/a-22, a-28/a-29,
   a-30/a-31, a-53/a-54) -------------------------------------------------
   One gesture: the label rolls up out of its clip box while a second copy
   arrives from below, and the arrow leaves up-right as its twin arrives from
   down-left. The pill's two colours are the only difference between the
   variants, so they are the only thing the separate blocks below say.

   The arrow's travel is 100% on both axes. The payload spells it that way in
   five of the six lists and `100px` in the sixth (a-15's group 1, where the
   designer typed into the wrong unit field); both leave the 20px clip box
   immediately, so the five agree and the sixth follows them. */
[data-hover] .primary-button-text,
[data-hover] .primary-button-hover-text,
[data-hover] .main-button-text,
[data-hover] .main-button-hover-text,
[data-hover] .view-button-text,
[data-hover] .view-button-hover-text,
[data-hover] .primary-button-icon,
[data-hover] .primary-button-hover-icon,
[data-hover] .primary-button-hover-icon-2,
[data-hover] .primary-button-hover-icon-3 {
  transition: transform .5s var(--ease-out-quart),
              opacity .5s var(--ease-out-quart);
}

:where([data-hover]) .primary-button-hover-text,
:where([data-hover]) .main-button-hover-text,
:where([data-hover]) .view-button-hover-text {
  transform: translateY(100%);
}

:where([data-hover]) .primary-button-hover-icon,
:where([data-hover]) .primary-button-hover-icon-2,
:where([data-hover]) .primary-button-hover-icon-3 {
  transform: translate(-100%, 100%);
}

[data-hover]:is(:hover, :focus-visible) :is(.primary-button-text,
                                            .main-button-text,
                                            .view-button-text) {
  transform: translateY(-100%);
}

[data-hover]:is(:hover, :focus-visible) :is(.primary-button-hover-text,
                                            .main-button-hover-text,
                                            .view-button-hover-text) {
  transform: none;
}

[data-hover]:is(:hover, :focus-visible) .primary-button-icon {
  transform: translate(100%, -100%);
}

[data-hover]:is(:hover, :focus-visible) :is(.primary-button-hover-icon,
                                            .primary-button-hover-icon-2,
                                            .primary-button-hover-icon-3) {
  transform: none;
}

/* Only three of the six lists fade the labels and arrows as well as moving
   them; the `.view-button-*` pair and the white pill move theirs and leave
   the opacity alone. The design already sets `.primary-button-hover-text`
   and `.primary-button-hover-icon` to `opacity: 0`, so this is the pair that
   turns them on. */
[data-hover]:is(:hover, :focus-visible) :is(.primary-button-text,
                                            .primary-button-icon) {
  opacity: 0;
}

[data-hover]:is(:hover, :focus-visible) :is(.primary-button-hover-text,
                                            .primary-button-hover-icon) {
  opacity: 1;
}

/* The pill colours. `[data-hover]` scores (0,1,0) and the design's
   `.primary-button` scores the same, so the later rule -- this one -- wins,
   which is what the runtime's inline style used to do. */
[data-hover] {
  transition: background-color .5s var(--ease-out-quart);
}

[data-hover="primary-button"]:is(:hover, :focus-visible),
[data-hover="hero-view-button"]:is(:hover, :focus-visible) {
  background-color: var(--color--charcoal-gray);
}

[data-hover="secondary-button"]:is(:hover, :focus-visible),
[data-hover="white-button"]:is(:hover, :focus-visible) {
  background-color: var(--color--yellow);
}

/* ---- the footer's social chips (a-19 / a-20) -------------------------
   A box wipes up from height 0 behind the icon while the icon crossfades to
   its second artwork. The payload also animates a border colour on the chip,
   which is inert: `.icon-box` has no border-style, so there is no border to
   colour, and the export bakes the rest state inline on four elements
   without ever drawing it. It is not reproduced. */
.socal-hover-box {
  width: 100%;
  transition: height .5s var(--ease-out-quart);
}

.socal-icon-image,
.socal-icon-hover-image {
  transition: opacity .5s var(--ease-out-quart);
}

[data-hover="social-icon"]:is(:hover, :focus-visible) .socal-hover-box {
  height: 100%;
}

[data-hover="social-icon"]:is(:hover, :focus-visible) .socal-icon-image {
  opacity: 0;
}

[data-hover="social-icon"]:is(:hover, :focus-visible) .socal-icon-hover-image {
  opacity: 1;
}

/* ---- the about page's team cards (a-34/a-35 desktop, a-36/a-37 small) --
   Four lists on one element at two widths. The card fills with the accent,
   a square portrait opens out of nothing and the caption inverts. The two
   bands differ in how far the portrait opens -- 86px above 768px, 50px
   between 480 and 767 -- and in the 10px the author box slides on the small
   one. Below 480px the payload has no hover at all, which is why the first
   band starts there. */
[data-hover="team-card"] {
  transition: background-color .5s var(--ease-out-quart);
}

[data-hover="team-card"] .team-image-box {
  transition: width .5s var(--ease-out-quart),
              height .5s var(--ease-out-quart);
}

[data-hover="team-card"] .team-description {
  transition: color .5s var(--ease-out-quart);
}

[data-hover="team-card"] .team-author-box {
  transition: transform .5s var(--ease-out-quart);
}@media screen and (min-width: 480px) {

  [data-hover="team-card"]:is(:hover, :focus-within) {
    background-color: var(--color--yellow);
  }

  [data-hover="team-card"]:is(:hover, :focus-within) .team-description {
    color: var(--color--white);
  }}
@media screen and (min-width: 768px) {

  [data-hover="team-card"]:is(:hover, :focus-within) .team-image-box {
    width: 86px;
    height: 86px;
  }}
@media screen and (min-width: 480px) and (max-width: 767px) {

  [data-hover="team-card"]:is(:hover, :focus-within) .team-image-box {
    width: 50px;
    height: 50px;
  }

  [data-hover="team-card"]:is(:hover, :focus-within) .team-author-box {
    transform: translateX(10px);
  }}


/* ---- the home page's project rail (a-47 / a-48) ---------------------- */
[data-hover="project-card"] .hover-view-button-box {
  transform: translateY(100%);
  transition: transform .5s var(--ease-out-quart);
}

[data-hover="project-card"]:is(:hover, :focus-within) .hover-view-button-box {
  transform: none;
}

/* ---- the home page's process list (a-67 / a-68) ---------------------- */
[data-hover="progress-list"] {
  transition: background-color .5s var(--ease-out-quart);
}

[data-hover="progress-list"] .description.cool-gray,
[data-hover="progress-list"] .label-01 {
  transition: color .5s var(--ease-out-quart);
}

[data-hover="progress-list"]:is(:hover, :focus-within) {
  background-color: var(--color--yellow);
}

[data-hover="progress-list"]:is(:hover, :focus-within) .description.cool-gray {
  color: var(--color--charcoal-gray);
}

[data-hover="progress-list"]:is(:hover, :focus-within) .label-01 {
  color: var(--color--jet-black);
}

/* ---- the three blog cards (a-51) -------------------------------------
   `useEventTarget: "SIBLINGS"`: the hovered card takes 40.8% and pushes the
   other two to 28% each. Gated to `main`, which is where the row is a row.

   The payload has no MOUSE_OUT list -- the export leaves the widths wherever
   the last hover put them -- so `:has()` on the row is not just the tidier
   way to write it, it is also the fix.

   THE SIBLING RULE EXCLUDES THE HOVERED CARD, and that `:not()` is the whole
   thing working. `:has()` takes the specificity of its argument, so
   `.news-bottom-wrap:has([data-hover]:hover) [data-hover]` scores (0,4,0)
   and beat the (0,3,0) rule meant to widen the card under the pointer -- so
   hovering shrank all three cards to 28% and nothing grew. Written as two
   disjoint sets, neither rule can outrank the other, because no element
   matches both. */
@media screen and (min-width: 992px) {
  [data-hover="news-card"] {
    transition: width .5s var(--ease-out-quart);
  }

  .news-bottom-wrap:has([data-hover="news-card"]:is(:hover, :focus-within))
  [data-hover="news-card"]:not(:hover):not(:focus-within) {
    width: 28%;
  }

  .news-bottom-wrap [data-hover="news-card"]:is(:hover, :focus-within) {
    width: 40.8%;
  }
}


/* -------------------------------------------------------- counter reels
   IX2 a-44 / a-45. Two reels of ten digits inside a one-digit window; each
   travels 100% of its OWN height over 3000ms on the designer's own
   cubic-bezier, so exactly one cell lands in the window.
   `.counter-train` runs up and `.counter-train-two` -- which the design lays
   out `column-reverse` -- runs down. main.js only adds `.is-revealed` when
   the pair scrolls into view, which is what the SCROLL_INTO_VIEW event did.

   EVERY LOOP, COUNTER AND FLOAT BELOW MATCHES `.is-revealed` AND `.is-shown`,
   AND BOTH HALVES ARE LOAD-BEARING. `.is-revealed` is what main.js adds; but
   an element that is ALSO a `.reveal` has that same class taken away again
   when its reveal animation ends and `settleAfter` hands over to `.is-shown`
   -- and a loop keyed on `.is-revealed` alone dies at that handover.

   `.progress-main-wrap` on the home page is exactly that element: a reveal
   and a `[data-float]` host at once. Its two drifting columns started, ran
   for the 1.6s the reveal takes to settle, and then stopped forever. It is
   the only such element in this build, which is precisely why the pairing is
   written on all of them rather than on the one that happens to need it --
   adding `reveal` to any marquee later must not silently break it.

   `:is()` takes the specificity of its most specific argument, so this is
   still a single class and nothing in the cascade moves. */
[data-counter]:is(.is-revealed, .is-shown) .counter-train {
  animation: counter-up 3s var(--ease-counter) both;
}

[data-counter]:is(.is-revealed, .is-shown) .counter-train-two {
  animation: counter-down 3s var(--ease-counter) both;
}@keyframes counter-up {

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

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



/* -------------------------------------------------------------- marquees
   Five strips, no two alike. Four travel 100% of their own width and the
   fifth travels a flat 1000px, which is not a rounding of the same thing:
   the client-logo row on the two plan pages is exactly two copies of a
   1000px group, so a percentage there would move it twice as far as it
   should.

   Each strip is several identical copies laid in a row, and every copy runs
   the same animation, so the row reads as continuous. main.js adds
   `.is-revealed` when the strip scrolls in (or, for the two PAGE_START
   ones, on load). */
/* The two strips whose hook is on the CONTAINER, so what moves is inside it.
   Both are several identical copies laid in a row, and every copy runs the
   same animation, so the row reads as continuous. */
[data-marquee="16s"] > .ticker-item-wrap,
[data-marquee="30s"] .gallery-inner-ticker-wrapper {
  animation: marquee-run 16s linear infinite paused;
}

[data-marquee="30s"] .gallery-inner-ticker-wrapper {
  animation-duration: 30s;
}

/* ...and the two whose hook is on the MOVING ELEMENT itself. The payload
   fires these from PAGE_START rather than from a scroll, so main.js starts
   them on load; there are three copies of each in the markup and each one
   travels the width of itself. */
[data-marquee="60s"] {
  animation: marquee-run 60s linear infinite paused;
}

[data-marquee="16s"]:is(.is-revealed, .is-shown) > .ticker-item-wrap,
[data-marquee="30s"]:is(.is-revealed, .is-shown) .gallery-inner-ticker-wrapper,
[data-marquee="60s"]:is(.is-revealed, .is-shown) {
  animation-play-state: running;
}@keyframes marquee-run {

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


/* The 1000px one. It is the element ITSELF that moves, not its children. */
[data-marquee="20s-1000px"] {
  animation: marquee-run-1000 20s linear infinite paused;
}

[data-marquee="20s-1000px"]:is(.is-revealed, .is-shown) {
  animation-play-state: running;
}@keyframes marquee-run-1000 {

  from { transform: translateX(0); }
  to   { transform: translateX(-1000px); }}


/* The two spins (a-50 / a-55): the home page's star and its smaller twin,
   360deg over 20s, forever. */
[data-spin="20s"] {
  animation: spin 20s linear infinite paused;
}

[data-spin="20s"]:is(.is-revealed, .is-shown) {
  animation-play-state: running;
}@keyframes spin {

  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }}


/* The process list's counter-drift (a-52): the copy sinks 20px as the image
   rises 20px over 3s, and back over the next 3s, forever. Gated to
   `main,medium` -- 768px and up -- which is where the two sit side by side. */
@media screen and (min-width: 768px) {
  [data-float="progress"]:is(.is-revealed, .is-shown) .progress-list {
    animation: float-down 6s ease-in-out infinite;
  }

  [data-float="progress"]:is(.is-revealed, .is-shown) .progress-image {
    animation: float-up 6s ease-in-out infinite;
  }
}@keyframes float-down {

  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(20px); }}
@keyframes float-up {

  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-20px); }}



/* --------------------------------------------------------- scroll scrubs
   Ten SCROLLING_IN_VIEW lists. main.js writes each trigger's scroll progress
   to it as `--scroll-progress`, a number from 0 to 1; every scrubbed element
   below runs a one-second animation that is PAUSED and pulled to that point
   with a negative delay. The payload's keyframe percentages therefore
   survive as keyframe percentages, and the browser interpolates between them
   exactly as the runtime did.

   `animation-fill-mode: both` is what holds the first keyframe before the
   section is reached and the last one after it has gone -- which is what IX2
   does, and the one place in this file where pinning a transform is the
   point rather than the bug. */
/* EVERY SCRUBBED ELEMENT, AND THE FOUR PROPERTIES THAT MAKE THE SCRUB A
   SCRUB. The list below is exactly the set of selectors that carry an
   `animation-name: scrub-*` further down; it has to be, because a keyframe
   list with no duration and no play-state is not an animation at all -- the
   element takes `animation-duration: 0s` and the whole scrub silently does
   nothing.

   That is not hypothetical. This block was written as a single `.scrubbed`
   class, nothing ever put that class on an element, and all ten scroll
   scrubs shipped dead: the home page's metrics sequence, its review
   carousel, its project rail, the about page's goals and film, the career
   page's five-step walk. Every audit passed, because motion is the one thing
   they cannot see, and the parity harness pins the scrubs to their rest
   state on purpose.

   A `[data-scrub] *` shortcut is what NOT to do here: those sections also
   contain reveals, marquees and counter reels, and pausing every animation
   inside them would trade ten dead scrubs for thirty dead everything-else. */
[data-scrub="process"] .process-scroll-divider-in,
[data-scrub="cta-image"],
[data-scrub="cta-image"] .video-image-wrap,
[data-scrub="goals"] .goals-wrap,
[data-scrub="metrics"] .metrics-1st,
[data-scrub="metrics"] .metrics-2nd,
[data-scrub="metrics"] .metrics-3rd,
[data-scrub="review"] .review-text-1,
[data-scrub="review"] .review-text-2,
[data-scrub="review"] .review-text-3,
[data-scrub="review"] .review-author-box._1,
[data-scrub="review"] .review-author-box._2,
[data-scrub="review"] .review-author-box._3,
[data-scrub="project-rail"] .project-collection-list-wrapper._1,
[data-scrub="project-rail"] .project-collection-list-wrapper._2,
[data-scrub="project-rail"] .project-card-title._1,
[data-scrub="project-rail"] .project-card-title._2,
[data-scrub="project-rail"] .project-card-title._3,
[data-scrub="project-titles"] .project-card-title._1,
[data-scrub="project-titles"] .project-card-title._2,
[data-scrub="project-titles"] .project-card-title._3,
[data-scrub="related-projects"] .related-projects-card-wrap,
[data-scrub="behind"] .behind-list-title._1,
[data-scrub="behind"] .behind-list-title._2,
[data-scrub="behind"] .behind-list-title._3,
[data-scrub="behind"] .behind-list-title._4,
[data-scrub="behind"] .behind-list-title._5,
[data-scrub="behind"] .behind-single-list-box.v1,
[data-scrub="behind"] .behind-single-list-box.v2,
[data-scrub="behind"] .behind-single-list-box.v3,
[data-scrub="behind"] .behind-single-list-box.v4,
[data-scrub="behind"] .behind-single-list-box.v5,
[data-scrub="behind"] .behind-single-list-title._1,
[data-scrub="behind"] .behind-description._1,
[data-scrub="behind"] .behind-single-list-title._2,
[data-scrub="behind"] .behind-description._2,
[data-scrub="behind"] .behind-single-list-title._3,
[data-scrub="behind"] .behind-description._3,
[data-scrub="behind"] .behind-single-list-title._4,
[data-scrub="behind"] .behind-description._4,
[data-scrub="behind"] .behind-single-list-title._5,
[data-scrub="behind"] .behind-description._5,
[data-scrub="behind"] .behind-description._1,
[data-scrub="behind"] .behind-description._2,
[data-scrub="behind"] .behind-description._3,
[data-scrub="behind"] .behind-description._4,
[data-scrub="behind"] .behind-description._5,
[data-scrub="career-video"] .animated-image-wrap,
[data-scrub="career-video"] .career-video-text {
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll-progress, 0) * -1s);
}

/* ---- about: the process timeline rule (a-38) ------------------------- */
[data-scrub="process"] .process-scroll-divider-in {
  animation-name: scrub-process-rule;
}@keyframes scrub-process-rule {

  0%, 25%   { height: 0%; }
  85%, 100% { height: 100%; }}


/* ---- about: the CTA film grows (a-41), 992px and up ------------------
   The section fades and scales from a half-size ghost to full at a hard cut
   between 54% and 56%, and the film's own box grows from 38% x 35% to the
   full panel between 35% and 56%. */
[data-scrub="cta-image"] {
  animation-name: scrub-cta-section;
}

[data-scrub="cta-image"] .video-image-wrap {
  animation-name: scrub-cta-box, scrub-cta-shift;
}@keyframes scrub-cta-section {

  0%, 54%   { opacity: 0; transform: scale(.5); }
  56%, 100% { opacity: 1; transform: none; }}
@keyframes scrub-cta-box {

  0%, 35%   { width: 38%; height: 35%; }
  56%, 100% { width: 100%; height: 100%; }}
@keyframes scrub-cta-shift {

  0%, 35%   { translate: 5% 10%; }
  56%, 100% { translate: none; }}


/* ---- about: the goals row slides (a-42), 992px and up ---------------- */
[data-scrub="goals"] .goals-wrap {
  animation-name: scrub-goals;
}@keyframes scrub-goals {

  0%        { transform: translateX(0); }
  52%, 100% { transform: translateX(-33%); }}


/* ---- home: the three metrics swap (a-60) -----------------------------
   Each panel arrives from a 30px blur at scale 0 and leaves through a 30px
   blur at scale 3. The design positions `.metrics-1st` and `.metrics-3rd`
   with a translate of their own, and IX2 composed its scale ON TOP of that,
   so every keyframe here carries the translate as well. Dropping it stacks
   all three panels on one line. */
[data-scrub="metrics"] .metrics-1st { animation-name: scrub-metrics-1; }
[data-scrub="metrics"] .metrics-2nd { animation-name: scrub-metrics-2; }
[data-scrub="metrics"] .metrics-3rd { animation-name: scrub-metrics-3; }@keyframes scrub-metrics-1 {

  0%, 25%   { opacity: 1; filter: blur(0);    transform: translate(0, -100%) scale(1); }
  35%, 100% { opacity: 0; filter: blur(30px); transform: translate(0, -100%) scale(3); }}
@keyframes scrub-metrics-2 {

  0%, 33%   { opacity: 0; filter: blur(30px); transform: scale(0); }
  45%, 55%  { opacity: 1; filter: blur(0);    transform: scale(1); }
  65%, 100% { opacity: 0; filter: blur(30px); transform: scale(3); }}
@keyframes scrub-metrics-3 {

  0%, 63%   { opacity: 0; filter: blur(30px); transform: translate(0, 100%) scale(0); }
  75%, 100% { opacity: 1; filter: blur(0);    transform: translate(0, 100%) scale(1); }}


/* ---- home: the three review quotes swap (a-61) -----------------------
   Two hard cuts, at 48/49 and 70/71, which the keyframes state exactly. */
[data-scrub="review"] .review-text-1 { animation-name: scrub-review-1; }
[data-scrub="review"] .review-text-2 { animation-name: scrub-review-2; }
[data-scrub="review"] .review-text-3 { animation-name: scrub-review-3; }
[data-scrub="review"] .review-author-box._1 { animation-name: scrub-review-dot-1; }
[data-scrub="review"] .review-author-box._2 { animation-name: scrub-review-dot-2; }
[data-scrub="review"] .review-author-box._3 { animation-name: scrub-review-dot-3; }@keyframes scrub-review-1 {

  0%, 48%   { opacity: 1; }
  49%, 100% { opacity: 0; }}
@keyframes scrub-review-2 {

  0%, 48%   { opacity: 0; }
  49%, 70%  { opacity: 1; }
  71%, 100% { opacity: 0; }}
@keyframes scrub-review-3 {

  0%, 70%   { opacity: 0; }
  71%, 100% { opacity: 1; }}
@keyframes scrub-review-dot-1 {

  0%, 48%   { background-color: #383838; }
  49%, 100% { background-color: #212123; }}
@keyframes scrub-review-dot-2 {

  0%, 48%   { background-color: #212123; }
  49%, 70%  { background-color: #383838; }
  71%, 100% { background-color: #212123; }}
@keyframes scrub-review-dot-3 {

  0%, 70%   { background-color: #212123; }
  71%, 100% { background-color: #383838; }}


/* ---- home: the project rail and its title walk (a-70), 992px and up --- */
[data-scrub="project-rail"] .project-collection-list-wrapper._1 {
  animation-name: scrub-rail-1;
}

[data-scrub="project-rail"] .project-collection-list-wrapper._2 {
  animation-name: scrub-rail-2;
}

[data-scrub="project-rail"] .project-card-title._1 { animation-name: scrub-rail-title-1; }
[data-scrub="project-rail"] .project-card-title._2 { animation-name: scrub-rail-title-2; }
[data-scrub="project-rail"] .project-card-title._3 { animation-name: scrub-rail-title-3; }@keyframes scrub-rail-1 {

  0%, 25%   { transform: translateY(0); }
  42%, 100% { transform: translateY(-105%); }}
@keyframes scrub-rail-2 {

  0%, 42%   { transform: translateY(0); }
  60%, 100% { transform: translateY(-105%); }}
@keyframes scrub-rail-title-1 {

  0%, 41%   { color: #fff; }
  42%, 100% { color: #8a8a8a; }}
@keyframes scrub-rail-title-2 {

  0%, 41%   { color: #8a8a8a; }
  42%       { color: #fff; }
  59%, 100% { color: #8a8a8a; }}
@keyframes scrub-rail-title-3 {

  0%, 59%   { color: #8a8a8a; }
  60%, 100% { color: #fff; }}


/* ---- home: the same title walk below 992px (a-62), 480 to 991px ------
   A second list, on a second trigger, driving the same three titles at the
   width where the rail above it is not running. Its steps are its own. */
[data-scrub="project-titles"] .project-card-title._1 { animation-name: scrub-titles-1; }
[data-scrub="project-titles"] .project-card-title._2 { animation-name: scrub-titles-2; }
[data-scrub="project-titles"] .project-card-title._3 { animation-name: scrub-titles-3; }@keyframes scrub-titles-1 {

  0%, 49%   { color: #fff; }
  65%, 100% { color: #8a8a8a; }}
@keyframes scrub-titles-2 {

  0%, 49%   { color: #8a8a8a; }
  65%       { color: #fff; }
  80%, 100% { color: #8a8a8a; }}
@keyframes scrub-titles-3 {

  0%, 65%   { color: #8a8a8a; }
  80%, 100% { color: #fff; }}


/* ---- work detail: the related-projects rail (a-64), 992px and up ----- */
[data-scrub="related-projects"] .related-projects-card-wrap {
  animation-name: scrub-related;
}@keyframes scrub-related {

  0%, 37%   { transform: translateX(0); }
  80%, 100% { transform: translateX(-60%); }}


/* ---- career: the five-step list walks (a-65), 992px and up -----------
   The longest list in the payload: five headings, five panels, five panel
   titles and five descriptions, stepping one band at a time. Each step is a
   hard cut one percent wide (35/36, 47/48, 63/64, 79/80), which is what the
   pairs of keyframes below say. */
[data-scrub="behind"] .behind-list-title._1 { animation-name: scrub-behind-head-1; }
[data-scrub="behind"] .behind-list-title._2 { animation-name: scrub-behind-head-2; }
[data-scrub="behind"] .behind-list-title._3 { animation-name: scrub-behind-head-3; }
[data-scrub="behind"] .behind-list-title._4 { animation-name: scrub-behind-head-4; }
[data-scrub="behind"] .behind-list-title._5 { animation-name: scrub-behind-head-5; }

[data-scrub="behind"] .behind-single-list-box.v1 { animation-name: scrub-behind-box-1; }
[data-scrub="behind"] .behind-single-list-box.v2 { animation-name: scrub-behind-box-2; }
[data-scrub="behind"] .behind-single-list-box.v3 { animation-name: scrub-behind-box-3; }
[data-scrub="behind"] .behind-single-list-box.v4 { animation-name: scrub-behind-box-4; }
[data-scrub="behind"] .behind-single-list-box.v5 { animation-name: scrub-behind-box-5; }

[data-scrub="behind"] .behind-single-list-title._1 { animation-name: scrub-behind-copy-1; }
[data-scrub="behind"] .behind-single-list-title._2 { animation-name: scrub-behind-copy-2; }
[data-scrub="behind"] .behind-single-list-title._3 { animation-name: scrub-behind-copy-3; }
[data-scrub="behind"] .behind-single-list-title._4 { animation-name: scrub-behind-copy-4; }
[data-scrub="behind"] .behind-single-list-title._5 { animation-name: scrub-behind-copy-5; }@keyframes scrub-behind-head-1 {

  0%, 35%   { color: #fff; }
  36%, 100% { color: #8a8a8a; }}
@keyframes scrub-behind-head-2 {

  0%, 35%   { color: #8a8a8a; }
  36%, 47%  { color: #fff; }
  48%, 100% { color: #8a8a8a; }}
@keyframes scrub-behind-head-3 {

  0%, 47%   { color: #8a8a8a; }
  48%, 63%  { color: #fff; }
  64%, 100% { color: #8a8a8a; }}
@keyframes scrub-behind-head-4 {

  0%, 63%   { color: #8a8a8a; }
  64%, 79%  { color: #fff; }
  80%, 100% { color: #8a8a8a; }}
@keyframes scrub-behind-head-5 {

  0%, 79%   { color: #8a8a8a; }
  80%, 100% { color: #fff; }}
@keyframes scrub-behind-box-1 {

  0%, 35%   { background-color: #9fadf4; }
  36%, 100% { background-color: #212123; }}
@keyframes scrub-behind-box-2 {

  0%, 35%   { background-color: #212123; }
  36%, 47%  { background-color: #9fadf4; }
  48%, 100% { background-color: #212123; }}
@keyframes scrub-behind-box-3 {

  0%, 47%   { background-color: #212123; }
  48%, 63%  { background-color: #9fadf4; }
  64%, 100% { background-color: #212123; }}
@keyframes scrub-behind-box-4 {

  0%, 63%   { background-color: #212123; }
  64%, 79%  { background-color: #9fadf4; }
  80%, 100% { background-color: #212123; }}
@keyframes scrub-behind-box-5 {

  0%, 79%   { background-color: #212123; }
  80%, 100% { background-color: #9fadf4; }}


/* The panel's own title and copy invert with the panel behind them: black on
   the accent, white or grey on the dark. The payload gives the title #040404
   and the description #040404 on the lit step, #fff and #8a8a8a off it -- so
   the two share a keyframe list only where they agree, and they agree
   everywhere except the unlit colour. That difference is one declaration,
   below. */
@keyframes scrub-behind-copy-1 {
  0%, 35%   { color: #040404; }
  36%, 100% { color: #fff; }
}@keyframes scrub-behind-copy-2 {

  0%, 35%   { color: #fff; }
  36%, 47%  { color: #040404; }
  48%, 100% { color: #fff; }}
@keyframes scrub-behind-copy-3 {

  0%, 47%   { color: #fff; }
  48%, 63%  { color: #040404; }
  64%, 100% { color: #fff; }}
@keyframes scrub-behind-copy-4 {

  0%, 63%   { color: #fff; }
  64%, 79%  { color: #040404; }
  80%, 100% { color: #fff; }}
@keyframes scrub-behind-copy-5 {

  0%, 79%   { color: #fff; }
  80%, 100% { color: #040404; }}


/* THE DESCRIPTIONS RUN THE TITLES' TIMING IN A DIFFERENT PAIR OF COLOURS.
   Each list item lights up in turn: its title and its paragraph both go to
   `--color--near-black` on the lilac card. What differs is the UNLIT colour
   -- a title falls back to white, a description to `--color--cool-gray` --
   which is exactly what the payload says (five TEXT_COLOR steps per element,
   `--color--white` for the titles and `--color--cool-gray` for the copy).

   That was first written as one shared `scrub-behind-desc` on all five,
   meaning to restate only the colour. It cannot: `animation-name` REPLACES,
   it does not layer, so a flat grey-to-grey list silently took the place of
   all five per-item animations and the paragraphs never changed colour at
   all. Five keyframe lists, one per item, is the only way to say this. */
[data-scrub="behind"] .behind-description._1 {
  animation-name: scrub-behind-desc-1;
}

[data-scrub="behind"] .behind-description._2 {
  animation-name: scrub-behind-desc-2;
}

[data-scrub="behind"] .behind-description._3 {
  animation-name: scrub-behind-desc-3;
}

[data-scrub="behind"] .behind-description._4 {
  animation-name: scrub-behind-desc-4;
}

[data-scrub="behind"] .behind-description._5 {
  animation-name: scrub-behind-desc-5;
}@keyframes scrub-behind-desc-1 {

  0%, 35%   { color: #040404; }
  36%, 100% { color: #8a8a8a; }}
@keyframes scrub-behind-desc-2 {

  0%, 35%   { color: #8a8a8a; }
  36%, 47%  { color: #040404; }
  48%, 100% { color: #8a8a8a; }}
@keyframes scrub-behind-desc-3 {

  0%, 47%   { color: #8a8a8a; }
  48%, 63%  { color: #040404; }
  64%, 100% { color: #8a8a8a; }}
@keyframes scrub-behind-desc-4 {

  0%, 63%   { color: #8a8a8a; }
  64%, 79%  { color: #040404; }
  80%, 100% { color: #8a8a8a; }}
@keyframes scrub-behind-desc-5 {

  0%, 79%   { color: #8a8a8a; }
  80%, 100% { color: #040404; }}




/* ---- career: the film grows (a-69), 992px and up ---------------------
   The film's box goes from half the panel to all of it while its corner
   radius -- which the design reads from `--color--border-image`, a variable
   whose name says colour and whose value is a length -- closes from 1vw to
   0, and the caption over it sinks 300px. */
[data-scrub="career-video"] .animated-image-wrap {
  animation-name: scrub-career-box;
}

[data-scrub="career-video"] .career-video-text {
  animation-name: scrub-career-caption;
}@keyframes scrub-career-box {

  0%, 30%   { width: 50%; height: 24vh; border-radius: 1vw; }
  75%, 100% { width: 100%; height: 100vh; border-radius: 0; }}
@keyframes scrub-career-caption {

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



/* --------------------------------------------------------- mouse parallax
   IX2 a-40. The about page's film drifts with the pointer -- 45vw either
   side of centre and 40vh above and below it -- measured against the film's
   OWN box (`basedOn: "ELEMENT"`, resting at 50%) rather than the viewport.
   main.js writes the two offsets; the smoothing the payload asks for (90 on
   X, 50 on Y) is the transition below rather than a per-frame lerp. */
[data-parallax="mouse"] {
  --parallax-x: 0px;
  --parallax-y: 0px;
  transform: translate(var(--parallax-x), var(--parallax-y));
  transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}


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

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


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

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

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

.cart-form {
  display: block;
}

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

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

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


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

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

  .reveal.is-revealed,
  [data-heading-reveal].is-revealed .animation-content,
  [data-reveal-image].is-revealed .view-image,
  [data-reveal-image].is-revealed .view-image-overlay {
    animation: none;
  }

  [data-marquee="16s"] > .ticker-item-wrap,
  [data-marquee="30s"] .gallery-inner-ticker-wrapper,
  [data-marquee="60s"],
  [data-marquee="20s-1000px"],
  [data-spin="20s"],
  [data-float="progress"]:is(.is-revealed, .is-shown) .progress-list,
  [data-float="progress"]:is(.is-revealed, .is-shown) .progress-image,
  [data-counter]:is(.is-revealed, .is-shown) .counter-train,
  [data-counter]:is(.is-revealed, .is-shown) .counter-train-two {
    animation: none;
  }

  /* The reels still have to land on their number, which is the whole point
     of them; they just get there without the three seconds. */
  [data-counter]:is(.is-revealed, .is-shown) .counter-train {
    transform: translateY(-100%);
  }

  [data-counter]:is(.is-revealed, .is-shown) .counter-train-two {
    transform: translateY(100%);
  }

  [data-parallax="mouse"] {
    transform: none;
  }

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