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

   Fonts: assets/fonts/fonts.css -- Inter Display, self-hosted woff2.
   The export shipped the same four faces as raw TrueType (1.6 MB);
   these are the same outlines recompressed to about a third the
   size. Inter Display is SIL Open Font License 1.1, so unlike the
   licensed families some earlier exports carried it needs no
   substitution and no rule in this sheet was rewritten for it. */

/* ======================================================================
   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-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 (hand-written)
   ======================================================================

   Section 2 dropped every framework rule that existed only so Webflow's
   runtime could drive it -- the navbar overlay, the dropdown, the slider, the
   background-video widget, the lightbox and the icon webfont. A few of those
   rules were also carrying real LAYOUT, and the design sheet was written on
   top of them: it overrides what it wants to change and inherits the rest.

   So the load-bearing half is restated here, re-keyed on this design's own
   class names, and emitted BETWEEN the framework and the design -- which is
   the whole point of section 2b. The cascade a buyer gets is the cascade the
   export had: same order, same specificity, so every design rule still wins
   exactly the arguments it used to win.

   Only geometry the DESIGN is meant to be able to override belongs here. A
   state the design knows nothing about (an accordion that starts closed, a
   nav overlay that starts hidden) must come AFTER the design instead, and
   lives in section 4 -- a previous conversion shipped a permanently-open FAQ
   by putting the collapse in this file, where the design's own
   `display: block` beat it on source order.

   Everything below was read out of `probe_widget_css.py`'s side-by-side dump
   of "what the dropped rule said" against "what the design says about the
   same element", and `audit_dropped.py` fails the build if a property that
   was dropped is supplied by nothing.

   Two rules were deliberately NOT transcribed, and both were mistakes in
   earlier conversions:

     * `.w-nav-brand { padding-left: 10px }` lives inside
       `@media (max-width: 767px)`. The design says `padding-left: 0` at top
       level and the design sheet is emitted LATER, so in the export that 10px
       never applies at any width. Transcribing it invents a logo offset that
       no measurement can see (the harness measures section tops, and a logo
       moved sideways in a flex row moves neither).
     * `.w-dropdown-btn, .w-dropdown-toggle, .w-dropdown-link` declared
       `color: #222222; text-decoration: none`. Both are already supplied
       here by the design's own bare `a` rule and by `.accordion-title`, so
       neither needs restating -- unlike the conversion where the design had
       no bare `a` rule and 846 dropdown links shipped blue and underlined.
   ====================================================================== */

/* ---- the navbar --------------------------------------------------------
   `.w-nav` stacked the whole header above the page. The design gives
   `.navbar` `position: absolute; inset: 0 0 auto` -- it sits OVER the hero
   video -- but never restates the stacking order, so without this the hero's
   own positioned children paint on top of the menu.

   The clearfix pseudo-elements go with it. In the export they are real boxes:
   `.navbar` is `display: flex; flex-flow: column`, which blockifies both into
   flex ITEMS, and `content: " "` in a `display: table` box is a line of text
   tall. Two of them, one at each end of the column. They are reproduced here
   rather than dropped because the header's height in the export includes
   them, and a header that is a few pixels shorter moves the first section of
   every page. */
.navbar {
  z-index: 1000;
}

.navbar:before,
.navbar:after {
  content: " ";
  display: table;
  grid-area: 1 / 1 / 2 / 2;
}

/* `.w-nav-brand`. `float: left` is inert inside the flex row the design
   makes of `.navbar-content`, and the colour comes from the design's bare `a`
   rule, so only the positioning context survives. */
.navbar-logo-link {
  position: relative;
}

/* `.w-nav-menu`. Above 991px this is an ordinary flex item in the header row;
   below it, main.js opens it as an overlay and section 4 owns that state. */
.nave-menu {
  position: relative;
}

/* `.w-nav-link` -- the seven links in the mobile "Pages" panel. The design
   sets their colour, padding and margins and the bare `a` rule kills the
   underline, so what is left is the box: they are laid out by a column flex
   parent, which blockifies `inline-block`, but the positioning context is
   real (the hover slides them 8px). */
.nav-menu {
  position: relative;
  display: inline-block;
}

/* `.w-nav-button` -- the hamburger's outer box. `display: none` is the only
   reason it is invisible above 991px: the design's `.menu-button` says
   nothing about display until `@media (max-width: 991px)`, where it says
   `flex`. Dropping this rule puts a hamburger next to the full desktop menu.

   `padding: 18px` and `font-size: 24px` are NOT transcribed: the design sets
   `padding: 0` at top level (and wins on source order), and the button
   contains two images rather than the framework's icon glyph. */
.menu-button {
  position: relative;
  cursor: pointer;
  display: none;
}

/* No `display: block` below 991px to match the framework's own
   `[data-collapse='medium']` rule: the design already says `display: flex`
   there, in a later sheet, so restating it would be a dead declaration. What
   this file has to supply is the `display: none` ABOVE that width, which the
   design says nothing about. */

/* ---- the FAQ accordion -------------------------------------------------
   Built on Webflow's DROPDOWN widget, so its geometry came from
   `.w-dropdown` / `.w-dropdown-toggle` / `.w-dropdown-list`.

   The design overrides nearly all of it -- `.accordion` is a static column
   flex box, `.accordion-title-wrap` a `space-between` flex row,
   `.accordion-description-wrap` a static full-width block -- which leaves
   only the pointer and the fact that the toggle is a control rather than
   text. The panel's closed state is a STATE, so it is in section 4.

   `min-width: 100%` on `.w-dropdown-list` is not restated here, and that is a
   deliberate reversal of an earlier conversion where it WAS load-bearing: the
   design already gives `.accordion-description-wrap` `width: 100%`, so a
   minimum of the same 100% can never clamp anything. */
.accordion-title-wrap {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* ---- the two sliders ---------------------------------------------------
   `.testimonials-slider` (the home page's quote carousel) and `.scroll` (the
   listing / project image slider) both came from `.w-slider`, and the design
   wrote only what it wanted to change. What it left to the framework is the
   carousel itself:

     * the track is a nowrap line of full-width inline-block slides. Every one
       of `white-space`, `display`, `vertical-align` and `width` below is
       load-bearing -- drop any and the slides stack vertically instead of
       queueing up beside each other.
     * `.scroll` is never given a `position` by the design, and its two arrows
       are absolutely positioned. Without the containing block they escape to
       the nearest positioned ancestor, which is the section.

   `height: 300px` and `background: #dddddd` from `.w-slider` are NOT
   transcribed: the design sets `height: auto` on one and a real background on
   both, so the framework values were never visible. Neither is
   `.testimonials-slider`'s `position`, for the same reason the navbar's is
   not: the design declares it itself, later in the same stylesheet, so a
   restatement here would be a rule that reads as load-bearing and does
   nothing. `audit_cascade.py` fails the build on exactly that. */
.scroll {
  position: relative;
}

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

/* ...and the full height, on the mask the design does NOT give a height to.
   `.testimonials-slider-mask` is `height: auto` in the design sheet, so
   transcribing the framework's 100% onto it as well would be a dead rule. */
.mask {
  height: 100%;
}

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

/* The four arrows. The design positions each one and gives it a size and a
   colour; `.w-slider-arrow-left` / `-right` supplied the rest -- that they
   are absolutely positioned at all, that they clip their icon, and that they
   are clickable. `width: 80px`, `color: white` and `font-size: 40px` are not
   transcribed: all four carry their own width and an <img>, not a glyph. */
.left-arrow,
.right-arrow,
.project-left-arrow,
.project-right-arrow {
  position: absolute;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* ---- the three background videos ---------------------------------------
   `.hero-background` (home), `.background-video` (ten section backdrops) and
   `.about-video` (the company page). The design gives each one a height and
   the hero its absolute placement; everything that makes a <video> behave as
   a BACKDROP came from `.w-background-video`.

   The `> video` rule is the whole trick: the film is pushed behind the
   content on a negative z-index and blown up past all four edges so that
   `object-fit: cover` has room to crop against, whatever the section's aspect
   ratio turns out to be. */
.hero-background,
.background-video,
.about-video {
  overflow: hidden;
  color: #fff;
}

/* `position` only where the design does not set one. `.hero-background` is
   `position: absolute; inset: 0` in the design sheet -- it is the hero's
   backdrop, not a section of its own. */
.background-video,
.about-video {
  position: relative;
}

.hero-background > video,
.background-video > video,
.about-video > video {
  position: absolute;
  z-index: -100;
  margin: auto;
  top: -100%;
  right: -100%;
  bottom: -100%;
  left: -100%;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50% 50%;
  object-fit: cover;
}

/* Safari paints its own giant play button over a muted autoplaying video
   until it is told not to. */
.hero-background > video::-webkit-media-controls-start-playback-button,
.background-video > video::-webkit-media-controls-start-playback-button,
.about-video > video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

/* The play / pause control. The design gives it only a `z-index`, so its
   corner placement, its transparent chrome and -- crucially -- the rule that
   hides whichever of its two icons is currently `hidden` all came from the
   framework. Without the last one both the pause icon and the play icon
   render at once. */
.play-pause-button {
  position: absolute;
  bottom: 1em;
  right: 1em;
  padding: 0;
  background-color: transparent;
}

.play-pause-button > [hidden] {
  display: none !important;
}

/* ======================================================================
   3. Slateon design
   ====================================================================== */
:root {
  --font-family--primary-font: Interdisplay, Arial, sans-serif;
  --color--midnight-teal: #101e21;
  --_typography---paragraph--font-size: 16px;
  --_typography---paragraph--line-height: var(--line-height--line-height-xl);
  --_typography---paragraph--font-weight: var(--font-weight--regular);
  --_typography---paragraph--letter-spacing: 0px;
  --_spacing---margin-padding--spacing-zero: 0px;
  --_typography---heading-h1--font-size: 102px;
  --_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: -5.1px;
  --_typography---heading-h2--font-size: 76px;
  --_typography---heading-h2--line-height: var(--line-height--line-height-m);
  --_typography---heading-h2--font-weight: var(--font-weight--medium);
  --_typography---heading-h2--letter-spacing: -3.04px;
  --_typography---heading-h3--font-size: 54px;
  --_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.62px;
  --_typography---heading-h4--font-size: 36px;
  --_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: -1.08px;
  --_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--medium);
  --_typography---heading-h5--letter-spacing: -.48px;
  --_typography---heading-h6--font-size: 26px;
  --_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;
  --line-height--line-height-xl: 140%;
  --font-weight--regular: 400;
  --_spacing---margin-padding--spacing-regular: 30px;
  --_spacing---margin-padding--spacing-xxsmall: 12px;
  --_spacing---margin-padding--spacing-slim: 18px;
  --color--ash-teal: #6a787b;
  --_spacing---margin-padding--spacing-xxbig: 75px;
  --_spacing---margin-padding--spacing-xxjumbo: 150px;
  --_spacing---margin-padding--utlity-hero: 168px;
  --_spacing---margin-padding--spacing-xxxbig: 80px;
  --_spacing---margin-padding--spacing-xsmall: 16px;
  --_spacing---margin-padding--spacing-colossal: 220px;
  --_spacing---margin-padding--spacing-giant: 160px;
  --_spacing---margin-padding--spacing-large: 40px;
  --_spacing---margin-padding--inner-banner-space: 224px;
  --_spacing---margin-padding--spacing-jumbo: 100px;
  --_spacing---margin-padding--spacing-tiny: 10px;
  --_spacing---margin-padding--spacing-immense: 204px;
  --_spacing---margin-padding--spacing-xxlarge: 50px;
  --_spacing---margin-padding--spacing-big: 60px;
  --_spacing---gap--gp-30: 30px;
  --color--cool-gray: #7f8485;
  --color--transparent: transparent;
  --color--storm-teal: #1b292c;
  --color--yellow: #e1f89b;
  --color--white: white;
  --color--light-mist: #d6dddf;
  --_typography---paragraph-large--font-size: 18px;
  --_typography---paragraph-large--line-height: var(--line-height--line-height-xl);
  --_typography---paragraph-large--font-weight: var(--font-weight--regular);
  --_spacing---radius--radius-s: 6px;
  --_spacing---margin-padding--spacing-medium: 20px;
  --_spacing---margin-padding--spacing-medium-rare: 24px;
  --font-weight--medium: 500;
  --color--ash-gray: #6a7071;
  --_spacing---margin-padding--spacing-small: 15px;
  --color--mist-white: #f0f4f5;
  --color--pale-lime: #f5fbca;
  --_spacing---margin-padding--spacing-xjumbo: 140px;
  --_spacing---margin-padding--spacing-normal: 32px;
  --_typography---paragraph-large--primary-text: 20px;
  --_spacing---margin-padding--spacing-xbig: 68px;
  --_spacing---gap--gp-10: 10px;
  --_spacing---margin-padding--spacing-massive: 158px;
  --_spacing---radius--radius-l: 12px;
  --_spacing---radius--circle-round: 50%;
  --_spacing---radius--radius-m: 10px;
  --_spacing---radius--radius-xl: 16px;
  --_spacing---radius--radius-xxl: 20px;
  --_typography---paragraph-large--counter-line-height: 54px;
  --_spacing---margin-padding--spacing-xxxlarge: 54px;
  --font-weight--bold: 700;
  --_spacing---radius--radius-xs: 4px;
  --_spacing---radius--radius-none: 0px;
  --_spacing---margin-padding--spacing-xlarge: 45px;
  --_typography---text-xsmall--font-size: 10px;
  --_spacing---gap--gap-s: 0px;
  --line-height--line-height-s: 100%;
  --line-height--line-height-m: 110%;
  --line-height--line-height-l: 120%;
  --line-height--line-height-x: 130%;
  --line-height--line-height-2xl: 150%;
  --font-weight--semi-bold: 600;
  --font-weight--extra-bold: 800;
  --_typography---paragraph-large--letter-spacing: 0px;
}
.wf-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.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-commercecartwrapper {
  display: inline-block;
  position: relative;
}
.wf-commerce-commercecartopenlink {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: flex;
}
.wf-commerce-commercecartopenlinkcount {
  color: #3898ec;
  text-align: center;
  background-color: #fff;
  border-radius: 9px;
  min-width: 18px;
  height: 18px;
  margin-left: 8px;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  display: inline-block;
}
.wf-commerce-commercecartcontainerwrapper {
  z-index: 1001;
  background-color: #000c;
  position: fixed;
  inset: 0;
}
.wf-commerce-commercecartcontainerwrapper--cartType-modal {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.wf-commerce-commercecartcontainer {
  background-color: #fff;
  flex-direction: column;
  width: 100%;
  min-width: 320px;
  max-width: 480px;
  display: flex;
  overflow: auto;
  box-shadow: 0 5px 25px #00000040;
}
.wf-commerce-commercecartheader {
  border-bottom: 1px solid #e6e6e6;
  flex: none;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  display: flex;
  position: relative;
}
.wf-commerce-commercecartheading {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}
.wf-commerce-commercecartcloselink {
  width: 16px;
  height: 16px;
}
.wf-commerce-commercecartformwrapper {
  flex-direction: column;
  flex: 1;
  display: flex;
}
.wf-commerce-commercecartform {
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  display: flex;
}
.wf-commerce-commercecartlist {
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: 12px 24px;
  overflow: auto;
}
.wf-commerce-commercecartitem {
  align-items: flex-start;
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
}
.wf-commerce-commercecartitemimage {
  width: 60px;
  height: 0%;
}
.wf-commerce-commercecartiteminfo {
  flex-direction: column;
  flex: 1;
  margin-left: 16px;
  margin-right: 16px;
  display: flex;
}
.wf-commerce-commercecartproductname {
  font-weight: 700;
}
.wf-commerce-commercecartoptionlist {
  margin-bottom: 0;
  padding-left: 0;
  text-decoration: none;
  list-style-type: none;
}
.wf-commerce-commercecartquantity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 60px;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 6px 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecartquantity::placeholder {
  color: #999;
}
.wf-commerce-commercecartquantity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecartfooter {
  border-top: 1px solid #e6e6e6;
  flex-direction: column;
  flex: none;
  padding: 16px 24px 24px;
  display: flex;
}
.wf-commerce-commercecartlineitem {
  flex: none;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  display: flex;
}
.wf-commerce-commercecartordervalue {
  font-weight: 700;
}
.wf-commerce-commercecartcheckoutbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  text-align: center;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 2px;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: block;
}
.wf-commerce-commercecartemptystate {
  flex: 1;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
}
.wf-commerce-commercecarterrorstate {
  background-color: #ffdede;
  flex: none;
  margin: 0 24px 24px;
  padding: 10px;
}
.wf-commerce-commerceaddtocartform {
  margin: 0 0 15px;
}
.wf-commerce-commerceaddtocartbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: flex;
}
.wf-commerce-commerceaddtocartbutton.is-disabled {
  color: #666;
  cursor: not-allowed;
  background-color: #e6e6e6;
  border-color: #e6e6e6;
  outline-style: none;
}
.wf-commerce-commerceaddtocartoutofstock {
  background-color: #ddd;
  margin-top: 10px;
  padding: 10px;
}
.wf-commerce-commerceaddtocarterror {
  background-color: #ffdede;
  margin-top: 10px;
  padding: 10px;
}
.wf-commerce-commercecheckoutformcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
.wf-commerce-commercelayoutcontainer {
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.wf-commerce-commercelayoutmain {
  flex: 0 800px;
  margin-right: 20px;
}
.wf-commerce-commercecheckoutcustomerinfowrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutblockheader {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 20px;
  display: flex;
}
.wf-commerce-commercecheckoutblockcontent {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 20px;
}
.wf-commerce-commercecheckoutlabel {
  margin-bottom: 8px;
}
.wf-commerce-commercecheckoutemailinput {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutemailinput::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutemailinput:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingaddresswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutshippingfullname {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingfullname::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingfullname:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstreetaddress {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstreetaddress::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstreetaddress:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutrow {
  margin-left: -8px;
  margin-right: -8px;
  display: flex;
}
.wf-commerce-commercecheckoutcolumn {
  flex: 1;
  padding-left: 8px;
  padding-right: 8px;
}
.wf-commerce-commercecheckoutshippingcity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingcity::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingcity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstateprovince {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstateprovince::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstateprovince:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingzippostalcode {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingzippostalcode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingzippostalcode:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingcountryselector {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingcountryselector::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingcountryselector:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingmethodswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutshippingmethodslist {
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}
.wf-commerce-commercecheckoutshippingmethoditem {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  flex-direction: row;
  align-items: baseline;
  margin-bottom: 0;
  padding: 16px;
  font-weight: 400;
  display: flex;
}
.wf-commerce-commercecheckoutshippingmethoddescriptionblock {
  flex-direction: column;
  flex-grow: 1;
  margin-left: 12px;
  margin-right: 12px;
  display: flex;
}
.wf-commerce-commerceboldtextblock {
  font-weight: 700;
}
.wf-commerce-commercecheckoutshippingmethodsemptystate {
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 64px 16px;
}
.wf-commerce-commercecheckoutpaymentinfowrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutcardnumber {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardnumber::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardnumber:focus, .wf-commerce-commercecheckoutcardnumber.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutcardexpirationdate {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardexpirationdate::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardexpirationdate:focus, .wf-commerce-commercecheckoutcardexpirationdate.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutcardsecuritycode {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardsecuritycode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardsecuritycode:focus, .wf-commerce-commercecheckoutcardsecuritycode.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingaddresstogglewrapper {
  flex-direction: row;
  display: flex;
}
.wf-commerce-commercecheckoutbillingaddresstogglecheckbox {
  margin-top: 4px;
}
.wf-commerce-commercecheckoutbillingaddresstogglelabel {
  margin-left: 8px;
  font-weight: 400;
}
.wf-commerce-commercecheckoutbillingaddresswrapper {
  margin-top: 16px;
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutbillingfullname {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingfullname::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingfullname:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstreetaddress {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstreetaddress::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstreetaddress:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingcity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingcity::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingcity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstateprovince {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstateprovince::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstateprovince:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingzippostalcode {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingzippostalcode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingzippostalcode:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingcountryselector {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingcountryselector::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingcountryselector:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutorderitemswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutsummaryblockheader {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 20px;
  display: flex;
}
.wf-commerce-commercecheckoutorderitemslist {
  margin-bottom: -20px;
}
.wf-commerce-commercecheckoutorderitem {
  margin-bottom: 20px;
  display: flex;
}
.wf-commerce-commercecheckoutorderitemdescriptionwrapper {
  flex-grow: 1;
  margin-left: 16px;
  margin-right: 16px;
}
.wf-commerce-commercecheckoutorderitemquantitywrapper {
  white-space: pre-wrap;
  display: flex;
}
.wf-commerce-commercecheckoutorderitemoptionlist {
  margin-bottom: 0;
  padding-left: 0;
  text-decoration: none;
  list-style-type: none;
}
.wf-commerce-commercelayoutsidebar {
  flex: 0 0 320px;
  position: sticky;
  top: 20px;
}
.wf-commerce-commercecheckoutordersummarywrapper {
  margin-bottom: 20px;
}.wf-commerce-commercecheckoutsummarylineitem {
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 8px;
  display: flex;
}

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

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

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

  .wf-commerce-commercecartcontainerwrapper--cartType-modal {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }  .wf-commerce-commercecartquantity, .wf-commerce-commercecheckoutemailinput, .wf-commerce-commercecheckoutshippingfullname, .wf-commerce-commercecheckoutshippingstreetaddress, .wf-commerce-commercecheckoutshippingstreetaddressoptional {
    font-size: 16px;
  }

  .wf-commerce-commercecheckoutrow {
    flex-direction: column;
  }
  .wf-commerce-commercecheckoutshippingcity, .wf-commerce-commercecheckoutshippingstateprovince, .wf-commerce-commercecheckoutshippingzippostalcode, .wf-commerce-commercecheckoutshippingcountryselector, .wf-commerce-commercecheckoutcardnumber, .wf-commerce-commercecheckoutcardexpirationdate, .wf-commerce-commercecheckoutcardsecuritycode, .wf-commerce-commercecheckoutbillingfullname, .wf-commerce-commercecheckoutbillingstreetaddress, .wf-commerce-commercecheckoutbillingstreetaddressoptional, .wf-commerce-commercecheckoutbillingcity, .wf-commerce-commercecheckoutbillingstateprovince, .wf-commerce-commercecheckoutbillingzippostalcode, .wf-commerce-commercecheckoutbillingcountryselector {
    font-size: 16px;
  }}

body {
  font-family: var(--font-family--primary-font);
  color: var(--color--midnight-teal);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
  letter-spacing: var(--_typography---paragraph--letter-spacing);
  --_typography---paragraph--font-size: 16px;
  --_typography---paragraph--line-height: var(--line-height--line-height-xl);
  --_typography---paragraph--font-weight: var(--font-weight--regular);
  --_typography---paragraph--letter-spacing: 0px;
  --_typography---heading-h1--font-size: 102px;
  --_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: -5.1px;
  --_typography---heading-h2--font-size: 76px;
  --_typography---heading-h2--line-height: var(--line-height--line-height-m);
  --_typography---heading-h2--font-weight: var(--font-weight--medium);
  --_typography---heading-h2--letter-spacing: -3.04px;
  --_typography---heading-h3--font-size: 54px;
  --_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.62px;
  --_typography---heading-h4--font-size: 36px;
  --_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: -1.08px;
  --_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--medium);
  --_typography---heading-h5--letter-spacing: -.48px;
  --_typography---heading-h6--font-size: 26px;
  --_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-large--line-height: var(--line-height--line-height-xl);
  --_typography---paragraph-large--font-weight: var(--font-weight--regular);
  --_typography---paragraph-large--primary-text: 20px;
  --_typography---paragraph-large--counter-line-height: 54px;
  --_typography---text-xsmall--font-size: 10px;
  --_typography---paragraph-large--letter-spacing: 0px;
  --_spacing---margin-padding--spacing-zero: 0px;
  --_spacing---margin-padding--spacing-regular: 30px;
  --_spacing---margin-padding--spacing-xxsmall: 12px;
  --_spacing---margin-padding--spacing-slim: 18px;
  --_spacing---margin-padding--spacing-xxbig: 75px;
  --_spacing---margin-padding--spacing-xxjumbo: 150px;
  --_spacing---margin-padding--utlity-hero: 168px;
  --_spacing---margin-padding--spacing-xxxbig: 80px;
  --_spacing---margin-padding--spacing-xsmall: 16px;
  --_spacing---margin-padding--spacing-colossal: 220px;
  --_spacing---margin-padding--spacing-giant: 160px;
  --_spacing---margin-padding--spacing-large: 40px;
  --_spacing---margin-padding--inner-banner-space: 224px;
  --_spacing---margin-padding--spacing-jumbo: 100px;
  --_spacing---margin-padding--spacing-tiny: 10px;
  --_spacing---margin-padding--spacing-immense: 204px;
  --_spacing---margin-padding--spacing-xxlarge: 50px;
  --_spacing---margin-padding--spacing-big: 60px;
  --_spacing---gap--gp-30: 30px;
  --_spacing---radius--radius-s: 6px;
  --_spacing---margin-padding--spacing-medium: 20px;
  --_spacing---margin-padding--spacing-medium-rare: 24px;
  --_spacing---margin-padding--spacing-small: 15px;
  --_spacing---margin-padding--spacing-xjumbo: 140px;
  --_spacing---margin-padding--spacing-normal: 32px;
  --_spacing---margin-padding--spacing-xbig: 68px;
  --_spacing---gap--gp-10: 10px;
  --_spacing---margin-padding--spacing-massive: 158px;
  --_spacing---radius--radius-l: 12px;
  --_spacing---radius--circle-round: 50%;
  --_spacing---radius--radius-m: 10px;
  --_spacing---radius--radius-xl: 16px;
  --_spacing---radius--radius-xxl: 20px;
  --_spacing---margin-padding--spacing-xxxlarge: 54px;
  --_spacing---radius--radius-xs: 4px;
  --_spacing---radius--radius-none: 0px;
  --_spacing---margin-padding--spacing-xlarge: 45px;
  --_spacing---gap--gap-s: 0px;
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  margin-top: var(--_spacing---margin-padding--spacing-zero);
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  color: var(--color--midnight-teal);
  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--spacing-zero);
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  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--spacing-zero);
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  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--spacing-zero);
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  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--spacing-zero);
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  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--spacing-zero);
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  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--spacing-zero);
  color: var(--color--midnight-teal);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
  letter-spacing: var(--_typography---paragraph--letter-spacing);
}
a {
  color: var(--color--midnight-teal);
  line-height: var(--line-height--line-height-xl);
  font-weight: var(--font-weight--regular);
  text-decoration: none;
}
ul {
  margin-top: 0;
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  padding-left: var(--_spacing---margin-padding--spacing-regular);
}
img {
  object-fit: cover;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  display: inline-block;
}
label {
  margin-bottom: var(--_spacing---margin-padding--spacing-xxsmall);
  color: var(--color--midnight-teal);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
  display: block;
}
strong {
  font-weight: bold;
}
blockquote {
  border-left: 5px solid #e2e2e2;
  margin-bottom: 10px;
  padding: 10px 20px;
  font-size: 18px;
  line-height: 22px;
}
.utility-page-form {
  flex-direction: column;
  align-items: center;
  display: flex;
}
.style-inner-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);
}
.footrer-copyright-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-slim);
  grid-row-gap: var(--_spacing---margin-padding--spacing-slim);
  flex-flow: wrap;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.style-details {
  color: var(--color--ash-teal);
}
.style-details.max-with {
  text-align: center;
  max-width: 600px;
}
.section {
  padding-top: var(--_spacing---margin-padding--spacing-xxbig);
  padding-bottom: var(--_spacing---margin-padding--spacing-xxbig);
}
.section.style-guide {
  padding-top: 25px;
  padding-bottom: var(--_spacing---margin-padding--spacing-xxjumbo);
}
.section.style-uttlity-page {
  padding-top: var(--_spacing---margin-padding--utlity-hero);
}
.section.footer {
  padding-top: var(--_spacing---margin-padding--spacing-xxxbig);
  padding-bottom: var(--_spacing---margin-padding--spacing-xsmall);
  background-color: var(--color--midnight-teal);
  position: relative;
  overflow: hidden;
}
.section.change-log {
  padding-bottom: 200px;
}
.section.license {
  padding-top: var(--_spacing---margin-padding--spacing-large);
  padding-bottom: var(--_spacing---margin-padding--spacing-xxjumbo);
}
.section.password-hero {
  padding-top: var(--_spacing---margin-padding--spacing-colossal);
  padding-bottom: var(--_spacing---margin-padding--spacing-giant);
}
.section.error {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 787px;
  display: flex;
}
.section.contact {
  padding-top: var(--_spacing---margin-padding--inner-banner-space);
  padding-bottom: var(--_spacing---margin-padding--spacing-xxxbig);
}
.section.contact-inner {
  padding-top: var(--_spacing---margin-padding--spacing-zero);
  padding-bottom: var(--_spacing---margin-padding--spacing-jumbo);
}
.section.product {
  padding-bottom: var(--_spacing---margin-padding--spacing-jumbo);
}
.section.inner-hero {
  padding-top: var(--_spacing---margin-padding--inner-banner-space);
  padding-bottom: var(--_spacing---margin-padding--spacing-tiny);
}
.section.product-single {
  padding-top: var(--_spacing---margin-padding--spacing-regular);
}
.section.faq {
  padding-bottom: var(--_spacing---margin-padding--spacing-jumbo);
}
.section.blog-hero {
  padding-top: var(--_spacing---margin-padding--inner-banner-space);
  padding-bottom: var(--_spacing---margin-padding--spacing-regular);
}
.section.feature-blog {
  padding-bottom: var(--_spacing---margin-padding--spacing-large);
  overflow: clip;
}
.section.blog {
  padding-bottom: var(--_spacing---margin-padding--spacing-jumbo);
}
.section.blog-single-hero {
  padding-top: var(--_spacing---margin-padding--inner-banner-space);
  padding-bottom: var(--_spacing---margin-padding--spacing-zero);
}
.section.feature-blog-padding {
  padding-bottom: var(--_spacing---margin-padding--spacing-jumbo);
  overflow: clip;
}
.section.padding-none {
  padding-top: var(--_spacing---margin-padding--spacing-zero);
  padding-bottom: var(--_spacing---margin-padding--spacing-zero);
  position: relative;
}
.section.project-card {
  padding-bottom: var(--_spacing---margin-padding--spacing-jumbo);
}
.section.project-main-content {
  padding-top: var(--_spacing---margin-padding--spacing-large);
  padding-bottom: var(--_spacing---margin-padding--spacing-zero);
}
.section.project-single {
  padding-top: var(--_spacing---margin-padding--spacing-colossal);
  padding-bottom: var(--_spacing---margin-padding--spacing-zero);
}
.section.project-hero {
  padding-top: var(--_spacing---margin-padding--spacing-immense);
  padding-bottom: var(--_spacing---margin-padding--spacing-regular);
}
.section.service-hero {
  padding-top: var(--_spacing---margin-padding--inner-banner-space);
  padding-bottom: var(--_spacing---margin-padding--spacing-regular);
}
.section.counter-servier {
  padding-top: var(--_spacing---margin-padding--spacing-zero);
  padding-bottom: var(--_spacing---margin-padding--spacing-zero);
  background-image: url('../images/service-counter-image.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.section.process {
  padding-top: var(--_spacing---margin-padding--spacing-xxxbig);
}
.section.full-padding-bottom {
  padding-bottom: var(--_spacing---margin-padding--spacing-xxjumbo);
}
.section.service-post {
  padding-top: var(--_spacing---margin-padding--spacing-xxxbig);
  padding-bottom: var(--_spacing---margin-padding--spacing-xxjumbo);
}
.section.about-hero {
  padding-top: var(--_spacing---margin-padding--spacing-immense);
  padding-bottom: var(--_spacing---margin-padding--spacing-xxlarge);
}
.section.about-counter {
  padding-top: var(--_spacing---margin-padding--spacing-tiny);
}
.section.foundation {
  height: 200vh;
}
.section.image-slider {
  padding-top: var(--_spacing---margin-padding--spacing-zero);
}
.section.mission {
  padding-bottom: var(--_spacing---margin-padding--spacing-big);
}
.section.showreel {
  padding-top: var(--_spacing---margin-padding--spacing-zero);
  padding-bottom: var(--_spacing---margin-padding--spacing-zero);
  overflow: clip;
}
.section.hero-about {
  padding-top: var(--_spacing---margin-padding--spacing-jumbo);
}
.section.hero {
  padding: var(--_spacing---margin-padding--spacing-xxbig) 20px var(--_spacing---margin-padding--spacing-zero);
}
.section.project-bottom-none {
  padding-bottom: var(--_spacing---margin-padding--spacing-zero);
}
.font-name {
  color: #191919;
  margin-top: 15px;
}
.footer-menu-wrap {
  grid-column-gap: var(--_spacing---gap--gp-30);
  grid-row-gap: var(--_spacing---gap--gp-30);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  max-width: 573px;
  display: grid;
}
.widget-name {
  margin-bottom: var(--_spacing---margin-padding--spacing-tiny);
  color: var(--color--cool-gray);
}
.footer-input-field {
  min-height: 42px;
  padding: 10px 10px 10px var(--_spacing---margin-padding--spacing-xsmall);
  border: 1px solid var(--color--transparent);
  background-color: var(--color--storm-teal);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  border-radius: 12px;
  margin-bottom: 0;
}
.footer-input-field:focus {
  border-color: var(--color--yellow);
  color: var(--color--white);
}
.footer-input-field::placeholder {
  color: var(--color--light-mist);
}
.secondary-text {
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  font-weight: var(--_typography---paragraph-large--font-weight);
}
.secondary-text.black-03 {
  color: var(--color--ash-teal);
}
.style-category-box {
  border-bottom: 1px solid #b0b0bd;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 794px;
  margin-left: auto;
  margin-right: 0;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-right: 30px;
}
.typography-bottom-left-box {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.single-button-box {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.inter-tight-wrap {
  max-width: 154px;
}
.title-box.style-guide {
  text-align: center;
  max-width: 853px;
}
.title-box.max-with {
  text-align: center;
  letter-spacing: -2px;
  max-width: 853px;
}
.error-message {
  border-radius: var(--_spacing---radius--radius-s);
  color: var(--color--white);
  text-align: center;
  background-color: red;
}
.inter-tight-description-box {
  max-width: 400px;
}
.footer-form-bloxk {
  margin-top: 12px;
  margin-bottom: 0;
}
.style-weight-box {
  color: #595959;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.widget-flex-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-tiny);
  grid-row-gap: var(--_spacing---margin-padding--spacing-tiny);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.footer-input-field-wrap {
  position: relative;
  overflow: hidden;
}
.font-size {
  color: var(--color--ash-teal);
  font-size: var(--_typography---paragraph-large--font-size);
  font-weight: var(--font-weight--regular);
}
.font-size.white {
  color: #fff;
}
.style-guide-right-box {
  width: 100%;
  max-width: 822px;
}
.style-guide-wrap {
  grid-column-gap: 130px;
  grid-row-gap: 130px;
  flex-flow: column;
  max-width: 1248px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.footer-top-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  display: flex;
}
.style-size-box {
  color: #132c24;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.style-title-box-wrapper {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium-rare);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium-rare);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.style-scale-category-box {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.footer-logo-box {
  max-width: 136px;
  margin-bottom: var(--_spacing---margin-padding--spacing-medium-rare);
}
.description-medium {
  font-weight: var(--font-weight--medium);
}
.footer-wrap {
  flex-flow: column;
  display: flex;
}
.animation-content-wrap {
  overflow: hidden;
}
.description {
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
}
.description.black-04 {
  color: var(--color--ash-gray);
}
.description.white {
  color: var(--color--white);
}
.description.black-03 {
  color: var(--color--ash-teal);
}
.description.black-05 {
  color: var(--color--cool-gray);
}
.style-category-grid-box {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: minmax(40%, 1fr) minmax(40%, 1fr) minmax(20%, 1fr);
}
.blog-button-text-wrap {
  z-index: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.style-guide-flex-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 30px;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.style-guide-flex-wrap.typography {
  grid-column-gap: 30px;
  justify-content: flex-start;
}
.style-guide-flex-wrap.button {
  justify-content: space-between;
  align-items: center;
}
.footer-email-wrap {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  width: 100%;
  max-width: 362px;
  display: flex;
}
.container {
  width: 100%;
  max-width: 1270px;
  padding-right: var(--_spacing---margin-padding--spacing-small);
  padding-left: var(--_spacing---margin-padding--spacing-small);
  margin-left: auto;
  margin-right: auto;
}
.base-container {
  max-width: 1278px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.color-card {
  border-radius: 20px;
  min-height: 202px;
  margin-bottom: 10px;
}
.color-card.white-color {
  background-color: var(--color--white);
  border: 1px solid #dcdcdc;
}
.color-card.black-gray {
  background-color: var(--color--mist-white);
}
.color-card.black-color {
  background-color: var(--color--midnight-teal);
}
.color-card.gray-color {
  background-color: var(--color--ash-teal);
}
.color-card.stroke-color {
  background-color: var(--color--ash-gray);
}
.color-card.fill-color {
  background-color: var(--color--light-mist);
}
.color-card.fill-black {
  background-color: var(--color--yellow);
}
.color-card.green-two {
  background-color: var(--color--pale-lime);
}
.color-card.storm-teal {
  background-color: var(--color--storm-teal);
}
.style-color-title {
  color: #595959;
  font-weight: 400;
}
.white-link {
  color: var(--color--white);
}
.uttlity-title-box {
  max-width: 834px;
}
.style-catagory-text {
  color: var(--color--ash-teal);
  font-size: var(--_typography---paragraph-large--font-size);
  font-weight: var(--font-weight--regular);
}
.style-catagory-text.white {
  color: var(--color--white);
}
.footer-submit-button {
  padding-right: var(--_spacing---margin-padding--spacing-xsmall);
  padding-left: var(--_spacing---margin-padding--spacing-xsmall);
  background-color: var(--color--yellow);
  color: var(--color--midnight-teal);
  border-radius: 8px;
  position: absolute;
  inset: 0% 0% 0% auto;
}
.style-guide-left-box {
  width: 100%;
  max-width: 396px;
}
.style-guide-left-box.typography {
  max-width: 396px;
}
.style-guide-left-box.sticky {
  top: var(--_spacing---margin-padding--spacing-xxxbig);
  position: sticky;
}
.footer-menu-wraps {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  flex-flow: row;
  justify-content: space-between;
  width: 100%;
  display: flex;
}
.footer-email-wraps {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 243px;
  display: flex;
}
.footer-menu {
  color: var(--color--white);
  transition: all .45s;
}
.footer-menu:hover {
  color: var(--color--yellow);
  transform: translate(10px);
}
.footer-menu[aria-current="page"], .footer-menu.is-active {
  color: var(--color--yellow);
}
.success-message {
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--yellow);
  color: var(--color--midnight-teal);
  text-align: center;
}
.short-description {
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
}
.short-description.aspekta {
  color: #595959;
  max-width: 311px;
  font-size: 16px;
}
.color-grid {
  grid-column-gap: 30px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
}
.footer-buttom-box {
  top: auto;
  left: 0%;
  right: 0%;
  bottom: var(--_spacing---margin-padding--spacing-xsmall);
  z-index: 99;
  max-width: 1270px;
  padding-right: var(--_spacing---margin-padding--spacing-small);
  padding-left: var(--_spacing---margin-padding--spacing-small);
  margin-left: auto;
  margin-right: auto;
  position: absolute;
}
.primary-button-icon-wrap {
  z-index: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.style-category-box-wrapper {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: column;
  display: flex;
}
.style-category-tob-box {
  border-radius: 12px;
  margin-bottom: 10px;
  padding: 32px 28px;
}
.style-category-tob-box.black {
  color: #fff;
  background-color: #0b0b0b;
}
.change-log-flex-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  max-width: 997px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.change-log-left-box {
  width: 100%;
  max-width: 328px;
}
.change-log-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);
}
.change-log-description {
  color: var(--color--ash-teal);
}
.license-icon-box {
  justify-content: center;
  align-items: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  display: flex;
}
.license-image-grid {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium-rare);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium-rare);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.license-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-xjumbo);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xjumbo);
  flex-flow: column;
  max-width: 1248px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.black-link {
  color: var(--color--midnight-teal);
}
.license-right-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-normal);
  grid-row-gap: var(--_spacing---margin-padding--spacing-normal);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 822px;
  display: flex;
}
.license-icon-flex-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-xxlarge);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xsmall);
  flex-flow: wrap;
  display: flex;
}
.license-single-image-box {
  overflow: hidden;
}
.image-wrap {
  position: relative;
  overflow: hidden;
}
.view-image-overlay {
  background-color: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 100% 0% 0%;
}
.primary-text-medium {
  font-size: var(--_typography---paragraph-large--primary-text);
  font-weight: var(--font-weight--medium);
}
.primary-text {
  font-size: var(--_typography---paragraph-large--primary-text);
  line-height: var(--line-height--line-height-xl);
}
.primary-text.white {
  color: var(--color--white);
}
.secondary-text-medium {
  font-size: var(--_typography---paragraph-large--font-size);
  font-weight: var(--font-weight--medium);
}
.newsletter-title {
  color: var(--color--white);
}
.footer-divider {
  width: 100%;
  height: 1px;
  margin-top: var(--_spacing---margin-padding--spacing-xbig);
  margin-bottom: var(--_spacing---margin-padding--spacing-xxlarge);
  background-color: var(--color--ash-teal);
}
.footer-address-list {
  grid-column-gap: var(--_spacing---gap--gp-30);
  grid-row-gap: var(--_spacing---gap--gp-30);
  flex-flow: column;
  width: 100%;
  max-width: 236px;
  list-style-type: none;
  display: flex;
}
.footer-address-list-item {
  grid-column-gap: var(--_spacing---gap--gp-10);
  grid-row-gap: var(--_spacing---gap--gp-10);
  flex-flow: column;
  display: flex;
}
.footer-social-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-tiny);
  grid-row-gap: var(--_spacing---margin-padding--spacing-tiny);
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 353px;
  display: flex;
}
.social-menu {
  color: var(--color--cool-gray);
  transition: all .45s;
}
.social-menu:hover {
  color: var(--color--yellow);
}
.footer-shape-box {
  margin-top: var(--_spacing---margin-padding--spacing-massive);
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: -120px;
  display: flex;
}
.utility-password-page-content {
  max-width: 663px;
  margin-right: auto;
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  padding-right: var(--_spacing---margin-padding--spacing-small);
  padding-left: var(--_spacing---margin-padding--spacing-small);
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  display: flex;
}
.password-text {
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  font-weight: var(--_typography---paragraph-large--font-weight);
}
.password-text.black-03 {
  max-width: 555px;
  margin-top: var(--_spacing---margin-padding--spacing-normal);
  margin-bottom: var(--_spacing---margin-padding--spacing-big);
  color: var(--color--ash-teal);
}
.password-feel-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-tiny);
  grid-row-gap: var(--_spacing---margin-padding--spacing-tiny);
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 493px;
  display: flex;
}
.password-feel {
  min-height: 46px;
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  padding-left: var(--_spacing---margin-padding--spacing-small);
  border: 1px solid var(--color--ash-gray);
  border-radius: var(--_spacing---radius--radius-l);
  background-color: var(--color--white);
  color: var(--color--ash-teal);
  font-size: var(--_typography---paragraph--font-size);
  font-weight: var(--_typography---paragraph--font-weight);
}
.password-feel:focus {
  border: 1px solid var(--color--yellow);
}
.password-feel::placeholder {
  color: var(--color--ash-teal);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
}
.password-button-box {
  width: 100%;
  max-width: 186px;
  position: relative;
}
.password-button {
  background-color: var(--color--yellow);
  width: 100%;
  height: 100%;
  min-height: 50px;
  color: var(--color--midnight-teal);
  border-radius: 70px;
  padding-left: 16px;
  padding-right: 82px;
}
.password-button-arrow-box {
  background-color: var(--color--midnight-teal);
  border-radius: 40px;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  display: flex;
  position: absolute;
  inset: 8px 8px 8px auto;
}
.white-color-button-icon {
  max-width: 14px;
  max-height: 14px;
}
.error-wrap {
  max-width: 249px;
  padding-right: var(--_spacing---margin-padding--spacing-small);
  padding-left: var(--_spacing---margin-padding--spacing-small);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.error-icon {
  max-width: 164px;
  max-height: 87px;
  margin-bottom: var(--_spacing---margin-padding--spacing-xsmall);
}
.style-guide-changelog-title, .contact-hero-title {
  padding-bottom: 8px;
}
.contact-hero-title-box {
  max-width: 633px;
}
.contact-divider {
  background-color: var(--color--ash-gray);
  width: 100%;
  height: 1px;
}
.contact-flex-box {
  margin-top: var(--_spacing---margin-padding--spacing-xxxbig);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.contact-left-box {
  width: 100%;
  max-width: 715px;
}
.contact-right-box {
  top: var(--_spacing---margin-padding--spacing-xxxbig);
  width: 100%;
  max-width: 518px;
  padding: var(--_spacing---margin-padding--spacing-regular);
  border-radius: var(--_spacing---radius--radius-l);
  background-color: var(--color--pale-lime);
  position: sticky;
}
.contact-location-box {
  border-radius: var(--_spacing---radius--radius-l);
  background-color: var(--color--white);
  justify-content: center;
  align-items: center;
  padding: 12px;
  display: inline-flex;
}
.contact-address-list {
  width: 100%;
  max-width: 236px;
  margin-top: var(--_spacing---margin-padding--spacing-large);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium-rare);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium-rare);
  flex-flow: column;
  list-style-type: none;
  display: flex;
}
.field {
  min-height: 54px;
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  padding-left: var(--_spacing---margin-padding--spacing-xsmall);
  border: 1px solid var(--color--transparent);
  border-radius: var(--_spacing---radius--radius-l);
  background-color: var(--color--mist-white);
  color: var(--color--midnight-teal);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
}
.field:focus {
  border: 1px solid var(--color--yellow);
}
.field-wrap {
  margin-bottom: var(--_spacing---margin-padding--spacing-large);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium-rare);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium-rare);
  flex-flow: column;
  display: flex;
}
.black-04 {
  color: var(--color--ash-gray);
}
.text-areea {
  min-height: 176px;
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  padding-top: var(--_spacing---margin-padding--spacing-xsmall);
  padding-left: var(--_spacing---margin-padding--spacing-xsmall);
  border: 1px solid var(--color--transparent);
  border-radius: var(--_spacing---radius--radius-l);
  background-color: var(--color--mist-white);
  color: var(--color--midnight-teal);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
}
.text-areea:focus {
  border: 1px solid var(--color--yellow);
}
.submit-button {
  padding: 17px var(--_spacing---margin-padding--spacing-regular);
  background-color: var(--color--yellow);
  color: var(--color--midnight-teal);
  border-radius: 42px;
  transition: all .45s;
}
.submit-button:hover {
  background-color: var(--color--midnight-teal);
  color: var(--color--white);
}
.contact-from-block {
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
}
.plan-single-card {
  overflow: hidden;
}
.view-wrapper {
  border-radius: var(--_spacing---radius--circle-round);
  background-color: var(--color--midnight-teal);
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  display: flex;
  position: absolute;
}
.plan-card-image {
  transition: all 1s;
}
.plan-card-image:hover {
  transform: scale(1.1);
}
.plan-card-image-box {
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}
.plan-card-title-box-wrap {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  margin-bottom: 8px;
}
.plan-catagory-name-box {
  margin-bottom: var(--_spacing---margin-padding--spacing-xsmall);
  border-radius: var(--_spacing---radius--radius-m);
  background-color: var(--color--mist-white);
  padding: 8px 10px;
  display: inline-block;
}
.plan-card-title-box {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
}
.plan-inner-card {
  grid-column-gap: var(--_spacing---margin-padding--spacing-tiny);
  grid-row-gap: var(--_spacing---margin-padding--spacing-tiny);
  flex-flow: column;
  display: flex;
}
.plan-card-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);
}
.plan-description {
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
}
.plan-description.black-03 {
  color: var(--color--ash-teal);
}
.plan-card-price-box {
  margin-top: var(--_spacing---margin-padding--spacing-regular);
  padding: var(--_spacing---margin-padding--spacing-xsmall);
  border-radius: var(--_spacing---radius--radius-m);
  background-color: var(--color--yellow);
}
.plan-card-price-box.black-06 {
  background-color: var(--color--mist-white);
}
.plan-card-price {
  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);
}
.plan-card-information-box {
  margin-top: var(--_spacing---margin-padding--spacing-medium);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.plan-card-address-icon-box {
  margin-bottom: 8px;
}
.plan-card-address-icon {
  max-width: 24px;
  max-height: 24px;
}
.view-card-icon {
  max-width: 14px;
  max-height: 14px;
}
.product-collection-list {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-regular);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.product-card-size {
  max-width: 156px;
  font-weight: var(--font-weight--medium);
}
.product-divider-wrap {
  margin-top: var(--_spacing---margin-padding--spacing-medium);
}
.product-divider-hover-in {
  background-color: var(--color--yellow);
  width: 100%;
  height: 1px;
}
.product-divider-hover-out {
  background-color: var(--color--midnight-teal);
  width: 0%;
  height: 1px;
}
.inner-hero-wrap.flex {
  grid-column-gap: var(--_spacing---margin-padding--spacing-xsmall);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xsmall);
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.inner-hero-title-box {
  max-width: 686px;
}
.inner-hero-title.prodct-hero-title, .inner-hero-title.service-hero-title {
  padding-bottom: 8px;
}
.inner-hero-description-box.product-hero-description {
  text-align: right;
  max-width: 291px;
}
.product-single-wrap {
  grid-column-gap: 9.7%;
  grid-row-gap: 9.7%;
  grid-template-rows: auto;
  grid-template-columns: 58% 32.3%;
  grid-auto-columns: 1fr;
  display: grid;
}
.product-single-right-box {
  position: relative;
}
.plan-author-box {
  margin-top: var(--_spacing---margin-padding--spacing-xsmall);
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.pricing-button-box {
  position: absolute;
  inset: auto 0% 0%;
}
.default-state {
  margin-bottom: 0;
}
.display-none {
  display: none;
}
.add-to-cart-button {
  border-radius: var(--_spacing---radius--radius-xl);
  background-color: var(--color--yellow);
  width: 100%;
  min-height: 66px;
  color: var(--color--midnight-teal);
  font-weight: var(--font-weight--medium);
  text-align: center;
  justify-content: center;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 16px;
  text-decoration: none;
  transition: all .55s;
}
.add-to-cart-button:hover {
  background-color: var(--color--midnight-teal);
  color: var(--color--white);
  background-image: none;
}
.plan-single-information-box {
  margin-top: var(--_spacing---margin-padding--spacing-regular);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.accordion {
  width: 100%;
  padding-right: var(--_spacing---margin-padding--spacing-medium-rare);
  padding-bottom: 4px;
  padding-left: var(--_spacing---margin-padding--spacing-medium-rare);
  border-radius: var(--_spacing---radius--radius-l);
  background-color: var(--color--mist-white);
  flex-flow: column;
  display: flex;
  position: static;
  overflow: hidden;
}
.inner-title {
  margin-bottom: var(--_spacing---margin-padding--spacing-medium);
}
.accordion-title {
  color: var(--color--midnight-teal);
  font-size: var(--_typography---paragraph-large--font-size);
  font-weight: var(--font-weight--medium);
  white-space: normal;
  margin-top: 0;
  margin-bottom: 0;
}
.accordion-icon-out {
  max-width: 24px;
  max-height: 24px;
  position: absolute;
}
.accordion-icon-wrapper {
  flex: none;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  display: flex;
  position: relative;
}
.accordion-title-wrap {
  padding: var(--_spacing---margin-padding--spacing-medium-rare) 0px var(--_spacing---margin-padding--spacing-medium);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: center;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  position: static;
}
.faq-right-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-xxsmall);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xxsmall);
  flex-flow: column;
  width: 100%;
  max-width: 738px;
  display: flex;
}
.faq-left-box {
  width: 100%;
  max-width: 468px;
}
.accordion-description-wrap {
  background-color: #0000;
  width: 100%;
  position: static;
}
.faq-wrapper {
  grid-column-gap: var(--_spacing---margin-padding--spacing-slim);
  grid-row-gap: var(--_spacing---margin-padding--spacing-slim);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.accordion-icon-in {
  max-width: 24px;
  max-height: 24px;
}
.ans-text {
  color: var(--color--storm-teal);
  font-size: var(--_typography---paragraph-large--font-size);
}
.accordion-text-wrap {
  max-width: 588px;
  padding-bottom: 16px;
}
.blog-sngle-card {
  padding: var(--_spacing---margin-padding--spacing-tiny);
  display: flex;
}
.blog-sngle-card.right {
  border-right: 1px solid var(--color--ash-gray);
  border-bottom: 1px solid var(--color--ash-gray);
  border-left: .5px solid var(--color--ash-gray);
  border-top-right-radius: var(--_spacing---radius--radius-xl);
  border-bottom-right-radius: var(--_spacing---radius--radius-xl);
}
.blog-sngle-card.left-top {
  border-top: 1px solid var(--color--ash-gray);
  border-left: .5px solid var(--color--ash-gray);
  border-radius: var(--_spacing---radius--radius-xl) var(--_spacing---margin-padding--spacing-zero) var(--_spacing---margin-padding--spacing-zero) var(--_spacing---radius--radius-xl);
  box-shadow: inset 0 -1px 0 0 var(--color--ash-gray);
}
.blog-sngle-card.right-top {
  border-top: 1px solid var(--color--ash-gray);
  border-right: 1px solid var(--color--ash-gray);
  border-left: .5px solid var(--color--ash-gray);
  border-top-right-radius: var(--_spacing---radius--radius-xl);
  border-bottom-right-radius: var(--_spacing---radius--radius-xl);
  box-shadow: inset 0 -1px 0 0 var(--color--ash-gray);
  overflow: hidden;
}
.blog-sngle-card.left-bottom {
  border-bottom: 1px solid var(--color--ash-gray);
  border-left: 1px solid var(--color--ash-gray);
  border-radius: var(--_spacing---radius--radius-xl) var(--_spacing---margin-padding--spacing-zero) var(--_spacing---margin-padding--spacing-zero) var(--_spacing---radius--radius-xl);
}
.blog-sngle-card.left-top-categoty {
  border-top: .4px solid var(--color--ash-gray);
  border-bottom: 1px solid var(--color--ash-gray);
  border-left: .5px solid var(--color--ash-gray);
  border-radius: var(--_spacing---radius--radius-xl) var(--_spacing---margin-padding--spacing-zero) var(--_spacing---margin-padding--spacing-zero) var(--_spacing---radius--radius-xl);
}
.blog-sngle-card.one {
  border-top: 1px solid var(--color--ash-gray);
  border-left: .5px solid var(--color--ash-gray);
  border-radius: var(--_spacing---radius--radius-xl) var(--_spacing---margin-padding--spacing-zero) var(--_spacing---margin-padding--spacing-zero) var(--_spacing---radius--radius-xl);
  box-shadow: inset 0 -1px 0 0 var(--color--ash-gray);
}
.blog-sngle-card.two {
  border-top: 1px solid var(--color--ash-gray);
  border-right: 1px solid var(--color--ash-gray);
  border-left: .5px solid var(--color--ash-gray);
  border-top-right-radius: var(--_spacing---radius--radius-xl);
  border-bottom-right-radius: var(--_spacing---radius--radius-xl);
  box-shadow: inset 0 -1px 0 0 var(--color--ash-gray);
  overflow: hidden;
}
.blog-sngle-card.three {
  border-left: .5px solid var(--color--ash-gray);
  border-radius: var(--_spacing---radius--radius-xl) var(--_spacing---margin-padding--spacing-zero) var(--_spacing---margin-padding--spacing-zero) var(--_spacing---radius--radius-xl);
  box-shadow: inset 0 -1px 0 0 var(--color--ash-gray);
}
.blog-sngle-card.four {
  border-right: 1px solid var(--color--ash-gray);
  border-left: .5px solid var(--color--ash-gray);
  border-top-right-radius: var(--_spacing---radius--radius-xl);
  border-bottom-right-radius: var(--_spacing---radius--radius-xl);
  box-shadow: inset 0 -1px 0 0 var(--color--ash-gray);
}
.blog-sngle-card.five {
  border-left: .5px solid var(--color--ash-gray);
  border-radius: var(--_spacing---radius--radius-xl) var(--_spacing---margin-padding--spacing-zero) var(--_spacing---margin-padding--spacing-zero) var(--_spacing---radius--radius-xl);
  box-shadow: inset 0 -1px 0 0 var(--color--ash-gray);
}
.blog-sngle-card.six {
  border-right: 1px solid var(--color--ash-gray);
  border-left: .5px solid var(--color--ash-gray);
  border-top-right-radius: var(--_spacing---radius--radius-xl);
  border-bottom-right-radius: var(--_spacing---radius--radius-xl);
  box-shadow: inset 0 -1px 0 0 var(--color--ash-gray);
}
.blog-sngle-card.seven {
  border-bottom: 1px solid var(--color--ash-gray);
  border-left: 1px solid var(--color--ash-gray);
  border-radius: var(--_spacing---radius--radius-xl) var(--_spacing---margin-padding--spacing-zero) var(--_spacing---margin-padding--spacing-zero) var(--_spacing---radius--radius-xl);
}
.blog-sngle-card.eight {
  border-right: 1px solid var(--color--ash-gray);
  border-bottom: 1px solid var(--color--ash-gray);
  border-left: .5px solid var(--color--ash-gray);
  border-top-right-radius: var(--_spacing---radius--radius-xl);
  border-bottom-right-radius: var(--_spacing---radius--radius-xl);
}
.blog-card-image-box {
  border-radius: var(--_spacing---radius--radius-m);
  width: 100%;
  max-width: 154px;
  overflow: hidden;
}
.blog-card-image {
  transition: all 1s;
}
.blog-card-image:hover {
  transform: scale(1.05);
}
.blog-card-content-box {
  width: 100%;
  max-width: 248px;
  margin-left: var(--_spacing---margin-padding--spacing-medium);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.blog-card-title {
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.blog-card-writer-box {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-button {
  z-index: 1;
  padding: var(--_spacing---margin-padding--spacing-zero);
  border-bottom: 1px solid var(--color--midnight-teal);
  position: relative;
}
.blog-button-content {
  justify-content: center;
  align-items: center;
  display: flex;
}
.blog-button-text {
  z-index: 1;
  font-weight: var(--font-weight--medium);
  position: relative;
}
.blog-button-hover-text {
  font-weight: var(--font-weight--medium);
  position: absolute;
}
.blog-grid {
  grid-column-gap: var(--_spacing---margin-padding--spacing-zero);
  grid-row-gap: var(--_spacing---margin-padding--spacing-zero);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  max-width: 925px;
  padding: 2px;
  display: grid;
}
.blog-card-title-box {
  margin-top: var(--_spacing---margin-padding--spacing-xxsmall);
  margin-bottom: var(--_spacing---margin-padding--spacing-xsmall);
}
.blog-tabs {
  grid-column-gap: 106px;
  grid-row-gap: 106px;
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: minmax(200px, 210px) 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.blog-tabs-menu {
  grid-column-gap: var(--_spacing---margin-padding--spacing-xxsmall);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xxsmall);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.blog-tabs-content {
  width: 100%;
}
.blog-tab-link {
  padding: 8px var(--_spacing---margin-padding--spacing-xsmall);
  background-color: var(--color--mist-white);
  border-radius: 70px;
}
.blog-tab-link[aria-current="page"], .blog-tab-link.is-active {
  background-color: var(--color--midnight-teal);
  color: var(--color--white);
}
.blog-title-box {
  max-width: 600px;
  margin-bottom: var(--_spacing---margin-padding--spacing-xxlarge);
}
.blog-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);
}
.blog-hero-title-box {
  max-width: 960px;
}
.blog-feature-title-blog {
  grid-column-gap: 7px;
  grid-row-gap: 7px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-feature-dot {
  background-color: var(--color--midnight-teal);
  width: 8px;
  height: 8px;
}
.blog-feature-divider {
  width: 100%;
  height: 1px;
  margin-bottom: var(--_spacing---margin-padding--spacing-tiny);
  background-color: var(--color--ash-gray);
}
.blog-feature-grid {
  margin-top: var(--_spacing---margin-padding--spacing-large);
  grid-column-gap: var(--_spacing---margin-padding--spacing-zero);
  grid-row-gap: var(--_spacing---margin-padding--spacing-zero);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.blog-sngle-feature-card {
  padding: var(--_spacing---margin-padding--spacing-tiny);
  display: flex;
}
.blog-sngle-feature-card.right-top {
  border-style: solid;
  border-width: .4px .5px .5px;
  border-color: var(--color--ash-gray);
  border-top-right-radius: var(--_spacing---radius--radius-xl);
  border-bottom-right-radius: var(--_spacing---radius--radius-xl);
  overflow: hidden;
}
.blog-sngle-feature-card.left-top-categoty {
  border-top: .5px solid var(--color--ash-gray);
  border-bottom: .5px solid var(--color--ash-gray);
  border-left: .5px solid var(--color--ash-gray);
  border-radius: var(--_spacing---radius--radius-xl) var(--_spacing---margin-padding--spacing-zero) var(--_spacing---margin-padding--spacing-zero) var(--_spacing---radius--radius-xl);
  width: 925px;
}
.blog-sngle-feature-card.right-top {
  width: 925px;
}
.blog-card-feature-image-box {
  border-radius: var(--_spacing---radius--radius-m);
  width: 100%;
  max-width: 505px;
  overflow: hidden;
}
.blog-feature-card-title {
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.blog-feature-card-content-box {
  width: 100%;
  max-width: 360px;
  margin-left: var(--_spacing---margin-padding--spacing-medium);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.blog-hero-single-wrap {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 1020px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.blog-single-author-box-wrap {
  margin-top: var(--_spacing---margin-padding--spacing-xxlarge);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.blog-single-author-image-box {
  width: 46px;
  height: 46px;
  margin-bottom: var(--_spacing---margin-padding--spacing-medium);
  justify-content: center;
  align-items: center;
  display: flex;
}
.blog-writer-text {
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
}
.blog-writer-text.black-03 {
  color: var(--color--ash-teal);
  margin-bottom: 6px;
}
.blog-post-publish-wrap {
  margin-top: var(--_spacing---margin-padding--spacing-regular);
}
.blog-single-image-box {
  border-radius: var(--_spacing---radius--radius-xxl);
  overflow: hidden;
}
.blog-single-content-wrap {
  max-width: 1030px;
  margin-top: var(--_spacing---margin-padding--spacing-xxxbig);
  margin-left: auto;
  margin-right: auto;
}
.blog-post p {
  margin-top: var(--_spacing---margin-padding--spacing-tiny);
  font-size: var(--_typography---paragraph-large--primary-text);
  line-height: var(--_typography---paragraph--line-height);
}
.blog-post h4:where(:not([class*="heading-scale-"])), .blog-post :where(.heading-scale-4) {
  margin-top: var(--_spacing---margin-padding--spacing-big);
  margin-bottom: 4px;
}
.blog-post img {
  margin-top: var(--_spacing---margin-padding--spacing-xxlarge);
  border-radius: var(--_spacing---radius--radius-xxl);
}
.blog-post h6:where(:not([class*="heading-scale-"])), .blog-post :where(.heading-scale-6) {
  margin-top: var(--_spacing---margin-padding--spacing-xsmall);
  margin-bottom: var(--_spacing---margin-padding--spacing-tiny);
  font-size: var(--_typography---paragraph-large--primary-text);
  font-weight: var(--font-weight--regular);
}
.blog-post ul {
  font-size: var(--_typography---paragraph-large--primary-text);
  line-height: var(--_typography---paragraph--line-height);
}
.blog-post h5:where(:not([class*="heading-scale-"])), .blog-post :where(.heading-scale-5) {
  margin-top: var(--_spacing---margin-padding--spacing-large);
  margin-bottom: var(--_spacing---margin-padding--spacing-xsmall);
}
.blog-post blockquote {
  min-height: 221px;
  margin-top: var(--_spacing---margin-padding--spacing-big);
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  padding: var(--_spacing---margin-padding--spacing-large);
  border-radius: var(--_spacing---radius--radius-xl);
  background-color: var(--color--light-mist);
  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--spacing-large);
  top: auto;
  right: auto;
  bottom: var(--_spacing---margin-padding--spacing-large);
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  font-weight: var(--font-weight--regular);
  position: absolute;
}
.background-video {
  height: 800px;
}
.cta-overview-box {
  background-image: linear-gradient(#0000004d, #0000004d);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}
.cta-title-box {
  margin-bottom: var(--_spacing---margin-padding--spacing-large);
}
.cta-title {
  color: var(--color--white);
}
.cta-title-wrap {
  max-width: 600px;
  padding-right: var(--_spacing---margin-padding--spacing-small);
  padding-left: var(--_spacing---margin-padding--spacing-small);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.play-pause-button {
  z-index: 9;
}
.ploject-card-wrapper {
  background-color: var(--color--white);
}
.project-single-card {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium-rare);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium-rare);
  grid-template-rows: auto;
  grid-template-columns: 331px 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.project-single-card-title {
  font-size: var(--_typography---heading-h3--font-size);
  line-height: var(--_typography---heading-h2--line-height);
  font-weight: var(--_typography---heading-h3--font-weight);
}
.blog-card-description-box {
  margin-top: var(--_spacing---margin-padding--spacing-xsmall);
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-card-dot {
  background-color: var(--color--yellow);
  width: 8px;
  height: 8px;
}
.project-card-image-box {
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}
.project-card-image {
  transition: all 1s;
}
.project-card-image:hover {
  transform: scale(1.05);
}
.view-wrapper-two {
  background-color: var(--color--yellow);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 84px;
  height: 84px;
  display: flex;
  position: absolute;
}
.view-card-icon-two {
  max-width: 24px;
  max-height: 24px;
}
.project-card-divider {
  width: 100%;
  height: 1px;
  margin-bottom: var(--_spacing---margin-padding--spacing-xsmall);
  background-color: var(--color--midnight-teal);
}
.project-wrap, .project-collection-list {
  grid-column-gap: var(--_spacing---margin-padding--spacing-xsmall);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xsmall);
  flex-flow: column;
  display: flex;
}
.project-card-divider-bottom {
  width: 100%;
  height: 1px;
  margin-top: var(--_spacing---margin-padding--spacing-xsmall);
  background-color: var(--color--midnight-teal);
}
.project-hero-title-box {
  max-width: 894px;
}
.project-button-box {
  margin-top: var(--_spacing---margin-padding--spacing-large);
}
.project-singel-title-box-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-xsmall);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xsmall);
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.project-singel-title-box {
  max-width: 460px;
}
.project-single-title {
  padding-bottom: 5px;
}
.blog-single-description-box {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.project-details-image-box {
  margin-top: var(--_spacing---margin-padding--spacing-regular);
  margin-left: auto;
  margin-right: auto;
}
.project-details-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  justify-content: space-between;
  margin-top: 5px;
  display: flex;
}
.project-details-left-box {
  width: 100%;
  max-width: 248px;
  padding-bottom: var(--_spacing---margin-padding--spacing-jumbo);
}
.project-details-list {
  top: var(--_spacing---margin-padding--spacing-large);
  grid-column-gap: var(--_spacing---margin-padding--spacing-regular);
  grid-row-gap: var(--_spacing---margin-padding--spacing-regular);
  flex-flow: column;
  display: flex;
  position: sticky;
}
.project-details-list-item {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.project-details-right-box {
  width: 100%;
  max-width: 820px;
}
.project-details-single-content-box {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.project-details-single-content-box.margin-top, .project-details-common-image-box.margin-top {
  margin-top: var(--_spacing---margin-padding--spacing-regular);
}
.project-details-common-image-box.margin-top-sixty {
  margin-top: var(--_spacing---margin-padding--spacing-big);
}
.project-complited-wraps {
  margin-top: var(--_spacing---margin-padding--spacing-regular);
}
.project-complited-dot {
  background-color: var(--color--midnight-teal);
  width: 8px;
  height: 8px;
}
.project-complited-box {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.project-complited-second-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-xsmall);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xsmall);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  max-width: 505px;
  margin-left: auto;
  margin-right: 0;
  display: grid;
}
.project-complited-second-left-box {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.project-complited-divider {
  width: 100%;
  height: 1px;
  margin-bottom: var(--_spacing---margin-padding--spacing-tiny);
  background-color: var(--color--ash-gray);
}
.project-innovation-wrap {
  margin-top: var(--_spacing---margin-padding--spacing-big);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.project-post-wrap {
  margin-top: var(--_spacing---margin-padding--spacing-big);
  margin-bottom: var(--_spacing---margin-padding--spacing-jumbo);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.project-post {
  width: 100%;
  max-width: 295px;
}
.project-post h6:where(:not([class*="heading-scale-"])), .project-post :where(.heading-scale-6) {
  margin-bottom: var(--_spacing---margin-padding--spacing-xxsmall);
  font-size: var(--_typography---paragraph-large--primary-text);
  line-height: var(--line-height--line-height-xl);
  font-weight: var(--font-weight--medium);
}
.project-post ul {
  margin-top: 8px;
}
.project-details-sustainability-box {
  width: 100%;
  max-width: 505px;
}
.community-single-content-box {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  width: 100%;
  min-width: 295px;
  max-width: 295px;
  display: flex;
}
.project-large-divider {
  background-color: var(--color--ash-gray);
  width: 1px;
}
.service-hero-title-box {
  max-width: 894px;
}
.service-counter-wrap {
  position: relative;
  overflow: hidden;
}
.service-counter-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-xxsmall);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xxsmall);
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 440px;
  height: 641px;
  margin-left: auto;
  margin-right: 0;
  display: flex;
}
.home-whole-counter {
  justify-content: flex-end;
  height: 80px;
  display: flex;
  overflow: hidden;
}
.home-whole-counter.regular-title {
  height: 54px;
}
.counter-wrapper {
  justify-content: flex-start;
  display: flex;
}
.counter-marque-two {
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}
.counter-marque {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  overflow: hidden;
}
.counter-train {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.heading-three {
  color: var(--color--white);
  font-size: var(--_typography---heading-h3--font-size);
  line-height: 54px;
  font-weight: var(--_typography---heading-h3--font-weight);
}
.heading-three.regular-title {
  font-size: var(--_typography---heading-h3--font-size);
  line-height: 54px;
}
.heading-three.black {
  color: var(--color--midnight-teal);
  font-size: var(--_typography---heading-h3--font-size);
  line-height: var(--_typography---paragraph-large--counter-line-height);
}
.heading-three.black-04 {
  color: var(--color--ash-gray);
  font-size: var(--_typography---heading-h3--font-size);
  line-height: var(--_typography---paragraph-large--counter-line-height);
}
.counter-train-two {
  flex-flow: column-reverse;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.counter-description-two {
  margin-top: var(--_spacing---margin-padding--spacing-xxsmall);
}
.counter-single-card {
  width: 100%;
  height: 100%;
  padding: var(--_spacing---margin-padding--spacing-xxxlarge) var(--_spacing---margin-padding--spacing-large);
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px);
  background-color: #0a0a0a33;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.process-sub-title-box {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.process-dot-box {
  background-color: var(--color--midnight-teal);
  width: 8px;
  height: 8px;
}
.process-divider {
  width: 100%;
  height: 1px;
  margin-top: var(--_spacing---margin-padding--spacing-tiny);
  background-color: var(--color--light-mist);
}
.process-divider.service {
  margin-top: var(--_spacing---margin-padding--spacing-zero);
  margin-bottom: var(--_spacing---margin-padding--spacing-tiny);
}
.process-grid-box {
  margin-top: var(--_spacing---margin-padding--spacing-regular);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.process-single-card {
  padding: var(--_spacing---margin-padding--spacing-large);
  border-radius: var(--_spacing---margin-padding--spacing-medium);
  background-color: var(--color--mist-white);
  overflow: hidden;
}
.process-icon-box {
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  display: flex;
}
.process-inner-content-box {
  margin-top: 142px;
}
.process-inner-title {
  margin-bottom: var(--_spacing---margin-padding--spacing-xsmall);
  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);
}
.sub-title-box {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.service-title-box {
  max-width: 768px;
  margin-top: var(--_spacing---margin-padding--spacing-regular);
}
.service-title {
  color: var(--color--ash-teal);
}
.black-01 {
  color: var(--color--midnight-teal);
}
.service-singel-title-box {
  max-width: 460px;
}
.service-single-description-box {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.service-card-dot {
  background-color: var(--color--yellow);
  width: 8px;
  height: 8px;
}
.service-singel-title-box-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-xsmall);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xsmall);
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.service-details-image-box {
  margin-top: var(--_spacing---margin-padding--spacing-regular);
  margin-left: auto;
  margin-right: auto;
}
.servoce-post-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-big);
  grid-row-gap: var(--_spacing---margin-padding--spacing-big);
  flex-flow: column;
  display: flex;
}
.service-overview-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium-rare);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium-rare);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.service-overview-left-box {
  width: 100%;
  max-width: 401px;
}
.service-overview-right-box {
  width: 100%;
  max-width: 715px;
}
.service-information-wrap {
  margin-top: var(--_spacing---margin-padding--spacing-large);
  grid-column-gap: var(--_spacing---margin-padding--spacing-xsmall);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xsmall);
  flex-flow: column;
  display: flex;
}
.service-information-single-box {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.servoce-information-divider {
  background-color: var(--color--midnight-teal);
  width: 100%;
  height: 1px;
}
.srvice-information-button-box {
  margin-top: var(--_spacing---margin-padding--spacing-medium-rare);
}
.service-common-image-grid-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.service-single-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);
}
.about-hero-wrap {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 1030px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.about-hero-button-box {
  margin-top: var(--_spacing---margin-padding--spacing-large);
}
.about-video {
  height: 608px;
}
.about-conunter-wrap {
  margin-top: var(--_spacing---margin-padding--spacing-big);
  grid-column-gap: var(--_spacing---margin-padding--spacing-xbig);
  grid-row-gap: var(--_spacing---margin-padding--spacing-regular);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.about-counter-divider {
  width: 214px;
  height: 1px;
  margin-top: var(--_spacing---margin-padding--spacing-xxsmall);
  background-color: var(--color--light-mist);
}
.about-counter-title {
  font-size: var(--_typography---heading-h3--font-size);
  line-height: var(--_typography---heading-h3--line-height);
  letter-spacing: var(--_typography---heading-h3--letter-spacing);
}
.foundation-title-box-wrap {
  max-width: 594px;
  margin-top: var(--_spacing---margin-padding--spacing-regular);
}
.foundation-wrapper {
  top: var(--_spacing---margin-padding--spacing-xxbig);
  position: sticky;
}
.foundation-flex-box {
  margin-top: var(--_spacing---margin-padding--spacing-xxlarge);
  display: flex;
}
.foundation-single-card {
  width: 310px;
  padding: var(--_spacing---margin-padding--spacing-regular);
  background-color: var(--color--mist-white);
  flex: none;
}
.foundation-single-card.active {
  background-color: var(--color--yellow);
}
.foundation-inner-top-content-box {
  margin-bottom: var(--_spacing---margin-padding--spacing-xxjumbo);
}
.foundation-inner-title {
  margin-bottom: var(--_spacing---margin-padding--spacing-xsmall);
  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);
}
.foundation-button-content {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.foundation-button-text {
  z-index: 1;
  font-weight: var(--font-weight--medium);
  position: relative;
}
.foundation-button-hover-text {
  position: absolute;
}
.foundation-button-icon {
  border-radius: var(--_spacing---radius--circle-round);
  background-color: var(--color--midnight-teal);
  justify-content: center;
  align-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  display: flex;
}
.foundation-button-icon-wrap {
  z-index: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.blog-button-icon {
  z-index: 1;
  position: relative;
}
.blog-button-hover-icon {
  position: absolute;
}
.foundation-button-text-wrap {
  z-index: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.foundation-card-button {
  z-index: 1;
  text-decoration: none;
  position: relative;
}
.foundation-button-hover-text {
  font-weight: var(--font-weight--medium);
}
.foundation-button-content {
  grid-column-gap: var(--_spacing---margin-padding--spacing-tiny);
  grid-row-gap: var(--_spacing---margin-padding--spacing-tiny);
}
.foundation-title-box {
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.foundation-sticky {
  height: 100vh;
  position: sticky;
  top: 40px;
  overflow: hidden;
}
.mission-content-box {
  max-width: 1028px;
  margin-top: var(--_spacing---margin-padding--spacing-regular);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.mission-button-box {
  margin-top: var(--_spacing---margin-padding--spacing-large);
}
.about-banner-ticker-wrap {
  overflow: hidden;
}
.about-banner-ticker {
  display: flex;
}
.about-hero-image-wrap {
  flex-flow: row;
  flex: none;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}
.slider-image-box {
  width: 400px;
  margin-right: var(--_spacing---margin-padding--spacing-medium);
}
.slider-image-box._4 {
  width: 530px;
}
.choose-grid {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}
.choose-left-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-regular);
  grid-row-gap: var(--_spacing---margin-padding--spacing-regular);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 630px;
  display: flex;
}
.choose-right-box {
  width: 100%;
  max-width: 505px;
}
.choose-button-box {
  margin-top: var(--_spacing---margin-padding--spacing-tiny);
}
.button {
  min-height: 66px;
}
.team-grid-box {
  margin-top: var(--_spacing---margin-padding--spacing-regular);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.team-image-box {
  position: relative;
  overflow: hidden;
}
.team-linkding-box {
  padding: var(--_spacing---margin-padding--spacing-tiny) 14px;
  background-color: var(--color--yellow);
  position: absolute;
  inset: 0% 0% auto auto;
  overflow: hidden;
  transform: translate(100%);
}
.team-content-box {
  margin-top: var(--_spacing---margin-padding--spacing-xxsmall);
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  display: flex;
}
.checkout-form {
  margin-top: var(--_spacing---margin-padding--spacing-xjumbo);
  padding: var(--_spacing---margin-padding--spacing-medium);
  background-color: var(--color--transparent);
}
.bold-text {
  font-size: var(--_typography---paragraph-large--font-size);
  font-weight: var(--font-weight--bold);
}
.checkbox-label {
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
}
.checkbox {
  margin-top: var(--_spacing---margin-padding--spacing-zero);
}
.block-header {
  padding-right: var(--_spacing---margin-padding--spacing-medium);
  padding-left: var(--_spacing---margin-padding--spacing-medium);
  border-color: var(--color--light-mist);
  background-color: var(--color--white);
}
.block-content {
  padding: var(--_spacing---margin-padding--spacing-medium);
  border-right-color: var(--color--light-mist);
  border-bottom-color: var(--color--light-mist);
  border-left-color: var(--color--light-mist);
  background-color: var(--color--white);
}
.check-out-input {
  padding-right: var(--_spacing---margin-padding--spacing-xxsmall);
  padding-left: var(--_spacing---margin-padding--spacing-xxsmall);
  border-color: var(--color--mist-white);
  border-radius: var(--_spacing---radius--radius-xs);
  background-color: var(--color--mist-white);
  transition: all .55s;
}
.check-out-input:focus, .check-out-input.-wfp-focus {
  border-color: var(--color--yellow);
}
.shipping-method {
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  padding: var(--_spacing---margin-padding--spacing-xsmall);
  border-bottom-color: var(--color--light-mist);
  background-color: var(--color--white);
}
.order-button {
  margin-bottom: var(--_spacing---margin-padding--spacing-medium);
  padding-right: var(--_spacing---margin-padding--spacing-small);
  padding-left: var(--_spacing---margin-padding--spacing-small);
  border-radius: var(--_spacing---radius--radius-xs);
  background-color: var(--color--yellow);
  color: var(--color--midnight-teal);
  transition: all .55s;
}
.order-button:hover {
  background-color: var(--color--midnight-teal);
  color: var(--color--white);
}
.showreel_wrap {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  height: 300vh;
  display: flex;
  position: relative;
}
.showreel_sticky {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
  position: sticky;
  top: 0;
}
.showreel_lightbox {
  width: 100vw;
  height: 100vh;
  padding: var(--_spacing---margin-padding--spacing-zero);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}
.showreel_heading {
  position: absolute;
}
.showreel_heading._2 {
  left: calc(100% + .25rem);
}
.showreel_heading._1 {
  right: calc(100% + .25rem);
}
.showreel_img-wrap {
  border-radius: var(--_spacing---radius--radius-none);
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: none;
  height: 100%;
  display: flex;
  position: relative;
  overflow: clip;
}
.showreel_img {
  width: 100vw;
  min-width: 100vw;
  max-width: none;
  height: 100vh;
  min-height: 100vh;
  max-height: none;
}
.scroll {
  border-radius: var(--_spacing---radius--radius-xxl);
  background-color: var(--color--white);
  width: 1200px;
  height: auto;
  overflow: hidden;
}
.slider-left-box {
  width: 100%;
  max-width: 749px;
  padding-top: var(--_spacing---margin-padding--spacing-regular);
  padding-bottom: var(--_spacing---margin-padding--spacing-regular);
  padding-left: var(--_spacing---margin-padding--spacing-jumbo);
  grid-column-gap: var(--_spacing---margin-padding--spacing-regular);
  grid-row-gap: var(--_spacing---margin-padding--spacing-regular);
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}
.slider-right-box {
  border-radius: var(--_spacing---radius--radius-m);
  width: 100%;
  max-width: 595px;
  overflow: hidden;
}
.slider-inner-title {
  max-width: 464px;
  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);
}
.slider-author-box-wrap {
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.slider-author-left-box {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  display: flex;
}
.left-arrow {
  border-top-left-radius: var(--_spacing---radius--radius-xxl);
  background-color: var(--color--yellow);
  justify-content: center;
  align-items: center;
  height: 50%;
  padding-left: 28px;
  padding-right: 28px;
  display: flex;
  inset: 0% auto auto 0%;
}
.slider-item-wrap {
  width: 100%;
  padding: var(--_spacing---margin-padding--spacing-tiny);
  grid-column-gap: 26px;
  grid-row-gap: 26px;
  border-radius: var(--_spacing---radius--radius-xxl);
  background-color: var(--color--white);
  display: flex;
  overflow: hidden;
}
.slider-scroll-wrapper {
  width: 100%;
  max-width: 1230px;
  padding-right: var(--_spacing---margin-padding--spacing-small);
  padding-left: var(--_spacing---margin-padding--spacing-small);
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: auto 0% 40px;
  overflow: hidden;
}
.slider-icon {
  max-width: 14px;
  max-height: 14px;
}
.right-arrow {
  border-bottom-left-radius: var(--_spacing---radius--radius-xxl);
  background-color: var(--color--midnight-teal);
  justify-content: center;
  align-items: center;
  height: 50%;
  padding-left: 28px;
  padding-right: 28px;
  display: flex;
  inset: auto auto 0% 0%;
}
.mask {
  overflow: hidden;
}
.main-button-hover-text {
  font-weight: var(--font-weight--medium);
  position: absolute;
}
.main-button-hover-text.white {
  color: var(--color--white);
}
.main-button {
  z-index: 1;
  padding: var(--_spacing---margin-padding--spacing-xsmall) var(--_spacing---margin-padding--spacing-xsmall) var(--_spacing---margin-padding--spacing-xsmall) 24px;
  background-color: var(--color--yellow);
  border-radius: 999px;
  text-decoration: none;
  position: relative;
}
.main-button.small {
  padding: 8px 8px 8px var(--_spacing---margin-padding--spacing-xsmall);
}
.primary-button-icon {
  z-index: 1;
  position: relative;
}
.main-button-text {
  z-index: 1;
  font-weight: var(--font-weight--medium);
  position: relative;
}
.main-button-text.white {
  color: var(--color--white);
}
.primary-button-hover-icon {
  position: absolute;
}
.main-button-icon-box {
  background-color: var(--color--midnight-teal);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  display: flex;
}
.primary-button-text-wrap {
  z-index: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.main-button-content {
  grid-column-gap: var(--_spacing---margin-padding--spacing-large);
  grid-row-gap: var(--_spacing---margin-padding--spacing-large);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.white-button {
  z-index: 1;
  padding: var(--_spacing---margin-padding--spacing-xsmall) var(--_spacing---margin-padding--spacing-xsmall) var(--_spacing---margin-padding--spacing-xsmall) 24px;
  background-color: var(--color--white);
  border-radius: 999px;
  text-decoration: none;
  position: relative;
}
.white-button-icon-box {
  background-color: var(--color--yellow);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  display: flex;
}
.from-button {
  z-index: 1;
  padding: var(--_spacing---margin-padding--spacing-xsmall) var(--_spacing---margin-padding--spacing-regular);
  background-color: var(--color--yellow);
  border-radius: 999px;
  text-decoration: none;
  position: relative;
}
.secondary-button {
  z-index: 1;
  padding: 8px 8px 8px var(--_spacing---margin-padding--spacing-xsmall);
  background-color: var(--color--mist-white);
  border-radius: 999px;
  text-decoration: none;
  position: relative;
}
.divider {
  background-color: var(--color--light-mist);
  width: 100%;
  height: 1px;
}
.hero-blog-flex-box {
  margin-top: var(--_spacing---margin-padding--spacing-regular);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium-rare);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium-rare);
  flex-flow: wrap;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.hero-blog-left-box {
  flex: none;
}
.works-title-box {
  max-width: 610px;
  margin-top: var(--_spacing---margin-padding--spacing-regular);
}
.works-grid {
  margin-top: var(--_spacing---margin-padding--spacing-xxlarge);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
}
.works-single-card {
  border-left: 1px solid var(--color--light-mist);
  padding-left: 14px;
  overflow: hidden;
}
.works-card-title {
  margin-bottom: var(--_spacing---margin-padding--spacing-xxsmall);
  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);
}
.estate-grid {
  margin-top: var(--_spacing---margin-padding--spacing-large);
  grid-column-gap: var(--_spacing---margin-padding--spacing-zero);
  grid-row-gap: var(--_spacing---margin-padding--spacing-zero);
  background-color: var(--color--mist-white);
  grid-template-rows: auto;
  grid-template-columns: 51% 49%;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}
.estate-content-box-wrap {
  padding: var(--_spacing---margin-padding--spacing-regular) var(--_spacing---margin-padding--spacing-xxlarge);
  overflow: hidden;
}
.round-dot-box {
  border-radius: var(--_spacing---radius--circle-round);
  background-color: var(--color--midnight-teal);
  width: 8px;
  min-width: 8px;
  height: 8px;
  min-height: 8px;
}
.estate-inner-title-box {
  margin-top: var(--_spacing---margin-padding--spacing-xsmall);
  margin-bottom: var(--_spacing---margin-padding--spacing-xsmall);
}
.estate-content-box {
  max-width: 438px;
  margin-bottom: var(--_spacing---margin-padding--spacing-medium-rare);
}
.estate-button {
  z-index: 1;
  padding: var(--_spacing---margin-padding--spacing-xsmall) var(--_spacing---margin-padding--spacing-xsmall) var(--_spacing---margin-padding--spacing-xsmall) 24px;
  background-color: var(--color--midnight-teal);
  border-radius: 999px;
  text-decoration: none;
  position: relative;
}
.estate-button-icon-box {
  background-color: var(--color--yellow);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  display: flex;
}
.we-do-grid {
  margin-top: var(--_spacing---margin-padding--spacing-regular);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.we-do-single-card {
  padding: var(--_spacing---margin-padding--spacing-xxlarge) var(--_spacing---margin-padding--spacing-xlarge) var(--_spacing---margin-padding--spacing-xxlarge) var(--_spacing---margin-padding--spacing-large);
  border-radius: var(--_spacing---radius--radius-xxl);
  background-color: var(--color--mist-white);
  transition: all .55s;
  overflow: hidden;
}
.we-do-single-card:hover {
  background-color: var(--color--yellow);
}
.we-do-icon-box {
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  display: flex;
}
.we-do-inner-content-box {
  margin-top: 123px;
}
.we-do-inner-title {
  max-width: 270px;
  margin-bottom: var(--_spacing---margin-padding--spacing-xsmall);
  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);
}
.hero-properties-title-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  flex-flow: wrap;
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.hero-properties-title {
  max-width: 519px;
}
.black-03 {
  color: var(--color--ash-teal);
}
.hero-properties-button-box {
  flex: none;
}
.hero-properties {
  margin-top: var(--_spacing---margin-padding--spacing-xxlarge);
}
.complited-description-two {
  max-width: 229px;
  margin-top: var(--_spacing---margin-padding--spacing-xxsmall);
}
.project-complited-rght-box {
  grid-column-gap: 77px;
  grid-row-gap: 77px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  max-width: 505px;
  margin-left: auto;
  margin-right: 0;
  display: grid;
}
.hero-about-wrap {
  margin-bottom: var(--_spacing---margin-padding--spacing-big);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.hero-about-image-box {
  border-radius: var(--_spacing---radius--radius-xl);
  background-image: url('../images/hero-about-image.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
}
.hero-about-content {
  max-width: 684px;
  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);
}
.hero-about-right-image-box {
  border-radius: var(--_spacing---radius--radius-xl);
  width: 100%;
  max-width: 400px;
  overflow: hidden;
}
.hero-wrap {
  z-index: 2;
  width: 100%;
  height: 100%;
  padding-top: var(--_spacing---margin-padding--spacing-xxsmall);
  padding-bottom: var(--_spacing---margin-padding--spacing-big);
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
  position: relative;
}
.hero-top-box {
  width: 100%;
  max-width: 308px;
  padding: var(--_spacing---margin-padding--spacing-medium-rare);
  border-radius: var(--_spacing---margin-padding--spacing-xxsmall);
  background-color: var(--color--white);
  margin-left: auto;
  margin-right: 0;
}
.video-icon {
  max-width: 40px;
  max-height: 40px;
}
.video-title {
  margin-top: var(--_spacing---margin-padding--spacing-regular);
  margin-bottom: var(--_spacing---margin-padding--spacing-tiny);
}
.hero-bottom-wrap {
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.hero-bottom-left-box {
  max-width: 661px;
}
.hero-bottom-right-box {
  text-align: right;
  max-width: 224px;
  margin-right: 28px;
}
.hero-title {
  color: var(--color--white);
}
.hero-button-box {
  margin-top: var(--_spacing---margin-padding--spacing-large);
  display: block;
}
.hero-button-box.mobile {
  display: none;
}
.hero-wrappers {
  border-radius: var(--_spacing---radius--radius-xl);
  width: 100%;
  min-height: 758px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.hero-background {
  height: 100%;
  position: absolute;
  inset: 0%;
}
.nav-menu-flex {
  grid-column-gap: var(--_spacing---margin-padding--spacing-xsmall);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xsmall);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.primary-button-wrapper-two.mobile {
  display: none;
}
.primary-button-wrapper-two.desktop {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.menu-button {
  padding: 0;
}
.mobile-nav-title-box {
  width: 100%;
}
.nav-close-ccon {
  opacity: 0;
  width: 24px;
  position: absolute;
}
.menu-button-wrap {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}
.nav-hamburger-icon {
  opacity: 1;
  width: 24px;
  display: block;
  position: absolute;
}
.nav-menu {
  color: var(--color--ash-teal);
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  transition: all .5s;
  overflow: hidden;
}
.nav-menu:hover {
  color: var(--color--midnight-teal);
  transform: translate(8px);
}
.nav-menu[aria-current="page"], .nav-menu.is-active {
  color: var(--color--midnight-teal);
  font-weight: var(--font-weight--medium);
}
.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;
}
.nav-menu-content {
  grid-column-gap: var(--_spacing---margin-padding--spacing-xsmall);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xsmall);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.nav-link {
  color: var(--color--midnight-teal);
  padding: 0;
  text-decoration: none;
  transition: all .5s;
}
.nav-link:hover, .nav-link[aria-current="page"], .nav-link.is-active {
  color: var(--color--midnight-teal);
}
.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;
}
.desktop {
  display: block;
}
.medium-description {
  font-weight: 500;
}
.navbar-logo-link {
  justify-content: flex-start;
  align-items: center;
  padding-left: 0;
  display: flex;
}
.nav-menu-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}
.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;
}
.navbar-right-content {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.nav-right-btn-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-big);
  grid-row-gap: var(--_spacing---margin-padding--spacing-big);
  flex-flow: row;
  justify-content: center;
  align-items: center;
  display: flex;
}
.navbar-content {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.mobile-nav-wrap {
  padding: 30px 16px 16px;
  display: none;
}
.navbar {
  padding-top: var(--_spacing---margin-padding--spacing-xxsmall);
  padding-bottom: var(--_spacing---margin-padding--spacing-xxsmall);
  background-color: var(--color--white);
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  transition: background-color .3s;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}
.nav-button {
  z-index: 1;
  padding: 8px 8px 8px var(--_spacing---margin-padding--spacing-xsmall);
  background-color: var(--color--yellow);
  border-radius: 999px;
  text-decoration: none;
  position: relative;
}
.nav-button.is-checkout {
  border-radius: 8px;
  position: relative;
}
.page-nav-title-box {
  width: 100%;
}
.service-grid {
  margin-top: var(--_spacing---margin-padding--spacing-xxlarge);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 41% 54%;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: start;
  display: grid;
}
.rt-service-v2-image-wrapper {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
  overflow: hidden;
}
.rt-service-v2-image.one, .rt-service-v2-image.three, .rt-service-v2-image.four {
  opacity: 0;
  position: absolute;
}
.overlay-appearence {
  z-index: 3;
  filter: blur(5px);
  background-color: #0000004d;
  height: 0%;
  position: absolute;
  inset: auto 0% 0%;
}
.rt-service-v2-card-wrapper {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium-rare);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium-rare);
  flex-flow: column;
  display: flex;
}
.sservice-v2-card-heading {
  grid-column-gap: var(--_spacing---margin-padding--spacing-xsmall);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xsmall);
  justify-content: flex-start;
  align-items: center;
  height: 64.7969px;
  display: flex;
}
.rt-text-style-h3 {
  color: var(--color--ash-teal);
  font-size: var(--_typography---heading-h3--font-size);
  line-height: var(--_typography---heading-h3--line-height);
  font-weight: var(--_typography---heading-h3--font-weight);
}
.rt-text-style-h3.v2 {
  color: var(--color--midnight-teal);
}
.rt-text-style-icon-box {
  border-radius: var(--_spacing---radius--circle-round);
  background-color: var(--color--yellow);
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  display: flex;
  overflow: hidden;
}
.service-icon {
  max-width: 24px;
  max-height: 24px;
}
.service-card-divider {
  width: 100%;
  height: 1px;
  margin-top: var(--_spacing---margin-padding--spacing-medium-rare);
  background-color: var(--color--ash-gray);
}
.testimonials-slider {
  height: auto;
  margin-top: var(--_spacing---margin-padding--spacing-xxlarge);
  background-color: var(--color--transparent);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.testimonials-slider-mask {
  width: 64%;
  height: auto;
  overflow: visible;
}
.testimonials-slide {
  padding: 10px;
}
.hero-ploject-card-wrapper {
  background-color: var(--color--white);
  height: 545px;
}
.hero-project-collection-list-wrapper, .hero-project-collection-list, .hero-project-collection-item {
  height: 100%;
}
.hero-project-card-image-box {
  justify-content: center;
  align-items: center;
  height: 511px;
  display: flex;
  overflow: hidden;
}
.hero-project-card-description-box {
  margin-top: var(--_spacing---margin-padding--spacing-xxsmall);
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.project-left-arrow {
  background-color: var(--color--yellow);
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 124px;
  padding-left: 28px;
  padding-right: 28px;
  display: flex;
  inset: auto auto 43px 15.5%;
}
.project-slider-icon {
  max-width: 14px;
  max-height: 14px;
}
.project-left-arrow {
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 124px;
  display: flex;
}
.project-right-arrow {
  background-color: var(--color--yellow);
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 124px;
  display: flex;
  inset: auto 15.5% 43px auto;
}
.project-title-box {
  max-width: 715px;
}
.project-title {
  color: var(--color--ash-teal);
}
.error-button-box {
  margin-top: var(--_spacing---margin-padding--spacing-regular);
}
.hero-video-overlay {
  background-color: #101e214d;
  position: absolute;
  inset: 0%;
}
.nav-link-text {
  text-shadow: 0 20px 0 var(--color--midnight-teal);
  position: relative;
  overflow: clip;
}
.cart-button {
  background-color: var(--color--transparent);
  padding: 0;
  position: relative;
}
.cart-quantity {
  background-color: var(--color--midnight-teal);
  color: var(--color--white);
  font-size: var(--_typography---text-xsmall--font-size);
  font-weight: var(--font-weight--medium);
  position: absolute;
  inset: -7px -7px auto auto;
}
.hide {
  display: none;
}
.cart-title-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}
.cart-container {
  background-color: var(--color--light-mist);
}
.checkout-button {
  z-index: 5;
  opacity: 0;
  height: 50px;
  position: absolute;
  inset: 0%;
}
.apple-pay {
  border-radius: 8px;
  height: 50px;
}
.cart-image {
  width: 100%;
  max-width: 72px;
}
.cart-item-content {
  justify-content: flex-start;
  align-items: flex-start;
}
.cart-header {
  border-bottom-color: var(--color--ash-gray);
}
.cart-footer {
  border-top-color: var(--color--ash-gray);
}
.close-button {
  cursor: pointer;
}@media screen and (min-width: 1440px) {

  .scroll {
    width: 1380px;
  }
  .slider-scroll-wrapper {
    max-width: 1410px;
  }}
@media screen and (max-width: 991px) {

  body {
    --_typography---paragraph--font-size: 16px;
    --_typography---paragraph--line-height: var(--line-height--line-height-xl);
    --_typography---paragraph--font-weight: var(--font-weight--regular);
    --_typography---paragraph--letter-spacing: 0px;
    --_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: -3.2px;
    --_typography---heading-h2--font-size: 56px;
    --_typography---heading-h2--line-height: var(--line-height--line-height-m);
    --_typography---heading-h2--font-weight: var(--font-weight--medium);
    --_typography---heading-h2--letter-spacing: -2.1px;
    --_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: -.8px;
    --_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--medium);
    --_typography---heading-h5--letter-spacing: -.36px;
    --_typography---heading-h6--font-size: 26px;
    --_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-large--line-height: var(--line-height--line-height-xl);
    --_typography---paragraph-large--font-weight: var(--font-weight--regular);
    --_typography---paragraph-large--primary-text: 20px;
    --_typography---paragraph-large--counter-line-height: 40px;
    --_typography---text-xsmall--font-size: 10px;
    --_typography---paragraph-large--letter-spacing: 0px;
    --_spacing---margin-padding--spacing-zero: 0px;
    --_spacing---margin-padding--spacing-regular: 24px;
    --_spacing---margin-padding--spacing-xxsmall: 10px;
    --_spacing---margin-padding--spacing-slim: 18px;
    --_spacing---margin-padding--spacing-xxbig: 56px;
    --_spacing---margin-padding--spacing-xxjumbo: 120px;
    --_spacing---margin-padding--utlity-hero: 156px;
    --_spacing---margin-padding--spacing-xxxbig: 64px;
    --_spacing---margin-padding--spacing-xsmall: 16px;
    --_spacing---margin-padding--spacing-colossal: 168px;
    --_spacing---margin-padding--spacing-giant: 120px;
    --_spacing---margin-padding--spacing-large: 36px;
    --_spacing---margin-padding--inner-banner-space: 180px;
    --_spacing---margin-padding--spacing-jumbo: 80px;
    --_spacing---margin-padding--spacing-tiny: 10px;
    --_spacing---margin-padding--spacing-immense: 180px;
    --_spacing---margin-padding--spacing-xxlarge: 40px;
    --_spacing---margin-padding--spacing-big: 46px;
    --_spacing---gap--gp-30: 24px;
    --_spacing---radius--radius-s: 6px;
    --_spacing---margin-padding--spacing-medium: 18px;
    --_spacing---margin-padding--spacing-medium-rare: 20px;
    --_spacing---margin-padding--spacing-small: 15px;
    --_spacing---margin-padding--spacing-xjumbo: 110px;
    --_spacing---margin-padding--spacing-normal: 24px;
    --_spacing---margin-padding--spacing-xbig: 50px;
    --_spacing---gap--gp-10: 10px;
    --_spacing---margin-padding--spacing-massive: 100px;
    --_spacing---radius--radius-l: 12px;
    --_spacing---radius--circle-round: 50%;
    --_spacing---radius--radius-m: 8px;
    --_spacing---radius--radius-xl: 12px;
    --_spacing---radius--radius-xxl: 16px;
    --_spacing---margin-padding--spacing-xxxlarge: 46px;
    --_spacing---radius--radius-xs: 4px;
    --_spacing---radius--radius-none: 0px;
    --_spacing---margin-padding--spacing-xlarge: 40px;
    --_spacing---gap--gap-s: 0px;
  }
  .footrer-copyright-box {
    text-align: center;
    flex-flow: column;
  }
  .section.footer {
    padding-top: 70px;
  }
  .section.change-log {
    padding-bottom: var(--_spacing---margin-padding--spacing-colossal);
  }
  .section.error {
    height: 500px;
    padding-top: var(--_spacing---margin-padding--spacing-colossal);
    padding-bottom: var(--_spacing---margin-padding--spacing-giant);
  }
  .section.foundation {
    height: auto;
  }
  .section.hero {
    padding-left: 10px;
    padding-right: 10px;
  }
  .section.project-bottom-none {
    padding-bottom: var(--_spacing---margin-padding--spacing-xxbig);
  }
  .footer-menu-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .secondary-text {
    font-size: 16px;
  }
  .style-category-box {
    max-width: 100%;
    padding-top: 30px;
    padding-bottom: 25px;
  }
  .title-box.style-guide {
    letter-spacing: 0;
    max-width: 550px;
  }
  .title-box.max-with {
    letter-spacing: 0;
  }
  .style-guide-right-box {
    max-width: 100%;
  }
  .style-guide-wrap {
    grid-column-gap: 100px;
    grid-row-gap: 100px;
  }
  .style-title-box-wrapper {
    text-align: center;
  }
  .style-guide-flex-wrap {
    flex-flow: column;
  }
  .style-guide-left-box.sticky {
    position: static;
  }
  .change-log-left-box {
    max-width: 250px;
  }
  .license-image-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .image-wrap.height-full {
    height: 100%;
  }
  .footer-shape-box {
    margin-bottom: -60px;
  }
  .password-text {
    font-size: 16px;
  }
  .product-collection-list {
    grid-template-columns: 1fr 1fr;
  }
  .inner-hero-title-box {
    max-width: 400px;
  }
  .inner-hero-title.prodct-hero-title, .inner-hero-title.service-hero-title {
    font-size: var(--_typography---heading-h2--font-size);
    letter-spacing: var(--_typography---heading-h2--letter-spacing);
  }
  .inner-hero-description-box.product-hero-description {
    max-width: 253px;
  }
  .product-single-wrap {
    grid-column-gap: 2%;
    grid-row-gap: 2%;
    display: flex;
  }
  .pricing-button-box {
    position: static;
  }
  .plan-single-information-box {
    margin-bottom: var(--_spacing---margin-padding--spacing-regular);
  }
  .faq-right-box {
    flex: 1;
    min-width: 600px;
    max-width: 100%;
  }
  .faq-left-box {
    width: 100%;
    max-width: 328px;
    position: static;
  }
  .faq-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: wrap;
  }
  .blog-card-content-box {
    margin-left: var(--_spacing---margin-padding--spacing-xsmall);
  }
  .blog-grid {
    max-width: 100%;
  }
  .blog-tabs {
    grid-column-gap: var(--_spacing---margin-padding--spacing-regular);
    grid-row-gap: var(--_spacing---margin-padding--spacing-regular);
    grid-template-columns: minmax(200px, 100%);
  }
  .blog-tabs-menu {
    flex-flow: wrap;
  }
  .blog-title-box {
    max-width: 400px;
  }
  .blog-hero-title-box {
    max-width: 549px;
  }
  .blog-sngle-feature-card.left-top-categoty, .blog-sngle-feature-card.right-top {
    width: 100%;
  }
  .blog-feature-card-title {
    font-size: var(--_typography---heading-h5--font-size);
  }
  .blog-feature-card-content-box {
    margin-left: var(--_spacing---margin-padding--spacing-xsmall);
  }
  .blog-post blockquote {
    min-height: 180px;
  }
  .background-video {
    height: 400px;
    min-height: 0;
  }
  .cta-title-wrap {
    max-width: 517px;
  }
  .view-wrapper-two {
    width: 60px;
    height: 60px;
  }
  .view-card-icon-two {
    max-width: 20px;
    max-height: 20px;
  }
  .project-hero-title-box {
    max-width: 549px;
  }
  .project-singel-title-box {
    max-width: 310px;
  }
  .project-details-wrap {
    flex-flow: wrap;
  }
  .project-details-left-box {
    max-width: 100%;
    padding-bottom: var(--_spacing---margin-padding--spacing-zero);
  }
  .project-details-list {
    grid-column-gap: var(--_spacing---margin-padding--spacing-regular);
    grid-row-gap: var(--_spacing---margin-padding--spacing-regular);
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
    position: static;
  }
  .service-hero-title-box {
    max-width: 507px;
  }
  .service-counter-wrap {
    overflow: visible;
  }
  .service-counter-box {
    max-width: 400px;
    height: auto;
  }
  .home-whole-counter {
    height: 56px;
  }
  .home-whole-counter.regular-title {
    height: 40px;
  }
  .heading-three {
    line-height: 56px;
  }
  .heading-three.regular-title {
    line-height: 40px;
  }
  .counter-description-two {
    max-width: 365px;
  }
  .process-grid-box {
    grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
    grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
    flex-flow: wrap;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .process-inner-content-box {
    margin-top: var(--_spacing---margin-padding--spacing-xjumbo);
  }
  .service-singel-title-box {
    max-width: 310px;
  }
  .service-details-image-box {
    height: auto;
  }
  .service-overview-left-box {
    top: var(--_spacing---margin-padding--spacing-xxlarge);
    max-width: 250px;
    position: sticky;
  }
  .about-hero-wrap {
    max-width: 623px;
  }
  .about-video {
    height: 400px;
  }
  .about-conunter-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .foundation-title-box-wrap {
    max-width: 431px;
  }
  .foundation-flex-box {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .foundation-single-card {
    width: 100%;
  }
  .foundation-button-box {
    flex: none;
  }
  .foundation-sticky {
    height: auto;
  }
  .mission-content-box {
    max-width: 761px;
  }
  .slider-image-box {
    width: 300px;
  }
  .slider-image-box._4 {
    width: 400px;
  }
  .choose-grid {
    grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
    grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .choose-right-box {
    height: 100%;
  }
  .choose-button-box {
    margin-top: var(--_spacing---margin-padding--spacing-zero);
  }
  .showreel_wrap {
    height: auto;
  }
  .showreel_sticky {
    height: auto;
    position: relative;
    top: auto;
  }
  .showreel_lightbox {
    aspect-ratio: 2;
    height: auto;
  }
  .showreel_heading._2, .showreel_heading._1 {
    display: none;
  }
  .showreel_img {
    width: 100%;
    min-width: auto;
    height: 100%;
    min-height: auto;
  }
  .scroll {
    width: 100%;
  }
  .slider-item, .slider-left-box {
    height: 100%;
  }
  .slider-inner-title {
    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);
  }
  .left-arrow {
    padding-left: 10px;
    padding-right: 10px;
  }
  .slider-item-wrap {
    grid-column-gap: var(--_spacing---margin-padding--spacing-medium-rare);
    grid-row-gap: var(--_spacing---margin-padding--spacing-medium-rare);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    height: 100%;
    display: grid;
  }
  .right-arrow {
    padding-left: 10px;
    padding-right: 10px;
  }
  .hero-blog-right-box {
    width: 100%;
  }
  .works-title-box {
    max-width: 450px;
  }
  .works-grid {
    grid-template-columns: 1fr 1fr;
  }
  .works-single-card.last {
    max-width: 384px;
  }
  .estate-grid {
    margin-top: var(--_spacing---margin-padding--spacing-xxbig);
    grid-column-gap: var(--_spacing---margin-padding--spacing-medium-rare);
    grid-row-gap: var(--_spacing---margin-padding--spacing-medium-rare);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    align-items: stretch;
    display: grid;
  }
  .estate-content-box-wrap {
    padding-right: var(--_spacing---margin-padding--spacing-medium-rare);
    padding-left: var(--_spacing---margin-padding--spacing-zero);
  }
  .estate-button {
    padding: 8px 8px 8px var(--_spacing---margin-padding--spacing-xsmall);
  }
  .we-do-grid {
    grid-template-columns: 1fr 1fr;
  }
  .we-do-single-card {
    padding-right: var(--_spacing---margin-padding--spacing-large);
  }
  .we-do-inner-content-box {
    margin-top: var(--_spacing---margin-padding--spacing-jumbo);
  }
  .we-do-inner-title {
    max-width: 200px;
  }
  .hero-properties-title {
    max-width: 388px;
  }
  .complited-description-two {
    max-width: 365px;
  }
  .project-complited-rght-box {
    grid-column-gap: var(--_spacing---margin-padding--spacing-big);
    grid-row-gap: var(--_spacing---margin-padding--spacing-big);
  }
  .hero-about-wrap {
    grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
    grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    place-items: stretch stretch;
    display: flex;
  }
  .hero-about-content {
    width: 50%;
    max-width: 100%;
  }
  .hero-wrap {
    padding-bottom: var(--_spacing---margin-padding--spacing-jumbo);
  }
  .hero-top-box {
    max-width: 289px;
  }
  .hero-bottom-left-box {
    max-width: 472px;
  }
  .hero-bottom-right-box {
    margin-right: var(--_spacing---margin-padding--spacing-tiny);
  }
  .hero-wrappers {
    min-height: 640px;
  }
  .nav-menu-flex {
    background-color: #0000;
    padding: 0;
  }
  .nav-button-none {
    display: none;
  }
  .primary-button-wrapper-two.mobile {
    display: flex;
  }
  .primary-button-wrapper-two.desktop {
    grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
    grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  }
  .menu-button {
    flex-flow: column;
    justify-content: center;
    padding: 0;
    display: flex;
  }
  .menu-button.is-open {
    background-color: #0000;
  }
  .nav-close-ccon {
    opacity: 0;
    position: absolute;
  }
  .nav-hamburger-icon {
    opacity: 1;
    flex: none;
    min-width: 40px;
    min-height: 40px;
    display: block;
    position: absolute;
  }
  .nave-menu {
    background-color: var(--color--white);
    max-height: 90vh;
    overflow: auto;
  }
  .nav-hamburger-button {
    justify-content: center;
    align-items: center;
    transition: background-color .3s;
    display: flex;
  }
  .nav-menu-content {
    padding: var(--_spacing---margin-padding--spacing-large) var(--_spacing---margin-padding--spacing-xsmall);
    grid-row-gap: 15px;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    overflow: auto;
  }
  .nav-link {
    margin-left: 0;
    margin-right: 0;
  }
  .nav-link[aria-current="page"], .nav-link.is-active {
    color: #191919;
  }
  .navbar-logo-link {
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }
  .service-grid {
    grid-column-gap: var(--_spacing---margin-padding--spacing-xsmall);
    grid-row-gap: var(--_spacing---margin-padding--spacing-xsmall);
    align-items: stretch;
  }
  .rt-service-v2-card-wrapper {
    grid-column-gap: var(--_spacing---margin-padding--spacing-xsmall);
    grid-row-gap: var(--_spacing---margin-padding--spacing-xsmall);
  }
  .sservice-v2-card-heading {
    height: 40px;
  }
  .rt-text-style-h3 {
    font-size: var(--_typography---heading-h4--font-size);
  }
  .rt-text-style-icon-box {
    width: 40px;
    height: 40px;
  }
  .service-icon {
    max-width: 16px;
    max-height: 16px;
  }
  .service-card-divider {
    margin-top: var(--_spacing---margin-padding--spacing-xsmall);
  }
  .testimonials-slider-mask, .hero-ploject-card-wrapper, .hero-project-card-image-box {
    height: auto;
  }
  .project-left-arrow {
    width: 60px;
    height: 100px;
    padding-left: 10px;
    padding-right: 10px;
    left: 14%;
  }
  .project-right-arrow {
    width: 60px;
    height: 100px;
    right: 14%;
  }
  .project-title-box {
    max-width: 561px;
  }}
@media screen and (max-width: 767px) {

  body {
    --_typography---paragraph--font-size: 16px;
    --_typography---paragraph--line-height: var(--line-height--line-height-xl);
    --_typography---paragraph--font-weight: var(--font-weight--regular);
    --_typography---paragraph--letter-spacing: 0px;
    --_typography---heading-h1--font-size: 52px;
    --_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.2px;
    --_typography---heading-h2--font-size: 40px;
    --_typography---heading-h2--line-height: var(--line-height--line-height-m);
    --_typography---heading-h2--font-weight: var(--font-weight--medium);
    --_typography---heading-h2--letter-spacing: -1.5px;
    --_typography---heading-h3--font-size: 32px;
    --_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: -.6px;
    --_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--medium);
    --_typography---heading-h5--letter-spacing: -.28px;
    --_typography---heading-h6--font-size: 24px;
    --_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-large--line-height: var(--line-height--line-height-xl);
    --_typography---paragraph-large--font-weight: var(--font-weight--regular);
    --_typography---paragraph-large--primary-text: 20px;
    --_typography---paragraph-large--counter-line-height: 32px;
    --_typography---text-xsmall--font-size: 10px;
    --_typography---paragraph-large--letter-spacing: 0px;
    --_spacing---margin-padding--spacing-zero: 0px;
    --_spacing---margin-padding--spacing-regular: 22px;
    --_spacing---margin-padding--spacing-xxsmall: 12px;
    --_spacing---margin-padding--spacing-slim: 18px;
    --_spacing---margin-padding--spacing-xxbig: 46px;
    --_spacing---margin-padding--spacing-xxjumbo: 100px;
    --_spacing---margin-padding--utlity-hero: 150px;
    --_spacing---margin-padding--spacing-xxxbig: 56px;
    --_spacing---margin-padding--spacing-xsmall: 16px;
    --_spacing---margin-padding--spacing-colossal: 156px;
    --_spacing---margin-padding--spacing-giant: 100px;
    --_spacing---margin-padding--spacing-large: 30px;
    --_spacing---margin-padding--inner-banner-space: 160px;
    --_spacing---margin-padding--spacing-jumbo: 70px;
    --_spacing---margin-padding--spacing-tiny: 10px;
    --_spacing---margin-padding--spacing-immense: 160px;
    --_spacing---margin-padding--spacing-xxlarge: 36px;
    --_spacing---margin-padding--spacing-big: 40px;
    --_spacing---gap--gp-30: 30px;
    --_spacing---radius--radius-s: 6px;
    --_spacing---margin-padding--spacing-medium: 18px;
    --_spacing---margin-padding--spacing-medium-rare: 18px;
    --_spacing---margin-padding--spacing-small: 15px;
    --_spacing---margin-padding--spacing-xjumbo: 80px;
    --_spacing---margin-padding--spacing-normal: 22px;
    --_spacing---margin-padding--spacing-xbig: 40px;
    --_spacing---gap--gp-10: 10px;
    --_spacing---margin-padding--spacing-massive: 80px;
    --_spacing---radius--radius-l: 12px;
    --_spacing---radius--circle-round: 50%;
    --_spacing---radius--radius-m: 8px;
    --_spacing---radius--radius-xl: 10px;
    --_spacing---radius--radius-xxl: 14px;
    --_spacing---margin-padding--spacing-xxxlarge: 40px;
    --_spacing---radius--radius-xs: 4px;
    --_spacing---radius--radius-none: 0px;
    --_spacing---margin-padding--spacing-xlarge: 36px;
    --_spacing---gap--gap-s: 0px;
  }
  .footrer-copyright-box {
    max-width: 448px;
    margin-left: auto;
    margin-right: auto;
  }
  .section.footer {
    padding-top: 60px;
  }
  .section.error {
    height: 400px;
  }
  .section.hero {
    padding-left: 8px;
    padding-right: 8px;
  }
  .footer-menu-wrap {
    flex: 1;
    grid-auto-columns: 1fr;
    width: auto;
    min-width: 400px;
    max-width: 100%;
  }
  .typography-bottom-left-box {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
  }
  .style-guide-wrap {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
  }
  .style-title-box-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .style-category-grid-box {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .style-guide-flex-wrap {
    grid-row-gap: 20px;
  }
  .footer-menu-wraps {
    flex-flow: wrap;
  }
  .change-log-flex-box {
    flex-flow: column;
  }
  .license-image-grid {
    grid-template-columns: 1fr 1fr;
  }
  .contact-hero-title-box {
    max-width: 347px;
  }
  .contact-flex-box {
    grid-column-gap: var(--_spacing---margin-padding--spacing-regular);
    grid-row-gap: var(--_spacing---margin-padding--spacing-regular);
    flex-flow: column;
  }
  .contact-left-box {
    max-width: 100%;
  }
  .contact-right-box {
    order: -9999;
    max-width: 100%;
    position: static;
  }
  .plan-inner-card {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .plan-card-information-box {
    grid-template-columns: 1fr;
  }
  .plan-card-single-information-box {
    max-width: 209px;
  }
  .inner-hero-wrap.flex {
    flex-flow: wrap;
  }
  .inner-hero-title-box {
    max-width: 400px;
  }
  .inner-hero-title.prodct-hero-title, .inner-hero-title.service-hero-title {
    font-size: var(--_typography---heading-h1--font-size);
    letter-spacing: var(--_typography---heading-h1--letter-spacing);
  }
  .inner-hero-description-box.product-hero-description {
    text-align: left;
    max-width: 334px;
  }
  .product-single-wrap {
    grid-column-gap: var(--_spacing---margin-padding--spacing-regular);
    grid-row-gap: var(--_spacing---margin-padding--spacing-regular);
    flex-flow: wrap;
  }
  .plan-single-information-box {
    grid-template-columns: 1fr;
  }
  .faq-right-box {
    flex: 0 auto;
    min-width: 0;
    max-width: 100%;
  }
  .faq-left-box.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .faq-wrapper {
    flex-flow: wrap;
  }
  .blog-sngle-card.right, .blog-sngle-card.left-top, .blog-sngle-card.right-top, .blog-sngle-card.left-bottom, .blog-sngle-card.left-top-categoty, .blog-sngle-card.one, .blog-sngle-card.two, .blog-sngle-card.three, .blog-sngle-card.four, .blog-sngle-card.five, .blog-sngle-card.six, .blog-sngle-card.seven, .blog-sngle-card.eight {
    flex-flow: column;
  }
  .blog-card-image-box {
    max-width: 100%;
    height: 200px;
  }
  .blog-card-content-box {
    margin-top: var(--_spacing---margin-padding--spacing-medium-rare);
    margin-left: var(--_spacing---margin-padding--spacing-zero);
  }
  .blog-sngle-feature-card.right-top, .blog-sngle-feature-card.left-top-categoty {
    flex-flow: column;
  }
  .blog-card-feature-image-box {
    max-width: 100%;
    height: 200px;
  }
  .blog-feature-card-content-box {
    margin-top: var(--_spacing---margin-padding--spacing-medium-rare);
    margin-left: var(--_spacing---margin-padding--spacing-zero);
  }
  .background-video {
    height: 400px;
    min-height: 0;
  }
  .cta-title-wrap {
    max-width: 416px;
  }
  .play-pause-button {
    bottom: 36px;
  }
  .project-single-card {
    grid-template-columns: 1fr;
  }
  .blog-card-description-box {
    flex: none;
  }
  .view-wrapper-two {
    width: 50px;
    height: 50px;
  }
  .blog-single-description-box {
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    flex: none;
  }
  .project-complited-second-box {
    margin-top: var(--_spacing---margin-padding--spacing-medium-rare);
    margin-left: 0;
    margin-right: auto;
  }
  .project-innovation-wrap, .project-post-wrap {
    flex-flow: wrap;
  }
  .project-post, .project-details-sustainability-box, .community-single-content-box {
    max-width: 100%;
  }
  .service-hero-title-box {
    max-width: 478px;
  }
  .home-whole-counter {
    height: 44px;
  }
  .home-whole-counter.regular-title {
    height: 32px;
  }
  .heading-three {
    line-height: 44px;
  }
  .heading-three.regular-title {
    line-height: 32px;
  }
  .process-inner-content-box {
    margin-top: var(--_spacing---margin-padding--spacing-jumbo);
  }
  .service-single-description-box {
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    flex: none;
  }
  .service-overview-wrap {
    flex-flow: wrap;
  }
  .service-overview-right-box {
    max-width: 100%;
  }
  .about-hero-wrap {
    max-width: 574px;
  }
  .about-video {
    height: 300px;
  }
  .about-conunter-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .foundation-title-box-wrap {
    max-width: 311px;
  }
  .foundation-flex-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;
  }
  .foundation-single-card {
    width: auto;
    padding: var(--_spacing---margin-padding--spacing-xsmall);
    flex-flow: column;
    justify-content: space-between;
    align-items: stretch;
    display: flex;
  }
  .foundation-inner-top-content-box {
    margin-bottom: var(--_spacing---margin-padding--spacing-xxlarge);
  }
  .mission-content-box {
    text-align: left;
    justify-content: center;
    align-items: flex-start;
    max-width: 538px;
  }
  .slider-image-box {
    width: 250px;
  }
  .slider-image-box._4 {
    width: 330px;
  }
  .choose-grid {
    grid-template-columns: 1fr;
  }
  .choose-right-box {
    max-width: 100%;
  }
  .choose-title-box {
    max-width: 300px;
  }
  .team-grid-box {
    grid-template-columns: 1fr 1fr;
  }
  .slider-left-box {
    padding-top: var(--_spacing---margin-padding--spacing-xxsmall);
    padding-bottom: var(--_spacing---margin-padding--spacing-xxsmall);
    padding-left: var(--_spacing---margin-padding--spacing-xxxbig);
  }
  .left-arrow {
    width: 50px;
  }
  .slider-item-wrap {
    height: 208px;
  }
  .slider-scroll-wrapper {
    inset: auto 0%;
  }
  .right-arrow {
    width: 50px;
  }
  .white-button {
    padding: var(--_spacing---margin-padding--spacing-xxsmall) 8px var(--_spacing---margin-padding--spacing-xxsmall) var(--_spacing---margin-padding--spacing-xsmall);
  }
  .estate-grid {
    grid-column-gap: var(--_spacing---margin-padding--spacing-zero);
    grid-row-gap: var(--_spacing---margin-padding--spacing-zero);
    flex-flow: wrap;
  }
  .estate-content-box-wrap {
    width: 100%;
    padding-left: var(--_spacing---margin-padding--spacing-regular);
  }
  .estate-inner-title-box {
    max-width: 383px;
  }
  .estate-content-box {
    max-width: 508px;
  }
  .we-do-single-card {
    padding: var(--_spacing---margin-padding--spacing-medium);
  }
  .we-do-inner-content-box {
    margin-top: var(--_spacing---margin-padding--spacing-big);
  }
  .we-do-inner-title {
    max-width: 180px;
  }
  .hero-properties-title {
    max-width: 276px;
  }
  .project-complited-rght-box {
    margin-top: var(--_spacing---margin-padding--spacing-medium-rare);
    margin-left: 0;
    margin-right: auto;
  }
  .hero-about-wrap {
    flex-flow: wrap;
  }
  .hero-about-image-box {
    display: none;
  }
  .hero-about-content {
    width: 100%;
  }
  .hero-about-right-image-box {
    max-width: 100%;
  }
  .hero-wrap {
    padding-bottom: var(--_spacing---margin-padding--spacing-xlarge);
    grid-column-gap: var(--_spacing---margin-padding--spacing-large);
    grid-row-gap: var(--_spacing---margin-padding--spacing-large);
  }
  .hero-top-box {
    order: 9999;
    margin-left: 0;
  }
  .hero-bottom-wrap {
    margin-top: var(--_spacing---margin-padding--spacing-regular);
    flex-flow: wrap;
  }
  .hero-bottom-left-box {
    max-width: none;
  }
  .hero-bottom-right-box {
    max-width: none;
    margin-top: var(--_spacing---margin-padding--spacing-regular);
    text-align: left;
  }
  .hero-button-box {
    display: none;
  }
  .hero-button-box.mobile {
    display: block;
  }
  .hero-wrappers {
    min-height: 590px;
    margin-top: var(--_spacing---margin-padding--spacing-tiny);
  }
  .primary-button-wrapper-two.desktop {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .nav-menu-content {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .video-description-box {
    max-width: 200px;
  }
  .service-grid {
    grid-template-columns: 1fr;
  }
  .sservice-v2-card-heading {
    height: 40px;
  }
  .hero-project-card-description-box {
    flex: none;
  }
  .project-left-arrow {
    width: 50px;
    height: 70px;
  }
  .project-right-arrow {
    width: 50px;
    height: 70px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .project-title-box {
    max-width: 400px;
  }}
@media screen and (max-width: 479px) {

  body {
    --_typography---paragraph--font-size: 16px;
    --_typography---paragraph--line-height: var(--line-height--line-height-xl);
    --_typography---paragraph--font-weight: var(--font-weight--regular);
    --_typography---paragraph--letter-spacing: 0px;
    --_typography---heading-h1--font-size: 40px;
    --_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.6px;
    --_typography---heading-h2--font-size: 32px;
    --_typography---heading-h2--line-height: var(--line-height--line-height-m);
    --_typography---heading-h2--font-weight: var(--font-weight--medium);
    --_typography---heading-h2--letter-spacing: -1.1px;
    --_typography---heading-h3--font-size: 26px;
    --_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--medium);
    --_typography---heading-h5--letter-spacing: 0px;
    --_typography---heading-h6--font-size: 22px;
    --_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-large--line-height: var(--line-height--line-height-xl);
    --_typography---paragraph-large--font-weight: var(--font-weight--regular);
    --_typography---paragraph-large--primary-text: 20px;
    --_typography---paragraph-large--counter-line-height: 32px;
    --_typography---text-xsmall--font-size: 10px;
    --_typography---paragraph-large--letter-spacing: 0px;
    --_spacing---margin-padding--spacing-zero: 0px;
    --_spacing---margin-padding--spacing-regular: 20px;
    --_spacing---margin-padding--spacing-xxsmall: 12px;
    --_spacing---margin-padding--spacing-slim: 18px;
    --_spacing---margin-padding--spacing-xxbig: 40px;
    --_spacing---margin-padding--spacing-xxjumbo: 80px;
    --_spacing---margin-padding--utlity-hero: 140px;
    --_spacing---margin-padding--spacing-xxxbig: 50px;
    --_spacing---margin-padding--spacing-xsmall: 16px;
    --_spacing---margin-padding--spacing-colossal: 150px;
    --_spacing---margin-padding--spacing-giant: 80px;
    --_spacing---margin-padding--spacing-large: 24px;
    --_spacing---margin-padding--inner-banner-space: 150px;
    --_spacing---margin-padding--spacing-jumbo: 60px;
    --_spacing---margin-padding--spacing-tiny: 10px;
    --_spacing---margin-padding--spacing-immense: 150px;
    --_spacing---margin-padding--spacing-xxlarge: 30px;
    --_spacing---margin-padding--spacing-big: 36px;
    --_spacing---gap--gp-30: 30px;
    --_spacing---radius--radius-s: 6px;
    --_spacing---margin-padding--spacing-medium: 16px;
    --_spacing---margin-padding--spacing-medium-rare: 18px;
    --_spacing---margin-padding--spacing-small: 15px;
    --_spacing---margin-padding--spacing-xjumbo: 66px;
    --_spacing---margin-padding--spacing-normal: 20px;
    --_spacing---margin-padding--spacing-xbig: 36px;
    --_spacing---gap--gp-10: 10px;
    --_spacing---margin-padding--spacing-massive: 60px;
    --_spacing---radius--radius-l: 12px;
    --_spacing---radius--circle-round: 50%;
    --_spacing---radius--radius-m: 8px;
    --_spacing---radius--radius-xl: 10px;
    --_spacing---radius--radius-xxl: 12px;
    --_spacing---margin-padding--spacing-xxxlarge: 36px;
    --_spacing---radius--radius-xs: 4px;
    --_spacing---radius--radius-none: 0px;
    --_spacing---margin-padding--spacing-xlarge: 30px;
    --_spacing---gap--gap-s: 0px;
  }
  .section.style-guide {
    padding-top: 20px;
    padding-bottom: 60px;
  }
  .section.change-log {
    padding-bottom: var(--_spacing---margin-padding--spacing-giant);
  }
  .section.counter-servier {
    flex-flow: column;
    justify-content: flex-end;
    align-items: stretch;
  }
  .footer-menu-wrap {
    flex: 0 auto;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    min-width: 0;
  }
  .style-category-box {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .style-guide-wrap {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }
  .footer-top-wrap {
    flex-flow: wrap;
  }
  .style-title-box-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .style-category-grid-box {
    grid-template-columns: minmax(auto, 1fr);
  }
  .footer-menu-wraps {
    margin-bottom: var(--_spacing---margin-padding--spacing-regular);
  }
  .short-description {
    font-size: 16px;
  }
  .short-description.aspekta {
    font-size: 14px;
  }
  .color-grid, .license-image-grid {
    grid-template-columns: 1fr;
  }
  .license-wrap {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
  }
  .footer-shape-box {
    margin-top: var(--_spacing---margin-padding--spacing-massive);
    margin-bottom: -30px;
  }
  .password-feel-wrap {
    flex-flow: column;
  }
  .contact-hero-title-box {
    max-width: 290px;
  }
  .product-collection-list {
    grid-row-gap: var(--_spacing---margin-padding--spacing-xxlarge);
    grid-template-columns: 1fr;
  }
  .inner-hero-title-box {
    max-width: 319px;
  }
  .pricing-button-box {
    position: static;
  }
  .display-none {
    inset: auto 0% 0% auto;
  }
  .add-to-cart-button {
    min-height: 0;
  }
  .faq-left-box {
    max-width: 277px;
  }
  .blog-sngle-card.right {
    border-top-left-radius: var(--_spacing---radius--radius-xl);
    border-bottom-left-radius: var(--_spacing---radius--radius-xl);
    border-bottom-right-radius: var(--_spacing---radius--radius-xl);
  }
  .blog-sngle-card.left-top {
    border-right: 1px solid var(--color--ash-gray);
    border-top-right-radius: var(--_spacing---margin-padding--spacing-xsmall);
    border-bottom-right-radius: var(--_spacing---radius--radius-xl);
  }
  .blog-sngle-card.right-top {
    border-top-left-radius: var(--_spacing---margin-padding--spacing-xsmall);
    border-bottom-left-radius: var(--_spacing---radius--radius-xl);
    border-bottom-right-radius: var(--_spacing---radius--radius-xl);
  }
  .blog-sngle-card.left-bottom {
    border-right: .5px solid var(--color--ash-gray);
    border-top-right-radius: var(--_spacing---radius--radius-xl);
    border-bottom-left-radius: var(--_spacing---radius--radius-xl);
    border-bottom-right-radius: var(--_spacing---radius--radius-xl);
  }
  .blog-sngle-card.left-top-categoty {
    border-right: .5px solid var(--color--ash-gray);
    border-bottom: 1px solid var(--color--ash-gray);
    border-top-right-radius: var(--_spacing---margin-padding--spacing-xsmall);
    border-bottom-left-radius: var(--_spacing---margin-padding--spacing-zero);
  }
  .blog-sngle-card.one {
    border-right: 1px solid var(--color--ash-gray);
    border-top-right-radius: var(--_spacing---margin-padding--spacing-xsmall);
    border-bottom-right-radius: var(--_spacing---radius--radius-xl);
  }
  .blog-sngle-card.two {
    border-top-left-radius: var(--_spacing---margin-padding--spacing-xsmall);
    border-bottom-left-radius: var(--_spacing---radius--radius-xl);
    border-bottom-right-radius: var(--_spacing---radius--radius-xl);
  }
  .blog-sngle-card.three {
    border-right: 1px solid var(--color--ash-gray);
    border-top-right-radius: var(--_spacing---margin-padding--spacing-xsmall);
    border-bottom-right-radius: var(--_spacing---radius--radius-xl);
  }
  .blog-sngle-card.four {
    border-top-left-radius: var(--_spacing---radius--radius-xl);
    border-bottom-left-radius: var(--_spacing---radius--radius-xl);
    border-bottom-right-radius: var(--_spacing---radius--radius-xl);
  }
  .blog-sngle-card.five {
    border-right: 1px solid var(--color--ash-gray);
    border-top-right-radius: var(--_spacing---margin-padding--spacing-xsmall);
    border-bottom-right-radius: var(--_spacing---radius--radius-xl);
  }
  .blog-sngle-card.six {
    border-top-left-radius: var(--_spacing---radius--radius-xl);
    border-bottom-left-radius: var(--_spacing---radius--radius-xl);
    border-bottom-right-radius: var(--_spacing---radius--radius-xl);
  }
  .blog-sngle-card.seven {
    border-right: .5px solid var(--color--ash-gray);
    border-top-right-radius: var(--_spacing---radius--radius-xl);
    border-bottom-left-radius: var(--_spacing---radius--radius-xl);
    border-bottom-right-radius: var(--_spacing---radius--radius-xl);
  }
  .blog-sngle-card.eight {
    border-top-left-radius: var(--_spacing---radius--radius-xl);
    border-bottom-left-radius: var(--_spacing---radius--radius-xl);
    border-bottom-right-radius: var(--_spacing---radius--radius-xl);
  }
  .blog-card-content-box {
    max-width: none;
  }
  .blog-grid {
    grid-template-columns: 1fr;
  }
  .blog-hero-title-box {
    max-width: 405px;
  }
  .blog-feature-grid {
    grid-template-columns: 1fr;
  }
  .blog-sngle-feature-card.right-top {
    border-top-left-radius: var(--_spacing---margin-padding--spacing-xsmall);
    border-bottom-right-radius: var(--_spacing---margin-padding--spacing-zero);
  }
  .blog-sngle-feature-card.left-top-categoty {
    border-right: .5px solid var(--color--ash-gray);
    border-bottom: 1px solid var(--color--ash-gray);
    border-top-right-radius: var(--_spacing---margin-padding--spacing-xsmall);
    border-bottom-left-radius: var(--_spacing---radius--radius-xl);
    border-bottom-right-radius: var(--_spacing---radius--radius-xl);
  }
  .blog-sngle-feature-card.right-top {
    border-bottom-left-radius: var(--_spacing---radius--radius-xl);
    border-bottom-right-radius: var(--_spacing---radius--radius-xl);
  }
  .background-video {
    height: 300px;
    min-height: 300px;
  }
  .cta-title-wrap {
    max-width: 330px;
  }
  .play-pause-button {
    bottom: 30px;
  }
  .blog-card-description-box {
    flex: 0 auto;
  }
  .view-wrapper-two {
    display: none;
  }
  .project-hero-title-box {
    max-width: 405px;
  }
  .project-singel-title-box-wrap {
    flex-flow: wrap;
  }
  .blog-single-description-box {
    flex: 0 auto;
  }
  .project-details-list {
    grid-template-columns: 1fr;
  }
  .service-hero-title-box {
    max-width: 363px;
  }
  .service-counter-box {
    max-width: 100%;
  }
  .process-grid-box {
    grid-template-columns: 1fr;
  }
  .service-single-description-box {
    flex: 0 auto;
  }
  .service-singel-title-box-wrap {
    flex-flow: wrap;
  }
  .about-video {
    height: 200px;
  }
  .about-conunter-wrap {
    grid-template-columns: 1fr;
  }
  .foundation-title-box-wrap {
    max-width: 280px;
  }
  .foundation-flex-box {
    grid-template-columns: 1fr;
  }
  .foundation-title-box {
    grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
    grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
    flex-flow: wrap;
  }
  .mission-content-box {
    max-width: 346px;
  }
  .choose-title-box {
    max-width: 290px;
  }
  .team-grid-box {
    grid-template-columns: 1fr;
  }
  .order-item {
    flex-flow: wrap;
  }
  .showreel_lightbox {
    height: 500px;
  }
  .scroll, .slider-item {
    width: 100%;
  }
  .slider-left-box {
    padding-top: var(--_spacing---margin-padding--spacing-zero);
    padding-bottom: var(--_spacing---margin-padding--spacing-zero);
    padding-left: var(--_spacing---margin-padding--spacing-zero);
  }
  .slider-right-box {
    max-width: 100%;
    margin-bottom: var(--_spacing---margin-padding--spacing-jumbo);
  }
  .left-arrow {
    border-top-left-radius: var(--_spacing---margin-padding--spacing-zero);
    border-bottom-left-radius: var(--_spacing---margin-padding--spacing-xsmall);
    width: 50%;
    height: 50px;
    inset: auto auto 0% 0%;
  }
  .slider-item-wrap {
    flex-flow: wrap;
    grid-template-columns: 1fr;
    height: auto;
  }
  .right-arrow {
    border-bottom-left-radius: var(--_spacing---margin-padding--spacing-zero);
    width: 50%;
    height: 50px;
    inset: auto 0% 0% auto;
  }
  .mask {
    width: 100%;
  }
  .white-button {
    padding: 8px 8px 8px var(--_spacing---margin-padding--spacing-xsmall);
  }
  .hero-blog-right-box {
    width: 100%;
  }
  .works-title-box {
    max-width: 253px;
  }
  .works-grid {
    grid-column-gap: var(--_spacing---margin-padding--spacing-xxlarge);
    grid-row-gap: var(--_spacing---margin-padding--spacing-xxlarge);
    grid-template-columns: 1fr;
  }
  .works-single-card.last {
    max-width: 100%;
  }
  .estate-grid {
    grid-template-columns: 1fr;
  }
  .estate-content-box-wrap {
    padding-right: var(--_spacing---margin-padding--spacing-xsmall);
    padding-left: var(--_spacing---margin-padding--spacing-xsmall);
  }
  .we-do-grid {
    grid-template-columns: 1fr;
  }
  .hero-properties-title {
    max-width: 221px;
  }
  .project-complited-rght-box {
    grid-template-columns: 1fr;
  }
  .hero-top-box {
    order: 9999;
    max-width: 216px;
  }
  .hero-button-box {
    display: none;
  }
  .hero-button-box.mobile {
    display: block;
  }
  .hero-wrappers {
    margin-top: var(--_spacing---margin-padding--spacing-xsmall);
  }
  .primary-button-wrapper-two.desktop {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .mobile-nav-title-box {
    text-align: left;
  }
  .navbar-logo-image {
    height: 21px;
  }
  .nav-menu-content {
    display: none;
  }
  .nav-link-wrapper {
    max-width: 100%;
    margin-right: 0;
  }
  .nav-link-wrapper.second {
    max-width: 100%;
  }
  .nav-menu-wrap {
    width: 100%;
  }
  .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;
  }
  .mobile-nav-wrap {
    display: block;
  }
  .page-nav-title-box {
    margin-bottom: var(--_spacing---margin-padding--spacing-xxsmall);
    padding-bottom: var(--_spacing---margin-padding--spacing-xxsmall);
    border-bottom: 1px solid var(--color--light-mist);
    text-align: left;
  }
  .video-description-box {
    max-width: 200px;
  }
  .sservice-v2-card-heading {
    height: 40px;
  }
  .service-card-divider {
    margin-top: var(--_spacing---margin-padding--spacing-medium-rare);
  }
  .testimonials-slider {
    padding-bottom: 100px;
    display: block;
  }
  .testimonials-slider-mask {
    width: 100%;
  }
  .testimonials-slide {
    padding-left: 15px;
    padding-right: 15px;
  }
  .hero-project-card-description-box {
    flex: 0 auto;
  }
  .project-left-arrow {
    margin-left: 15px;
    position: absolute;
    inset: auto auto 0% 0%;
  }
  .project-right-arrow {
    margin-left: 75px;
    position: absolute;
    inset: auto auto 0% 0%;
  }
  .project-title-box {
    max-width: 320px;
  }
  .cart-title-wrap {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  .cart-item {
    flex-flow: column;
    align-items: stretch;
  }
  .cart-image {
    max-width: none;
    margin-bottom: 10px;
  }
  .cart-item-content {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    margin-left: 0;
    margin-right: 0;
  }}

#node-_3e1eadcf-4fc1-3f3f-33ee-603866aec97b-66aec93d {
  grid-area: span 1 / span 2 / span 1 / span 2;
}
#node-_82392236-eb0f-e686-3f23-1f011bf97c6c-22414091 {
  grid-area: 1 / 1 / 2 / 2;
}@media screen and (max-width: 991px) {

  #node-_3fca3c64-e129-f4ca-1b14-73308f16ec17-2241408d, #node-_7950bd44-7364-cede-afdf-85ea46cd1135-22414090 {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: center;
  }
  #node-_1abb6148-d273-6f72-095a-eb23f98601f0-45722851 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }}
@media screen and (max-width: 767px) {

  #node-_3fca3c64-e129-f4ca-1b14-73308f16ec17-2241408d {
    grid-column: span 2 / span 2;
  }}
@media screen and (max-width: 479px) {

  #node-_3fca3c64-e129-f4ca-1b14-73308f16ec17-2241408d {
    grid-column: span 1 / span 1;
  }
  #node-_2e237c06-6e31-50e3-cf09-8bbd4b9e3e3c-4b9e3df2, #node-_3e1eadcf-4fc1-3f3f-33ee-603866aec97b-66aec93d {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
  #node-_118a2600-269f-bb1a-d64b-b3b48743f4f0-2241408e {
    grid-column: span 1 / span 1;
    justify-self: auto;
  }
  #node-_7950bd44-7364-cede-afdf-85ea46cd1135-22414090, #node-_1abb6148-d273-6f72-095a-eb23f98601f0-45722851 {
    grid-column: span 1 / span 1;
  }}


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

   Everything Webflow's 2.5 MB runtime used to do, in CSS. This sheet is
   emitted AFTER the design, which is where a STATE the design knows nothing
   about has to go: an accordion that starts closed, a nav overlay that starts
   hidden, a tab pane that is not the open one. (An earlier conversion put the
   FAQ collapse in section 2b instead, where the design's own `display: block`
   beat it on source order and every answer shipped open.)

   Motion is decoded from the export's own payloads, not invented:

     * IX2 -- 364 events over 47 action lists, sliced out of `js/webflow.js`
       by `dump_ix2.js` and classified by `build_ix2_map.py`. Reveals become
       `.reveal.reveal-*` classes with a `--reveal-delay`; behaviours become
       `data-*` hooks on the trigger.
     * IX3 -- two interactions and two timelines, decoded by `dump_ix3.js`.
       Both are GSAP SplitText effects; both are reproduced here as a real
       character split (main.js wraps each character in a <span>) driven by a
       per-character delay.

   Three rules the whole sheet depends on:

     * A REVEAL IS AN ANIMATION, NEVER A TRANSITION. A `transition:` shorthand
       on a revealed element DELETES whatever transition the design gave it --
       which on this template would silently kill the 0.5s ease on every
       `.nav-link` and the 1s on every `.project-card-image`. Every reveal
       below is a keyframe animation on a class main.js adds and then swaps
       for an inert one.
     * `animation-fill-mode: both` PINS `transform` forever and outranks every
       normal declaration, so an element that is both revealed and scrubbed
       would freeze the instant it faded in. main.js swaps `.is-revealed` for
       `.is-shown` on `animationend`, which puts `transform` back under the
       cascade.
     * The rest states are gated on `:where(.js)`. `transform.py` strips the
       inline `opacity: 0` IX2 baked into the markup, so with scripting off
       and an ungated rest state every reveal on the page would be a blank
       box. `:where()` keeps the gate free, so the design still wins every
       argument it used to win.
   ====================================================================== */

/* ---- the form-control reset -------------------------------------------
   Nine kinds of element in this build are <button>s that were <div>s or
   <a>s in the export: the hamburger, the ten accordion headers, the six blog
   tabs, the four slider arrows, the cart's open and close controls, the
   lightbox trigger, and the two background-video play/pause buttons. Each
   keeps the class the design styles it through -- but a <button> also picks
   up the UA's form-control reset, which supplies a background, a border, a
   centred text alignment and a 13.33px system font, none of which the design
   says anything about.

   `font: inherit` does NOT undo all of that: `letter-spacing`, `word-spacing`
   and `text-transform` are not part of the `font` shorthand and are reset
   separately by the UA, which is how an earlier conversion shipped tab labels
   7px wider than the export's.

   `:where()` scores ZERO, so every design class still beats this -- which is
   the point. A bare `button` selector here would sit in the LAST sheet and
   out-rank the design's own type rules by source order. */
:where(button) {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  text-decoration: inherit;
  line-height: inherit;
  cursor: pointer;
}

/* ---- landmarks --------------------------------------------------------
   `<main>` and the `<h3>` wrapped round each accordion header are inserted
   by transform.py so the document has an outline and a skip target. Both are
   `display: contents`, which makes them free: the sections stay the layout
   items of `.page-wrapper` and the button stays the flex item of
   `.accordion`. An ordinary block in either place would become the item
   instead of what it holds. */
main:where(#main-content),
.accordion-heading {
  display: contents;
}

/* ...AND THE HEADING HAS TO GIVE BACK THE TYPE IT INHERITS.
   `display: contents` removes the BOX, not the computed style: an <h3> still
   resolves the design's `h3` rule and its children still inherit the result.
   The design's `h3` is 54px with a 120% line height, and a percentage line
   height inherits as the LENGTH it computed to -- so every accordion question
   inside the inserted heading got a 64.8px line box instead of a 22.4px one,
   and the FAQ measured 41px taller PER ROW than the export.
   `font: inherit` puts the size, the family, the weight and the line height
   back; `letter-spacing` is not part of the `font` shorthand and has to be
   named. */
.accordion-heading {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  color: inherit;
}

/* The skip link. Off-screen until it takes focus, then the first thing on
   the page -- above the header, which is `z-index: 1000`. */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  padding: 0.75rem 1.25rem;
  background: var(--color--midnight-teal);
  color: var(--color--white);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform 0.2s ease;
}

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

/* Text for a screen reader and nobody else: the <h1> on the four pages whose
   own design shows no title (the three commerce pages and the 404). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ======================================================================
   The navbar
   ====================================================================== */

/* The collapse. Webflow's `.w-nav[data-collapse="medium"] .w-nav-menu
   { display: none }` is what hid the menu below 992px, and its runtime put it
   back with an inline style. Here the menu is hidden by class and opened by
   one, and `.nav-overlay` is the clipping box the runtime used to build in
   script.

   This is a STATE, so it is in section 4: the design says
   `background-color: white; max-height: 90vh; overflow: auto` about the same
   element at the same width and would win on source order in section 2b. */
@media screen and (max-width: 991px) {
  .nav-overlay {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    overflow: hidden;
    display: none;
  }

  .navbar.is-open .nav-overlay {
    display: block;
  }

  /* THE MENU STAYS IN FLOW INSIDE THE OVERLAY. Webflow's own
     `[data-nav-menu-open]` is `position: absolute; top: 100%`, because its
     runtime positioned the overlay and then measured it in script -- and
     transcribing that literally gives the overlay NO in-flow content, so it
     computes `height: 0`, and its `overflow: hidden` clips the whole menu
     away. The panel opened to nothing at every width below 992px.
     The overlay already supplies the `top: 100%`; the menu only has to fill
     it, and being in flow is what gives the overlay a height to clip the
     slide against. */
  .nave-menu {
    position: relative;
    min-width: 200px;
    animation: nav-drop 0.4s ease both;
  }
}@keyframes nav-drop {

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


/* Above 991px the wrapper must not become the flex item of `.nav-menu-flex`
   -- the <nav> inside it is what that row is laid out around. */
@media screen and (min-width: 992px) {
  .nav-overlay {
    display: contents;
  }
}

/* The hamburger, replacing the export's two stacked <img>s (`download.svg`
   and `download-out.svg`, cross-faded by IX2's a-38 / a-39). Three spans in
   the design's own 30x30 `.nav-hamburger-button` box; opening rotates the
   outer two into a cross and fades the middle one out, over the same 300ms
   `ease` the payload asked for. */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 24px;
  height: 24px;
}

.hamburger-bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-button[aria-expanded="true"] .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-button[aria-expanded="true"] .hamburger-bar:nth-child(2) {
  opacity: 0;
}

.menu-button[aria-expanded="true"] .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* The nav links' character roll -- IX3 `i-7821b9ca`.
   The design already carries half of it: `.nav-link-text` has
   `text-shadow: 0 20px 0 <midnight teal>` and `overflow: clip`, so a second
   copy of every label is painted exactly 20px below the first and clipped
   out of sight. The interaction lifts each CHARACTER 20px, which slides the
   real glyph out of the top of the box and the shadow copy into its place.

   main.js does the split (one <span> per character, whitespace preserved);
   the 0.02s stagger the payload asks for arrives as a per-character
   `--char` index. `ease: 3` in an IX3 timeline is `power2.out`. */
/* A WORD is the inline-block the line breaker sees; a CHARACTER is the
   inline-block the interaction moves. Without the word wrapper a run of
   per-character inline-blocks breaks between any two of them, and a split
   heading wraps mid-word at narrow widths -- measured at 479px: "Our mission
   is to make rea / l estate investing simpler, / smarter, and more rewardi /
   ng." */
.split-word {
  display: inline-block;
  white-space: nowrap;
}

[data-split-text] > .split-word > .char {
  display: inline-block;
  white-space: pre;
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: calc(var(--char, 0) * 0.02s);
}

.nav-link:hover [data-split-text] .char,
.nav-link:focus-visible [data-split-text] .char {
  transform: translateY(-20px);
}

/* ======================================================================
   The FAQ accordion
   ====================================================================== */

/* IX2's a-14 / a-15 animate `.accordion-description-wrap` from height 0 to
   `auto` over 300ms and cross-fade the plus into the minus over 500ms. A
   `height: auto` transition is the one thing CSS cannot do directly, so the
   panel becomes a one-row grid and the ROW is animated -- `0fr` to `1fr`,
   which interpolates.

   `minmax(0, 0fr)` rather than a bare `0fr`: a bare `0fr` track is still
   sized to its content's min-content contribution in every engine, which
   leaves the answer's first line showing when it should be closed.

   A NOTE FOR WHOEVER MEASURES THIS NEXT. Read from a hidden browser pane,
   this panel reports `height: 0px` in BOTH states and looks broken. It is
   not: a hidden pane stops advancing CSS transitions, so the row sits at its
   start value for as long as you watch it. Disable `transition-duration`
   before concluding anything about a transitioned property in that
   environment -- with the duration zeroed, the same click opens the panel to
   66px, swaps the plus for the minus and closes whichever row was open. */
.accordion-description-wrap {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows 0.3s ease;
}

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

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

/* The plus / minus pair. IX2's rest state is the plus visible, and it writes
   that state inline on `.accordion-icon-out`; clean_style strips it, so the
   two icons would otherwise both paint at once on top of each other. */
.accordion-icon-in,
.accordion-icon-out {
  transition: opacity 0.5s ease;
}

.accordion-icon-out {
  opacity: 0;
}

.accordion.is-open .accordion-icon-in {
  opacity: 0;
}

.accordion.is-open .accordion-icon-out {
  opacity: 1;
}

/* ======================================================================
   The blog category tab set
   ====================================================================== */

/* `.w-tab-pane { display: none }` survives from the framework sheet as
   `.tabset-pane`, and `.w--tab-active` became `.tabset-pane.is-active`, so
   the open/closed half is already handled. What is left is the fade the
   widget did in script: `data-duration-in="300"`, `data-duration-out="100"`. */
.tabset-pane.is-active {
  animation: tab-in 0.3s ease both;
}@keyframes tab-in {

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


.tabset-link {
  cursor: pointer;
}

/* ======================================================================
   The two sliders
   ====================================================================== */

/* `.testimonials-slider` is the home page's project gallery (five CMS cards
   in a 64%-wide mask, so the neighbours peek in at both edges) and `.scroll`
   is the quote slider nested inside the showreel photograph. Both are
   `data-animation="slide"` with `data-duration="500"`.
   framework.hand.css laid the slides out as a nowrap line of full-width
   inline-blocks; what is left is moving the line.

   The TRACK is what translates, never the mask: the mask is the window and
   moving it slides the whole component out of its section (which is exactly
   what an earlier conversion shipped). Webflow's markup has no track element,
   so main.js offsets each SLIDE by the same amount instead. */
.testimonials-slider-mask,
.mask {
  --slide-offset: 0;
}

.testimonials-slide,
.slider-item {
  transform: translateX(calc(var(--slide-offset, 0) * -100%));
  transition: transform 0.5s ease;
}

/* The four arrows, which the design leaves in view. `z-index` is what keeps
   them above `.mask`, which framework.hand.css gives `z-index: 1`. */
.left-arrow,
.right-arrow {
  z-index: 4;
  width: 80px;
}

.project-left-arrow,
.project-right-arrow {
  z-index: 4;
}

.left-arrow[disabled],
.right-arrow[disabled],
.project-left-arrow[disabled],
.project-right-arrow[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* ======================================================================
   Reveals (IX2 SCROLL_INTO_VIEW)
   ====================================================================== */

/* 158 elements plus six repeated CMS card classes. main.js observes each one
   and adds `.is-revealed` when it crosses the viewport; the class carries the
   keyframes and `--reveal-delay` carries the stagger the payload recorded per
   event (300-650ms).

   The rest state is gated on `.js` so that with scripting off the page reads
   normally instead of being blank -- and `:where()` keeps that gate at
   specificity zero.

   `outQuart`, the easing every one of these uses, is
   cubic-bezier(0.165, 0.84, 0.44, 1). */
:where(.js) .reveal {
  opacity: 0;
}

.reveal.is-revealed {
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  animation-delay: var(--reveal-delay, 0ms);
  animation-fill-mode: both;
}

/* ...and the class main.js swaps in on `animationend`. `.is-revealed` pins
   `transform` and `opacity` for good through `animation-fill-mode: both`,
   which outranks every normal declaration -- so an element that is also
   scrubbed, or hovered, would freeze at its reveal's last frame. */
.reveal.is-shown {
  opacity: 1;
}

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

  from { opacity: 0; transform: translateY(100px); }
  to   { opacity: 1; transform: none; }}
@keyframes reveal-left {

  from { opacity: 0; transform: translateX(-100px); }
  to   { opacity: 1; transform: none; }}
@keyframes reveal-right {

  from { opacity: 0; transform: translateX(100px); }
  to   { opacity: 1; transform: none; }}


/* "Fade In 0.2 9" (a-16), the only reveal in the payload that blurs: opacity
   0 -> 1 and y 50px -> 0 over 1200ms after a 200ms delay, with a 3px blur
   clearing over the first 600ms of it. */
.reveal-blur.is-revealed {
  animation-name: reveal-blur;
  animation-duration: 1.2s;
  animation-delay: calc(var(--reveal-delay, 0ms) + 200ms);
}@keyframes reveal-blur {

  from { opacity: 0; transform: translateY(50px); filter: blur(3px); }
  50%  { filter: blur(0); }
  to   { opacity: 1; transform: none; filter: blur(0); }}


/* "Process Divider In" (a-25) and "About Counter DIvider" (a-26): a hairline
   drawing itself across its box in 500ms. The design gives `.process-divider`
   `width: 100%` and `.about-counter-divider` `width: 214px`, and the payload
   animates each from zero to its own value -- so the two differ only in what
   they are animating TO. Neither fades: `opacity` is not part of either list,
   so the shared rest state above is cancelled. */
.reveal-rule,
.reveal-rule-fixed {
  opacity: 1;
}

:where(.js) .reveal-rule,
:where(.js) .reveal-rule-fixed {
  width: 0;
}

.reveal-rule.is-revealed {
  animation-name: reveal-rule;
  animation-duration: 0.5s;
}

.reveal-rule-fixed.is-revealed {
  animation-name: reveal-rule-fixed;
  animation-duration: 0.5s;
}@keyframes reveal-rule {

  from { width: 0; }
  to   { width: 100%; }}
@keyframes reveal-rule-fixed {

  from { width: 0; }
  to   { width: 214px; }}


.reveal-rule.is-shown  { width: 100%; }
.reveal-rule-fixed.is-shown { width: 214px; }

/* "Image Appearence" (a-42): `.overlay-appearence`, a blurred dark panel over
   the services photograph, collapsing from full height to nothing over 1300ms
   after 300ms, so the picture is wiped upward into view. The design's own
   rest state is `height: 0%` -- IX2 wrote the 100% inline and clean_style
   strips it -- so the class has to restate the closed position. */
.reveal-wipe {
  opacity: 1;
}

:where(.js) .reveal-wipe {
  height: 100%;
}

.reveal-wipe.is-revealed {
  animation-name: reveal-wipe;
  animation-duration: 1.3s;
  animation-delay: calc(var(--reveal-delay, 0ms) + 300ms);
  animation-timing-function: ease;
}@keyframes reveal-wipe {

  from { height: 100%; }
  to   { height: 0%; }}


.reveal-wipe.is-shown { height: 0%; }

/* "Heading animation" (the list literally called `a`), 19 of them: the line
   inside `.animation-content-wrap` rises 100% out of the wrap's
   `overflow: hidden`, unskewing 5deg and fading in over 1000ms.

   The payload's selector is PAGE-WIDE -- IX2 resolves a selector with no
   `useEventTarget` across the whole document -- so on the published home page
   the first of the four wraps to scroll in animates all eight headings at
   once and the four below the fold are already finished when you reach them.
   Scoped to the trigger's own child here, which is what the markup's
   one-wrap-one-line structure says it was meant to be. */
:where(.js) [data-reveal-heading] .animation-content {
  opacity: 0;
}

[data-reveal-heading].is-revealed .animation-content {
  animation: reveal-heading 1s cubic-bezier(0.165, 0.84, 0.44, 1)
             var(--reveal-delay, 0ms) both;
}

/* ...AND THE FINISHED STATE, WHICH IS NOT OPTIONAL.
   main.js swaps `.is-revealed` for `.is-shown` once the animation ends, so
   the end state cannot live only in `animation-fill-mode: both` -- the moment
   the class comes off, the rest state above takes back over and the heading
   returns to `opacity: 0`. Every one of the nineteen headings faded in and
   then vanished again a second later.
   `.reveal` itself has had this rule since it was written; these two hooks
   are the ones that move a CHILD, and they were missed. audit_reveals.py now
   fails the build if any `.is-revealed` selector has no `.is-shown` twin. */
[data-reveal-heading].is-shown .animation-content {
  opacity: 1;
  transform: none;
}@keyframes reveal-heading {

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


/* "View Image Overlay" (a-6), 14 of them and the signature image reveal: a
   white panel slides down off the picture while the picture itself settles
   out of a 1.3 zoom. The design already parks the panel at `inset: 100% 0 0`,
   so the rest state is a -100% lift that puts it back over the image. */
: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: reveal-image-zoom 1.1s ease 0.3s both;
}

[data-reveal-image].is-revealed .view-image-overlay {
  animation: reveal-image-wipe 1s ease 0.3s both;
}

/* ...and their finished state, for the same reason: without it every one of
   the fourteen pictures zoomed back out to 1.3 and the white panel slid back
   over it the instant the animation ended. */
[data-reveal-image].is-shown .view-image,
[data-reveal-image].is-shown .view-image-overlay {
  transform: none;
}@keyframes reveal-image-zoom {

  from { transform: scale(1.3); }
  to   { transform: none; }}
@keyframes reveal-image-wipe {

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


/* ======================================================================
   Hovers (IX2 MOUSE_OVER / MOUSE_OUT)
   ====================================================================== */

/* The button roll, authored five times in the payload over three pairs of
   class names and identical every time: the label rolls up -100% while its
   duplicate arrives from +100%, and the icon leaves up-and-right while its
   duplicate arrives from down-and-left. 500ms `outQuart` throughout.

   Both wrappers already have `overflow: hidden` and `position: relative` from
   the design, and the "hover" copy of each is already `position: absolute`
   over the first, so the only thing missing is the movement.

   `:focus-visible` is added beside `:hover`: these are links and buttons, and
   a keyboard user gets no state change at all otherwise. */
.main-button-text,
.main-button-hover-text,
.blog-button-text,
.blog-button-hover-text,
.foundation-button-text,
.foundation-button-hover-text,
.primary-button-icon,
.primary-button-hover-icon,
.blog-button-icon,
.blog-button-hover-icon {
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.main-button-hover-text,
.blog-button-hover-text,
.foundation-button-hover-text {
  transform: translateY(100%);
}

.primary-button-hover-icon,
.blog-button-hover-icon {
  transform: translate(-100%, 100%);
}

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

[data-hover="main-button"]:hover .main-button-hover-text,
[data-hover="main-button"]:focus-visible .main-button-hover-text {
  transform: none;
}

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

[data-hover="main-button"]:hover .primary-button-hover-icon,
[data-hover="main-button"]:focus-visible .primary-button-hover-icon {
  transform: none;
}

/* The blog card's "Read to learn". Its two ICON steps in the payload target
   `{}` -- an empty object -- because the designer deleted the icon and
   Webflow kept the steps, so four of a-17's eight actions move nothing at
   all. Only the label rolls, on all 24 buttons that fire it. */
[data-hover="blog-button"]:hover .blog-button-text,
[data-hover="blog-button"]:focus-visible .blog-button-text {
  transform: translateY(-100%);
}

[data-hover="blog-button"]:hover .blog-button-hover-text,
[data-hover="blog-button"]:focus-visible .blog-button-hover-text {
  transform: none;
}

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

[data-hover="foundation-button"]:hover .foundation-button-hover-text,
[data-hover="foundation-button"]:focus-visible .foundation-button-hover-text {
  transform: none;
}

[data-hover="foundation-button"]:hover .blog-button-icon,
[data-hover="foundation-button"]:focus-visible .blog-button-icon {
  transform: translate(100%, -100%);
}

[data-hover="foundation-button"]:hover .blog-button-hover-icon,
[data-hover="foundation-button"]:focus-visible .blog-button-hover-icon {
  transform: none;
}

/* The listing card's rule (a-12 / a-13): one hairline shrinks to nothing
   while the other grows the other way, so the underline appears to sweep
   across. The design already carries both rest widths. */
.product-divider-hover-in,
.product-divider-hover-out {
  transition: width 0.5s ease;
}

[data-hover="product-card"]:hover .product-divider-hover-in,
[data-hover="product-card"]:focus-within .product-divider-hover-in {
  width: 0%;
}

[data-hover="product-card"]:hover .product-divider-hover-out,
[data-hover="product-card"]:focus-within .product-divider-hover-out {
  width: 100%;
}

/* The company page's team portraits (a-31 / a-32): the photograph scales to
   1.05 and the social panel slides in from 100% of its own width. The design
   already parks the panel at `transform: translate(100%)`. */
.team-linkding-box,
.team-image {
  transition: transform 0.5s ease;
}

[data-hover="team-card"]:hover .team-linkding-box,
[data-hover="team-card"]:focus-within .team-linkding-box {
  transform: none;
}

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

/* ---- the services page's four-card image swap -------------------------
   a-43 / a-45 / a-46 / a-49. Hovering card N shows photograph N, opens card
   N's 60px icon disc and darkens card N's heading; every other card's disc
   closes to 0x0 and its heading goes back to ash. Card 2 is the rest state.

   THE PAYLOAD IS WRONG AND THIS IS NOT A TRANSCRIPTION OF IT. `a-45` (card 3)
   ends with BOTH `.two` and `.three` at opacity 1, and `a-46` (card 4) with
   both `.two` and `.four`; only `a-49` (card 1) clears the default. The four
   images are stacked in one box, so on the published site hovering card 3 or
   4 shows the wrong photograph underneath the right one. What is written here
   is what it obviously means: exactly one image per card.

   The disc sizes are the other half of the same trap -- IX2 bakes them INLINE
   (`style="width:0px;height:0px"` on v1, v3 and v4) and clean_style strips
   every one, so without the rest states below all four discs ship open. */
.rt-service-v2-image {
  transition: opacity 0.5s ease;
}

.rt-text-style-icon-box {
  transition: width 0.5s ease, height 0.5s ease;
}

.rt-text-style-h3 {
  transition: color 0.5s ease;
}

.rt-text-style-icon-box.v1,
.rt-text-style-icon-box.v3,
.rt-text-style-icon-box.v4 {
  width: 0;
  height: 0;
}

.service-grid:has([data-service-hover="1"]:hover) .rt-service-v2-image.two,
.service-grid:has([data-service-hover="3"]:hover) .rt-service-v2-image.two,
.service-grid:has([data-service-hover="4"]:hover) .rt-service-v2-image.two {
  opacity: 0;
}

.service-grid:has([data-service-hover="1"]:hover) .rt-service-v2-image.one,
.service-grid:has([data-service-hover="3"]:hover) .rt-service-v2-image.three,
.service-grid:has([data-service-hover="4"]:hover) .rt-service-v2-image.four {
  opacity: 1;
}

.service-grid:has([data-service-hover="1"]:hover) .rt-text-style-icon-box.v2,
.service-grid:has([data-service-hover="3"]:hover) .rt-text-style-icon-box.v2,
.service-grid:has([data-service-hover="4"]:hover) .rt-text-style-icon-box.v2 {
  width: 0;
  height: 0;
}

.service-grid:has([data-service-hover="1"]:hover) .rt-text-style-icon-box.v1,
.service-grid:has([data-service-hover="3"]:hover) .rt-text-style-icon-box.v3,
.service-grid:has([data-service-hover="4"]:hover) .rt-text-style-icon-box.v4 {
  width: 60px;
  height: 60px;
}

.service-grid:has([data-service-hover="1"]:hover) .rt-text-style-h3.v2,
.service-grid:has([data-service-hover="3"]:hover) .rt-text-style-h3.v2,
.service-grid:has([data-service-hover="4"]:hover) .rt-text-style-h3.v2 {
  color: var(--color--ash-teal);
}

.service-grid:has([data-service-hover="1"]:hover) .rt-text-style-h3.v1,
.service-grid:has([data-service-hover="3"]:hover) .rt-text-style-h3.v3,
.service-grid:has([data-service-hover="4"]:hover) .rt-text-style-h3.v4 {
  color: var(--color--midnight-teal);
}@media screen and (max-width: 991px) {

  .service-grid:has([data-service-hover="1"]:hover) .rt-text-style-icon-box.v1,
  .service-grid:has([data-service-hover="3"]:hover) .rt-text-style-icon-box.v3,
  .service-grid:has([data-service-hover="4"]:hover) .rt-text-style-icon-box.v4 {
    width: 40px;
    height: 40px;
  }}


/* ---- the cursor-following "View" pills --------------------------------
   a-7/a-8/a-9 on `.view-wrapper` and a-20/a-21/a-22 on `.view-wrapper-two`.
   The pill scales from 0 on enter and back to 0 on leave, and MOUSE_MOVE
   drives it +-140% of its own width and +-115% of its own height across the
   card so it tracks the pointer. main.js writes the two offsets as custom
   properties; everything else is here.

   The rest state is `scale(0)`, which IX2 baked inline on all ten and
   clean_style strips -- so without this every card ships with the pill
   sitting open in the middle of it. */
.view-wrapper,
.view-wrapper-two {
  transform: translate(calc(var(--cursor-x, 0) * 140%),
                       calc(var(--cursor-y, 0) * 115%)) scale(0);
  transition: transform 0.3s ease;
  pointer-events: none;
}

[data-cursor]:hover .view-wrapper,
[data-cursor]:hover .view-wrapper-two,
[data-cursor]:focus-visible .view-wrapper,
[data-cursor]:focus-visible .view-wrapper-two {
  transform: translate(calc(var(--cursor-x, 0) * 140%),
                       calc(var(--cursor-y, 0) * 115%)) scale(1);
  transition: transform 0.5s ease;
}

/* While the pointer is moving there is no transition at all -- a 500ms ease
   on every mousemove lags the cursor by half a second. main.js sets this
   class for the duration of the gesture. */
[data-cursor].is-tracking .view-wrapper,
[data-cursor].is-tracking .view-wrapper-two {
  transition: none;
}

/* ---- the property card's subheading -----------------------------------
   Two lines, then an ellipsis.

   The card is a grid item whose price, address and floor plan sit BELOW this
   line, so a description that takes a third line pushes that whole column
   down and the row of cards stops aligning -- which is what a listing grid
   is for. The design gives the element a size and a colour and says nothing
   about its box, so the clamp belongs here rather than in the design layer.

   `-webkit-box` is not a legacy prefix to be tidied away: it is still the
   only interoperable way to clamp to a line count, and every current engine
   implements it. The unprefixed `line-clamp` is written beside it so the
   rule keeps working as engines move to the standard property.

   `min-height` as well as the clamp: clamping alone stops a LONG description
   overflowing but does nothing for a SHORT one, and a card whose subheading
   runs to one line would still sit 22px out of step with its neighbours. Two
   lines is the height either way. It is written twice on purpose -- the px
   value is what 2 x 16px x 140% comes to today and is what an engine without
   the `lh` unit keeps, and `2lh` overrides it everywhere else so the height
   follows the paragraph tokens if a buyer changes them. */
.plan-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  min-height: 44.8px;
  min-height: 2lh;
  overflow: hidden;
}

/* ======================================================================
   Counters, the ticker and the scroll scrubs
   ====================================================================== */

/* The slot-machine counters (a-23 / a-24), ten of them. Each holds two reels
   of ten digits inside a one-digit window, and the two run OPPOSITE ways --
   `.counter-train` up and `.counter-train-two` down -- so the tens digit and
   the units digit arrive from different sides. 3000ms on the payload's own
   bezier. */
.counter-train,
.counter-train-two {
  transition: transform 3s cubic-bezier(0.784, 0.325, 0.222, 0.98);
}

[data-counter].is-counted .counter-train {
  transform: translateY(-100%);
}

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

/* The company page's photo ticker (a-30): `.about-hero-image-wrap` travels
   -100% of its own width over sixty seconds. There is no `loop` flag on the
   event, so on the published site it pans for a minute, snaps back and never
   moves again; that is an interaction that was not finished rather than a
   design, so it loops here. main.js duplicates the strip so the wrap is
   twice its own width and -100% lands the copy exactly where the original
   started -- which is what makes the loop seamless. */
[data-ticker] .about-hero-image-wrap {
  animation: ticker 60s linear infinite;
}@keyframes ticker {

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


[data-ticker]:hover .about-hero-image-wrap {
  animation-play-state: paused;
}

/* ---- the three scroll scrubs ------------------------------------------
   SCROLLING_IN_VIEW lists, whose keyframe percentages are the SECTION's own
   scroll progress rather than a duration. main.js writes that progress into
   `--scroll-progress` (0 to 1) on the trigger and the maths is here, so the
   scrub is a paint and never a layout. */

/* a-19: the blog feature rail travels x 0 -> -49% between 20% and 80%. */
[data-scrub="blog-feature"] .blog-feature-grid {
  transform: translateX(calc(
    clamp(0, (var(--scroll-progress, 0) - 0.2) / 0.6, 1) * -49%));
}

/* a-29: the foundation row, 0 -> -25% between 38% and 75%. */
[data-scrub="foundation"] .foundation-flex-box {
  transform: translateX(calc(
    clamp(0, (var(--scroll-progress, 0) - 0.38) / 0.37, 1) * -25%));
}

/* a-33, the home page's showreel: over the first half of a 300vh section the
   film grows from 12vw x 10vh to the full viewport while the picture inside
   it settles out of a 1.4 zoom and the corner radius opens from 0 to 1.5rem;
   then, between 65% and 75%, the quote slider inside it fades up 1.5rem into
   place.

   Both stages are clamped to their own window, so each is inert outside it.
   Below 992px the design makes `.showreel_wrap` `height: auto` and drops the
   sticky, so the scrub is gated to match -- ungated it would squeeze the film
   to 12vw on a phone and never grow it. */
@media screen and (min-width: 992px) {
  [data-scrub="showreel"] .showreel_lightbox {
    --t: clamp(0, var(--scroll-progress, 0) / 0.5, 1);
    width: calc(12vw + var(--t) * 88vw);
    height: calc(10vh + var(--t) * 90vh);
    border-radius: calc(var(--t) * 1.5rem);
    overflow: clip;
  }

  [data-scrub="showreel"] .showreel_img {
    --t: clamp(0, var(--scroll-progress, 0) / 0.5, 1);
    transform: scale(calc(1.4 - var(--t) * 0.4));
  }

  [data-scrub="showreel"] .slider-scroll-wrapper {
    --t: clamp(0, (var(--scroll-progress, 0) - 0.65) / 0.1, 1);
    opacity: var(--t);
    transform: translateY(calc((1 - var(--t)) * 1.5rem));
  }
}

/* The company page's heading fade -- IX3 `i-92b89fc2`, the second of the two
   split-text timelines. The characters of `[data-split-fade]` go from 40% to
   100% opacity as `[data-scrub-box]` passes from "top 60%" to "bottom 50%",
   staggered 0.25 apart, with a 0.8s scrub lag.

   A 0.25 stagger across N characters means the last one starts at 0.25 x N
   of the timeline, so each character's own window is normalised by main.js
   into `--char` (0..1) and the maths is the same for every length. */
[data-split-fade] .char {
  display: inline-block;
  white-space: pre;
  opacity: calc(0.4 + 0.6 * clamp(0,
    (var(--scroll-progress, 0) - var(--char, 0) * 0.5) / 0.5, 1));
  transition: opacity 0.8s linear;
}

/* ======================================================================
   The background videos
   ====================================================================== */

/* Twelve of them across the site, all three files. The play/pause button is
   the export's own -- two <span>s, one per icon, with `hidden` on whichever
   is not current -- and framework.hand.css restates the rule that hides it.
   main.js swaps the attribute and the `aria-label`.

   Under `prefers-reduced-motion` main.js pauses every one on load and leaves
   its poster frame showing, which an autoplaying background film otherwise
   gives a visitor no way to stop. */
.play-pause-button {
  cursor: pointer;
  line-height: 0;
}

.play-pause-button img {
  width: auto;
  height: auto;
}

/* ======================================================================
   The cart, the checkout and the demo forms
   ====================================================================== */

/* The drawer. Its wrapper carries an inline `display: none` in the export
   which is the runtime's closed state; clean_style strips it (the wrapper is
   in RUNTIME_HIDDEN), so the open/closed state is a class here. Leaving the
   inline style in place is how an earlier conversion shipped a cart that
   could never open. */
.cart-modal {
  display: none;
}

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

.cart-form,
.cart-empty {
  display: none;
}

.cart-form.is-shown {
  display: block;
}

.cart-empty.is-shown {
  display: flex;
}

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

/* The three commerce pages render their order from the same basket. An empty
   basket is the one error a static checkout can actually have. */
.checkout-error[hidden],
.cart-error-state[hidden],
.form-success[hidden],
.form-error[hidden],
.add-to-cart-error[hidden] {
  display: none;
}

/* `<template>` is `display: none` by default in every engine, but it is worth
   being explicit: these hold one cart line and one order line, and a sheet
   that lost the rule would print them into the page. */
template {
  display: none !important;
}

/* ======================================================================
   The lightbox
   ====================================================================== */

/* Webflow shipped 150 lines of lightbox chrome in its framework sheet -- a
   thumbnail strip, a spinner, a caption bar, four control glyphs drawn from
   the icon webfont -- for a template that has ONE trigger and no gallery.
   All of it is dropped, and what a single video needs is written here.

   main.js builds the overlay once, on the one page that has a trigger. */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.92);
}

.lightbox-overlay.is-open {
  display: flex;
}

.lightbox-frame {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 1100px;
}

.lightbox-content {
  flex: 1;
  min-width: 0;
}

/* 16:9, because a YouTube embed has no intrinsic size and an <iframe> with a
   percentage height inside a flex item resolves to zero. */
.lightbox-content iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--_spacing---radius--radius-l, 12px);
}

.lightbox-content img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 86vh;
  margin: 0 auto;
  object-fit: contain;
  border-radius: var(--_spacing---radius--radius-l, 12px);
}

.lightbox-button {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lightbox-button:hover,
.lightbox-button:focus-visible {
  background: rgba(255, 255, 255, 0.28);
}

.lightbox-close {
  position: absolute;
  top: -3.75rem;
  right: 0;
  font-size: 1.125rem;
}

.lightbox-button[hidden] {
  display: none;
}@media screen and (max-width: 767px) {

  .lightbox-frame {
    gap: 0.5rem;
  }

  .lightbox-button {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.125rem;
  }}


/* ======================================================================
   Reduced motion
   ====================================================================== */

/* Everything above is decoration. A visitor who has asked their system for
   less of it gets the finished state immediately -- not a slower version.
   The reveals' rest states are cancelled outright rather than merely
   un-animated, so nothing can be left invisible. */
@media (prefers-reduced-motion: reduce) {
  :where(.js) .reveal,
  :where(.js) [data-reveal-heading] .animation-content {
    opacity: 1;
  }

  :where(.js) .reveal-rule { width: 100%; }
  :where(.js) .reveal-rule-fixed { width: 214px; }
  :where(.js) .reveal-wipe { height: 0%; }

  :where(.js) [data-reveal-image] .view-image,
  :where(.js) [data-reveal-image] .view-image-overlay {
    transform: none;
  }

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

  [data-ticker] .about-hero-image-wrap {
    animation-play-state: paused;
  }

  .hamburger-bar,
  .accordion-description-wrap,
  .accordion-icon-in,
  .accordion-icon-out,
  .testimonials-slide,
  .slider-item,
  .counter-train,
  .counter-train-two,
  .view-wrapper,
  .view-wrapper-two,
  .main-button-text,
  .main-button-hover-text,
  .blog-button-text,
  .blog-button-hover-text,
  .foundation-button-text,
  .foundation-button-hover-text,
  .primary-button-icon,
  .primary-button-hover-icon,
  .blog-button-icon,
  .blog-button-hover-icon,
  .product-divider-hover-in,
  .product-divider-hover-out,
  .team-linkding-box,
  .team-image,
  [data-split-text] > .char,
  [data-split-fade] > .char {
    transition-duration: 0.01ms;
  }
}