/* qubix — capability-page blocks.
   Written by tools/capability-donors.mjs out of qubix: only the
   rules the transplanted blocks use, class names prefixed with `qx-`, every
   selector scoped under the block's own root class. Do not edit by hand. */
@font-face {
  font-family: webflow-icons;
  src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: Interdisplay;
  src: url("../assets/69a01660589c516ba5f0f917/69a022fe18c48956be155c1a_InterDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Interdisplay;
  src: url("../assets/69a01660589c516ba5f0f917/69a022ff8119fed8127f02a7_InterDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Interdisplay;
  src: url("../assets/69a01660589c516ba5f0f917/69a022fe1781fa5c0193ad3f_InterDisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Interdisplay;
  src: url("../assets/69a01660589c516ba5f0f917/69a022ffbb82bbae94bc63b4_InterDisplay-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
.qx-news {
  --_color---normal-color--black: black;
  --_base---font-family--your-font: Interdisplay, Arial, sans-serif;
  --_color---normal-color--medium-gray: #a1a1a1;
  --_base---font-size--font-size-sm: 16px;
  --_base---font-weight--regular: 400;
  --_common-spacing---spacing-9xl-large: 32px;
  --_common-spacing---spacing-2xl-large: 16px;
  --h1--font-family: var(--_base---font-family--your-font);
  --_color---normal-color--snow-white: #fdfcfc;
  --h1--font-size: 128px;
  --h1--line-height: var(--_base---line-height--line-height-2xl);
  --h1--font-weight: var(--_base---font-weight--medium);
  --h1--letter-spacing: var(--_base---spacing-letter--spacing-letter-tightest);
  --h2--font-family: var(--_base---font-family--your-font);
  --_color---text-color--text-color: var(--_color---normal-color--snow-white);
  --h2--font-size: 58px;
  --h2--line-height: var(--_base---line-height--line-height-relaxed);
  --h2--font-weight: var(--_base---font-weight--medium);
  --h2--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra);
  --h3--font-family: var(--_base---font-family--your-font);
  --h3--font-size: 44px;
  --h3--line-height: var(--_base---line-height--line-height-relaxed);
  --h3--font-weight: var(--_base---font-weight--medium);
  --h3--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter);
  --_common-spacing---spacing-6xl-large: 24px;
  --_common-spacing---spacing-medium: 10px;
  --h4--font-family: var(--_base---font-family--your-font);
  --h4--font-size: 32px;
  --h4--line-height: var(--_base---line-height--line-height-base);
  --h4--font-weight: var(--_base---font-weight--medium);
  --h4--letter-spacing: var(--_base---global-size--none);
  --h5--font-family: var(--_base---font-family--your-font);
  --h5--font-size: 24px;
  --h5--line-height: var(--_base---line-height--line-height-relaxed);
  --h5--font-weight: var(--_base---font-weight--medium);
  --h5--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter);
  --h6--font-family: var(--_base---font-family--your-font);
  --h6--font-size: 20px;
  --h6--line-height: var(--_base---line-height--line-height-md);
  --h6--font-weight: var(--_base---font-weight--medium);
  --h6--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra);
  --_common-spacing---spacing-extra-tiny: 0px;
  --_base---font-size--font-size-lg: 20px;
  --_base---line-height--line-height-md: 134%;
  --_base---spacing-letter--spacing-letter-tighter: -.02em;
  --_color---text-color--paragraph-color: var(--_color---normal-color--medium-gray);
  --_base---line-height--line-height-base: 122%;
  --_common-spacing---spacing-extra-small: 6px;
  --_common-spacing---spacing-small: 8px;
  --_base---line-height--line-height-2xl: 154%;
  --_base---font-weight--semi-bold: 600;
  --_color---accent-color--accent-one: var(--_color---normal-color--black);
  --_color---normal-color--deep-charcoal: #0f0f0f;
  --_base---global-size--global-full: 100%;
  --_ui---container--padding: 40px;
  --_base---global-size--none: 0px;
  --_common-spacing---spacing-33xl-large: 110px;
  --_base---line-height--line-height-tightest: 100%;
  --_color---normal-color--vivid-orange: #fe6512;
  --text-regular--font-family: var(--_base---font-family--your-font);
  --_color---normal-color--white: white;
  --text-regular--font-size: 18px;
  --text-regular--line-height: var(--_base---line-height--line-height-2xl);
  --text-regular--font-weight: var(--_base---font-weight--regular);
  --text-regular--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra);
  --text-extra-small--font-family: var(--_base---font-family--your-font);
  --text-extra-small--font-size: 16px;
  --text-extra-small--line-height: var(--_base---line-height--line-height-lg);
  --text-extra-small--font-weight: var(--_base---font-weight--regular);
  --text-extra-small--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter);
  --_ui---container--max-width: 1360px;
  --body--font-family: var(--_base---font-family--your-font);
  --body--font-size: 16px;
  --body--line-height: var(--_base---line-height--line-height-xl);
  --body--font-weight: var(--_base---font-weight--regular);
  --body--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter);
  --_color---normal-color--near-black: #222;
  --_color---normal-color--transparent-white: #ffffff42;
  --_common-spacing---spacing-15xl-large: 48px;
  --_color---normal-color--soft-white-layer: #ffffff42;
  --_base---bordar-radius--r-xl: 12px;
  --_color---normal-color--frosted-white: #ffffff42;
  --_color---normal-color--gunmetal: #1d1d1d;
  --_common-spacing---spacing-22xl-large: 64px;
  --_common-spacing---spacing-tiny: 4px;
  --_base---font-size--font-size-xs: 14px;
  --_base---line-height--line-height-lg: 136%;
  --_common-spacing---spacing-13xl-large: 40px;
  --_common-spacing---spacing-4xl-large: 20px;
  --_common-spacing---spacing-34xl-large: 120px;
  --_common-spacing---spacing-30xl-large: 100px;
  --_common-spacing---spacing-large: 12px;
  --_common-spacing---spacing-5xl-large: 22px;
  --_common-spacing---spacing-27xl-large: 80px;
  --_common-spacing---spacing-20xl-large: 60px;
  --_base---line-height--line-height-xl: 144%;
  --_common-spacing---spacing-26xl-large: 78px;
  --_base---bordar-radius--pill: 200px;
  --_common-spacing---spacing-12xl-large: 38px;
  --_base---bordar-radius--r-7xl: 32px;
  --_base---font-size--font-size-2xl: 24px;
  --_base---font-size--font-size-md: 18px;
  --_base---font-weight--medium: 500;
  --_common-spacing---spacing-25xl-large: 74px;
  --_common-spacing---spacing-29xl-large: 94px;
  --_common-spacing---spacing-35xl-large: 140px;
  --_common-spacing---spacing-37xl-large: 200px;
  --_base---bordar-radius--r-5xl: 22px;
  --_base---bordar-radius--r-m: 4px;
  --_base---bordar-radius--round: 100%;
  --_base---font-size--font-size-10xl: 64px;
  --_base---line-height--line-height-normal: 124%;
  --_base---font-size--font-size-6xl: 40px;
  --_base---font-size--font-size-4xl: 28px;
  --_common-spacing---spacing-3xl-large: 18px;
  --_base---bordar-radius--r-l: 6px;
  --_base---bordar-radius--r-8xl: 40px;
  --_common-spacing---spacing-32xl-large: 108px;
  --_common-spacing---spacing-17xl-large: 52px;
  --_common-spacing---spacing-11xl-large: 36px;
  --_base---bordar-radius--r-4xl: 20px;
  --_base---bordar-radius--r-2xl: 14px;
  --_base---bordar-radius--r-3xl: 16px;
  --_base---font-size--font-size-13xl: 76px;
  --_base---spacing-letter--spacing-letter-tightest: -.03em;
  --_base---font-size--font-size-7xl: 48px;
  --_base---font-size--font-size-5xl: 36px;
  --_common-spacing---spacing-14xl-large: 45px;
  --_common-spacing---margin-style--margin-plus-spacer-service: 215vh;
  --_base---line-height--line-height-3xl: 170%;
  --_base---spacing-letter--spacing-letter-tight: -.01em;
  --_common-spacing---spacing-23xl-large: 68px;
  --_common-spacing---spacing-8xl-large: 26px;
  --_base---line-height--line-height-relaxed: 132%;
  --_color---normal-color--transparent: transparent;
  --_common-spacing---spacing-extra-large: 14px;
  --_common-spacing---spacing-10xl-large: 34px;
  --_base---bordar-radius--r-x: 8px;
  --_common-spacing---spacing-7xl-large: 25px;
  --_common-spacing---spacing-36xl-large: 160px;
  --_base---bordar-radius--r-6xl: 24px;
  --_base---bordar-radius--r-9xl: 42px;
  --_color---normal-color--soft-black: #1c1c1c;
  --_common-spacing---spacing-21xl-large: 62px;
  --_common-spacing---spacing-31xl-large: 106px;
  --_common-spacing---spacing-28xl-large: 82px;
  --_common-spacing---spacing-16xl-large: 50px;
  --_base---font-size--font-size-15xl: 280px;
  --_base---font-size--font-size-14xl: 80px;
  --_common-spacing---spacing-19xl-large: 58px;
  --_base---global-size--global-half: 0px;
  --_ui---primary-button--font-family: var(--_base---font-family--your-font);
  --_ui---primary-button--font-weight: var(--_base---font-weight--regular);
  --text-extra-large--font-family: var(--_base---font-family--your-font);
  --text-extra-large--font-weight: var(--_base---font-weight--regular);
  --text-extra-large--font-size: 22px;
  --_ui---primary-button--font-size: var(--_base---font-size--font-size-md);
  --text-extra-large--line-height: var(--_base---line-height--line-height-xl);
  --_base---font-weight--thin: 100;
  --text-extra-large--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra);
  --_ui---primary-button--line-height: var(--_base---line-height--line-height-relaxed);
  --_ui---primary-button--letter-spacing: var(--_base---global-size--none);
  --_base---font-weight--extra-light: 200;
  --_base---font-weight--light: 300;
  --_ui---secondary-button--font-family: var(--_base---font-family--your-font);
  --_ui---secondary-button--font-weight: var(--_base---font-weight--regular);
  --_ui---secondary-button--font-size: var(--_base---font-size--font-size-md);
  --_base---font-weight--bold: 700;
  --_ui---secondary-button--line-height: var(--_base---line-height--line-height-relaxed);
  --_ui---secondary-button--letter-spacing: var(--_base---global-size--none);
  --_base---font-weight--extra-bold: 800;
  --_base---font-weight--black: 900;
  --text-learge--font-family: var(--_base---font-family--your-font);
  --text-learge--font-weight: var(--_base---font-weight--regular);
  --text-learge--font-size: 20px;
  --text-learge--line-height: var(--_base---line-height--line-height-xl);
  --_base---font-size--font-size-xl: 22px;
  --text-learge--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra);
  --_base---font-size--font-size-3xl: 26px;
  --_base---font-size--font-size-8xl: 52px;
  --_base---font-size--font-size-9xl: 60px;
  --_base---font-size--font-size-11xl: 68px;
  --_base---font-size--font-size-12xl: 72px;
  --_base---line-height--line-height-tighter: 105%;
  --_base---line-height--line-height-tight: 110%;
  --_common-spacing---spacing-18xl-large: 56px;
  --_common-spacing---spacing-24xl-large: 70px;
  --_base---spacing-letter--spacing-letter-ultra: -.04em;
  --_common-spacing---spacing-38xl-large: 240px;
}
.qx-news article, .qx-news aside, .qx-news details, .qx-news figcaption, .qx-news figure, .qx-news footer, .qx-news header, .qx-news hgroup, .qx-news main, .qx-news menu, .qx-news nav, .qx-news section, .qx-news summary { display: block; }
.qx-news a { background-color: #0000; }
.qx-news img { border: 0; }
.qx-news img { vertical-align: middle;
  max-width: 100%;
  display: inline-block; }
.qx-news .w-inline-block { max-width: 100%;
  display: inline-block; }
.qx-news h1, .qx-news h2, .qx-news h3, .qx-news h4, .qx-news h5, .qx-news h6 { margin-bottom: 10px;
  font-weight: bold; }
.qx-news h2 { margin-top: 20px;
  font-size: 32px;
  line-height: 36px; }
.qx-news p { margin-top: 0;
  margin-bottom: 10px; }
.qx-news .w-embed:before, .qx-news .w-embed:after { content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table; }
.qx-news .w-embed:after { clear: both; }
.qx-news .w-container { max-width: 940px;
  margin-left: auto;
  margin-right: auto; }
.qx-news .w-container:before, .qx-news .w-container:after { content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table; }
.qx-news .w-container:after { clear: both; }
.qx-news .w-container .w-row { margin-left: -10px;
  margin-right: -10px; }
@media screen and (max-width: 991px) {
  .qx-news .w-container { max-width: 728px; }
}
@media screen and (max-width: 767px) {
  .qx-news .w-row, .qx-news .w-container .w-row { margin-left: 0;
    margin-right: 0; }
}
@media screen and (max-width: 479px) {
  .qx-news .w-container { max-width: none; }
}
.qx-news .w-layout-blockcontainer { max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block; }
@media screen and (max-width: 991px) {
  .qx-news .w-layout-blockcontainer { max-width: 728px; }
}
@media screen and (max-width: 767px) {
  .qx-news .w-layout-blockcontainer { max-width: none; }
}
.qx-news h2 { margin-top: var(--_common-spacing---spacing-9xl-large);
  margin-bottom: var(--_common-spacing---spacing-2xl-large);
  font-family: var(--h2--font-family);
  color: var(--_color---text-color--text-color);
  font-size: var(--h2--font-size);
  line-height: var(--h2--line-height);
  font-weight: var(--h2--font-weight);
  letter-spacing: var(--h2--letter-spacing); }
.qx-news p { margin-top: var(--_common-spacing---spacing-extra-tiny);
  margin-bottom: var(--_common-spacing---spacing-extra-tiny);
  font-size: var(--_base---font-size--font-size-lg);
  line-height: var(--_base---line-height--line-height-md);
  letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); }
.qx-news a { color: var(--_color---text-color--paragraph-color);
  line-height: var(--_base---line-height--line-height-base);
  text-underline-offset: 4px;
  text-decoration: underline; }
.qx-news .qx-h2 { margin-top: var(--_base---global-size--none);
  margin-bottom: var(--_base---global-size--none);
  font-family: var(--h2--font-family);
  color: var(--_color---text-color--text-color);
  font-size: var(--h2--font-size);
  line-height: var(--h2--line-height);
  font-weight: var(--h2--font-weight);
  letter-spacing: var(--h2--letter-spacing);
  text-transform: capitalize; }
.qx-news .qx-h2.marquee-position { position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-200%, 200%); }
.qx-news .qx-h2.project-title-mw { width: var(--_base---global-size--global-full);
  max-width: 440px; }
.qx-news .qx-h2.vali-title-mw { width: var(--_base---global-size--global-full);
  max-width: 622px; }
.qx-news .qx-container { max-width: var(--_ui---container--max-width);
  padding-right: var(--_ui---container--padding);
  padding-left: var(--_ui---container--padding);
  margin-left: auto;
  margin-right: auto;
  display: block; }
.qx-news .qx-body { font-family: var(--body--font-family);
  color: var(--_color---normal-color--medium-gray);
  font-size: var(--body--font-size);
  line-height: var(--body--line-height);
  font-weight: var(--body--font-weight);
  letter-spacing: var(--body--letter-spacing); }
.qx-news .qx-body.white { color: var(--_color---normal-color--white); }
.qx-news .qx-body.snow-white { color: var(--_color---normal-color--snow-white); }
.qx-news .qx-body.text-end { text-align: right; }
.qx-news .qx-body.valu-des-mw { width: var(--_base---global-size--global-full);
  max-width: 340px;
  margin-left: auto; }
.qx-news .qx-body.black { color: var(--_color---normal-color--black); }
.qx-news .qx-body.near-black { color: var(--_color---normal-color--near-black); }
.qx-news .qx-body.transparent-white { color: var(--_color---normal-color--transparent-white); }
.qx-news .qx-body.error-des { max-width: 358px; }
.qx-news .qx-body.utility-note-des { width: var(--_base---global-size--global-full);
  max-width: 620px; }
.qx-news .qx-main-button { grid-column-gap: 8px;
  grid-row-gap: 8px;
  color: #000;
  white-space: nowrap;
  filter: url("#buttonFilter");
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  transition-property: opacity;
  transition-duration: .9s;
  transition-timing-function: cubic-bezier(.135, .9, .15, 1);
  display: flex;
  position: relative; }
.qx-news .qx-svg-filter_embed { display: none; }
.qx-news .qx-button-content-wrap { padding: var(--_common-spacing---spacing-2xl-large) var(--_common-spacing---spacing-6xl-large);
  background-color: var(--_color---normal-color--near-black);
  box-shadow: none;
  color: var(--_color---normal-color--snow-white);
  border-radius: 70px; }
.qx-news .qx-button-content-wrap.qx-button-content-wrap-two { background-color: var(--_color---normal-color--snow-white);
  color: var(--_color---normal-color--deep-charcoal); }
.qx-news .qx-button-arrow-wrapper { width: 50px;
  height: 50px;
  padding: var(--_common-spacing---spacing-large);
  border: 1px solid var(--_color---normal-color--black);
  background-color: var(--_color---normal-color--snow-white);
  border-radius: 10rem;
  justify-content: center;
  align-items: center;
  display: flex; }
.qx-news .qx-button-content-wrap-child { background-image: linear-gradient(#fff, #0f0f0f 85%);
  border-radius: 70px;
  padding: 1px; }
.qx-news .qx-button-content-wrap-child.qx-button-content-wrap-child-two { background-image: linear-gradient(#fff, #0f0f0f 86%); }
.qx-news .qx-all-image-cover { width: var(--_base---global-size--global-full);
  height: var(--_base---global-size--global-full);
  object-fit: cover; }
.qx-news .header-btn.qx-display-none { display: block; }
.qx-news .qx-home-blog-section { padding-top: var(--_common-spacing---spacing-34xl-large);
  padding-bottom: var(--_common-spacing---spacing-34xl-large); }
.qx-news .qx-home-blog-wrap { grid-column-gap: var(--_common-spacing---spacing-6xl-large);
  grid-row-gap: var(--_common-spacing---spacing-6xl-large);
  justify-content: space-between;
  align-items: flex-start;
  display: flex; }
.qx-news .qx-home-blog-left { width: var(--_base---global-size--global-full);
  max-width: 448px;
  position: sticky;
  top: 14vh; }
.qx-news .qx-home-blog-right { width: var(--_base---global-size--global-full);
  max-width: 695px; }
.qx-news .qx-home-blog-left-top { grid-column-gap: var(--_common-spacing---spacing-large);
  grid-row-gap: var(--_common-spacing---spacing-large);
  flex-flow: column;
  display: flex; }
.qx-news .qx-home-blog-left-bottom { margin-top: var(--_common-spacing---spacing-23xl-large);
  display: inline-flex; }
.qx-news .qx-blog-item { padding-top: var(--_common-spacing---spacing-6xl-large);
  padding-bottom: var(--_common-spacing---spacing-6xl-large);
  grid-column-gap: var(--_common-spacing---spacing-8xl-large);
  grid-row-gap: var(--_common-spacing---spacing-8xl-large);
  background-color: var(--_color---normal-color--black);
  border-top: 1px solid #222;
  display: flex; }
.qx-news .qx-blog-item-image { width: var(--_base---global-size--global-full);
  border-radius: 10px;
  max-width: 350px;
  height: 244px;
  overflow: hidden; }
.qx-news .qx-blog-item-info { width: var(--_base---global-size--global-full);
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  max-width: 320px;
  display: flex; }
.qx-news .qx-blog-item-title-box { grid-column-gap: var(--_common-spacing---spacing-large);
  grid-row-gap: var(--_common-spacing---spacing-large);
  flex-flow: column;
  display: flex; }
.qx-news .qx-blog-title { color: var(--_color---normal-color--snow-white);
  font-size: var(--_base---font-size--font-size-2xl);
  line-height: var(--_base---line-height--line-height-relaxed);
  font-weight: var(--_base---font-weight--semi-bold);
  text-decoration: none;
  transition: all .3s; }
.qx-news .qx-blog-title:hover { color: var(--_color---normal-color--vivid-orange); }
.qx-news .qx-collection-item { position: sticky;
  bottom: 14vh; }
.qx-news .qx-blog-item-section { margin-top: var(--_common-spacing---spacing-22xl-large);
  margin-bottom: var(--_common-spacing---spacing-34xl-large); }
.qx-news .qx-blog-item-wrap { grid-column-gap: var(--_common-spacing---spacing-28xl-large);
  grid-row-gap: var(--_common-spacing---spacing-28xl-large);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr; }
.qx-news .qx-blog-item-image-two { width: var(--_base---global-size--global-full);
  border-radius: 10px;
  max-width: 240px;
  height: 244px;
  overflow: hidden; }
.qx-news .qx-blog-item-info-two { width: var(--_base---global-size--global-full);
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  max-width: 338px;
  display: flex; }
.qx-news .qx-blog-item-two { padding-top: var(--_common-spacing---spacing-6xl-large);
  grid-column-gap: var(--_common-spacing---spacing-8xl-large);
  grid-row-gap: var(--_common-spacing---spacing-8xl-large);
  background-color: var(--_color---normal-color--black);
  border-top: 1px solid #222;
  display: flex; }
.qx-news .qx-blog-title-banner { text-decoration: none; }
.qx-news .qx-display-none { display: none; }
@media screen and (max-width: 991px) {
  .qx-news { --h1--font-family: var(--_base---font-family--your-font); --h1--font-size: 56px; --h1--line-height: var(--_base---line-height--line-height-2xl); --h1--font-weight: var(--_base---font-weight--medium); --h1--letter-spacing: var(--_base---spacing-letter--spacing-letter-tightest); --h2--font-family: var(--_base---font-family--your-font); --h2--font-size: 42px; --h2--line-height: var(--_base---line-height--line-height-relaxed); --h2--font-weight: var(--_base---font-weight--medium); --h2--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --h3--font-family: var(--_base---font-family--your-font); --h3--font-size: 36px; --h3--line-height: var(--_base---line-height--line-height-relaxed); --h3--font-weight: var(--_base---font-weight--medium); --h3--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --h4--font-family: var(--_base---font-family--your-font); --h4--font-size: 28px; --h4--line-height: var(--_base---line-height--line-height-base); --h4--font-weight: var(--_base---font-weight--medium); --h4--letter-spacing: var(--_base---global-size--none); --h5--font-family: var(--_base---font-family--your-font); --h5--font-size: 24px; --h5--line-height: var(--_base---line-height--line-height-relaxed); --h5--font-weight: var(--_base---font-weight--medium); --h5--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --h6--font-family: var(--_base---font-family--your-font); --h6--font-size: 22px; --h6--line-height: var(--_base---line-height--line-height-md); --h6--font-weight: var(--_base---font-weight--medium); --h6--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-regular--font-family: var(--_base---font-family--your-font); --text-regular--font-size: 16px; --text-regular--line-height: var(--_base---line-height--line-height-2xl); --text-regular--font-weight: var(--_base---font-weight--regular); --text-regular--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-extra-small--font-family: var(--_base---font-family--your-font); --text-extra-small--font-size: 16px; --text-extra-small--line-height: var(--_base---line-height--line-height-lg); --text-extra-small--font-weight: var(--_base---font-weight--regular); --text-extra-small--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --body--font-family: var(--_base---font-family--your-font); --body--font-size: 16px; --body--line-height: var(--_base---line-height--line-height-xl); --body--font-weight: var(--_base---font-weight--regular); --body--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --text-extra-large--font-family: var(--_base---font-family--your-font); --text-extra-large--font-weight: var(--_base---font-weight--regular); --text-extra-large--font-size: 22px; --text-extra-large--line-height: var(--_base---line-height--line-height-xl); --text-extra-large--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-learge--font-family: var(--_base---font-family--your-font); --text-learge--font-weight: var(--_base---font-weight--regular); --text-learge--font-size: 20px; --text-learge--line-height: var(--_base---line-height--line-height-xl); --text-learge--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --_common-spacing---spacing-9xl-large: 24px; --_common-spacing---spacing-2xl-large: 12px; --_common-spacing---spacing-6xl-large: 24px; --_common-spacing---spacing-medium: 10px; --_common-spacing---spacing-extra-tiny: 0px; --_common-spacing---spacing-extra-small: 6px; --_common-spacing---spacing-small: 8px; --_common-spacing---spacing-33xl-large: 100px; --_common-spacing---spacing-15xl-large: 32px; --_common-spacing---spacing-22xl-large: 48px; --_common-spacing---spacing-tiny: 4px; --_common-spacing---spacing-13xl-large: 32px; --_common-spacing---spacing-4xl-large: 20px; --_common-spacing---spacing-34xl-large: 100px; --_common-spacing---spacing-30xl-large: 80px; --_common-spacing---spacing-large: 12px; --_common-spacing---spacing-5xl-large: 22px; --_common-spacing---spacing-27xl-large: 64px; --_common-spacing---spacing-20xl-large: 60px; --_common-spacing---spacing-26xl-large: 68px; --_common-spacing---spacing-12xl-large: 38px; --_common-spacing---spacing-25xl-large: 74px; --_common-spacing---spacing-29xl-large: 80px; --_common-spacing---spacing-35xl-large: 120px; --_common-spacing---spacing-37xl-large: 200px; --_common-spacing---spacing-3xl-large: 18px; --_common-spacing---spacing-32xl-large: 108px; --_common-spacing---spacing-17xl-large: 52px; --_common-spacing---spacing-11xl-large: 36px; --_common-spacing---spacing-14xl-large: 45px; --_common-spacing---margin-style--margin-plus-spacer-service: 215vh; --_common-spacing---spacing-23xl-large: 68px; --_common-spacing---spacing-8xl-large: 26px; --_common-spacing---spacing-extra-large: 14px; --_common-spacing---spacing-10xl-large: 34px; --_common-spacing---spacing-7xl-large: 25px; --_common-spacing---spacing-36xl-large: 140px; --_common-spacing---spacing-21xl-large: 62px; --_common-spacing---spacing-31xl-large: 106px; --_common-spacing---spacing-28xl-large: 82px; --_common-spacing---spacing-16xl-large: 50px; --_common-spacing---spacing-19xl-large: 58px; --_common-spacing---spacing-18xl-large: 56px; --_common-spacing---spacing-24xl-large: 70px; --_common-spacing---spacing-38xl-large: 240px; --_ui---container--padding: 32px; --_ui---container--max-width: 767px; --_ui---primary-button--font-family: var(--_base---font-family--your-font); --_ui---primary-button--font-weight: var(--_base---font-weight--regular); --_ui---primary-button--font-size: var(--_base---font-size--font-size-md); --_ui---primary-button--line-height: var(--_base---line-height--line-height-relaxed); --_ui---primary-button--letter-spacing: var(--_base---global-size--none); --_ui---secondary-button--font-family: var(--_base---font-family--your-font); --_ui---secondary-button--font-weight: var(--_base---font-weight--regular); --_ui---secondary-button--font-size: var(--_base---font-size--font-size-md); --_ui---secondary-button--line-height: var(--_base---line-height--line-height-relaxed); --_ui---secondary-button--letter-spacing: var(--_base---global-size--none); }
  .qx-news .qx-button-arrow-wrapper { width: 40px;
    height: 40px; }
  .qx-news .qx-home-blog-wrap { flex-flow: column; }
  .qx-news .qx-blog-item-title-box { margin-bottom: var(--_common-spacing---spacing-2xl-large); }
  .qx-news .qx-blog-item-image-two { max-width: var(--_base---global-size--global-full); }
  .qx-news .qx-blog-item-two { flex-flow: column; }
}
@media screen and (max-width: 767px) {
  .qx-news { --h1--font-family: var(--_base---font-family--your-font); --h1--font-size: 56px; --h1--line-height: var(--_base---line-height--line-height-2xl); --h1--font-weight: var(--_base---font-weight--medium); --h1--letter-spacing: var(--_base---spacing-letter--spacing-letter-tightest); --h2--font-family: var(--_base---font-family--your-font); --h2--font-size: 36px; --h2--line-height: var(--_base---line-height--line-height-relaxed); --h2--font-weight: var(--_base---font-weight--medium); --h2--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --h3--font-family: var(--_base---font-family--your-font); --h3--font-size: 32px; --h3--line-height: var(--_base---line-height--line-height-relaxed); --h3--font-weight: var(--_base---font-weight--medium); --h3--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --h4--font-family: var(--_base---font-family--your-font); --h4--font-size: 26px; --h4--line-height: var(--_base---line-height--line-height-base); --h4--font-weight: var(--_base---font-weight--medium); --h4--letter-spacing: var(--_base---global-size--none); --h5--font-family: var(--_base---font-family--your-font); --h5--font-size: 22px; --h5--line-height: var(--_base---line-height--line-height-relaxed); --h5--font-weight: var(--_base---font-weight--medium); --h5--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --h6--font-family: var(--_base---font-family--your-font); --h6--font-size: 20px; --h6--line-height: var(--_base---line-height--line-height-md); --h6--font-weight: var(--_base---font-weight--medium); --h6--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-regular--font-family: var(--_base---font-family--your-font); --text-regular--font-size: 16px; --text-regular--line-height: var(--_base---line-height--line-height-2xl); --text-regular--font-weight: var(--_base---font-weight--regular); --text-regular--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-extra-small--font-family: var(--_base---font-family--your-font); --text-extra-small--font-size: 16px; --text-extra-small--line-height: var(--_base---line-height--line-height-lg); --text-extra-small--font-weight: var(--_base---font-weight--regular); --text-extra-small--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --body--font-family: var(--_base---font-family--your-font); --body--font-size: 16px; --body--line-height: var(--_base---line-height--line-height-xl); --body--font-weight: var(--_base---font-weight--regular); --body--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --text-extra-large--font-family: var(--_base---font-family--your-font); --text-extra-large--font-weight: var(--_base---font-weight--regular); --text-extra-large--font-size: 20px; --text-extra-large--line-height: var(--_base---line-height--line-height-xl); --text-extra-large--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-learge--font-family: var(--_base---font-family--your-font); --text-learge--font-weight: var(--_base---font-weight--regular); --text-learge--font-size: 18px; --text-learge--line-height: var(--_base---line-height--line-height-xl); --text-learge--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --_common-spacing---spacing-9xl-large: 16px; --_common-spacing---spacing-2xl-large: 12px; --_common-spacing---spacing-6xl-large: 24px; --_common-spacing---spacing-medium: 10px; --_common-spacing---spacing-extra-tiny: 0px; --_common-spacing---spacing-extra-small: 6px; --_common-spacing---spacing-small: 8px; --_common-spacing---spacing-33xl-large: 80px; --_common-spacing---spacing-15xl-large: 24px; --_common-spacing---spacing-22xl-large: 32px; --_common-spacing---spacing-tiny: 4px; --_common-spacing---spacing-13xl-large: 24px; --_common-spacing---spacing-4xl-large: 20px; --_common-spacing---spacing-34xl-large: 80px; --_common-spacing---spacing-30xl-large: 64px; --_common-spacing---spacing-large: 12px; --_common-spacing---spacing-5xl-large: 22px; --_common-spacing---spacing-27xl-large: 48px; --_common-spacing---spacing-20xl-large: 60px; --_common-spacing---spacing-26xl-large: 58px; --_common-spacing---spacing-12xl-large: 38px; --_common-spacing---spacing-25xl-large: 74px; --_common-spacing---spacing-29xl-large: 70px; --_common-spacing---spacing-35xl-large: 80px; --_common-spacing---spacing-37xl-large: 200px; --_common-spacing---spacing-3xl-large: 18px; --_common-spacing---spacing-32xl-large: 108px; --_common-spacing---spacing-17xl-large: 52px; --_common-spacing---spacing-11xl-large: 36px; --_common-spacing---spacing-14xl-large: 45px; --_common-spacing---margin-style--margin-plus-spacer-service: 215vh; --_common-spacing---spacing-23xl-large: 68px; --_common-spacing---spacing-8xl-large: 26px; --_common-spacing---spacing-extra-large: 14px; --_common-spacing---spacing-10xl-large: 34px; --_common-spacing---spacing-7xl-large: 25px; --_common-spacing---spacing-36xl-large: 100px; --_common-spacing---spacing-21xl-large: 62px; --_common-spacing---spacing-31xl-large: 106px; --_common-spacing---spacing-28xl-large: 82px; --_common-spacing---spacing-16xl-large: 50px; --_common-spacing---spacing-19xl-large: 58px; --_common-spacing---spacing-18xl-large: 56px; --_common-spacing---spacing-24xl-large: 70px; --_common-spacing---spacing-38xl-large: 240px; --_ui---container--padding: 24px; --_ui---container--max-width: 540px; --_ui---primary-button--font-family: var(--_base---font-family--your-font); --_ui---primary-button--font-weight: var(--_base---font-weight--regular); --_ui---primary-button--font-size: var(--_base---font-size--font-size-md); --_ui---primary-button--line-height: var(--_base---line-height--line-height-relaxed); --_ui---primary-button--letter-spacing: var(--_base---global-size--none); --_ui---secondary-button--font-family: var(--_base---font-family--your-font); --_ui---secondary-button--font-weight: var(--_base---font-weight--regular); --_ui---secondary-button--font-size: var(--_base---font-size--font-size-md); --_ui---secondary-button--line-height: var(--_base---line-height--line-height-relaxed); --_ui---secondary-button--letter-spacing: var(--_base---global-size--none); }
  .qx-news .qx-h2.marquee-position { left: 75%; }
  .qx-news .header-btn.qx-display-none { display: none; }
  .qx-news .qx-blog-item { grid-column-gap: var(--_common-spacing---spacing-4xl-large);
    grid-row-gap: var(--_common-spacing---spacing-4xl-large); }
  .qx-news .qx-blog-item-image { max-width: 300px;
    height: 200px; }
  .qx-news .image, .qx-news .qx-blog-item-image-two { height: auto; }
}
@media screen and (max-width: 479px) {
  .qx-news { --h1--font-family: var(--_base---font-family--your-font); --h1--font-size: 42px; --h1--line-height: var(--_base---line-height--line-height-2xl); --h1--font-weight: var(--_base---font-weight--medium); --h1--letter-spacing: var(--_base---spacing-letter--spacing-letter-tightest); --h2--font-family: var(--_base---font-family--your-font); --h2--font-size: 32px; --h2--line-height: var(--_base---line-height--line-height-relaxed); --h2--font-weight: var(--_base---font-weight--medium); --h2--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --h3--font-family: var(--_base---font-family--your-font); --h3--font-size: 28px; --h3--line-height: var(--_base---line-height--line-height-relaxed); --h3--font-weight: var(--_base---font-weight--medium); --h3--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --h4--font-family: var(--_base---font-family--your-font); --h4--font-size: 24px; --h4--line-height: var(--_base---line-height--line-height-base); --h4--font-weight: var(--_base---font-weight--medium); --h4--letter-spacing: var(--_base---global-size--none); --h5--font-family: var(--_base---font-family--your-font); --h5--font-size: 22px; --h5--line-height: var(--_base---line-height--line-height-relaxed); --h5--font-weight: var(--_base---font-weight--medium); --h5--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --h6--font-family: var(--_base---font-family--your-font); --h6--font-size: 16px; --h6--line-height: var(--_base---line-height--line-height-md); --h6--font-weight: var(--_base---font-weight--medium); --h6--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-regular--font-family: var(--_base---font-family--your-font); --text-regular--font-size: 16px; --text-regular--line-height: var(--_base---line-height--line-height-2xl); --text-regular--font-weight: var(--_base---font-weight--regular); --text-regular--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-extra-small--font-family: var(--_base---font-family--your-font); --text-extra-small--font-size: 16px; --text-extra-small--line-height: var(--_base---line-height--line-height-lg); --text-extra-small--font-weight: var(--_base---font-weight--regular); --text-extra-small--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --body--font-family: var(--_base---font-family--your-font); --body--font-size: 16px; --body--line-height: var(--_base---line-height--line-height-xl); --body--font-weight: var(--_base---font-weight--regular); --body--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --text-extra-large--font-family: var(--_base---font-family--your-font); --text-extra-large--font-weight: var(--_base---font-weight--regular); --text-extra-large--font-size: 18px; --text-extra-large--line-height: var(--_base---line-height--line-height-xl); --text-extra-large--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-learge--font-family: var(--_base---font-family--your-font); --text-learge--font-weight: var(--_base---font-weight--regular); --text-learge--font-size: 16px; --text-learge--line-height: var(--_base---line-height--line-height-xl); --text-learge--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --_common-spacing---spacing-9xl-large: 16px; --_common-spacing---spacing-2xl-large: 12px; --_common-spacing---spacing-6xl-large: 20px; --_common-spacing---spacing-medium: 10px; --_common-spacing---spacing-extra-tiny: 0px; --_common-spacing---spacing-extra-small: 6px; --_common-spacing---spacing-small: 8px; --_common-spacing---spacing-33xl-large: 70px; --_common-spacing---spacing-15xl-large: 24px; --_common-spacing---spacing-22xl-large: 32px; --_common-spacing---spacing-tiny: 4px; --_common-spacing---spacing-13xl-large: 24px; --_common-spacing---spacing-4xl-large: 20px; --_common-spacing---spacing-34xl-large: 60px; --_common-spacing---spacing-30xl-large: 64px; --_common-spacing---spacing-large: 12px; --_common-spacing---spacing-5xl-large: 22px; --_common-spacing---spacing-27xl-large: 48px; --_common-spacing---spacing-20xl-large: 60px; --_common-spacing---spacing-26xl-large: 30px; --_common-spacing---spacing-12xl-large: 38px; --_common-spacing---spacing-25xl-large: 74px; --_common-spacing---spacing-29xl-large: 60px; --_common-spacing---spacing-35xl-large: 80px; --_common-spacing---spacing-37xl-large: 200px; --_common-spacing---spacing-3xl-large: 18px; --_common-spacing---spacing-32xl-large: 108px; --_common-spacing---spacing-17xl-large: 52px; --_common-spacing---spacing-11xl-large: 36px; --_common-spacing---spacing-14xl-large: 45px; --_common-spacing---margin-style--margin-plus-spacer-service: 215vh; --_common-spacing---spacing-23xl-large: 68px; --_common-spacing---spacing-8xl-large: 26px; --_common-spacing---spacing-extra-large: 14px; --_common-spacing---spacing-10xl-large: 34px; --_common-spacing---spacing-7xl-large: 25px; --_common-spacing---spacing-36xl-large: 100px; --_common-spacing---spacing-21xl-large: 62px; --_common-spacing---spacing-31xl-large: 106px; --_common-spacing---spacing-28xl-large: 82px; --_common-spacing---spacing-16xl-large: 50px; --_common-spacing---spacing-19xl-large: 58px; --_common-spacing---spacing-18xl-large: 56px; --_common-spacing---spacing-24xl-large: 70px; --_common-spacing---spacing-38xl-large: 240px; --_ui---container--padding: 16px; --_ui---container--max-width: 100%; --_ui---primary-button--font-family: var(--_base---font-family--your-font); --_ui---primary-button--font-weight: var(--_base---font-weight--regular); --_ui---primary-button--font-size: var(--_base---font-size--font-size-md); --_ui---primary-button--line-height: var(--_base---line-height--line-height-relaxed); --_ui---primary-button--letter-spacing: var(--_base---global-size--none); --_ui---secondary-button--font-family: var(--_base---font-family--your-font); --_ui---secondary-button--font-weight: var(--_base---font-weight--regular); --_ui---secondary-button--font-size: var(--_base---font-size--font-size-md); --_ui---secondary-button--line-height: var(--_base---line-height--line-height-relaxed); --_ui---secondary-button--letter-spacing: var(--_base---global-size--none); }
  .qx-news .qx-h2.marquee-position { top: 0%;
    left: 80%; }
  .qx-news .qx-body.valu-des-mw { max-width: 100%; }
  .qx-news .qx-home-blog-left { position: static; }
  .qx-news .qx-home-blog-right { max-width: var(--_base---global-size--global-full); }
  .qx-news .qx-blog-item { flex-flow: column; }
  .qx-news .qx-blog-item-image { height: auto;
    max-width: var(--_base---global-size--global-full); }
  .qx-news .qx-blog-item-info { max-width: var(--_base---global-size--global-full); }
  .qx-news .qx-collection-list-wrapper { width: var(--_base---global-size--global-full); }
  .qx-news .qx-collection-item { position: static; }
  .qx-news .qx-text-block-3 { font-size: var(--_base---font-size--font-size-sm); }
}
/* qx-news: the donor painted this ground on <body>; the block needs it itself. */
.qx-news { background-color: #000; }
/* ---- qx-news: hand-written, from tools/blocks/qx-news.css ---- */
/* qx-news — hand-written rules for the "把对话变成对客户的理解" block.
   Appended after the extracted qubix rules, so equal specificity wins here.
   Every rule is scoped under .qx-news. Nothing here changes a size, colour,
   font or layout the donor set: it only restores what a cut section cannot
   carry and undoes what the host page leaks in. */

/* 1. qubix's own `body` rule. It never travels with a cut section, and it is
      what colours the one unclassed line under each row title (medium gray in
      the donor) and sets the block's base typeface. Same tokens, same values,
      moved onto the scope root. */
.qx-news {
  font-family: var(--_base---font-family--your-font);
  color: var(--_color---normal-color--medium-gray);
  font-size: var(--_base---font-size--font-size-sm);
  line-height: 20px;
  font-weight: var(--_base---font-weight--regular);
}

/* 2. Rules from the shared Mono stylesheet (the one this page's own chrome is
      drawn from) reach into the transplanted block, because a bare `p` / `a`
      selector — or a rule on an ancestor of every block — matches anywhere:

        p { opacity: .7 }             dims the lead under .qx-body's own
                                      medium gray (Mono line 2164);
        body { cursor: none }         line 2119, inherited by everything;
        .main-content { cursor: none }  line 3408, an ancestor of every
                                      block on this page;
        a { cursor: none }            line 2175.

      Mono hides the pointer because it draws its own crosshair; this page
      never builds one (no fixed pointer-events:none node exists at runtime),
      so inside the block the pointer simply disappears. Measured against the
      donor at 1440×900: every element of qubix's section computes
      `cursor: auto` and its links `pointer`; before the line below every
      non-link node of ours computed `none`. The three lines restore the donor's
      computed values and nothing else — no size, colour, spacing or layout is
      touched. css/stargo-fusion.css already undoes the same inside .sc-scope,
      and qx-projects inside .qx-projects. */
.qx-news p { opacity: 1; }
.qx-news { cursor: auto; }
.qx-news a { cursor: pointer; }

/* 3. The Sales Desk heading (V6 §5.3) on the Chinese page. qx-news.mjs puts a
      zero-width space after its colon and its comma; `keep-all` makes those
      the only break points, so 「Sales Desk：把客户聊明白，把订单跟到底」 wraps
      as Sales Desk： / 把客户聊明白， / 把订单跟到底 instead of inside 客户 or
      订单 — measured before this rule at 1440: 「Sales Desk：把客 / 户聊明白，
      把订单 / 跟到底」. The type itself — size, weight, leading — is the
      donor's. */
html[lang^="zh"] .qx-news .qx-h2 { word-break: keep-all; }
/* Balanced in both languages: the English "Sales Desk: from customer to
   order" left "order" alone on its third line from 1024 up. */
.qx-news .qx-h2 { text-wrap: balance; }

/* 4. Row 02's picture is the owner's own Sales Desk screenshot (qx-news.mjs,
      owner instruction 2026-09-18). The donor's thumbnail box is 349x244
      (1.43) and the screenshot is 16:9, so qubix's `object-fit: cover` would
      take a fifth off its width — the Sales Desk navigation rail on the left
      and the extracted-facts panel on the right, i.e. exactly the parts the
      row's own sentence is about. `contain` shows the whole interface inside
      the SAME box: the element, its class, its `data-w-id`, the inline IX2
      transform are untouched (this block applies no hover scale), and the band it
      leaves is the row's own black — `.blog-item` paints rgb(0, 0, 0), named
      again here so the picture carries that ground through the row.
      Matched on the picture's own folder, so a donor photograph or an
      editorial image in the same slot keeps the donor's `cover`. */
.qx-news .qx-all-image-cover[src*="/stargo-product/"] {
  object-fit: contain;
  background-color: #000;
}

@font-face {
  font-family: webflow-icons;
  src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: Interdisplay;
  src: url("../assets/69a01660589c516ba5f0f917/69a022fe18c48956be155c1a_InterDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Interdisplay;
  src: url("../assets/69a01660589c516ba5f0f917/69a022ff8119fed8127f02a7_InterDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Interdisplay;
  src: url("../assets/69a01660589c516ba5f0f917/69a022fe1781fa5c0193ad3f_InterDisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Interdisplay;
  src: url("../assets/69a01660589c516ba5f0f917/69a022ffbb82bbae94bc63b4_InterDisplay-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
.qx-orbit {
  --_color---normal-color--black: black;
  --_base---font-family--your-font: Interdisplay, Arial, sans-serif;
  --_color---normal-color--medium-gray: #a1a1a1;
  --_base---font-size--font-size-sm: 16px;
  --_base---font-weight--regular: 400;
  --_common-spacing---spacing-9xl-large: 32px;
  --_common-spacing---spacing-2xl-large: 16px;
  --h1--font-family: var(--_base---font-family--your-font);
  --_color---normal-color--snow-white: #fdfcfc;
  --h1--font-size: 128px;
  --h1--line-height: var(--_base---line-height--line-height-2xl);
  --h1--font-weight: var(--_base---font-weight--medium);
  --h1--letter-spacing: var(--_base---spacing-letter--spacing-letter-tightest);
  --h2--font-family: var(--_base---font-family--your-font);
  --_color---text-color--text-color: var(--_color---normal-color--snow-white);
  --h2--font-size: 58px;
  --h2--line-height: var(--_base---line-height--line-height-relaxed);
  --h2--font-weight: var(--_base---font-weight--medium);
  --h2--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra);
  --h3--font-family: var(--_base---font-family--your-font);
  --h3--font-size: 44px;
  --h3--line-height: var(--_base---line-height--line-height-relaxed);
  --h3--font-weight: var(--_base---font-weight--medium);
  --h3--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter);
  --_common-spacing---spacing-6xl-large: 24px;
  --_common-spacing---spacing-medium: 10px;
  --h4--font-family: var(--_base---font-family--your-font);
  --h4--font-size: 32px;
  --h4--line-height: var(--_base---line-height--line-height-base);
  --h4--font-weight: var(--_base---font-weight--medium);
  --h4--letter-spacing: var(--_base---global-size--none);
  --h5--font-family: var(--_base---font-family--your-font);
  --h5--font-size: 24px;
  --h5--line-height: var(--_base---line-height--line-height-relaxed);
  --h5--font-weight: var(--_base---font-weight--medium);
  --h5--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter);
  --h6--font-family: var(--_base---font-family--your-font);
  --h6--font-size: 20px;
  --h6--line-height: var(--_base---line-height--line-height-md);
  --h6--font-weight: var(--_base---font-weight--medium);
  --h6--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra);
  --_common-spacing---spacing-extra-tiny: 0px;
  --_base---font-size--font-size-lg: 20px;
  --_base---line-height--line-height-md: 134%;
  --_base---spacing-letter--spacing-letter-tighter: -.02em;
  --_color---text-color--paragraph-color: var(--_color---normal-color--medium-gray);
  --_base---line-height--line-height-base: 122%;
  --_common-spacing---spacing-extra-small: 6px;
  --_common-spacing---spacing-small: 8px;
  --_base---line-height--line-height-2xl: 154%;
  --_base---font-weight--semi-bold: 600;
  --_color---accent-color--accent-one: var(--_color---normal-color--black);
  --_color---normal-color--deep-charcoal: #0f0f0f;
  --_base---global-size--global-full: 100%;
  --_ui---container--padding: 40px;
  --_base---global-size--none: 0px;
  --_common-spacing---spacing-33xl-large: 110px;
  --_base---line-height--line-height-tightest: 100%;
  --_color---normal-color--vivid-orange: #fe6512;
  --text-regular--font-family: var(--_base---font-family--your-font);
  --_color---normal-color--white: white;
  --text-regular--font-size: 18px;
  --text-regular--line-height: var(--_base---line-height--line-height-2xl);
  --text-regular--font-weight: var(--_base---font-weight--regular);
  --text-regular--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra);
  --text-extra-small--font-family: var(--_base---font-family--your-font);
  --text-extra-small--font-size: 16px;
  --text-extra-small--line-height: var(--_base---line-height--line-height-lg);
  --text-extra-small--font-weight: var(--_base---font-weight--regular);
  --text-extra-small--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter);
  --_ui---container--max-width: 1360px;
  --body--font-family: var(--_base---font-family--your-font);
  --body--font-size: 16px;
  --body--line-height: var(--_base---line-height--line-height-xl);
  --body--font-weight: var(--_base---font-weight--regular);
  --body--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter);
  --_color---normal-color--near-black: #222;
  --_color---normal-color--transparent-white: #ffffff42;
  --_common-spacing---spacing-15xl-large: 48px;
  --_color---normal-color--soft-white-layer: #ffffff42;
  --_base---bordar-radius--r-xl: 12px;
  --_color---normal-color--frosted-white: #ffffff42;
  --_color---normal-color--gunmetal: #1d1d1d;
  --_common-spacing---spacing-22xl-large: 64px;
  --_common-spacing---spacing-tiny: 4px;
  --_base---font-size--font-size-xs: 14px;
  --_base---line-height--line-height-lg: 136%;
  --_common-spacing---spacing-13xl-large: 40px;
  --_common-spacing---spacing-4xl-large: 20px;
  --_common-spacing---spacing-34xl-large: 120px;
  --_common-spacing---spacing-30xl-large: 100px;
  --_common-spacing---spacing-large: 12px;
  --_common-spacing---spacing-5xl-large: 22px;
  --_common-spacing---spacing-27xl-large: 80px;
  --_common-spacing---spacing-20xl-large: 60px;
  --_base---line-height--line-height-xl: 144%;
  --_common-spacing---spacing-26xl-large: 78px;
  --_base---bordar-radius--pill: 200px;
  --_common-spacing---spacing-12xl-large: 38px;
  --_base---bordar-radius--r-7xl: 32px;
  --_base---font-size--font-size-2xl: 24px;
  --_base---font-size--font-size-md: 18px;
  --_base---font-weight--medium: 500;
  --_common-spacing---spacing-25xl-large: 74px;
  --_common-spacing---spacing-29xl-large: 94px;
  --_common-spacing---spacing-35xl-large: 140px;
  --_common-spacing---spacing-37xl-large: 200px;
  --_base---bordar-radius--r-5xl: 22px;
  --_base---bordar-radius--r-m: 4px;
  --_base---bordar-radius--round: 100%;
  --_base---font-size--font-size-10xl: 64px;
  --_base---line-height--line-height-normal: 124%;
  --_base---font-size--font-size-6xl: 40px;
  --_base---font-size--font-size-4xl: 28px;
  --_common-spacing---spacing-3xl-large: 18px;
  --_base---bordar-radius--r-l: 6px;
  --_base---bordar-radius--r-8xl: 40px;
  --_common-spacing---spacing-32xl-large: 108px;
  --_common-spacing---spacing-17xl-large: 52px;
  --_common-spacing---spacing-11xl-large: 36px;
  --_base---bordar-radius--r-4xl: 20px;
  --_base---bordar-radius--r-2xl: 14px;
  --_base---bordar-radius--r-3xl: 16px;
  --_base---font-size--font-size-13xl: 76px;
  --_base---spacing-letter--spacing-letter-tightest: -.03em;
  --_base---font-size--font-size-7xl: 48px;
  --_base---font-size--font-size-5xl: 36px;
  --_common-spacing---spacing-14xl-large: 45px;
  --_common-spacing---margin-style--margin-plus-spacer-service: 215vh;
  --_base---line-height--line-height-3xl: 170%;
  --_base---spacing-letter--spacing-letter-tight: -.01em;
  --_common-spacing---spacing-23xl-large: 68px;
  --_common-spacing---spacing-8xl-large: 26px;
  --_base---line-height--line-height-relaxed: 132%;
  --_color---normal-color--transparent: transparent;
  --_common-spacing---spacing-extra-large: 14px;
  --_common-spacing---spacing-10xl-large: 34px;
  --_base---bordar-radius--r-x: 8px;
  --_common-spacing---spacing-7xl-large: 25px;
  --_common-spacing---spacing-36xl-large: 160px;
  --_base---bordar-radius--r-6xl: 24px;
  --_base---bordar-radius--r-9xl: 42px;
  --_color---normal-color--soft-black: #1c1c1c;
  --_common-spacing---spacing-21xl-large: 62px;
  --_common-spacing---spacing-31xl-large: 106px;
  --_common-spacing---spacing-28xl-large: 82px;
  --_common-spacing---spacing-16xl-large: 50px;
  --_base---font-size--font-size-15xl: 280px;
  --_base---font-size--font-size-14xl: 80px;
  --_common-spacing---spacing-19xl-large: 58px;
  --_base---global-size--global-half: 0px;
  --_ui---primary-button--font-family: var(--_base---font-family--your-font);
  --_ui---primary-button--font-weight: var(--_base---font-weight--regular);
  --text-extra-large--font-family: var(--_base---font-family--your-font);
  --text-extra-large--font-weight: var(--_base---font-weight--regular);
  --text-extra-large--font-size: 22px;
  --_ui---primary-button--font-size: var(--_base---font-size--font-size-md);
  --text-extra-large--line-height: var(--_base---line-height--line-height-xl);
  --_base---font-weight--thin: 100;
  --text-extra-large--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra);
  --_ui---primary-button--line-height: var(--_base---line-height--line-height-relaxed);
  --_ui---primary-button--letter-spacing: var(--_base---global-size--none);
  --_base---font-weight--extra-light: 200;
  --_base---font-weight--light: 300;
  --_ui---secondary-button--font-family: var(--_base---font-family--your-font);
  --_ui---secondary-button--font-weight: var(--_base---font-weight--regular);
  --_ui---secondary-button--font-size: var(--_base---font-size--font-size-md);
  --_base---font-weight--bold: 700;
  --_ui---secondary-button--line-height: var(--_base---line-height--line-height-relaxed);
  --_ui---secondary-button--letter-spacing: var(--_base---global-size--none);
  --_base---font-weight--extra-bold: 800;
  --_base---font-weight--black: 900;
  --text-learge--font-family: var(--_base---font-family--your-font);
  --text-learge--font-weight: var(--_base---font-weight--regular);
  --text-learge--font-size: 20px;
  --text-learge--line-height: var(--_base---line-height--line-height-xl);
  --_base---font-size--font-size-xl: 22px;
  --text-learge--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra);
  --_base---font-size--font-size-3xl: 26px;
  --_base---font-size--font-size-8xl: 52px;
  --_base---font-size--font-size-9xl: 60px;
  --_base---font-size--font-size-11xl: 68px;
  --_base---font-size--font-size-12xl: 72px;
  --_base---line-height--line-height-tighter: 105%;
  --_base---line-height--line-height-tight: 110%;
  --_common-spacing---spacing-18xl-large: 56px;
  --_common-spacing---spacing-24xl-large: 70px;
  --_base---spacing-letter--spacing-letter-ultra: -.04em;
  --_common-spacing---spacing-38xl-large: 240px;
}
.qx-orbit a { background-color: #0000; }
.qx-orbit img { border: 0; }
.qx-orbit img { vertical-align: middle;
  max-width: 100%;
  display: inline-block; }
.qx-orbit .w-inline-block { max-width: 100%;
  display: inline-block; }
.qx-orbit .w-container { max-width: 940px;
  margin-left: auto;
  margin-right: auto; }
.qx-orbit .w-container:before, .qx-orbit .w-container:after { content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table; }
.qx-orbit .w-container:after { clear: both; }
.qx-orbit .w-container .w-row { margin-left: -10px;
  margin-right: -10px; }
@media screen and (max-width: 991px) {
  .qx-orbit .w-container { max-width: 728px; }
}
@media screen and (max-width: 767px) {
  .qx-orbit .w-row, .qx-orbit .w-container .w-row { margin-left: 0;
    margin-right: 0; }
}
@media screen and (max-width: 479px) {
  .qx-orbit .w-container { max-width: none; }
}
.qx-orbit .w-layout-blockcontainer { max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block; }
@media screen and (max-width: 991px) {
  .qx-orbit .w-layout-blockcontainer { max-width: 728px; }
}
@media screen and (max-width: 767px) {
  .qx-orbit .w-layout-blockcontainer { max-width: none; }
}
.qx-orbit a { color: var(--_color---text-color--paragraph-color);
  line-height: var(--_base---line-height--line-height-base);
  text-underline-offset: 4px;
  text-decoration: underline; }
.qx-orbit .qx-container { max-width: var(--_ui---container--max-width);
  padding-right: var(--_ui---container--padding);
  padding-left: var(--_ui---container--padding);
  margin-left: auto;
  margin-right: auto;
  display: block; }
.qx-orbit .qx-body { font-family: var(--body--font-family);
  color: var(--_color---normal-color--medium-gray);
  font-size: var(--body--font-size);
  line-height: var(--body--line-height);
  font-weight: var(--body--font-weight);
  letter-spacing: var(--body--letter-spacing); }
.qx-orbit .qx-body.white { color: var(--_color---normal-color--white); }
.qx-orbit .qx-body.snow-white { color: var(--_color---normal-color--snow-white); }
.qx-orbit .qx-body.text-end { text-align: right; }
.qx-orbit .qx-body.valu-des-mw { width: var(--_base---global-size--global-full);
  max-width: 340px;
  margin-left: auto; }
.qx-orbit .qx-body.black { color: var(--_color---normal-color--black); }
.qx-orbit .qx-body.near-black { color: var(--_color---normal-color--near-black); }
.qx-orbit .qx-body.transparent-white { color: var(--_color---normal-color--transparent-white); }
.qx-orbit .qx-body.error-des { max-width: 358px; }
.qx-orbit .qx-body.utility-note-des { width: var(--_base---global-size--global-full);
  max-width: 620px; }
.qx-orbit .qx-all-image-cover { width: var(--_base---global-size--global-full);
  height: var(--_base---global-size--global-full);
  object-fit: cover; }
.qx-orbit .qx-hero-section { padding-top: var(--_common-spacing---spacing-25xl-large);
  padding-bottom: var(--_common-spacing---spacing-29xl-large);
  overflow: hidden; }
.qx-orbit .qx-hero-wrap { grid-column-gap: var(--_common-spacing---spacing-15xl-large);
  grid-row-gap: var(--_common-spacing---spacing-15xl-large);
  grid-template-rows: auto;
  grid-template-columns: 1fr 4fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  place-items: flex-end center;
  display: grid; }
.qx-orbit .qx-hero-left-box { grid-column-gap: 260px;
  grid-row-gap: 260px;
  flex-flow: column;
  align-items: flex-start;
  display: flex; }
.qx-orbit .qx-hero-center-box { z-index: 10;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 600px;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 60px;
  display: flex;
  position: relative;
  overflow: visible;
  transform: scale(.9); }
.qx-orbit .qx-hero-right-box { grid-column-gap: var(--_common-spacing---spacing-37xl-large);
  grid-row-gap: var(--_common-spacing---spacing-37xl-large);
  flex-flow: column;
  margin-left: auto;
  display: flex; }
.qx-orbit .qx-images-rotated-box { justify-content: center;
  align-items: center;
  width: 110%;
  height: 110%;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }
.qx-orbit .qx-rotated-images { border-radius: var(--_base---bordar-radius--r-5xl);
  flex: none;
  width: 130px;
  height: 150px;
  position: absolute;
  overflow: hidden; }
.qx-orbit .qx-rotated-images.qx-rotated-one { top: 0%; }
.qx-orbit .qx-rotated-images.qx-rotated-two { bottom: 0%; }
.qx-orbit .qx-rotated-images.qx-rotated-three { right: 2%; }
.qx-orbit .qx-rotated-images.qx-rotated-four { left: 2%; }
.qx-orbit .qx-rotated-images.qx-rotated-five { top: 10%;
  left: 10%; }
.qx-orbit .qx-rotated-images.qx-rotated-six { top: 10%;
  right: 10%; }
.qx-orbit .qx-rotated-images.qx-rotated-seven { bottom: 10%;
  left: 10%; }
.qx-orbit .qx-rotated-images.qx-rotated-eight, .qx-orbit .qx-rotated-images.qx-rotated-six { bottom: 10%;
  right: 10%; }
.qx-orbit .qx-hero-rotated-info-box { z-index: 10;
  border-radius: var(--_base---bordar-radius--round);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 250px;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%); }
.qx-orbit .qx-hero-rotated-info-text { color: var(--_color---normal-color--snow-white);
  font-size: var(--_base---font-size--font-size-10xl);
  line-height: var(--_base---line-height--line-height-normal);
  font-weight: var(--_base---font-weight--semi-bold);
  text-align: center;
  letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); }
.qx-orbit .qx-hero-rotated-info-text-two { color: var(--_color---normal-color--soft-white-layer);
  font-size: var(--h3--font-size);
  line-height: var(--_base---line-height--line-height-normal);
  text-align: center;
  letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); }
.qx-orbit .qx-hero-left-top-box { grid-column-gap: var(--_common-spacing---spacing-large);
  grid-row-gap: var(--_common-spacing---spacing-large);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex; }
.qx-orbit .qx-hero-left-bottom-box { grid-column-gap: var(--_common-spacing---spacing-extra-small);
  grid-row-gap: var(--_common-spacing---spacing-extra-small);
  flex-flow: wrap;
  align-items: center;
  display: flex; }
.qx-orbit .qx-hero-socail-link { width: 64px;
  height: 64px;
  padding: var(--_common-spacing---spacing-2xl-large);
  border-radius: var(--_base---bordar-radius--round);
  background-image: linear-gradient(#272727, #020108);
  justify-content: center;
  align-items: center;
  transition: all .3s;
  display: flex;
  overflow: hidden; }
.qx-orbit .qx-hero-socail-link:hover { box-shadow: 0 5px 35px #ffffff80; }
.qx-orbit .qx-hero-tag-text { padding: var(--_common-spacing---spacing-medium) var(--_common-spacing---spacing-2xl-large);
  border: 1px solid var(--_color---normal-color--soft-white-layer);
  border-radius: var(--_base---bordar-radius--r-l);
  color: var(--_color---normal-color--snow-white);
  justify-content: center;
  align-items: center;
  display: flex; }
.qx-orbit .qx-mouse-link-box { height: 80px;
  padding: var(--_common-spacing---spacing-medium);
  border-radius: var(--_base---bordar-radius--r-8xl);
  background-color: var(--_color---normal-color--deep-charcoal);
  justify-content: center;
  align-items: center;
  display: flex; }
.qx-orbit .qx-mouse-link-main-box { border-radius: var(--_base---bordar-radius--r-8xl);
  background-image: linear-gradient(#666, #020108 80%);
  width: 52px;
  height: 80px;
  padding: 1px; }
.qx-orbit .qx-hero-mouse { margin-left: auto; }
.qx-orbit .qx-hero-right-top-box { grid-column-gap: var(--_common-spacing---spacing-medium);
  grid-row-gap: var(--_common-spacing---spacing-medium);
  background-color: var(--_color---normal-color--black);
  flex-flow: column;
  height: 245px;
  display: flex;
  position: relative;
  overflow: hidden; }
.qx-orbit .qx-ui-link-box { pointer-events: none;
  background-image: linear-gradient(#020108, #02010800 50%, #020108);
  position: absolute;
  inset: 0%; }
.qx-orbit .qx-ui-link-main-box { height: var(--_base---global-size--global-full);
  grid-column-gap: var(--_common-spacing---spacing-medium);
  grid-row-gap: var(--_common-spacing---spacing-medium);
  flex-flow: column;
  display: flex;
  overflow: visible; }
.qx-orbit .qx-home-marquee-box { grid-column-gap: var(--_common-spacing---spacing-medium);
  grid-row-gap: var(--_common-spacing---spacing-medium);
  flex-flow: column;
  display: flex; }
.qx-orbit .qx-ui-link { white-space: nowrap;
  margin-left: auto;
  display: inline-flex; }
.qx-orbit .qx-ui-link-two { margin-right: auto;
  display: inline-flex; }
.qx-orbit .qx-hero-round-shap { width: var(--_base---global-size--global-full);
  height: var(--_base---global-size--global-full);
  background-image: url("../assets/qubix/69ad0d72280695115997761f_Ellipse_2.png");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }
@media screen and (min-width: 1280px) {
  .qx-orbit .qx-hero-wrap { grid-template-columns: 1fr 5fr 1fr; }
  .qx-orbit .qx-hero-center-box { width: 755px;
    height: 755px;
    transform: scale(1); }
  .qx-orbit .qx-rotated-images { width: 148px;
    height: 168px; }
  .qx-orbit .qx-rotated-images.qx-rotated-one { top: 0%; }
  .qx-orbit .qx-rotated-images.qx-rotated-two { bottom: 0%; }
  .qx-orbit .qx-rotated-images.qx-rotated-three { right: 0%; }
  .qx-orbit .qx-rotated-images.qx-rotated-four { left: 0%; }
  .qx-orbit .qx-rotated-images.qx-rotated-five { top: 10%;
    left: 10%; }
  .qx-orbit .qx-rotated-images.qx-rotated-six { top: 10%;
    right: 10%; }
  .qx-orbit .qx-rotated-images.qx-rotated-seven { bottom: 10%;
    left: 10%; }
  .qx-orbit .qx-rotated-images.qx-rotated-eight, .qx-orbit .qx-rotated-images.qx-rotated-six { bottom: 10%;
    right: 10%; }
  .qx-orbit .qx-hero-rotated-info-box { width: 342px;
    height: 342px; }
}
@media screen and (max-width: 991px) {
  .qx-orbit { --h1--font-family: var(--_base---font-family--your-font); --h1--font-size: 56px; --h1--line-height: var(--_base---line-height--line-height-2xl); --h1--font-weight: var(--_base---font-weight--medium); --h1--letter-spacing: var(--_base---spacing-letter--spacing-letter-tightest); --h2--font-family: var(--_base---font-family--your-font); --h2--font-size: 42px; --h2--line-height: var(--_base---line-height--line-height-relaxed); --h2--font-weight: var(--_base---font-weight--medium); --h2--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --h3--font-family: var(--_base---font-family--your-font); --h3--font-size: 36px; --h3--line-height: var(--_base---line-height--line-height-relaxed); --h3--font-weight: var(--_base---font-weight--medium); --h3--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --h4--font-family: var(--_base---font-family--your-font); --h4--font-size: 28px; --h4--line-height: var(--_base---line-height--line-height-base); --h4--font-weight: var(--_base---font-weight--medium); --h4--letter-spacing: var(--_base---global-size--none); --h5--font-family: var(--_base---font-family--your-font); --h5--font-size: 24px; --h5--line-height: var(--_base---line-height--line-height-relaxed); --h5--font-weight: var(--_base---font-weight--medium); --h5--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --h6--font-family: var(--_base---font-family--your-font); --h6--font-size: 22px; --h6--line-height: var(--_base---line-height--line-height-md); --h6--font-weight: var(--_base---font-weight--medium); --h6--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-regular--font-family: var(--_base---font-family--your-font); --text-regular--font-size: 16px; --text-regular--line-height: var(--_base---line-height--line-height-2xl); --text-regular--font-weight: var(--_base---font-weight--regular); --text-regular--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-extra-small--font-family: var(--_base---font-family--your-font); --text-extra-small--font-size: 16px; --text-extra-small--line-height: var(--_base---line-height--line-height-lg); --text-extra-small--font-weight: var(--_base---font-weight--regular); --text-extra-small--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --body--font-family: var(--_base---font-family--your-font); --body--font-size: 16px; --body--line-height: var(--_base---line-height--line-height-xl); --body--font-weight: var(--_base---font-weight--regular); --body--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --text-extra-large--font-family: var(--_base---font-family--your-font); --text-extra-large--font-weight: var(--_base---font-weight--regular); --text-extra-large--font-size: 22px; --text-extra-large--line-height: var(--_base---line-height--line-height-xl); --text-extra-large--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-learge--font-family: var(--_base---font-family--your-font); --text-learge--font-weight: var(--_base---font-weight--regular); --text-learge--font-size: 20px; --text-learge--line-height: var(--_base---line-height--line-height-xl); --text-learge--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --_common-spacing---spacing-9xl-large: 24px; --_common-spacing---spacing-2xl-large: 12px; --_common-spacing---spacing-6xl-large: 24px; --_common-spacing---spacing-medium: 10px; --_common-spacing---spacing-extra-tiny: 0px; --_common-spacing---spacing-extra-small: 6px; --_common-spacing---spacing-small: 8px; --_common-spacing---spacing-33xl-large: 100px; --_common-spacing---spacing-15xl-large: 32px; --_common-spacing---spacing-22xl-large: 48px; --_common-spacing---spacing-tiny: 4px; --_common-spacing---spacing-13xl-large: 32px; --_common-spacing---spacing-4xl-large: 20px; --_common-spacing---spacing-34xl-large: 100px; --_common-spacing---spacing-30xl-large: 80px; --_common-spacing---spacing-large: 12px; --_common-spacing---spacing-5xl-large: 22px; --_common-spacing---spacing-27xl-large: 64px; --_common-spacing---spacing-20xl-large: 60px; --_common-spacing---spacing-26xl-large: 68px; --_common-spacing---spacing-12xl-large: 38px; --_common-spacing---spacing-25xl-large: 74px; --_common-spacing---spacing-29xl-large: 80px; --_common-spacing---spacing-35xl-large: 120px; --_common-spacing---spacing-37xl-large: 200px; --_common-spacing---spacing-3xl-large: 18px; --_common-spacing---spacing-32xl-large: 108px; --_common-spacing---spacing-17xl-large: 52px; --_common-spacing---spacing-11xl-large: 36px; --_common-spacing---spacing-14xl-large: 45px; --_common-spacing---margin-style--margin-plus-spacer-service: 215vh; --_common-spacing---spacing-23xl-large: 68px; --_common-spacing---spacing-8xl-large: 26px; --_common-spacing---spacing-extra-large: 14px; --_common-spacing---spacing-10xl-large: 34px; --_common-spacing---spacing-7xl-large: 25px; --_common-spacing---spacing-36xl-large: 140px; --_common-spacing---spacing-21xl-large: 62px; --_common-spacing---spacing-31xl-large: 106px; --_common-spacing---spacing-28xl-large: 82px; --_common-spacing---spacing-16xl-large: 50px; --_common-spacing---spacing-19xl-large: 58px; --_common-spacing---spacing-18xl-large: 56px; --_common-spacing---spacing-24xl-large: 70px; --_common-spacing---spacing-38xl-large: 240px; --_ui---container--padding: 32px; --_ui---container--max-width: 767px; --_ui---primary-button--font-family: var(--_base---font-family--your-font); --_ui---primary-button--font-weight: var(--_base---font-weight--regular); --_ui---primary-button--font-size: var(--_base---font-size--font-size-md); --_ui---primary-button--line-height: var(--_base---line-height--line-height-relaxed); --_ui---primary-button--letter-spacing: var(--_base---global-size--none); --_ui---secondary-button--font-family: var(--_base---font-family--your-font); --_ui---secondary-button--font-weight: var(--_base---font-weight--regular); --_ui---secondary-button--font-size: var(--_base---font-size--font-size-md); --_ui---secondary-button--line-height: var(--_base---line-height--line-height-relaxed); --_ui---secondary-button--letter-spacing: var(--_base---global-size--none); }
  .qx-orbit .qx-hero-wrap { flex-flow: column;
    grid-template-columns: 1fr;
    display: flex; }
  .qx-orbit .qx-hero-left-box { grid-column-gap: 100px;
    grid-row-gap: 100px;
    flex-flow: row;
    align-items: flex-end;
    margin-right: auto; }
  .qx-orbit .qx-hero-right-box { flex-flow: row;
    align-items: flex-end; }
  .qx-orbit .qx-hero-socail-link { width: 50px;
    height: 50px; }
  .qx-orbit .qx-hero-mouse { order: -9999; }
}
@media screen and (max-width: 767px) {
  .qx-orbit { --h1--font-family: var(--_base---font-family--your-font); --h1--font-size: 56px; --h1--line-height: var(--_base---line-height--line-height-2xl); --h1--font-weight: var(--_base---font-weight--medium); --h1--letter-spacing: var(--_base---spacing-letter--spacing-letter-tightest); --h2--font-family: var(--_base---font-family--your-font); --h2--font-size: 36px; --h2--line-height: var(--_base---line-height--line-height-relaxed); --h2--font-weight: var(--_base---font-weight--medium); --h2--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --h3--font-family: var(--_base---font-family--your-font); --h3--font-size: 32px; --h3--line-height: var(--_base---line-height--line-height-relaxed); --h3--font-weight: var(--_base---font-weight--medium); --h3--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --h4--font-family: var(--_base---font-family--your-font); --h4--font-size: 26px; --h4--line-height: var(--_base---line-height--line-height-base); --h4--font-weight: var(--_base---font-weight--medium); --h4--letter-spacing: var(--_base---global-size--none); --h5--font-family: var(--_base---font-family--your-font); --h5--font-size: 22px; --h5--line-height: var(--_base---line-height--line-height-relaxed); --h5--font-weight: var(--_base---font-weight--medium); --h5--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --h6--font-family: var(--_base---font-family--your-font); --h6--font-size: 20px; --h6--line-height: var(--_base---line-height--line-height-md); --h6--font-weight: var(--_base---font-weight--medium); --h6--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-regular--font-family: var(--_base---font-family--your-font); --text-regular--font-size: 16px; --text-regular--line-height: var(--_base---line-height--line-height-2xl); --text-regular--font-weight: var(--_base---font-weight--regular); --text-regular--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-extra-small--font-family: var(--_base---font-family--your-font); --text-extra-small--font-size: 16px; --text-extra-small--line-height: var(--_base---line-height--line-height-lg); --text-extra-small--font-weight: var(--_base---font-weight--regular); --text-extra-small--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --body--font-family: var(--_base---font-family--your-font); --body--font-size: 16px; --body--line-height: var(--_base---line-height--line-height-xl); --body--font-weight: var(--_base---font-weight--regular); --body--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --text-extra-large--font-family: var(--_base---font-family--your-font); --text-extra-large--font-weight: var(--_base---font-weight--regular); --text-extra-large--font-size: 20px; --text-extra-large--line-height: var(--_base---line-height--line-height-xl); --text-extra-large--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-learge--font-family: var(--_base---font-family--your-font); --text-learge--font-weight: var(--_base---font-weight--regular); --text-learge--font-size: 18px; --text-learge--line-height: var(--_base---line-height--line-height-xl); --text-learge--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --_common-spacing---spacing-9xl-large: 16px; --_common-spacing---spacing-2xl-large: 12px; --_common-spacing---spacing-6xl-large: 24px; --_common-spacing---spacing-medium: 10px; --_common-spacing---spacing-extra-tiny: 0px; --_common-spacing---spacing-extra-small: 6px; --_common-spacing---spacing-small: 8px; --_common-spacing---spacing-33xl-large: 80px; --_common-spacing---spacing-15xl-large: 24px; --_common-spacing---spacing-22xl-large: 32px; --_common-spacing---spacing-tiny: 4px; --_common-spacing---spacing-13xl-large: 24px; --_common-spacing---spacing-4xl-large: 20px; --_common-spacing---spacing-34xl-large: 80px; --_common-spacing---spacing-30xl-large: 64px; --_common-spacing---spacing-large: 12px; --_common-spacing---spacing-5xl-large: 22px; --_common-spacing---spacing-27xl-large: 48px; --_common-spacing---spacing-20xl-large: 60px; --_common-spacing---spacing-26xl-large: 58px; --_common-spacing---spacing-12xl-large: 38px; --_common-spacing---spacing-25xl-large: 74px; --_common-spacing---spacing-29xl-large: 70px; --_common-spacing---spacing-35xl-large: 80px; --_common-spacing---spacing-37xl-large: 200px; --_common-spacing---spacing-3xl-large: 18px; --_common-spacing---spacing-32xl-large: 108px; --_common-spacing---spacing-17xl-large: 52px; --_common-spacing---spacing-11xl-large: 36px; --_common-spacing---spacing-14xl-large: 45px; --_common-spacing---margin-style--margin-plus-spacer-service: 215vh; --_common-spacing---spacing-23xl-large: 68px; --_common-spacing---spacing-8xl-large: 26px; --_common-spacing---spacing-extra-large: 14px; --_common-spacing---spacing-10xl-large: 34px; --_common-spacing---spacing-7xl-large: 25px; --_common-spacing---spacing-36xl-large: 100px; --_common-spacing---spacing-21xl-large: 62px; --_common-spacing---spacing-31xl-large: 106px; --_common-spacing---spacing-28xl-large: 82px; --_common-spacing---spacing-16xl-large: 50px; --_common-spacing---spacing-19xl-large: 58px; --_common-spacing---spacing-18xl-large: 56px; --_common-spacing---spacing-24xl-large: 70px; --_common-spacing---spacing-38xl-large: 240px; --_ui---container--padding: 24px; --_ui---container--max-width: 540px; --_ui---primary-button--font-family: var(--_base---font-family--your-font); --_ui---primary-button--font-weight: var(--_base---font-weight--regular); --_ui---primary-button--font-size: var(--_base---font-size--font-size-md); --_ui---primary-button--line-height: var(--_base---line-height--line-height-relaxed); --_ui---primary-button--letter-spacing: var(--_base---global-size--none); --_ui---secondary-button--font-family: var(--_base---font-family--your-font); --_ui---secondary-button--font-weight: var(--_base---font-weight--regular); --_ui---secondary-button--font-size: var(--_base---font-size--font-size-md); --_ui---secondary-button--line-height: var(--_base---line-height--line-height-relaxed); --_ui---secondary-button--letter-spacing: var(--_base---global-size--none); }
  .qx-orbit .qx-hero-wrap { grid-column-gap: var(--_common-spacing---spacing-35xl-large);
    grid-row-gap: var(--_common-spacing---spacing-35xl-large); }
  .qx-orbit .qx-hero-left-box { width: var(--_base---global-size--global-full); }
  .qx-orbit .qx-hero-center-box { width: 400px;
    height: 400px; }
  .qx-orbit .qx-hero-right-box { width: var(--_base---global-size--global-full); }
  .qx-orbit .qx-images-rotated-box { width: 100%;
    height: 100%; }
  .qx-orbit .qx-rotated-images { width: 100px;
    height: 130px; }
  .qx-orbit .qx-rotated-images.qx-rotated-one { top: -8%; }
  .qx-orbit .qx-rotated-images.qx-rotated-two { bottom: -8%; }
  .qx-orbit .qx-rotated-images.qx-rotated-three { right: -5%; }
  .qx-orbit .qx-rotated-images.qx-rotated-four { left: -5%; }
  .qx-orbit .qx-rotated-images.qx-rotated-five { top: 0%;
    left: 10%; }
  .qx-orbit .qx-rotated-images.qx-rotated-seven { bottom: 0%;
    left: 10%; }
  .qx-orbit .qx-rotated-images.qx-rotated-eight { bottom: 0%;
    right: 10%; }
  .qx-orbit .qx-rotated-images.qx-rotated-six { top: 0%;
    bottom: 8%;
    right: 10%; }
  .qx-orbit .qx-hero-rotated-info-box { width: 150px;
    height: 150px; }
  .qx-orbit .qx-hero-rotated-info-text { font-size: var(--_base---font-size--font-size-6xl); }
  .qx-orbit .qx-hero-left-bottom-box { margin-left: auto; }
  .qx-orbit .qx-hero-socail-link { width: 40px;
    height: 40px;
    padding: var(--_common-spacing---spacing-medium); }
  .qx-orbit .qx-mouse-link-box { height: 60px; }
  .qx-orbit .qx-mouse-link-main-box { width: 42px;
    height: 60px; }
  .qx-orbit .qx-hero-mouse { margin-left: 0; }
  .qx-orbit .qx-hero-right-top-box { margin-left: auto; }
  .qx-orbit .qx-ui-link-box { background-image: linear-gradient(#020108, #02010800 50%, #020108); }
  .qx-orbit .qx-ui-link { background-color: var(--_color---normal-color--black); }
}
@media screen and (max-width: 479px) {
  .qx-orbit { --h1--font-family: var(--_base---font-family--your-font); --h1--font-size: 42px; --h1--line-height: var(--_base---line-height--line-height-2xl); --h1--font-weight: var(--_base---font-weight--medium); --h1--letter-spacing: var(--_base---spacing-letter--spacing-letter-tightest); --h2--font-family: var(--_base---font-family--your-font); --h2--font-size: 32px; --h2--line-height: var(--_base---line-height--line-height-relaxed); --h2--font-weight: var(--_base---font-weight--medium); --h2--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --h3--font-family: var(--_base---font-family--your-font); --h3--font-size: 28px; --h3--line-height: var(--_base---line-height--line-height-relaxed); --h3--font-weight: var(--_base---font-weight--medium); --h3--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --h4--font-family: var(--_base---font-family--your-font); --h4--font-size: 24px; --h4--line-height: var(--_base---line-height--line-height-base); --h4--font-weight: var(--_base---font-weight--medium); --h4--letter-spacing: var(--_base---global-size--none); --h5--font-family: var(--_base---font-family--your-font); --h5--font-size: 22px; --h5--line-height: var(--_base---line-height--line-height-relaxed); --h5--font-weight: var(--_base---font-weight--medium); --h5--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --h6--font-family: var(--_base---font-family--your-font); --h6--font-size: 16px; --h6--line-height: var(--_base---line-height--line-height-md); --h6--font-weight: var(--_base---font-weight--medium); --h6--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-regular--font-family: var(--_base---font-family--your-font); --text-regular--font-size: 16px; --text-regular--line-height: var(--_base---line-height--line-height-2xl); --text-regular--font-weight: var(--_base---font-weight--regular); --text-regular--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-extra-small--font-family: var(--_base---font-family--your-font); --text-extra-small--font-size: 16px; --text-extra-small--line-height: var(--_base---line-height--line-height-lg); --text-extra-small--font-weight: var(--_base---font-weight--regular); --text-extra-small--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --body--font-family: var(--_base---font-family--your-font); --body--font-size: 16px; --body--line-height: var(--_base---line-height--line-height-xl); --body--font-weight: var(--_base---font-weight--regular); --body--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --text-extra-large--font-family: var(--_base---font-family--your-font); --text-extra-large--font-weight: var(--_base---font-weight--regular); --text-extra-large--font-size: 18px; --text-extra-large--line-height: var(--_base---line-height--line-height-xl); --text-extra-large--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-learge--font-family: var(--_base---font-family--your-font); --text-learge--font-weight: var(--_base---font-weight--regular); --text-learge--font-size: 16px; --text-learge--line-height: var(--_base---line-height--line-height-xl); --text-learge--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --_common-spacing---spacing-9xl-large: 16px; --_common-spacing---spacing-2xl-large: 12px; --_common-spacing---spacing-6xl-large: 20px; --_common-spacing---spacing-medium: 10px; --_common-spacing---spacing-extra-tiny: 0px; --_common-spacing---spacing-extra-small: 6px; --_common-spacing---spacing-small: 8px; --_common-spacing---spacing-33xl-large: 70px; --_common-spacing---spacing-15xl-large: 24px; --_common-spacing---spacing-22xl-large: 32px; --_common-spacing---spacing-tiny: 4px; --_common-spacing---spacing-13xl-large: 24px; --_common-spacing---spacing-4xl-large: 20px; --_common-spacing---spacing-34xl-large: 60px; --_common-spacing---spacing-30xl-large: 64px; --_common-spacing---spacing-large: 12px; --_common-spacing---spacing-5xl-large: 22px; --_common-spacing---spacing-27xl-large: 48px; --_common-spacing---spacing-20xl-large: 60px; --_common-spacing---spacing-26xl-large: 30px; --_common-spacing---spacing-12xl-large: 38px; --_common-spacing---spacing-25xl-large: 74px; --_common-spacing---spacing-29xl-large: 60px; --_common-spacing---spacing-35xl-large: 80px; --_common-spacing---spacing-37xl-large: 200px; --_common-spacing---spacing-3xl-large: 18px; --_common-spacing---spacing-32xl-large: 108px; --_common-spacing---spacing-17xl-large: 52px; --_common-spacing---spacing-11xl-large: 36px; --_common-spacing---spacing-14xl-large: 45px; --_common-spacing---margin-style--margin-plus-spacer-service: 215vh; --_common-spacing---spacing-23xl-large: 68px; --_common-spacing---spacing-8xl-large: 26px; --_common-spacing---spacing-extra-large: 14px; --_common-spacing---spacing-10xl-large: 34px; --_common-spacing---spacing-7xl-large: 25px; --_common-spacing---spacing-36xl-large: 100px; --_common-spacing---spacing-21xl-large: 62px; --_common-spacing---spacing-31xl-large: 106px; --_common-spacing---spacing-28xl-large: 82px; --_common-spacing---spacing-16xl-large: 50px; --_common-spacing---spacing-19xl-large: 58px; --_common-spacing---spacing-18xl-large: 56px; --_common-spacing---spacing-24xl-large: 70px; --_common-spacing---spacing-38xl-large: 240px; --_ui---container--padding: 16px; --_ui---container--max-width: 100%; --_ui---primary-button--font-family: var(--_base---font-family--your-font); --_ui---primary-button--font-weight: var(--_base---font-weight--regular); --_ui---primary-button--font-size: var(--_base---font-size--font-size-md); --_ui---primary-button--line-height: var(--_base---line-height--line-height-relaxed); --_ui---primary-button--letter-spacing: var(--_base---global-size--none); --_ui---secondary-button--font-family: var(--_base---font-family--your-font); --_ui---secondary-button--font-weight: var(--_base---font-weight--regular); --_ui---secondary-button--font-size: var(--_base---font-size--font-size-md); --_ui---secondary-button--line-height: var(--_base---line-height--line-height-relaxed); --_ui---secondary-button--letter-spacing: var(--_base---global-size--none); }
  .qx-orbit .qx-body.valu-des-mw { max-width: 100%; }
  .qx-orbit .qx-hero-wrap { grid-column-gap: var(--_common-spacing---spacing-13xl-large);
    grid-row-gap: var(--_common-spacing---spacing-30xl-large);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid; }
  .qx-orbit .qx-hero-left-box { grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: column;
    align-items: flex-start; }
  .qx-orbit .qx-hero-center-box { width: 340px;
    height: 340px; }
  .qx-orbit .qx-hero-right-box { grid-column-gap: var(--_common-spacing---spacing-20xl-large);
    grid-row-gap: var(--_common-spacing---spacing-20xl-large);
    flex-flow: column; }
  .qx-orbit .qx-rotated-images { border-radius: var(--_base---bordar-radius--r-m);
    width: 60px;
    height: 80px; }
  .qx-orbit .qx-hero-rotated-info-box { width: 120px;
    height: 120px; }
  .qx-orbit .qx-hero-rotated-info-text { font-size: var(--_base---font-size--font-size-4xl); }
  .qx-orbit .qx-hero-rotated-info-text-two { font-size: var(--_common-spacing---spacing-3xl-large); }
  .qx-orbit .qx-hero-left-top-box { flex-flow: row; }
  .qx-orbit .qx-hero-left-bottom-box { margin-left: 0; }
  .qx-orbit .qx-hero-socail-link { width: 30px;
    height: 30px;
    padding: var(--_common-spacing---spacing-extra-small); }
  .qx-orbit .qx-hero-right-top-box { order: -9999; }
  .qx-orbit .qx-hero-right-top-box.mob_hide, .qx-orbit .qx-ui-link-main-box.mob_hide { display: none; }
}
/* qx-orbit: the donor painted this ground on <body>; the block needs it itself. */
.qx-orbit { background-color: #000; }
/* ---- qx-orbit: hand-written, from tools/blocks/qx-orbit.css ---- */
/* qx-orbit — hand-written rules for the orbit hero (the loop's intro).
   Appended after the extracted qubix rules; every rule is scoped under
   .qx-orbit. Nothing here is this site's design: every value below is copied
   out of the donor's own stylesheet or interaction payload, and is here only
   because the extractor cannot carry it (see tools/blocks/qx-orbit.mjs).

   ------------------------------------------------------------------------
   A. qubix's own `body` rule (qubix-flowdevz.app.shared.0505778fd.css, line
      2305), verbatim, moved onto the scope root. A `body` rule never travels
      with a cut section, and this page's own `body` (css/monof-template…css,
      line 2113) filled the gap with different values — Inter / 14px / 15.4px /
      500 / #000 instead of qubix's Interdisplay / 16px / 20px / 400 / #a1a1a1.
      Everything in this block that sets no type of its own inherited the wrong
      ones: the ring's big word and its second line were drawn in Inter (the
      second line at weight 500 where the donor has 400), and every rolling tag
      was 14px/15.4px Inter 500, which made each pill 37.4px tall against the
      donor's 42px and the whole nine-tag column 416.5px against 458px. Same
      tokens, same values, same order as the donor's rule; qx-news and
      qx-projects restore the same one for the same reason, and qx-projects
      also re-declares qubix's four Interdisplay @font-faces (an @font-face
      cannot be scoped, so those already serve every qubix block on the page).
      The rule's `background-color: var(--_color---normal-color--black)` is
      omitted here only because `donor.ground` already paints it. */
.qx-orbit {
  font-family: var(--_base---font-family--your-font);
  color: var(--_color---normal-color--medium-gray);
  font-size: var(--_base---font-size--font-size-sm);
  line-height: 20px;
  font-weight: var(--_base---font-weight--regular);
}

/*    The same shared Mono stylesheet also hides the pointer for the whole page
      (`body { cursor: none }`, the rule right above). qubix's own `.hero-mouse`
      is `cursor: pointer`, so the block's one link needs the pointer back.
      css/stargo-fusion.css does exactly this inside .sc-scope and .lx-scope,
      and qx-news and qx-projects inside their own roots. */
.qx-orbit a { cursor: pointer; }

/* ------------------------------------------------------------------------
   B. Rules Webflow wrote against generated node ids. Not classes, so not
      extracted. They are the donor's tablet and phone layout of this grid:
      below 992 the wrap becomes a flex column and the ring goes first; below
      480 the wrap is a two-column grid, the ring spans both columns on its own
      row, and the left cell centres itself. Copied verbatim from
      qubix-flowdevz.app.shared.0505778fd.css, lines 7442–7456. */
@media screen and (max-width: 991px) {
  .qx-orbit #w-node-c6f775c5-7c0f-71f7-d2f8-5a653cea49f5-794fb793 { order: -9999; }
}
@media screen and (max-width: 479px) {
  .qx-orbit #w-node-_95c2694c-a097-148d-d560-40e2eb648777-794fb793 { align-self: center; }
  .qx-orbit #w-node-c6f775c5-7c0f-71f7-d2f8-5a653cea49f5-794fb793 {
    order: -9999;
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
}

/* ------------------------------------------------------------------------
   C. The donor's breakpoint tokens. qubix redefines its custom properties per
      breakpoint on `body` inside media queries; the extractor carries only the
      base `:root`, and a `body` rule never travels with a cut. Without these
      the second word stays 44px on a phone (the donor drops it to 28px), the
      container keeps its 40px desktop padding, and the grid gaps stay at their
      desktop values. Only the tokens this block's extracted rules resolve
      through are listed, each with the donor's value at that breakpoint. */
@media screen and (max-width: 991px) {
  .qx-orbit {
    --h3--font-size: 36px;
    --_common-spacing---spacing-2xl-large: 12px;
    --_common-spacing---spacing-15xl-large: 32px;
    --_common-spacing---spacing-13xl-large: 32px;
    --_common-spacing---spacing-30xl-large: 80px;
    --_common-spacing---spacing-29xl-large: 80px;
    --_common-spacing---spacing-35xl-large: 120px;
    --_ui---container--padding: 32px;
    --_ui---container--max-width: 767px;
  }
}
@media screen and (max-width: 767px) {
  .qx-orbit {
    --h3--font-size: 32px;
    --_common-spacing---spacing-15xl-large: 24px;
    --_common-spacing---spacing-13xl-large: 24px;
    --_common-spacing---spacing-30xl-large: 64px;
    --_common-spacing---spacing-29xl-large: 70px;
    --_common-spacing---spacing-35xl-large: 80px;
    --_ui---container--padding: 24px;
    --_ui---container--max-width: 540px;
  }
}
@media screen and (max-width: 479px) {
  .qx-orbit {
    --h3--font-size: 28px;
    --_common-spacing---spacing-29xl-large: 60px;
    --_ui---container--padding: 16px;
    --_ui---container--max-width: 100%;
  }
}

/* ------------------------------------------------------------------------
   D. The donor's motion. None of its three pieces can travel through the
      extractor.

   1. The tag roll — qubix IX3 timeline t-9db874f5, fired on wf:load:
        target  .ui-link-main-box (every match)
        y       0% → -100%, duration 15, ease 0 (linear), repeat -1
      Two identical marquee boxes sit one under the other inside the 245px
      overflow-hidden window, so when the first has moved up by its own height
      the second is exactly where the first started, and the loop is seamless.
      This repo's fuse-ix only merges Mono's and Scalora's IX3, so the timeline
      is written here as a CSS animation with the same target and values. */
@keyframes qxo-roll {
  from { transform: translate3d(0, 0%, 0); }
  to   { transform: translate3d(0, -100%, 0); }
}
.qx-orbit .qx-ui-link-main-box { animation: qxo-roll 15s linear infinite; }

/* ------------------------------------------------------------------------
   2. The entrance — qubix IX2 action list a-54 "Hero Load Anim". Its event
      e-264 is PAGE_START on the donor's own page id and its items address the
      nodes as "<pageId>|<nodeId>", so the extractor (which keeps an event only
      when it names one of the block's data-w-ids or classes) leaves it behind,
      and everything the fragment ships at `opacity:0; filter:blur(20px)` would
      stay invisible for good. The list is replayed here node for node with the
      donor's values, delays, durations and easings. Webflow's easing table:
      "" (default) = ease, inQuad = (.55,.085,.68,.53), outQuad = (.25,.46,.45,.94).

      Group 0 is the initial state and matches the inline styles the markup
      carries; group 1 is the motion. `both` holds each node at its "from"
      state through its delay and at its "to" state afterwards. If e-264/a-54
      are ever carried by the tooling, delete everything from here down.

      cd6adfb6 — the big word: scale 1.5 → 1 and y 32% → 0, 500ms, delay 400. */
@keyframes qxo-word {
  from { transform: translate3d(0, 32%, 0) scale3d(1.5, 1.5, 1); }
  to   { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
}
.qx-orbit [data-w-id="cd6adfb6-9554-54e8-7105-cccaca2208a9"] {
  animation: qxo-word .5s cubic-bezier(.25, .1, .25, 1) .4s both;
}

/*    fa9673e5 — the second word: y 100% → 0 over 600ms outQuad, and
      opacity 0 → 1 with blur 20px → 0 over 500ms inQuad, all at delay 500. */
@keyframes qxo-rise {
  from { transform: translate3d(0, 100%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@keyframes qxo-unblur {
  from { opacity: 0; filter: blur(20px); }
  to   { opacity: 1; filter: blur(0px); }
}
.qx-orbit [data-w-id="fa9673e5-f62e-26f8-028d-f6fb36bd66af"] {
  animation: qxo-rise .6s cubic-bezier(.25, .46, .45, .94) .5s both,
             qxo-unblur .5s cubic-bezier(.55, .085, .68, .53) .5s both;
}

/*    74462d43 — the dotted ring: opacity 0 → 1 over 500ms and
      rotateZ 15deg → 0 over 800ms, both at delay 400. The ring is centred by
      its own translate(-50%, -50%), which the transform keyframes keep. */
@keyframes qxo-ring-spin {
  from { transform: translate3d(-50%, -50%, 0) rotateZ(15deg); }
  to   { transform: translate3d(-50%, -50%, 0) rotateZ(0deg); }
}
@keyframes qxo-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.qx-orbit [data-w-id="74462d43-d6aa-97c4-747c-afcd9ae617f8"] {
  animation: qxo-ring-spin .8s cubic-bezier(.25, .1, .25, 1) .4s both,
             qxo-fade .5s cubic-bezier(.25, .1, .25, 1) .4s both;
}

/*    02564f77 (the orbit of photographs), bfb744ca (the tag column) and
      95c2694c (the left cell): opacity 0 → 1, blur 20px → 0, 500ms, delay 1000.
      02564f77 is missing from the selector list below on purpose. It is
      `.qx-images-rotated-box`, which also carries the endless spin of D.3, and
      `animation` is a shorthand: whichever rule wins declares the whole list, so
      a second rule of equal specificity would silently drop the other's names
      and leave the ring either invisible or motionless. Its share of a-54 is
      therefore written into that one rule, with these same values. */
.qx-orbit [data-w-id="bfb744ca-f033-a95a-a5a1-a692c71ac55c"],
.qx-orbit [data-w-id="95c2694c-a097-148d-d560-40e2eb648777"] {
  animation: qxo-unblur .5s cubic-bezier(.25, .1, .25, 1) 1s both;
}

/* ------------------------------------------------------------------------
   3. The endless orbit — qubix IX2 action list a-10 "Images Rotated". It goes
      missing for exactly the reason a-54 does: its event e-75 is PAGE_START and
      its target is `{ id: "69a9212ffc8e44e1794fb793", appliesTo: "PAGE" }` — the
      donor's page, not any node of this block — so the extractor, which keeps an
      event only when it names one of the block's data-w-ids or classes, leaves
      e-75 behind and a-10 with it. tools/fragments/qx-cap-ix.json carries qx-a-6,
      a-7, a-11, a-17, a-19…a-26, a-55, a-56 and qx-slideInBottom, and no
      rotation of any kind, so the ring of photographs that the donor turns for
      ever stood still.

      a-10 group for group (app.fc5cbf32.8afd82c904693d49.js, the "a-10" entry;
      useFirstGroupAsInitialState: true):
        0  TRANSFORM_MOVE    .images-rotated-box   x -50%, y -50%     500ms
        1  TRANSFORM_ROTATE  .images-rotated-box   z 0                  0ms
           TRANSFORM_ROTATE  .rotated-images       z 360                0ms
        2  TRANSFORM_ROTATE  .images-rotated-box   z 360            30000ms
           TRANSFORM_ROTATE  .rotated-images       z 0              30000ms
      The ring turns one whole revolution in 30s while every photograph turns
      360 → 0 over the same 30s — exactly backwards — and that counter-rotation
      is what holds the pictures upright as they travel round. e-75's own config
      is `{ loop: true }`, hence `infinite`. The dotted ring PNG behind them
      (`.qx-hero-round-shap`, 74462d43) is not in a-10 and does not turn; only
      these two selectors do.

      Linear, not eased. Every item's `easing` is "", and IX2 resolves an empty
      name to no easing at all — applyEasing is
        (e, t, n) => 0===t ? 0 : 1===t ? 1 : n ? … : u(t>0 && e && a[e] ? a[e](t) : t)
      (js/app.schunk.25099a4fefa544e6.js, module 3767), which hands back the raw
      progress when `e` is empty. It is also the only easing under which a 30s
      loop has no seam.

      Group 0 is the initial state, not a movement: it is the same
      translate(-50%, -50%) that qubix's own `.images-rotated-box` rule and the
      fragment's inline transform already apply to centre the ring over the hero's
      centre box. A CSS animation on `transform` replaces the whole property, so
      both frames restate it; drop it and the ring lands half its own width down
      and to the right. The photographs need no such care — qubix parks all eight
      with top/left/bottom/right percentages (donor stylesheet lines 3240–3274)
      and gives them no transform of their own.

      Nothing here fights the entrance in D.2: 02564f77 is this same ring node,
      but its share of a-54 is the opacity/blur pair only, no transform, so the
      two animations never reach for one property. They are declared together
      only because `animation` is a shorthand. Both start at page load, as the
      donor's two PAGE_START events do — the ring is already 12deg round by the
      time its blur clears at 1s. */
@keyframes qxo-orbit {
  from { transform: translate3d(-50%, -50%, 0) rotateZ(0deg); }
  to   { transform: translate3d(-50%, -50%, 0) rotateZ(360deg); }
}
@keyframes qxo-orbit-upright {
  from { transform: rotateZ(360deg); }
  to   { transform: rotateZ(0deg); }
}
.qx-orbit .qx-images-rotated-box {
  animation: qxo-unblur .5s cubic-bezier(.25, .1, .25, 1) 1s both,
             qxo-orbit 30s linear infinite;
}
.qx-orbit .qx-rotated-images { animation: qxo-orbit-upright 30s linear infinite; }

/* A reader who asked for less motion gets the resting state at once. The tag
   roll is left running: it is the content of that column, not an entrance. The
   orbit is stopped — it is the one thing here that never settles, and a ring of
   eight photographs turning for ever in the corner of the eye is what this
   media query exists for. It is handed over standing still, in the arrangement
   of its own frame 0, which is also the arrangement the fragment's inline
   transform describes. */
@media (prefers-reduced-motion: reduce) {
  .qx-orbit [data-w-id="cd6adfb6-9554-54e8-7105-cccaca2208a9"],
  .qx-orbit [data-w-id="fa9673e5-f62e-26f8-028d-f6fb36bd66af"],
  .qx-orbit [data-w-id="74462d43-d6aa-97c4-747c-afcd9ae617f8"],
  .qx-orbit [data-w-id="bfb744ca-f033-a95a-a5a1-a692c71ac55c"],
  .qx-orbit [data-w-id="95c2694c-a097-148d-d560-40e2eb648777"] { animation-duration: 0s; animation-delay: 0s; }
  /* The ring's list is restated without the spin rather than set to `none`: the
     entrance is the only thing that can lift the inline `opacity:0;
     filter:blur(20px)` off it, since an inline style outranks any rule but an
     animation. At 0s it simply lands on its finished frame. */
  .qx-orbit .qx-images-rotated-box { animation: qxo-unblur 0s linear both; }
  .qx-orbit .qx-rotated-images { animation: none; }
}

/* ------------------------------------------------------------------------
   F. The note in the left cell (HOME_LOOP_TABLE.note, see qx-orbit.mjs).
      qubix's caption there was three words; ours is one sentence, the line
      that ties the nine steps to the homepage's five stages. From 992 up the
      cell is a `1fr` track (`1fr 4fr 1fr`, then `1fr 5fr 1fr` from 1280)
      whose floor is its content's min-content, and for the English sentence
      that is its longest word: measured 80px at 1024, seven lines of one or two
      words. The floor below is the width the same cell already has at 1440
      (169px), so the sentence reads as a short caption at every desktop width.
      Nothing else in the cell changes; below 992 the donor makes the cell a
      full-width row and no floor is needed. */
@media screen and (min-width: 992px) {
  .qx-orbit .qx-orbit-note { min-width: 10.5rem; }
}
/* The note is a sentence of body copy: `pretty` keeps its last line from being
   a single character (「…两套系 / 统。」 at 390 and 1440 before). */
.qx-orbit .qx-orbit-note { text-wrap: pretty; }

/* ------------------------------------------------------------------------
   G. Phones narrower than the ring (V7). Below 480 the donor's grid is
      `1fr 1fr` and the ring spans both tracks at a fixed 340px (drawn at
      scale .9). A spanning item's width is a floor for the tracks it crosses,
      so below a 340px container (every phone under 372px) both tracks grew to
      158px against the 132–164px there is room for, and the grid ran off the
      right edge: the tag column was cut at the screen edge at 320 and 360
      (measured: tags 267..356 in a 320px viewport, the mouse link 314..356),
      and the ring sat 26px right of centre.

      The ring keeps its 340px and the donor's centring, but its side margins
      are written as `50% - 170px` instead of `auto`: equal to auto wherever
      the ring fits, negative (it overhangs the gutters evenly) where it does
      not. A percentage margin resolves against zero while the tracks are
      sized, so the ring stops setting their floor and the donor's `1fr 1fr`
      shares the container again. The tag column still asks for its own
      width (`auto` minimum), so an English tag list (161px, "04 · UNDERSTAND")
      takes what it needs and the note beside it takes the rest (103px at
      320, 143px at 360; equal tracks from 375 up, as before).

      Under 360 the ring is also drawn a little smaller (.84 against .9), so
      its orbiting photographs, which overhang the ring by 5–8%, stay on the
      screen: at .9 the leftmost one ran 8px past the edge of a 320px screen.
      The ring's own box has no animation (only its children do), so this
      transform is free. Nothing changes from 375 up. */
@media screen and (max-width: 479px) {
  .qx-orbit .qx-hero-center-box {
    margin-left: calc(50% - 170px);
    margin-right: calc(50% - 170px);
  }
}
@media screen and (max-width: 359px) {
  .qx-orbit .qx-hero-center-box { transform: scale(.84); }
}

@font-face {
  font-family: webflow-icons;
  src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: Interdisplay;
  src: url("../assets/69a01660589c516ba5f0f917/69a022fe18c48956be155c1a_InterDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Interdisplay;
  src: url("../assets/69a01660589c516ba5f0f917/69a022ff8119fed8127f02a7_InterDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Interdisplay;
  src: url("../assets/69a01660589c516ba5f0f917/69a022fe1781fa5c0193ad3f_InterDisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Interdisplay;
  src: url("../assets/69a01660589c516ba5f0f917/69a022ffbb82bbae94bc63b4_InterDisplay-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
.qx-projects {
  --_color---normal-color--black: black;
  --_base---font-family--your-font: Interdisplay, Arial, sans-serif;
  --_color---normal-color--medium-gray: #a1a1a1;
  --_base---font-size--font-size-sm: 16px;
  --_base---font-weight--regular: 400;
  --_common-spacing---spacing-9xl-large: 32px;
  --_common-spacing---spacing-2xl-large: 16px;
  --h1--font-family: var(--_base---font-family--your-font);
  --_color---normal-color--snow-white: #fdfcfc;
  --h1--font-size: 128px;
  --h1--line-height: var(--_base---line-height--line-height-2xl);
  --h1--font-weight: var(--_base---font-weight--medium);
  --h1--letter-spacing: var(--_base---spacing-letter--spacing-letter-tightest);
  --h2--font-family: var(--_base---font-family--your-font);
  --_color---text-color--text-color: var(--_color---normal-color--snow-white);
  --h2--font-size: 58px;
  --h2--line-height: var(--_base---line-height--line-height-relaxed);
  --h2--font-weight: var(--_base---font-weight--medium);
  --h2--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra);
  --h3--font-family: var(--_base---font-family--your-font);
  --h3--font-size: 44px;
  --h3--line-height: var(--_base---line-height--line-height-relaxed);
  --h3--font-weight: var(--_base---font-weight--medium);
  --h3--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter);
  --_common-spacing---spacing-6xl-large: 24px;
  --_common-spacing---spacing-medium: 10px;
  --h4--font-family: var(--_base---font-family--your-font);
  --h4--font-size: 32px;
  --h4--line-height: var(--_base---line-height--line-height-base);
  --h4--font-weight: var(--_base---font-weight--medium);
  --h4--letter-spacing: var(--_base---global-size--none);
  --h5--font-family: var(--_base---font-family--your-font);
  --h5--font-size: 24px;
  --h5--line-height: var(--_base---line-height--line-height-relaxed);
  --h5--font-weight: var(--_base---font-weight--medium);
  --h5--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter);
  --h6--font-family: var(--_base---font-family--your-font);
  --h6--font-size: 20px;
  --h6--line-height: var(--_base---line-height--line-height-md);
  --h6--font-weight: var(--_base---font-weight--medium);
  --h6--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra);
  --_common-spacing---spacing-extra-tiny: 0px;
  --_base---font-size--font-size-lg: 20px;
  --_base---line-height--line-height-md: 134%;
  --_base---spacing-letter--spacing-letter-tighter: -.02em;
  --_color---text-color--paragraph-color: var(--_color---normal-color--medium-gray);
  --_base---line-height--line-height-base: 122%;
  --_common-spacing---spacing-extra-small: 6px;
  --_common-spacing---spacing-small: 8px;
  --_base---line-height--line-height-2xl: 154%;
  --_base---font-weight--semi-bold: 600;
  --_color---accent-color--accent-one: var(--_color---normal-color--black);
  --_color---normal-color--deep-charcoal: #0f0f0f;
  --_base---global-size--global-full: 100%;
  --_ui---container--padding: 40px;
  --_base---global-size--none: 0px;
  --_common-spacing---spacing-33xl-large: 110px;
  --_base---line-height--line-height-tightest: 100%;
  --_color---normal-color--vivid-orange: #fe6512;
  --text-regular--font-family: var(--_base---font-family--your-font);
  --_color---normal-color--white: white;
  --text-regular--font-size: 18px;
  --text-regular--line-height: var(--_base---line-height--line-height-2xl);
  --text-regular--font-weight: var(--_base---font-weight--regular);
  --text-regular--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra);
  --text-extra-small--font-family: var(--_base---font-family--your-font);
  --text-extra-small--font-size: 16px;
  --text-extra-small--line-height: var(--_base---line-height--line-height-lg);
  --text-extra-small--font-weight: var(--_base---font-weight--regular);
  --text-extra-small--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter);
  --_ui---container--max-width: 1360px;
  --body--font-family: var(--_base---font-family--your-font);
  --body--font-size: 16px;
  --body--line-height: var(--_base---line-height--line-height-xl);
  --body--font-weight: var(--_base---font-weight--regular);
  --body--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter);
  --_color---normal-color--near-black: #222;
  --_color---normal-color--transparent-white: #ffffff42;
  --_common-spacing---spacing-15xl-large: 48px;
  --_color---normal-color--soft-white-layer: #ffffff42;
  --_base---bordar-radius--r-xl: 12px;
  --_color---normal-color--frosted-white: #ffffff42;
  --_color---normal-color--gunmetal: #1d1d1d;
  --_common-spacing---spacing-22xl-large: 64px;
  --_common-spacing---spacing-tiny: 4px;
  --_base---font-size--font-size-xs: 14px;
  --_base---line-height--line-height-lg: 136%;
  --_common-spacing---spacing-13xl-large: 40px;
  --_common-spacing---spacing-4xl-large: 20px;
  --_common-spacing---spacing-34xl-large: 120px;
  --_common-spacing---spacing-30xl-large: 100px;
  --_common-spacing---spacing-large: 12px;
  --_common-spacing---spacing-5xl-large: 22px;
  --_common-spacing---spacing-27xl-large: 80px;
  --_common-spacing---spacing-20xl-large: 60px;
  --_base---line-height--line-height-xl: 144%;
  --_common-spacing---spacing-26xl-large: 78px;
  --_base---bordar-radius--pill: 200px;
  --_common-spacing---spacing-12xl-large: 38px;
  --_base---bordar-radius--r-7xl: 32px;
  --_base---font-size--font-size-2xl: 24px;
  --_base---font-size--font-size-md: 18px;
  --_base---font-weight--medium: 500;
  --_common-spacing---spacing-25xl-large: 74px;
  --_common-spacing---spacing-29xl-large: 94px;
  --_common-spacing---spacing-35xl-large: 140px;
  --_common-spacing---spacing-37xl-large: 200px;
  --_base---bordar-radius--r-5xl: 22px;
  --_base---bordar-radius--r-m: 4px;
  --_base---bordar-radius--round: 100%;
  --_base---font-size--font-size-10xl: 64px;
  --_base---line-height--line-height-normal: 124%;
  --_base---font-size--font-size-6xl: 40px;
  --_base---font-size--font-size-4xl: 28px;
  --_common-spacing---spacing-3xl-large: 18px;
  --_base---bordar-radius--r-l: 6px;
  --_base---bordar-radius--r-8xl: 40px;
  --_common-spacing---spacing-32xl-large: 108px;
  --_common-spacing---spacing-17xl-large: 52px;
  --_common-spacing---spacing-11xl-large: 36px;
  --_base---bordar-radius--r-4xl: 20px;
  --_base---bordar-radius--r-2xl: 14px;
  --_base---bordar-radius--r-3xl: 16px;
  --_base---font-size--font-size-13xl: 76px;
  --_base---spacing-letter--spacing-letter-tightest: -.03em;
  --_base---font-size--font-size-7xl: 48px;
  --_base---font-size--font-size-5xl: 36px;
  --_common-spacing---spacing-14xl-large: 45px;
  --_common-spacing---margin-style--margin-plus-spacer-service: 215vh;
  --_base---line-height--line-height-3xl: 170%;
  --_base---spacing-letter--spacing-letter-tight: -.01em;
  --_common-spacing---spacing-23xl-large: 68px;
  --_common-spacing---spacing-8xl-large: 26px;
  --_base---line-height--line-height-relaxed: 132%;
  --_color---normal-color--transparent: transparent;
  --_common-spacing---spacing-extra-large: 14px;
  --_common-spacing---spacing-10xl-large: 34px;
  --_base---bordar-radius--r-x: 8px;
  --_common-spacing---spacing-7xl-large: 25px;
  --_common-spacing---spacing-36xl-large: 160px;
  --_base---bordar-radius--r-6xl: 24px;
  --_base---bordar-radius--r-9xl: 42px;
  --_color---normal-color--soft-black: #1c1c1c;
  --_common-spacing---spacing-21xl-large: 62px;
  --_common-spacing---spacing-31xl-large: 106px;
  --_common-spacing---spacing-28xl-large: 82px;
  --_common-spacing---spacing-16xl-large: 50px;
  --_base---font-size--font-size-15xl: 280px;
  --_base---font-size--font-size-14xl: 80px;
  --_common-spacing---spacing-19xl-large: 58px;
  --_base---global-size--global-half: 0px;
  --_ui---primary-button--font-family: var(--_base---font-family--your-font);
  --_ui---primary-button--font-weight: var(--_base---font-weight--regular);
  --text-extra-large--font-family: var(--_base---font-family--your-font);
  --text-extra-large--font-weight: var(--_base---font-weight--regular);
  --text-extra-large--font-size: 22px;
  --_ui---primary-button--font-size: var(--_base---font-size--font-size-md);
  --text-extra-large--line-height: var(--_base---line-height--line-height-xl);
  --_base---font-weight--thin: 100;
  --text-extra-large--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra);
  --_ui---primary-button--line-height: var(--_base---line-height--line-height-relaxed);
  --_ui---primary-button--letter-spacing: var(--_base---global-size--none);
  --_base---font-weight--extra-light: 200;
  --_base---font-weight--light: 300;
  --_ui---secondary-button--font-family: var(--_base---font-family--your-font);
  --_ui---secondary-button--font-weight: var(--_base---font-weight--regular);
  --_ui---secondary-button--font-size: var(--_base---font-size--font-size-md);
  --_base---font-weight--bold: 700;
  --_ui---secondary-button--line-height: var(--_base---line-height--line-height-relaxed);
  --_ui---secondary-button--letter-spacing: var(--_base---global-size--none);
  --_base---font-weight--extra-bold: 800;
  --_base---font-weight--black: 900;
  --text-learge--font-family: var(--_base---font-family--your-font);
  --text-learge--font-weight: var(--_base---font-weight--regular);
  --text-learge--font-size: 20px;
  --text-learge--line-height: var(--_base---line-height--line-height-xl);
  --_base---font-size--font-size-xl: 22px;
  --text-learge--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra);
  --_base---font-size--font-size-3xl: 26px;
  --_base---font-size--font-size-8xl: 52px;
  --_base---font-size--font-size-9xl: 60px;
  --_base---font-size--font-size-11xl: 68px;
  --_base---font-size--font-size-12xl: 72px;
  --_base---line-height--line-height-tighter: 105%;
  --_base---line-height--line-height-tight: 110%;
  --_common-spacing---spacing-18xl-large: 56px;
  --_common-spacing---spacing-24xl-large: 70px;
  --_base---spacing-letter--spacing-letter-ultra: -.04em;
  --_common-spacing---spacing-38xl-large: 240px;
}
.qx-projects article, .qx-projects aside, .qx-projects details, .qx-projects figcaption, .qx-projects figure, .qx-projects footer, .qx-projects header, .qx-projects hgroup, .qx-projects main, .qx-projects menu, .qx-projects nav, .qx-projects section, .qx-projects summary { display: block; }
.qx-projects a { background-color: #0000; }
.qx-projects img { border: 0; }
.qx-projects img { vertical-align: middle;
  max-width: 100%;
  display: inline-block; }
.qx-projects .w-inline-block { max-width: 100%;
  display: inline-block; }
.qx-projects h1, .qx-projects h2, .qx-projects h3, .qx-projects h4, .qx-projects h5, .qx-projects h6 { margin-bottom: 10px;
  font-weight: bold; }
.qx-projects h2 { margin-top: 20px;
  font-size: 32px;
  line-height: 36px; }
.qx-projects .w-container { max-width: 940px;
  margin-left: auto;
  margin-right: auto; }
.qx-projects .w-container:before, .qx-projects .w-container:after { content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table; }
.qx-projects .w-container:after { clear: both; }
.qx-projects .w-container .w-row { margin-left: -10px;
  margin-right: -10px; }
@media screen and (max-width: 991px) {
  .qx-projects .w-container { max-width: 728px; }
}
@media screen and (max-width: 767px) {
  .qx-projects .w-row, .qx-projects .w-container .w-row { margin-left: 0;
    margin-right: 0; }
}
@media screen and (max-width: 479px) {
  .qx-projects .w-container { max-width: none; }
}
.qx-projects .w-layout-blockcontainer { max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block; }
@media screen and (max-width: 991px) {
  .qx-projects .w-layout-blockcontainer { max-width: 728px; }
}
@media screen and (max-width: 767px) {
  .qx-projects .w-layout-blockcontainer { max-width: none; }
}
.qx-projects h2 { margin-top: var(--_common-spacing---spacing-9xl-large);
  margin-bottom: var(--_common-spacing---spacing-2xl-large);
  font-family: var(--h2--font-family);
  color: var(--_color---text-color--text-color);
  font-size: var(--h2--font-size);
  line-height: var(--h2--line-height);
  font-weight: var(--h2--font-weight);
  letter-spacing: var(--h2--letter-spacing); }
.qx-projects a { color: var(--_color---text-color--paragraph-color);
  line-height: var(--_base---line-height--line-height-base);
  text-underline-offset: 4px;
  text-decoration: underline; }
.qx-projects .qx-h2 { margin-top: var(--_base---global-size--none);
  margin-bottom: var(--_base---global-size--none);
  font-family: var(--h2--font-family);
  color: var(--_color---text-color--text-color);
  font-size: var(--h2--font-size);
  line-height: var(--h2--line-height);
  font-weight: var(--h2--font-weight);
  letter-spacing: var(--h2--letter-spacing);
  text-transform: capitalize; }
.qx-projects .qx-h2.marquee-position { position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-200%, 200%); }
.qx-projects .qx-h2.qx-project-title-mw { width: var(--_base---global-size--global-full);
  max-width: 440px; }
.qx-projects .qx-h2.vali-title-mw { width: var(--_base---global-size--global-full);
  max-width: 622px; }
.qx-projects .qx-container { max-width: var(--_ui---container--max-width);
  padding-right: var(--_ui---container--padding);
  padding-left: var(--_ui---container--padding);
  margin-left: auto;
  margin-right: auto;
  display: block; }
.qx-projects .qx-body { font-family: var(--body--font-family);
  color: var(--_color---normal-color--medium-gray);
  font-size: var(--body--font-size);
  line-height: var(--body--line-height);
  font-weight: var(--body--font-weight);
  letter-spacing: var(--body--letter-spacing); }
.qx-projects .qx-body.white { color: var(--_color---normal-color--white); }
.qx-projects .qx-body.snow-white { color: var(--_color---normal-color--snow-white); }
.qx-projects .qx-body.qx-text-end { text-align: right; }
.qx-projects .qx-body.valu-des-mw { width: var(--_base---global-size--global-full);
  max-width: 340px;
  margin-left: auto; }
.qx-projects .qx-body.black { color: var(--_color---normal-color--black); }
.qx-projects .qx-body.near-black { color: var(--_color---normal-color--near-black); }
.qx-projects .qx-body.transparent-white { color: var(--_color---normal-color--transparent-white); }
.qx-projects .qx-body.error-des { max-width: 358px; }
.qx-projects .qx-body.utility-note-des { width: var(--_base---global-size--global-full);
  max-width: 620px; }
.qx-projects .header-btn.qx-display-none { display: block; }
.qx-projects .qx-home-project-section { padding-top: var(--_common-spacing---spacing-34xl-large);
  padding-bottom: var(--_common-spacing---spacing-34xl-large);
  background-color: var(--_color---normal-color--deep-charcoal); }
.qx-projects .qx-mission-top-wrap { justify-content: space-between;
  align-items: flex-end;
  display: flex; }
.qx-projects .qx-project-wrap { margin-top: var(--_common-spacing---spacing-22xl-large);
  grid-column-gap: var(--_common-spacing---spacing-9xl-large);
  grid-row-gap: var(--_common-spacing---spacing-9xl-large);
  flex-flow: column;
  display: flex; }
.qx-projects .qx-project-right-wrap { width: var(--_base---global-size--global-full);
  grid-column-gap: var(--_common-spacing---spacing-12xl-large);
  grid-row-gap: var(--_common-spacing---spacing-12xl-large);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-end;
  max-width: 250px;
  display: flex; }
.qx-projects .qx-position-icon-button-wrap { width: var(--_base---global-size--global-full);
  max-width: 70px;
  height: 70px;
  display: flex;
  position: relative;
  overflow: hidden; }
.qx-projects .qx-position-iconwrap { width: var(--_base---global-size--global-full);
  height: var(--_base---global-size--global-full); }
.qx-projects .qx-project-grid-wrap { grid-column-gap: var(--_common-spacing---spacing-2xl-large);
  grid-row-gap: var(--_common-spacing---spacing-2xl-large);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid; }
.qx-projects .qx-project-img-wrap { width: var(--_base---global-size--global-full);
  border-radius: var(--_base---bordar-radius--r-3xl);
  justify-content: center;
  align-items: center;
  height: 724px;
  display: flex;
  position: relative;
  overflow: hidden; }
.qx-projects .qx-project-card-content-wrap { margin-top: var(--_common-spacing---spacing-2xl-large);
  justify-content: space-between;
  align-items: flex-end;
  display: flex; }
.qx-projects .qx-project-view-button { padding: var(--_common-spacing---spacing-medium) var(--_common-spacing---spacing-2xl-large);
  grid-column-gap: var(--_common-spacing---spacing-small);
  grid-row-gap: var(--_common-spacing---spacing-small);
  border-radius: var(--_base---bordar-radius--r-m);
  background-color: var(--_color---normal-color--snow-white);
  justify-content: flex-start;
  align-items: center;
  display: inline-flex;
  position: absolute; }
.qx-projects .qx-project-card-title { color: var(--_color---normal-color--snow-white);
  font-size: var(--_base---font-size--font-size-lg);
  line-height: var(--_base---line-height--line-height-md);
  font-weight: var(--_base---font-weight--medium);
  letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter);
  text-decoration: none;
  transition: all .3s; }
.qx-projects .qx-project-card-title:hover { color: var(--_color---normal-color--vivid-orange); }
.qx-projects .qx-project-card-ctg { line-height: var(--_base---line-height--line-height-xl);
  letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); }
.qx-projects .qx-project-img { width: var(--_base---global-size--global-full);
  height: var(--_base---global-size--global-full);
  max-height: var(--_base---global-size--global-full);
  object-fit: cover; }
.qx-projects .qx-project-view-text { color: var(--_color---normal-color--black);
  line-height: var(--_base---line-height--line-height-3xl);
  font-weight: var(--_base---font-weight--medium);
  text-align: center;
  letter-spacing: var(--_base---spacing-letter--spacing-letter-tight); }
.qx-projects .qx-project-full-wrap { grid-column-gap: var(--_common-spacing---spacing-2xl-large);
  grid-row-gap: var(--_common-spacing---spacing-2xl-large);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: block; }
.qx-projects .qx-project-img-wrap-two { width: var(--_base---global-size--global-full);
  border-radius: var(--_base---bordar-radius--r-3xl);
  justify-content: center;
  align-items: center;
  height: 615px;
  display: flex;
  position: relative;
  overflow: hidden; }
.qx-projects .qx-display-none { display: none; }
@media screen and (max-width: 991px) {
  .qx-projects { --h1--font-family: var(--_base---font-family--your-font); --h1--font-size: 56px; --h1--line-height: var(--_base---line-height--line-height-2xl); --h1--font-weight: var(--_base---font-weight--medium); --h1--letter-spacing: var(--_base---spacing-letter--spacing-letter-tightest); --h2--font-family: var(--_base---font-family--your-font); --h2--font-size: 42px; --h2--line-height: var(--_base---line-height--line-height-relaxed); --h2--font-weight: var(--_base---font-weight--medium); --h2--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --h3--font-family: var(--_base---font-family--your-font); --h3--font-size: 36px; --h3--line-height: var(--_base---line-height--line-height-relaxed); --h3--font-weight: var(--_base---font-weight--medium); --h3--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --h4--font-family: var(--_base---font-family--your-font); --h4--font-size: 28px; --h4--line-height: var(--_base---line-height--line-height-base); --h4--font-weight: var(--_base---font-weight--medium); --h4--letter-spacing: var(--_base---global-size--none); --h5--font-family: var(--_base---font-family--your-font); --h5--font-size: 24px; --h5--line-height: var(--_base---line-height--line-height-relaxed); --h5--font-weight: var(--_base---font-weight--medium); --h5--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --h6--font-family: var(--_base---font-family--your-font); --h6--font-size: 22px; --h6--line-height: var(--_base---line-height--line-height-md); --h6--font-weight: var(--_base---font-weight--medium); --h6--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-regular--font-family: var(--_base---font-family--your-font); --text-regular--font-size: 16px; --text-regular--line-height: var(--_base---line-height--line-height-2xl); --text-regular--font-weight: var(--_base---font-weight--regular); --text-regular--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-extra-small--font-family: var(--_base---font-family--your-font); --text-extra-small--font-size: 16px; --text-extra-small--line-height: var(--_base---line-height--line-height-lg); --text-extra-small--font-weight: var(--_base---font-weight--regular); --text-extra-small--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --body--font-family: var(--_base---font-family--your-font); --body--font-size: 16px; --body--line-height: var(--_base---line-height--line-height-xl); --body--font-weight: var(--_base---font-weight--regular); --body--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --text-extra-large--font-family: var(--_base---font-family--your-font); --text-extra-large--font-weight: var(--_base---font-weight--regular); --text-extra-large--font-size: 22px; --text-extra-large--line-height: var(--_base---line-height--line-height-xl); --text-extra-large--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-learge--font-family: var(--_base---font-family--your-font); --text-learge--font-weight: var(--_base---font-weight--regular); --text-learge--font-size: 20px; --text-learge--line-height: var(--_base---line-height--line-height-xl); --text-learge--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --_common-spacing---spacing-9xl-large: 24px; --_common-spacing---spacing-2xl-large: 12px; --_common-spacing---spacing-6xl-large: 24px; --_common-spacing---spacing-medium: 10px; --_common-spacing---spacing-extra-tiny: 0px; --_common-spacing---spacing-extra-small: 6px; --_common-spacing---spacing-small: 8px; --_common-spacing---spacing-33xl-large: 100px; --_common-spacing---spacing-15xl-large: 32px; --_common-spacing---spacing-22xl-large: 48px; --_common-spacing---spacing-tiny: 4px; --_common-spacing---spacing-13xl-large: 32px; --_common-spacing---spacing-4xl-large: 20px; --_common-spacing---spacing-34xl-large: 100px; --_common-spacing---spacing-30xl-large: 80px; --_common-spacing---spacing-large: 12px; --_common-spacing---spacing-5xl-large: 22px; --_common-spacing---spacing-27xl-large: 64px; --_common-spacing---spacing-20xl-large: 60px; --_common-spacing---spacing-26xl-large: 68px; --_common-spacing---spacing-12xl-large: 38px; --_common-spacing---spacing-25xl-large: 74px; --_common-spacing---spacing-29xl-large: 80px; --_common-spacing---spacing-35xl-large: 120px; --_common-spacing---spacing-37xl-large: 200px; --_common-spacing---spacing-3xl-large: 18px; --_common-spacing---spacing-32xl-large: 108px; --_common-spacing---spacing-17xl-large: 52px; --_common-spacing---spacing-11xl-large: 36px; --_common-spacing---spacing-14xl-large: 45px; --_common-spacing---margin-style--margin-plus-spacer-service: 215vh; --_common-spacing---spacing-23xl-large: 68px; --_common-spacing---spacing-8xl-large: 26px; --_common-spacing---spacing-extra-large: 14px; --_common-spacing---spacing-10xl-large: 34px; --_common-spacing---spacing-7xl-large: 25px; --_common-spacing---spacing-36xl-large: 140px; --_common-spacing---spacing-21xl-large: 62px; --_common-spacing---spacing-31xl-large: 106px; --_common-spacing---spacing-28xl-large: 82px; --_common-spacing---spacing-16xl-large: 50px; --_common-spacing---spacing-19xl-large: 58px; --_common-spacing---spacing-18xl-large: 56px; --_common-spacing---spacing-24xl-large: 70px; --_common-spacing---spacing-38xl-large: 240px; --_ui---container--padding: 32px; --_ui---container--max-width: 767px; --_ui---primary-button--font-family: var(--_base---font-family--your-font); --_ui---primary-button--font-weight: var(--_base---font-weight--regular); --_ui---primary-button--font-size: var(--_base---font-size--font-size-md); --_ui---primary-button--line-height: var(--_base---line-height--line-height-relaxed); --_ui---primary-button--letter-spacing: var(--_base---global-size--none); --_ui---secondary-button--font-family: var(--_base---font-family--your-font); --_ui---secondary-button--font-weight: var(--_base---font-weight--regular); --_ui---secondary-button--font-size: var(--_base---font-size--font-size-md); --_ui---secondary-button--line-height: var(--_base---line-height--line-height-relaxed); --_ui---secondary-button--letter-spacing: var(--_base---global-size--none); }
  .qx-projects .qx-position-icon-button-wrap { max-width: 50px;
    height: 50px; }
  .qx-projects .qx-project-grid-wrap { grid-template-columns: 1fr; }
  .qx-projects .qx-project-img-wrap { height: 500px; }
}
@media screen and (max-width: 767px) {
  .qx-projects { --h1--font-family: var(--_base---font-family--your-font); --h1--font-size: 56px; --h1--line-height: var(--_base---line-height--line-height-2xl); --h1--font-weight: var(--_base---font-weight--medium); --h1--letter-spacing: var(--_base---spacing-letter--spacing-letter-tightest); --h2--font-family: var(--_base---font-family--your-font); --h2--font-size: 36px; --h2--line-height: var(--_base---line-height--line-height-relaxed); --h2--font-weight: var(--_base---font-weight--medium); --h2--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --h3--font-family: var(--_base---font-family--your-font); --h3--font-size: 32px; --h3--line-height: var(--_base---line-height--line-height-relaxed); --h3--font-weight: var(--_base---font-weight--medium); --h3--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --h4--font-family: var(--_base---font-family--your-font); --h4--font-size: 26px; --h4--line-height: var(--_base---line-height--line-height-base); --h4--font-weight: var(--_base---font-weight--medium); --h4--letter-spacing: var(--_base---global-size--none); --h5--font-family: var(--_base---font-family--your-font); --h5--font-size: 22px; --h5--line-height: var(--_base---line-height--line-height-relaxed); --h5--font-weight: var(--_base---font-weight--medium); --h5--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --h6--font-family: var(--_base---font-family--your-font); --h6--font-size: 20px; --h6--line-height: var(--_base---line-height--line-height-md); --h6--font-weight: var(--_base---font-weight--medium); --h6--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-regular--font-family: var(--_base---font-family--your-font); --text-regular--font-size: 16px; --text-regular--line-height: var(--_base---line-height--line-height-2xl); --text-regular--font-weight: var(--_base---font-weight--regular); --text-regular--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-extra-small--font-family: var(--_base---font-family--your-font); --text-extra-small--font-size: 16px; --text-extra-small--line-height: var(--_base---line-height--line-height-lg); --text-extra-small--font-weight: var(--_base---font-weight--regular); --text-extra-small--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --body--font-family: var(--_base---font-family--your-font); --body--font-size: 16px; --body--line-height: var(--_base---line-height--line-height-xl); --body--font-weight: var(--_base---font-weight--regular); --body--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --text-extra-large--font-family: var(--_base---font-family--your-font); --text-extra-large--font-weight: var(--_base---font-weight--regular); --text-extra-large--font-size: 20px; --text-extra-large--line-height: var(--_base---line-height--line-height-xl); --text-extra-large--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-learge--font-family: var(--_base---font-family--your-font); --text-learge--font-weight: var(--_base---font-weight--regular); --text-learge--font-size: 18px; --text-learge--line-height: var(--_base---line-height--line-height-xl); --text-learge--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --_common-spacing---spacing-9xl-large: 16px; --_common-spacing---spacing-2xl-large: 12px; --_common-spacing---spacing-6xl-large: 24px; --_common-spacing---spacing-medium: 10px; --_common-spacing---spacing-extra-tiny: 0px; --_common-spacing---spacing-extra-small: 6px; --_common-spacing---spacing-small: 8px; --_common-spacing---spacing-33xl-large: 80px; --_common-spacing---spacing-15xl-large: 24px; --_common-spacing---spacing-22xl-large: 32px; --_common-spacing---spacing-tiny: 4px; --_common-spacing---spacing-13xl-large: 24px; --_common-spacing---spacing-4xl-large: 20px; --_common-spacing---spacing-34xl-large: 80px; --_common-spacing---spacing-30xl-large: 64px; --_common-spacing---spacing-large: 12px; --_common-spacing---spacing-5xl-large: 22px; --_common-spacing---spacing-27xl-large: 48px; --_common-spacing---spacing-20xl-large: 60px; --_common-spacing---spacing-26xl-large: 58px; --_common-spacing---spacing-12xl-large: 38px; --_common-spacing---spacing-25xl-large: 74px; --_common-spacing---spacing-29xl-large: 70px; --_common-spacing---spacing-35xl-large: 80px; --_common-spacing---spacing-37xl-large: 200px; --_common-spacing---spacing-3xl-large: 18px; --_common-spacing---spacing-32xl-large: 108px; --_common-spacing---spacing-17xl-large: 52px; --_common-spacing---spacing-11xl-large: 36px; --_common-spacing---spacing-14xl-large: 45px; --_common-spacing---margin-style--margin-plus-spacer-service: 215vh; --_common-spacing---spacing-23xl-large: 68px; --_common-spacing---spacing-8xl-large: 26px; --_common-spacing---spacing-extra-large: 14px; --_common-spacing---spacing-10xl-large: 34px; --_common-spacing---spacing-7xl-large: 25px; --_common-spacing---spacing-36xl-large: 100px; --_common-spacing---spacing-21xl-large: 62px; --_common-spacing---spacing-31xl-large: 106px; --_common-spacing---spacing-28xl-large: 82px; --_common-spacing---spacing-16xl-large: 50px; --_common-spacing---spacing-19xl-large: 58px; --_common-spacing---spacing-18xl-large: 56px; --_common-spacing---spacing-24xl-large: 70px; --_common-spacing---spacing-38xl-large: 240px; --_ui---container--padding: 24px; --_ui---container--max-width: 540px; --_ui---primary-button--font-family: var(--_base---font-family--your-font); --_ui---primary-button--font-weight: var(--_base---font-weight--regular); --_ui---primary-button--font-size: var(--_base---font-size--font-size-md); --_ui---primary-button--line-height: var(--_base---line-height--line-height-relaxed); --_ui---primary-button--letter-spacing: var(--_base---global-size--none); --_ui---secondary-button--font-family: var(--_base---font-family--your-font); --_ui---secondary-button--font-weight: var(--_base---font-weight--regular); --_ui---secondary-button--font-size: var(--_base---font-size--font-size-md); --_ui---secondary-button--line-height: var(--_base---line-height--line-height-relaxed); --_ui---secondary-button--letter-spacing: var(--_base---global-size--none); }
  .qx-projects .qx-h2.marquee-position { left: 75%; }
  .qx-projects .header-btn.qx-display-none { display: none; }
  .qx-projects .qx-mission-top-wrap { grid-column-gap: var(--_common-spacing---spacing-15xl-large);
    grid-row-gap: var(--_common-spacing---spacing-15xl-large);
    flex-flow: column; }
  .qx-projects .qx-position-icon-button-wrap { max-width: 40px;
    height: 40px; }
  .qx-projects .qx-project-img-wrap { height: 350px; }
}
@media screen and (max-width: 479px) {
  .qx-projects { --h1--font-family: var(--_base---font-family--your-font); --h1--font-size: 42px; --h1--line-height: var(--_base---line-height--line-height-2xl); --h1--font-weight: var(--_base---font-weight--medium); --h1--letter-spacing: var(--_base---spacing-letter--spacing-letter-tightest); --h2--font-family: var(--_base---font-family--your-font); --h2--font-size: 32px; --h2--line-height: var(--_base---line-height--line-height-relaxed); --h2--font-weight: var(--_base---font-weight--medium); --h2--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --h3--font-family: var(--_base---font-family--your-font); --h3--font-size: 28px; --h3--line-height: var(--_base---line-height--line-height-relaxed); --h3--font-weight: var(--_base---font-weight--medium); --h3--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --h4--font-family: var(--_base---font-family--your-font); --h4--font-size: 24px; --h4--line-height: var(--_base---line-height--line-height-base); --h4--font-weight: var(--_base---font-weight--medium); --h4--letter-spacing: var(--_base---global-size--none); --h5--font-family: var(--_base---font-family--your-font); --h5--font-size: 22px; --h5--line-height: var(--_base---line-height--line-height-relaxed); --h5--font-weight: var(--_base---font-weight--medium); --h5--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --h6--font-family: var(--_base---font-family--your-font); --h6--font-size: 16px; --h6--line-height: var(--_base---line-height--line-height-md); --h6--font-weight: var(--_base---font-weight--medium); --h6--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-regular--font-family: var(--_base---font-family--your-font); --text-regular--font-size: 16px; --text-regular--line-height: var(--_base---line-height--line-height-2xl); --text-regular--font-weight: var(--_base---font-weight--regular); --text-regular--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-extra-small--font-family: var(--_base---font-family--your-font); --text-extra-small--font-size: 16px; --text-extra-small--line-height: var(--_base---line-height--line-height-lg); --text-extra-small--font-weight: var(--_base---font-weight--regular); --text-extra-small--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --body--font-family: var(--_base---font-family--your-font); --body--font-size: 16px; --body--line-height: var(--_base---line-height--line-height-xl); --body--font-weight: var(--_base---font-weight--regular); --body--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --text-extra-large--font-family: var(--_base---font-family--your-font); --text-extra-large--font-weight: var(--_base---font-weight--regular); --text-extra-large--font-size: 18px; --text-extra-large--line-height: var(--_base---line-height--line-height-xl); --text-extra-large--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-learge--font-family: var(--_base---font-family--your-font); --text-learge--font-weight: var(--_base---font-weight--regular); --text-learge--font-size: 16px; --text-learge--line-height: var(--_base---line-height--line-height-xl); --text-learge--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --_common-spacing---spacing-9xl-large: 16px; --_common-spacing---spacing-2xl-large: 12px; --_common-spacing---spacing-6xl-large: 20px; --_common-spacing---spacing-medium: 10px; --_common-spacing---spacing-extra-tiny: 0px; --_common-spacing---spacing-extra-small: 6px; --_common-spacing---spacing-small: 8px; --_common-spacing---spacing-33xl-large: 70px; --_common-spacing---spacing-15xl-large: 24px; --_common-spacing---spacing-22xl-large: 32px; --_common-spacing---spacing-tiny: 4px; --_common-spacing---spacing-13xl-large: 24px; --_common-spacing---spacing-4xl-large: 20px; --_common-spacing---spacing-34xl-large: 60px; --_common-spacing---spacing-30xl-large: 64px; --_common-spacing---spacing-large: 12px; --_common-spacing---spacing-5xl-large: 22px; --_common-spacing---spacing-27xl-large: 48px; --_common-spacing---spacing-20xl-large: 60px; --_common-spacing---spacing-26xl-large: 30px; --_common-spacing---spacing-12xl-large: 38px; --_common-spacing---spacing-25xl-large: 74px; --_common-spacing---spacing-29xl-large: 60px; --_common-spacing---spacing-35xl-large: 80px; --_common-spacing---spacing-37xl-large: 200px; --_common-spacing---spacing-3xl-large: 18px; --_common-spacing---spacing-32xl-large: 108px; --_common-spacing---spacing-17xl-large: 52px; --_common-spacing---spacing-11xl-large: 36px; --_common-spacing---spacing-14xl-large: 45px; --_common-spacing---margin-style--margin-plus-spacer-service: 215vh; --_common-spacing---spacing-23xl-large: 68px; --_common-spacing---spacing-8xl-large: 26px; --_common-spacing---spacing-extra-large: 14px; --_common-spacing---spacing-10xl-large: 34px; --_common-spacing---spacing-7xl-large: 25px; --_common-spacing---spacing-36xl-large: 100px; --_common-spacing---spacing-21xl-large: 62px; --_common-spacing---spacing-31xl-large: 106px; --_common-spacing---spacing-28xl-large: 82px; --_common-spacing---spacing-16xl-large: 50px; --_common-spacing---spacing-19xl-large: 58px; --_common-spacing---spacing-18xl-large: 56px; --_common-spacing---spacing-24xl-large: 70px; --_common-spacing---spacing-38xl-large: 240px; --_ui---container--padding: 16px; --_ui---container--max-width: 100%; --_ui---primary-button--font-family: var(--_base---font-family--your-font); --_ui---primary-button--font-weight: var(--_base---font-weight--regular); --_ui---primary-button--font-size: var(--_base---font-size--font-size-md); --_ui---primary-button--line-height: var(--_base---line-height--line-height-relaxed); --_ui---primary-button--letter-spacing: var(--_base---global-size--none); --_ui---secondary-button--font-family: var(--_base---font-family--your-font); --_ui---secondary-button--font-weight: var(--_base---font-weight--regular); --_ui---secondary-button--font-size: var(--_base---font-size--font-size-md); --_ui---secondary-button--line-height: var(--_base---line-height--line-height-relaxed); --_ui---secondary-button--letter-spacing: var(--_base---global-size--none); }
  .qx-projects .qx-h2.marquee-position { top: 0%;
    left: 80%; }
  .qx-projects .qx-body.valu-des-mw { max-width: 100%; }
  .qx-projects .qx-home-project-section { margin-top: var(--_common-spacing---spacing-34xl-large); }
  .qx-projects .qx-project-wrap { grid-column-gap: var(--_common-spacing---spacing-14xl-large);
    grid-row-gap: var(--_common-spacing---spacing-14xl-large); }
  .qx-projects .qx-project-grid-wrap { grid-column-gap: var(--_common-spacing---spacing-14xl-large);
    grid-row-gap: var(--_common-spacing---spacing-14xl-large);
    flex-flow: column;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    display: grid; }
  .qx-projects .qx-project-card-title { font-size: var(--_base---font-size--font-size-lg); }
  .qx-projects .qx-project-card-ctg { font-size: var(--_base---font-size--font-size-sm); }
}
/* ---- qx-projects: hand-written, from tools/blocks/qx-projects.css ---- */
/* qx-projects — hand-written rules for the "用一支 AI 团队把活干完" block.
   Appended after the extracted qubix rules, so equal specificity wins here.
   Nothing below is this site's design: every value is copied out of qubix's
   own stylesheet and is here only because a cut section cannot carry it. */

/* 1. qubix's own `body` rule, verbatim, moved onto the scope root — a `body`
      rule never travels with a cut section, and the host page's own `body`
      (css/monof-template…css, line 2113) fills the gap with different values:
      14px / 15.4px / 500 / #000 / Inter instead of qubix's 16px / 20px / 400 /
      #a1a1a1 / Interdisplay. That reached everything in this block that sets
      no type of its own — the hover pill (`.project-view-text`: 14px/23.8px
      instead of 16px/27.2px) and each card's category line
      (`.project-card-ctg`: 14px/20.16px black instead of 16px/23.04px gray).
      Same tokens, same values, same order as the donor's rule; qx-news
      restores the same one for the same reason. */
.qx-projects {
  font-family: var(--_base---font-family--your-font);
  color: var(--_color---normal-color--medium-gray);
  font-size: var(--_base---font-size--font-size-sm);
  line-height: 20px;
  font-weight: var(--_base---font-weight--regular);
}

/* 2. qubix's own @font-face block. The extractor keeps class rules, so the
      four faces the donor declares (qubix-flowdevz.app.shared.0505778fd.css)
      were left behind and `--_base---font-family--your-font: Interdisplay,
      Arial, sans-serif` had nothing to resolve to: the donor page sets "A few
      of our recent projects" 766.5px wide at 64px, this page set it 843.9px.
      Same family name, same four weights, same order as the donor; the src is
      the copy of InterDisplay this repo already vendors (assets/69a01660…,
      referenced the same way by css/scalora-modules.sc.css) so the page still
      makes no off-origin request. An @font-face cannot be scoped to a class —
      this restores qubix's faces for every qubix block on the page, which is
      what the donor does. */
@font-face {
  font-family: Interdisplay;
  src: url("../assets/69a01660589c516ba5f0f917/69a022ff8119fed8127f02a7_InterDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Interdisplay;
  src: url("../assets/69a01660589c516ba5f0f917/69a022fe1781fa5c0193ad3f_InterDisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Interdisplay;
  src: url("../assets/69a01660589c516ba5f0f917/69a022ffbb82bbae94bc63b4_InterDisplay-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Interdisplay;
  src: url("../assets/69a01660589c516ba5f0f917/69a022fe18c48956be155c1a_InterDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 3. The host's shared Mono stylesheet hides the pointer three times over:
      `body { cursor: none }` (line 2119), `.main-content { cursor: none }`
      (3408, an ancestor of every block on this page) and `a { cursor: none }`
      (2175), because Mono draws its own crosshair instead — `.plus-line-wrapper`,
      a fixed pointer-events:none layer at z-index 9998, which this page really
      does build and track (measured at runtime). So the hidden pointer is the
      page's, not a gap in the extraction, and it stays: restoring
      `cursor: auto` here would draw the crosshair and a native arrow at once.
      Only the links are put back, because the donor's links are
      `cursor: pointer` and a link that does not say it is one is a defect at
      any scale. css/stargo-fusion.css does exactly this inside .sc-scope and
      .lx-scope, and qx-news inside .qx-news. */
.qx-projects a { cursor: pointer; }

/* 4. The card's explanation (qx-projects.mjs). qubix's category line was three
      words beside the title, in a `space-between` row; ours is a sentence, and
      on the large card a short paragraph — which squeezed the title beside it
      to two or three characters a line (measured at 390: 「团队分 / 工、交 /
      流、并 / 行与接 / 力」). The row may now wrap: the title keeps its own
      width, and the explanation takes what is left, or a line of its own under
      the title when less than 16rem is left. Being two or three lines rather
      than the donor's one, it reads left-aligned wherever it lands and starts
      level with the title (the donor bottom-aligned one line with another).
      The type, colour and spacing are qubix's. */
.qx-projects .qx-project-card-content-wrap { flex-wrap: wrap; align-items: flex-start; column-gap: 2rem; row-gap: .5rem; }
.qx-projects .qx-project-card-title { flex: 0 1 auto; }
.qx-projects .qx-project-card-ctg { flex: 1 1 16rem; max-width: 46rem; text-align: left; text-wrap: pretty; }

/* 5. The Chinese card titles carry a zero-width space where a phrase ends
      (288 个 / 跨部门 / 专业岗位); `keep-all` makes those and the punctuation the
      only break points, so a narrow card never splits 跨部门. */
html[lang^="zh"] .qx-projects .qx-project-card-title { word-break: keep-all; }

/* 6. The section heading, balanced on the English page too. The Chinese page
      already is (css/stargo-fusion.css); the English "Run the work with an AI
      team" left "team" alone on a second line from 390 to 768. */
.qx-projects .qx-h2.qx-project-title-mw { text-wrap: balance; }

/* 7. The large card's picture, when it is one of the owner's own product
      screenshots (qx-projects.mjs / CAP_V6A.team.cards[].image, owner
      instruction 2026-09-18). qubix's full-width card is 1280x615 (2.08) and a
      screenshot is 16:9, so qubix's `cover` would cut a seventh off the top
      and the bottom — on SW006 the Expert Teams heading above the five role
      cards and the completed-task record below them, which is what the card's
      own sentence describes. `contain` shows the team screen whole in the same
      box; the band it leaves left and right is the section's own ground
      (`.home-project-section` paints rgb(15, 15, 15)), named here so the
      picture keeps that ground through the hover scale (1 → 1.1), which still
      animates this same element with its data-w-id and the "view" pill over it
      unchanged. The two portrait cards above are not matched — they keep
      qubix's `cover` — and neither is any editorial artwork in this slot,
      because the match is on the picture's own folder. */
.qx-projects .qx-project-img[src*="/stargo-product/"] {
  object-fit: contain;
  background-color: #0f0f0f;
}

@font-face {
  font-family: webflow-icons;
  src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: Interdisplay;
  src: url("../assets/69a01660589c516ba5f0f917/69a022fe18c48956be155c1a_InterDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Interdisplay;
  src: url("../assets/69a01660589c516ba5f0f917/69a022ff8119fed8127f02a7_InterDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Interdisplay;
  src: url("../assets/69a01660589c516ba5f0f917/69a022fe1781fa5c0193ad3f_InterDisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Interdisplay;
  src: url("../assets/69a01660589c516ba5f0f917/69a022ffbb82bbae94bc63b4_InterDisplay-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
.qx-whatwedo {
  --_color---normal-color--black: black;
  --_base---font-family--your-font: Interdisplay, Arial, sans-serif;
  --_color---normal-color--medium-gray: #a1a1a1;
  --_base---font-size--font-size-sm: 16px;
  --_base---font-weight--regular: 400;
  --_common-spacing---spacing-9xl-large: 32px;
  --_common-spacing---spacing-2xl-large: 16px;
  --h1--font-family: var(--_base---font-family--your-font);
  --_color---normal-color--snow-white: #fdfcfc;
  --h1--font-size: 128px;
  --h1--line-height: var(--_base---line-height--line-height-2xl);
  --h1--font-weight: var(--_base---font-weight--medium);
  --h1--letter-spacing: var(--_base---spacing-letter--spacing-letter-tightest);
  --h2--font-family: var(--_base---font-family--your-font);
  --_color---text-color--text-color: var(--_color---normal-color--snow-white);
  --h2--font-size: 58px;
  --h2--line-height: var(--_base---line-height--line-height-relaxed);
  --h2--font-weight: var(--_base---font-weight--medium);
  --h2--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra);
  --h3--font-family: var(--_base---font-family--your-font);
  --h3--font-size: 44px;
  --h3--line-height: var(--_base---line-height--line-height-relaxed);
  --h3--font-weight: var(--_base---font-weight--medium);
  --h3--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter);
  --_common-spacing---spacing-6xl-large: 24px;
  --_common-spacing---spacing-medium: 10px;
  --h4--font-family: var(--_base---font-family--your-font);
  --h4--font-size: 32px;
  --h4--line-height: var(--_base---line-height--line-height-base);
  --h4--font-weight: var(--_base---font-weight--medium);
  --h4--letter-spacing: var(--_base---global-size--none);
  --h5--font-family: var(--_base---font-family--your-font);
  --h5--font-size: 24px;
  --h5--line-height: var(--_base---line-height--line-height-relaxed);
  --h5--font-weight: var(--_base---font-weight--medium);
  --h5--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter);
  --h6--font-family: var(--_base---font-family--your-font);
  --h6--font-size: 20px;
  --h6--line-height: var(--_base---line-height--line-height-md);
  --h6--font-weight: var(--_base---font-weight--medium);
  --h6--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra);
  --_common-spacing---spacing-extra-tiny: 0px;
  --_base---font-size--font-size-lg: 20px;
  --_base---line-height--line-height-md: 134%;
  --_base---spacing-letter--spacing-letter-tighter: -.02em;
  --_color---text-color--paragraph-color: var(--_color---normal-color--medium-gray);
  --_base---line-height--line-height-base: 122%;
  --_common-spacing---spacing-extra-small: 6px;
  --_common-spacing---spacing-small: 8px;
  --_base---line-height--line-height-2xl: 154%;
  --_base---font-weight--semi-bold: 600;
  --_color---accent-color--accent-one: var(--_color---normal-color--black);
  --_color---normal-color--deep-charcoal: #0f0f0f;
  --_base---global-size--global-full: 100%;
  --_ui---container--padding: 40px;
  --_base---global-size--none: 0px;
  --_common-spacing---spacing-33xl-large: 110px;
  --_base---line-height--line-height-tightest: 100%;
  --_color---normal-color--vivid-orange: #fe6512;
  --text-regular--font-family: var(--_base---font-family--your-font);
  --_color---normal-color--white: white;
  --text-regular--font-size: 18px;
  --text-regular--line-height: var(--_base---line-height--line-height-2xl);
  --text-regular--font-weight: var(--_base---font-weight--regular);
  --text-regular--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra);
  --text-extra-small--font-family: var(--_base---font-family--your-font);
  --text-extra-small--font-size: 16px;
  --text-extra-small--line-height: var(--_base---line-height--line-height-lg);
  --text-extra-small--font-weight: var(--_base---font-weight--regular);
  --text-extra-small--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter);
  --_ui---container--max-width: 1360px;
  --body--font-family: var(--_base---font-family--your-font);
  --body--font-size: 16px;
  --body--line-height: var(--_base---line-height--line-height-xl);
  --body--font-weight: var(--_base---font-weight--regular);
  --body--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter);
  --_color---normal-color--near-black: #222;
  --_color---normal-color--transparent-white: #ffffff42;
  --_common-spacing---spacing-15xl-large: 48px;
  --_color---normal-color--soft-white-layer: #ffffff42;
  --_base---bordar-radius--r-xl: 12px;
  --_color---normal-color--frosted-white: #ffffff42;
  --_color---normal-color--gunmetal: #1d1d1d;
  --_common-spacing---spacing-22xl-large: 64px;
  --_common-spacing---spacing-tiny: 4px;
  --_base---font-size--font-size-xs: 14px;
  --_base---line-height--line-height-lg: 136%;
  --_common-spacing---spacing-13xl-large: 40px;
  --_common-spacing---spacing-4xl-large: 20px;
  --_common-spacing---spacing-34xl-large: 120px;
  --_common-spacing---spacing-30xl-large: 100px;
  --_common-spacing---spacing-large: 12px;
  --_common-spacing---spacing-5xl-large: 22px;
  --_common-spacing---spacing-27xl-large: 80px;
  --_common-spacing---spacing-20xl-large: 60px;
  --_base---line-height--line-height-xl: 144%;
  --_common-spacing---spacing-26xl-large: 78px;
  --_base---bordar-radius--pill: 200px;
  --_common-spacing---spacing-12xl-large: 38px;
  --_base---bordar-radius--r-7xl: 32px;
  --_base---font-size--font-size-2xl: 24px;
  --_base---font-size--font-size-md: 18px;
  --_base---font-weight--medium: 500;
  --_common-spacing---spacing-25xl-large: 74px;
  --_common-spacing---spacing-29xl-large: 94px;
  --_common-spacing---spacing-35xl-large: 140px;
  --_common-spacing---spacing-37xl-large: 200px;
  --_base---bordar-radius--r-5xl: 22px;
  --_base---bordar-radius--r-m: 4px;
  --_base---bordar-radius--round: 100%;
  --_base---font-size--font-size-10xl: 64px;
  --_base---line-height--line-height-normal: 124%;
  --_base---font-size--font-size-6xl: 40px;
  --_base---font-size--font-size-4xl: 28px;
  --_common-spacing---spacing-3xl-large: 18px;
  --_base---bordar-radius--r-l: 6px;
  --_base---bordar-radius--r-8xl: 40px;
  --_common-spacing---spacing-32xl-large: 108px;
  --_common-spacing---spacing-17xl-large: 52px;
  --_common-spacing---spacing-11xl-large: 36px;
  --_base---bordar-radius--r-4xl: 20px;
  --_base---bordar-radius--r-2xl: 14px;
  --_base---bordar-radius--r-3xl: 16px;
  --_base---font-size--font-size-13xl: 76px;
  --_base---spacing-letter--spacing-letter-tightest: -.03em;
  --_base---font-size--font-size-7xl: 48px;
  --_base---font-size--font-size-5xl: 36px;
  --_common-spacing---spacing-14xl-large: 45px;
  --_common-spacing---margin-style--margin-plus-spacer-service: 215vh;
  --_base---line-height--line-height-3xl: 170%;
  --_base---spacing-letter--spacing-letter-tight: -.01em;
  --_common-spacing---spacing-23xl-large: 68px;
  --_common-spacing---spacing-8xl-large: 26px;
  --_base---line-height--line-height-relaxed: 132%;
  --_color---normal-color--transparent: transparent;
  --_common-spacing---spacing-extra-large: 14px;
  --_common-spacing---spacing-10xl-large: 34px;
  --_base---bordar-radius--r-x: 8px;
  --_common-spacing---spacing-7xl-large: 25px;
  --_common-spacing---spacing-36xl-large: 160px;
  --_base---bordar-radius--r-6xl: 24px;
  --_base---bordar-radius--r-9xl: 42px;
  --_color---normal-color--soft-black: #1c1c1c;
  --_common-spacing---spacing-21xl-large: 62px;
  --_common-spacing---spacing-31xl-large: 106px;
  --_common-spacing---spacing-28xl-large: 82px;
  --_common-spacing---spacing-16xl-large: 50px;
  --_base---font-size--font-size-15xl: 280px;
  --_base---font-size--font-size-14xl: 80px;
  --_common-spacing---spacing-19xl-large: 58px;
  --_base---global-size--global-half: 0px;
  --_ui---primary-button--font-family: var(--_base---font-family--your-font);
  --_ui---primary-button--font-weight: var(--_base---font-weight--regular);
  --text-extra-large--font-family: var(--_base---font-family--your-font);
  --text-extra-large--font-weight: var(--_base---font-weight--regular);
  --text-extra-large--font-size: 22px;
  --_ui---primary-button--font-size: var(--_base---font-size--font-size-md);
  --text-extra-large--line-height: var(--_base---line-height--line-height-xl);
  --_base---font-weight--thin: 100;
  --text-extra-large--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra);
  --_ui---primary-button--line-height: var(--_base---line-height--line-height-relaxed);
  --_ui---primary-button--letter-spacing: var(--_base---global-size--none);
  --_base---font-weight--extra-light: 200;
  --_base---font-weight--light: 300;
  --_ui---secondary-button--font-family: var(--_base---font-family--your-font);
  --_ui---secondary-button--font-weight: var(--_base---font-weight--regular);
  --_ui---secondary-button--font-size: var(--_base---font-size--font-size-md);
  --_base---font-weight--bold: 700;
  --_ui---secondary-button--line-height: var(--_base---line-height--line-height-relaxed);
  --_ui---secondary-button--letter-spacing: var(--_base---global-size--none);
  --_base---font-weight--extra-bold: 800;
  --_base---font-weight--black: 900;
  --text-learge--font-family: var(--_base---font-family--your-font);
  --text-learge--font-weight: var(--_base---font-weight--regular);
  --text-learge--font-size: 20px;
  --text-learge--line-height: var(--_base---line-height--line-height-xl);
  --_base---font-size--font-size-xl: 22px;
  --text-learge--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra);
  --_base---font-size--font-size-3xl: 26px;
  --_base---font-size--font-size-8xl: 52px;
  --_base---font-size--font-size-9xl: 60px;
  --_base---font-size--font-size-11xl: 68px;
  --_base---font-size--font-size-12xl: 72px;
  --_base---line-height--line-height-tighter: 105%;
  --_base---line-height--line-height-tight: 110%;
  --_common-spacing---spacing-18xl-large: 56px;
  --_common-spacing---spacing-24xl-large: 70px;
  --_base---spacing-letter--spacing-letter-ultra: -.04em;
  --_common-spacing---spacing-38xl-large: 240px;
}
.qx-whatwedo article, .qx-whatwedo aside, .qx-whatwedo details, .qx-whatwedo figcaption, .qx-whatwedo figure, .qx-whatwedo footer, .qx-whatwedo header, .qx-whatwedo hgroup, .qx-whatwedo main, .qx-whatwedo menu, .qx-whatwedo nav, .qx-whatwedo section, .qx-whatwedo summary { display: block; }
.qx-whatwedo img { border: 0; }
.qx-whatwedo img { vertical-align: middle;
  max-width: 100%;
  display: inline-block; }
.qx-whatwedo .w-container { max-width: 940px;
  margin-left: auto;
  margin-right: auto; }
.qx-whatwedo .w-container:before, .qx-whatwedo .w-container:after { content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table; }
.qx-whatwedo .w-container:after { clear: both; }
.qx-whatwedo .w-container .w-row { margin-left: -10px;
  margin-right: -10px; }
@media screen and (max-width: 991px) {
  .qx-whatwedo .w-container { max-width: 728px; }
}
@media screen and (max-width: 767px) {
  .qx-whatwedo .w-row, .qx-whatwedo .w-container .w-row { margin-left: 0;
    margin-right: 0; }
}
@media screen and (max-width: 479px) {
  .qx-whatwedo .w-container { max-width: none; }
}
.qx-whatwedo .w-layout-blockcontainer { max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block; }
@media screen and (max-width: 991px) {
  .qx-whatwedo .w-layout-blockcontainer { max-width: 728px; }
}
@media screen and (max-width: 767px) {
  .qx-whatwedo .w-layout-blockcontainer { max-width: none; }
}
.qx-whatwedo .qx-h2 { margin-top: var(--_base---global-size--none);
  margin-bottom: var(--_base---global-size--none);
  font-family: var(--h2--font-family);
  color: var(--_color---text-color--text-color);
  font-size: var(--h2--font-size);
  line-height: var(--h2--line-height);
  font-weight: var(--h2--font-weight);
  letter-spacing: var(--h2--letter-spacing);
  text-transform: capitalize; }
.qx-whatwedo .qx-h2.marquee-position { position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-200%, 200%); }
.qx-whatwedo .qx-h2.project-title-mw { width: var(--_base---global-size--global-full);
  max-width: 440px; }
.qx-whatwedo .qx-h2.vali-title-mw { width: var(--_base---global-size--global-full);
  max-width: 622px; }
.qx-whatwedo .qx-h5 { margin-top: var(--_base---global-size--none);
  margin-bottom: var(--_base---global-size--none);
  font-family: var(--h5--font-family);
  color: var(--_color---text-color--text-color);
  font-size: var(--h5--font-size);
  line-height: var(--h5--line-height);
  font-weight: var(--h5--font-weight);
  letter-spacing: var(--h5--letter-spacing); }
.qx-whatwedo .qx-h5.home-services-text { max-width: 368px;
  color: var(--_color---normal-color--black); }
.qx-whatwedo .qx-h5.regular { font-weight: var(--_base---font-weight--regular); }
.qx-whatwedo .qx-h5.medium-gray { color: var(--_color---normal-color--medium-gray); }
.qx-whatwedo .qx-h5.black { color: var(--_color---normal-color--black); }
.qx-whatwedo .qx-h5.deep-charcoal { color: var(--_color---normal-color--deep-charcoal); }
.qx-whatwedo .qx-container { max-width: var(--_ui---container--max-width);
  padding-right: var(--_ui---container--padding);
  padding-left: var(--_ui---container--padding);
  margin-left: auto;
  margin-right: auto;
  display: block; }
.qx-whatwedo .qx-body { font-family: var(--body--font-family);
  color: var(--_color---normal-color--medium-gray);
  font-size: var(--body--font-size);
  line-height: var(--body--line-height);
  font-weight: var(--body--font-weight);
  letter-spacing: var(--body--letter-spacing); }
.qx-whatwedo .qx-body.white { color: var(--_color---normal-color--white); }
.qx-whatwedo .qx-body.snow-white { color: var(--_color---normal-color--snow-white); }
.qx-whatwedo .qx-body.text-end { text-align: right; }
.qx-whatwedo .qx-body.valu-des-mw { width: var(--_base---global-size--global-full);
  max-width: 340px;
  margin-left: auto; }
.qx-whatwedo .qx-body.black { color: var(--_color---normal-color--black); }
.qx-whatwedo .qx-body.near-black { color: var(--_color---normal-color--near-black); }
.qx-whatwedo .qx-body.transparent-white { color: var(--_color---normal-color--transparent-white); }
.qx-whatwedo .qx-body.error-des { max-width: 358px; }
.qx-whatwedo .qx-body.utility-note-des { width: var(--_base---global-size--global-full);
  max-width: 620px; }
.qx-whatwedo .qx-wrapper-service { height: 600vh;
  position: relative; }
.qx-whatwedo .qx-sticky-service-wrapp { justify-content: center;
  align-items: center;
  min-height: 80vh;
  display: flex;
  position: sticky;
  top: 14vh;
  overflow: hidden; }
.qx-whatwedo .qx-inner-content-service { width: var(--_base---global-size--global-full);
  perspective: 1200px;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  display: flex;
  position: relative; }
.qx-whatwedo .qx-outer-main-service { width: var(--_base---global-size--global-full);
  height: var(--_base---global-size--global-full);
  pointer-events: auto;
  position: absolute; }
.qx-whatwedo .qx-trigger-spacer { min-height: 50vw;
  margin-top: var(--_common-spacing---margin-style--margin-plus-spacer-service); }
.qx-whatwedo .qx-wrapper-content-service { z-index: 3;
  grid-column-gap: 0vh;
  grid-row-gap: 0vh;
  justify-content: center;
  align-items: center;
  margin-left: 50px;
  display: flex;
  position: relative; }
.qx-whatwedo .qx-wrapper-circle-service { z-index: 1;
  pointer-events: none;
  width: 30vw;
  height: 30vw;
  transform-style: preserve-3d;
  position: absolute;
  transform: none; }
.qx-whatwedo .qx-wrapper-image-change-service { transform-origin: 50% 100%;
  justify-content: center;
  align-items: center;
  width: 20vw;
  height: 20vw;
  display: flex;
  overflow: hidden; }
.qx-whatwedo .qx-overlay-circle-service-image { background-image: none;
  height: 40vw;
  position: absolute;
  inset: auto 0% 0%;
  overflow: hidden; }
.qx-whatwedo .qx-wrapper-main-services { grid-column-gap: var(--_common-spacing---spacing-medium);
  grid-row-gap: var(--_common-spacing---spacing-medium);
  flex-flow: column;
  width: 25vw;
  display: flex;
  position: absolute;
  inset: 2vw auto auto 0%; }
.qx-whatwedo .qx-wrapper-main-services.qx-wrapper-main-services-one { width: var(--_base---global-size--global-full);
  max-width: 274px; }
.qx-whatwedo .qx-wrapper-main-services.qx-wrapper-main-services-two { width: var(--_base---global-size--global-full);
  max-width: 300px;
  margin-top: 10%;
  position: absolute;
  inset: 0% 0% auto auto; }
.qx-whatwedo .qx-wrapper-main-services.qx-wrapper-main-services-three { width: var(--_base---global-size--global-full);
  max-width: 336px;
  inset: auto 50% 50px 46%; }
.qx-whatwedo .qx-inner-main-services { grid-column-gap: 1vw;
  grid-row-gap: 1vw;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex; }
.qx-whatwedo .qx-wrapper-text-number-service { display: none; }
.qx-whatwedo .qx-text-tittle-service { color: var(--_color---normal-color--snow-white); }
.qx-whatwedo .qx-text-heading-servie { font-family: var(--h2--font-family);
  color: var(--_color---normal-color--snow-white);
  font-size: var(--h2--font-size);
  line-height: var(--h2--line-height);
  font-weight: var(--h2--font-weight); }
.qx-whatwedo .qx-image-circle-service { width: 97%;
  height: 97%; }
.qx-whatwedo .qx-home-service-two { padding-top: var(--_common-spacing---spacing-34xl-large);
  padding-bottom: var(--_common-spacing---spacing-22xl-large); }
@media screen and (max-width: 991px) {
  .qx-whatwedo { --h1--font-family: var(--_base---font-family--your-font); --h1--font-size: 56px; --h1--line-height: var(--_base---line-height--line-height-2xl); --h1--font-weight: var(--_base---font-weight--medium); --h1--letter-spacing: var(--_base---spacing-letter--spacing-letter-tightest); --h2--font-family: var(--_base---font-family--your-font); --h2--font-size: 42px; --h2--line-height: var(--_base---line-height--line-height-relaxed); --h2--font-weight: var(--_base---font-weight--medium); --h2--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --h3--font-family: var(--_base---font-family--your-font); --h3--font-size: 36px; --h3--line-height: var(--_base---line-height--line-height-relaxed); --h3--font-weight: var(--_base---font-weight--medium); --h3--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --h4--font-family: var(--_base---font-family--your-font); --h4--font-size: 28px; --h4--line-height: var(--_base---line-height--line-height-base); --h4--font-weight: var(--_base---font-weight--medium); --h4--letter-spacing: var(--_base---global-size--none); --h5--font-family: var(--_base---font-family--your-font); --h5--font-size: 24px; --h5--line-height: var(--_base---line-height--line-height-relaxed); --h5--font-weight: var(--_base---font-weight--medium); --h5--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --h6--font-family: var(--_base---font-family--your-font); --h6--font-size: 22px; --h6--line-height: var(--_base---line-height--line-height-md); --h6--font-weight: var(--_base---font-weight--medium); --h6--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-regular--font-family: var(--_base---font-family--your-font); --text-regular--font-size: 16px; --text-regular--line-height: var(--_base---line-height--line-height-2xl); --text-regular--font-weight: var(--_base---font-weight--regular); --text-regular--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-extra-small--font-family: var(--_base---font-family--your-font); --text-extra-small--font-size: 16px; --text-extra-small--line-height: var(--_base---line-height--line-height-lg); --text-extra-small--font-weight: var(--_base---font-weight--regular); --text-extra-small--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --body--font-family: var(--_base---font-family--your-font); --body--font-size: 16px; --body--line-height: var(--_base---line-height--line-height-xl); --body--font-weight: var(--_base---font-weight--regular); --body--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --text-extra-large--font-family: var(--_base---font-family--your-font); --text-extra-large--font-weight: var(--_base---font-weight--regular); --text-extra-large--font-size: 22px; --text-extra-large--line-height: var(--_base---line-height--line-height-xl); --text-extra-large--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-learge--font-family: var(--_base---font-family--your-font); --text-learge--font-weight: var(--_base---font-weight--regular); --text-learge--font-size: 20px; --text-learge--line-height: var(--_base---line-height--line-height-xl); --text-learge--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --_common-spacing---spacing-9xl-large: 24px; --_common-spacing---spacing-2xl-large: 12px; --_common-spacing---spacing-6xl-large: 24px; --_common-spacing---spacing-medium: 10px; --_common-spacing---spacing-extra-tiny: 0px; --_common-spacing---spacing-extra-small: 6px; --_common-spacing---spacing-small: 8px; --_common-spacing---spacing-33xl-large: 100px; --_common-spacing---spacing-15xl-large: 32px; --_common-spacing---spacing-22xl-large: 48px; --_common-spacing---spacing-tiny: 4px; --_common-spacing---spacing-13xl-large: 32px; --_common-spacing---spacing-4xl-large: 20px; --_common-spacing---spacing-34xl-large: 100px; --_common-spacing---spacing-30xl-large: 80px; --_common-spacing---spacing-large: 12px; --_common-spacing---spacing-5xl-large: 22px; --_common-spacing---spacing-27xl-large: 64px; --_common-spacing---spacing-20xl-large: 60px; --_common-spacing---spacing-26xl-large: 68px; --_common-spacing---spacing-12xl-large: 38px; --_common-spacing---spacing-25xl-large: 74px; --_common-spacing---spacing-29xl-large: 80px; --_common-spacing---spacing-35xl-large: 120px; --_common-spacing---spacing-37xl-large: 200px; --_common-spacing---spacing-3xl-large: 18px; --_common-spacing---spacing-32xl-large: 108px; --_common-spacing---spacing-17xl-large: 52px; --_common-spacing---spacing-11xl-large: 36px; --_common-spacing---spacing-14xl-large: 45px; --_common-spacing---margin-style--margin-plus-spacer-service: 215vh; --_common-spacing---spacing-23xl-large: 68px; --_common-spacing---spacing-8xl-large: 26px; --_common-spacing---spacing-extra-large: 14px; --_common-spacing---spacing-10xl-large: 34px; --_common-spacing---spacing-7xl-large: 25px; --_common-spacing---spacing-36xl-large: 140px; --_common-spacing---spacing-21xl-large: 62px; --_common-spacing---spacing-31xl-large: 106px; --_common-spacing---spacing-28xl-large: 82px; --_common-spacing---spacing-16xl-large: 50px; --_common-spacing---spacing-19xl-large: 58px; --_common-spacing---spacing-18xl-large: 56px; --_common-spacing---spacing-24xl-large: 70px; --_common-spacing---spacing-38xl-large: 240px; --_ui---container--padding: 32px; --_ui---container--max-width: 767px; --_ui---primary-button--font-family: var(--_base---font-family--your-font); --_ui---primary-button--font-weight: var(--_base---font-weight--regular); --_ui---primary-button--font-size: var(--_base---font-size--font-size-md); --_ui---primary-button--line-height: var(--_base---line-height--line-height-relaxed); --_ui---primary-button--letter-spacing: var(--_base---global-size--none); --_ui---secondary-button--font-family: var(--_base---font-family--your-font); --_ui---secondary-button--font-weight: var(--_base---font-weight--regular); --_ui---secondary-button--font-size: var(--_base---font-size--font-size-md); --_ui---secondary-button--line-height: var(--_base---line-height--line-height-relaxed); --_ui---secondary-button--letter-spacing: var(--_base---global-size--none); }
}
@media screen and (max-width: 767px) {
  .qx-whatwedo { --h1--font-family: var(--_base---font-family--your-font); --h1--font-size: 56px; --h1--line-height: var(--_base---line-height--line-height-2xl); --h1--font-weight: var(--_base---font-weight--medium); --h1--letter-spacing: var(--_base---spacing-letter--spacing-letter-tightest); --h2--font-family: var(--_base---font-family--your-font); --h2--font-size: 36px; --h2--line-height: var(--_base---line-height--line-height-relaxed); --h2--font-weight: var(--_base---font-weight--medium); --h2--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --h3--font-family: var(--_base---font-family--your-font); --h3--font-size: 32px; --h3--line-height: var(--_base---line-height--line-height-relaxed); --h3--font-weight: var(--_base---font-weight--medium); --h3--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --h4--font-family: var(--_base---font-family--your-font); --h4--font-size: 26px; --h4--line-height: var(--_base---line-height--line-height-base); --h4--font-weight: var(--_base---font-weight--medium); --h4--letter-spacing: var(--_base---global-size--none); --h5--font-family: var(--_base---font-family--your-font); --h5--font-size: 22px; --h5--line-height: var(--_base---line-height--line-height-relaxed); --h5--font-weight: var(--_base---font-weight--medium); --h5--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --h6--font-family: var(--_base---font-family--your-font); --h6--font-size: 20px; --h6--line-height: var(--_base---line-height--line-height-md); --h6--font-weight: var(--_base---font-weight--medium); --h6--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-regular--font-family: var(--_base---font-family--your-font); --text-regular--font-size: 16px; --text-regular--line-height: var(--_base---line-height--line-height-2xl); --text-regular--font-weight: var(--_base---font-weight--regular); --text-regular--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-extra-small--font-family: var(--_base---font-family--your-font); --text-extra-small--font-size: 16px; --text-extra-small--line-height: var(--_base---line-height--line-height-lg); --text-extra-small--font-weight: var(--_base---font-weight--regular); --text-extra-small--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --body--font-family: var(--_base---font-family--your-font); --body--font-size: 16px; --body--line-height: var(--_base---line-height--line-height-xl); --body--font-weight: var(--_base---font-weight--regular); --body--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --text-extra-large--font-family: var(--_base---font-family--your-font); --text-extra-large--font-weight: var(--_base---font-weight--regular); --text-extra-large--font-size: 20px; --text-extra-large--line-height: var(--_base---line-height--line-height-xl); --text-extra-large--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-learge--font-family: var(--_base---font-family--your-font); --text-learge--font-weight: var(--_base---font-weight--regular); --text-learge--font-size: 18px; --text-learge--line-height: var(--_base---line-height--line-height-xl); --text-learge--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --_common-spacing---spacing-9xl-large: 16px; --_common-spacing---spacing-2xl-large: 12px; --_common-spacing---spacing-6xl-large: 24px; --_common-spacing---spacing-medium: 10px; --_common-spacing---spacing-extra-tiny: 0px; --_common-spacing---spacing-extra-small: 6px; --_common-spacing---spacing-small: 8px; --_common-spacing---spacing-33xl-large: 80px; --_common-spacing---spacing-15xl-large: 24px; --_common-spacing---spacing-22xl-large: 32px; --_common-spacing---spacing-tiny: 4px; --_common-spacing---spacing-13xl-large: 24px; --_common-spacing---spacing-4xl-large: 20px; --_common-spacing---spacing-34xl-large: 80px; --_common-spacing---spacing-30xl-large: 64px; --_common-spacing---spacing-large: 12px; --_common-spacing---spacing-5xl-large: 22px; --_common-spacing---spacing-27xl-large: 48px; --_common-spacing---spacing-20xl-large: 60px; --_common-spacing---spacing-26xl-large: 58px; --_common-spacing---spacing-12xl-large: 38px; --_common-spacing---spacing-25xl-large: 74px; --_common-spacing---spacing-29xl-large: 70px; --_common-spacing---spacing-35xl-large: 80px; --_common-spacing---spacing-37xl-large: 200px; --_common-spacing---spacing-3xl-large: 18px; --_common-spacing---spacing-32xl-large: 108px; --_common-spacing---spacing-17xl-large: 52px; --_common-spacing---spacing-11xl-large: 36px; --_common-spacing---spacing-14xl-large: 45px; --_common-spacing---margin-style--margin-plus-spacer-service: 215vh; --_common-spacing---spacing-23xl-large: 68px; --_common-spacing---spacing-8xl-large: 26px; --_common-spacing---spacing-extra-large: 14px; --_common-spacing---spacing-10xl-large: 34px; --_common-spacing---spacing-7xl-large: 25px; --_common-spacing---spacing-36xl-large: 100px; --_common-spacing---spacing-21xl-large: 62px; --_common-spacing---spacing-31xl-large: 106px; --_common-spacing---spacing-28xl-large: 82px; --_common-spacing---spacing-16xl-large: 50px; --_common-spacing---spacing-19xl-large: 58px; --_common-spacing---spacing-18xl-large: 56px; --_common-spacing---spacing-24xl-large: 70px; --_common-spacing---spacing-38xl-large: 240px; --_ui---container--padding: 24px; --_ui---container--max-width: 540px; --_ui---primary-button--font-family: var(--_base---font-family--your-font); --_ui---primary-button--font-weight: var(--_base---font-weight--regular); --_ui---primary-button--font-size: var(--_base---font-size--font-size-md); --_ui---primary-button--line-height: var(--_base---line-height--line-height-relaxed); --_ui---primary-button--letter-spacing: var(--_base---global-size--none); --_ui---secondary-button--font-family: var(--_base---font-family--your-font); --_ui---secondary-button--font-weight: var(--_base---font-weight--regular); --_ui---secondary-button--font-size: var(--_base---font-size--font-size-md); --_ui---secondary-button--line-height: var(--_base---line-height--line-height-relaxed); --_ui---secondary-button--letter-spacing: var(--_base---global-size--none); }
  .qx-whatwedo .qx-h2.marquee-position { left: 75%; }
  .qx-whatwedo .qx-wrapper-service { height: var(--_base---global-size--global-full); }
  .qx-whatwedo .qx-sticky-service-wrapp { min-height: var(--_base---global-size--global-full); }
  .qx-whatwedo .qx-inner-content-service { min-height: 100vh; }
  .qx-whatwedo .qx-wrapper-content-service { margin-left: 0; }
  .qx-whatwedo .qx-wrapper-circle-service { justify-content: center;
    align-items: center;
    display: none;
    transform: none; }
  .qx-whatwedo .qx-wrapper-main-services.qx-wrapper-main-services-one { max-width: var(--_base---global-size--global-full); }
  .qx-whatwedo .qx-wrapper-main-services.qx-wrapper-main-services-two { max-width: var(--_base---global-size--global-full);
    margin-top: 25%; }
  .qx-whatwedo .qx-wrapper-main-services.qx-wrapper-main-services-three { max-width: var(--_base---global-size--global-full);
    left: 0%; }
  .qx-whatwedo .qx-image-circle-service { width: 100%;
    height: 100%; }
}
@media screen and (max-width: 479px) {
  .qx-whatwedo { --h1--font-family: var(--_base---font-family--your-font); --h1--font-size: 42px; --h1--line-height: var(--_base---line-height--line-height-2xl); --h1--font-weight: var(--_base---font-weight--medium); --h1--letter-spacing: var(--_base---spacing-letter--spacing-letter-tightest); --h2--font-family: var(--_base---font-family--your-font); --h2--font-size: 32px; --h2--line-height: var(--_base---line-height--line-height-relaxed); --h2--font-weight: var(--_base---font-weight--medium); --h2--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --h3--font-family: var(--_base---font-family--your-font); --h3--font-size: 28px; --h3--line-height: var(--_base---line-height--line-height-relaxed); --h3--font-weight: var(--_base---font-weight--medium); --h3--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --h4--font-family: var(--_base---font-family--your-font); --h4--font-size: 24px; --h4--line-height: var(--_base---line-height--line-height-base); --h4--font-weight: var(--_base---font-weight--medium); --h4--letter-spacing: var(--_base---global-size--none); --h5--font-family: var(--_base---font-family--your-font); --h5--font-size: 22px; --h5--line-height: var(--_base---line-height--line-height-relaxed); --h5--font-weight: var(--_base---font-weight--medium); --h5--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --h6--font-family: var(--_base---font-family--your-font); --h6--font-size: 16px; --h6--line-height: var(--_base---line-height--line-height-md); --h6--font-weight: var(--_base---font-weight--medium); --h6--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-regular--font-family: var(--_base---font-family--your-font); --text-regular--font-size: 16px; --text-regular--line-height: var(--_base---line-height--line-height-2xl); --text-regular--font-weight: var(--_base---font-weight--regular); --text-regular--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-extra-small--font-family: var(--_base---font-family--your-font); --text-extra-small--font-size: 16px; --text-extra-small--line-height: var(--_base---line-height--line-height-lg); --text-extra-small--font-weight: var(--_base---font-weight--regular); --text-extra-small--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --body--font-family: var(--_base---font-family--your-font); --body--font-size: 16px; --body--line-height: var(--_base---line-height--line-height-xl); --body--font-weight: var(--_base---font-weight--regular); --body--letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter); --text-extra-large--font-family: var(--_base---font-family--your-font); --text-extra-large--font-weight: var(--_base---font-weight--regular); --text-extra-large--font-size: 18px; --text-extra-large--line-height: var(--_base---line-height--line-height-xl); --text-extra-large--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --text-learge--font-family: var(--_base---font-family--your-font); --text-learge--font-weight: var(--_base---font-weight--regular); --text-learge--font-size: 16px; --text-learge--line-height: var(--_base---line-height--line-height-xl); --text-learge--letter-spacing: var(--_base---spacing-letter--spacing-letter-ultra); --_common-spacing---spacing-9xl-large: 16px; --_common-spacing---spacing-2xl-large: 12px; --_common-spacing---spacing-6xl-large: 20px; --_common-spacing---spacing-medium: 10px; --_common-spacing---spacing-extra-tiny: 0px; --_common-spacing---spacing-extra-small: 6px; --_common-spacing---spacing-small: 8px; --_common-spacing---spacing-33xl-large: 70px; --_common-spacing---spacing-15xl-large: 24px; --_common-spacing---spacing-22xl-large: 32px; --_common-spacing---spacing-tiny: 4px; --_common-spacing---spacing-13xl-large: 24px; --_common-spacing---spacing-4xl-large: 20px; --_common-spacing---spacing-34xl-large: 60px; --_common-spacing---spacing-30xl-large: 64px; --_common-spacing---spacing-large: 12px; --_common-spacing---spacing-5xl-large: 22px; --_common-spacing---spacing-27xl-large: 48px; --_common-spacing---spacing-20xl-large: 60px; --_common-spacing---spacing-26xl-large: 30px; --_common-spacing---spacing-12xl-large: 38px; --_common-spacing---spacing-25xl-large: 74px; --_common-spacing---spacing-29xl-large: 60px; --_common-spacing---spacing-35xl-large: 80px; --_common-spacing---spacing-37xl-large: 200px; --_common-spacing---spacing-3xl-large: 18px; --_common-spacing---spacing-32xl-large: 108px; --_common-spacing---spacing-17xl-large: 52px; --_common-spacing---spacing-11xl-large: 36px; --_common-spacing---spacing-14xl-large: 45px; --_common-spacing---margin-style--margin-plus-spacer-service: 215vh; --_common-spacing---spacing-23xl-large: 68px; --_common-spacing---spacing-8xl-large: 26px; --_common-spacing---spacing-extra-large: 14px; --_common-spacing---spacing-10xl-large: 34px; --_common-spacing---spacing-7xl-large: 25px; --_common-spacing---spacing-36xl-large: 100px; --_common-spacing---spacing-21xl-large: 62px; --_common-spacing---spacing-31xl-large: 106px; --_common-spacing---spacing-28xl-large: 82px; --_common-spacing---spacing-16xl-large: 50px; --_common-spacing---spacing-19xl-large: 58px; --_common-spacing---spacing-18xl-large: 56px; --_common-spacing---spacing-24xl-large: 70px; --_common-spacing---spacing-38xl-large: 240px; --_ui---container--padding: 16px; --_ui---container--max-width: 100%; --_ui---primary-button--font-family: var(--_base---font-family--your-font); --_ui---primary-button--font-weight: var(--_base---font-weight--regular); --_ui---primary-button--font-size: var(--_base---font-size--font-size-md); --_ui---primary-button--line-height: var(--_base---line-height--line-height-relaxed); --_ui---primary-button--letter-spacing: var(--_base---global-size--none); --_ui---secondary-button--font-family: var(--_base---font-family--your-font); --_ui---secondary-button--font-weight: var(--_base---font-weight--regular); --_ui---secondary-button--font-size: var(--_base---font-size--font-size-md); --_ui---secondary-button--line-height: var(--_base---line-height--line-height-relaxed); --_ui---secondary-button--letter-spacing: var(--_base---global-size--none); }
  .qx-whatwedo .qx-h2.marquee-position { top: 0%;
    left: 80%; }
  .qx-whatwedo .qx-body.valu-des-mw { max-width: 100%; }
  .qx-whatwedo .qx-wrapper-service { position: static;
    height: auto !important; }
  .qx-whatwedo .qx-sticky-service-wrapp { flex-flow: column;
    height: auto;
    position: sticky;
    top: 16vh; }
  .qx-whatwedo .qx-inner-content-service { min-height: 0; }
  .qx-whatwedo .qx-outer-main-service { margin-top: var(--_common-spacing---spacing-15xl-large);
    grid-column-gap: var(--_common-spacing---spacing-6xl-large);
    grid-row-gap: var(--_common-spacing---spacing-6xl-large);
    flex-flow: column;
    height: auto;
    display: flex;
    position: static; }
  .qx-whatwedo .qx-trigger-spacer { display: none; }
  .qx-whatwedo .qx-wrapper-image-change-service { width: 25vw;
    height: 25vw; }
  .qx-whatwedo .qx-wrapper-main-services.qx-wrapper-main-services-one { position: static; }
  .qx-whatwedo .qx-wrapper-main-services.qx-wrapper-main-services-two { margin-top: 0;
    position: static; }
  .qx-whatwedo .qx-wrapper-main-services.qx-wrapper-main-services-three { position: static; }
}
/* qx-whatwedo: the donor painted this ground on <body>; the block needs it itself. */
.qx-whatwedo { background-color: #000; }
/* ---- qx-whatwedo: hand-written, from tools/blocks/qx-whatwedo.css ---- */
/* qx-whatwedo — hand-written rules for the four-foundation "What We Do" stage.
   Appended after the extracted qubix rules, so equal specificity wins here.
   Every rule is scoped under .qx-whatwedo. Nothing here resizes, recolours or
   re-spaces a donor element: the rules restore what a cut section cannot
   carry, place the one node the donor never had, and style the expandable
   panel that is this block's own addition. */

/* 1. qubix's own `body` rule. It never travels with a cut section, so on this
      page the block root inherited the site body instead (Inter 14px/15.4px,
      #000 — measured), where the donor's own root is Interdisplay 16px/20px in
      medium gray. Same tokens, same values, moved onto the scope root; the
      background half of that `body` rule is already applied by donor.ground. */
.qx-whatwedo {
  font-family: var(--_base---font-family--your-font);
  color: var(--_color---normal-color--medium-gray);
  font-size: var(--_base---font-size--font-size-sm);
  line-height: 20px;
  font-weight: var(--_base---font-weight--regular);
}

/* 2. The fourth node. The donor positions three nodes absolutely — top-left
      (`inset: 2vw auto auto 0%`), upper-right, and bottom (`inset: auto 50%
      50px 46%`). The fourth is a clone of the bottom node, so it arrives with
      the bottom node's inset; this puts it on the bottom line beside it, in
      the top-left node's own column (`left: 0%`), keeping the donor's own
      50px bottom offset. Same specificity as the donor's `.wrapper-main-
      services.wrapper-main-services-three` rule and later in the sheet, so it
      wins. The donor has no fourth position to borrow — this is the only place
      in this file that positions anything. */
.qx-whatwedo .qx-wrapper-main-services.qx-whatwedo-four { inset: auto auto 50px 0%; }

/* 3. Below 767 the donor makes every node full width and drops the bottom node
      to `left: 0%`, so the clone would land exactly on top of the node it was
      cloned from (measured: both at [104,908,492,85] in a 700px viewport).
      Lift it clear by its own height plus the donor's own node gap — no new
      length is introduced, and the node it clones stays exactly where the
      donor's rules put it. This uses the independent `translate` property, not
      `transform`: the donor's scroll action writes `transform` inline on every
      node and would otherwise overwrite it. Below 479 the donor lets `-three`
      flow statically and the clone flows after it, so the lift is handed back
      — the same two-step the donor's own `-three` rules make across these two
      breakpoints. */
@media screen and (max-width: 767px) {
  .qx-whatwedo .qx-wrapper-main-services.qx-whatwedo-four {
    translate: 0 calc(-100% - var(--_common-spacing---spacing-medium));
  }
}
@media screen and (max-width: 479px) {
  .qx-whatwedo .qx-wrapper-main-services.qx-whatwedo-four { translate: none; }
}

/* 4. qubix sets `text-transform: capitalize` on `.h2`, drawn for the single
      word "What"; on its own words the transform is a no-op. Our half-phrase
      is sentence case ("What every"), and the other half of the same sentence
      sits in `.text-heading-servie`, which the donor never capitalises — so
      capitalize would print "What Every / story runs on", two halves of one
      sentence in different cases, a rendering the donor never produces. This
      cannot be fixed in the words: the only split whose first half is already
      capitalised ("What" | "every story runs on") lands the ticked ring 163.7px
      off the sphere's centre, where the donor's own split lands it 2.9px off
      and ours 7.6px. Chinese is unaffected either way. */
.qx-whatwedo .qx-h2 { text-transform: none; }

/* 5. Each node opens on click (tools/blocks/qx-whatwedo.js) — the owner's
      "点击可以分别展开介绍01、02、03、04的功能". The node is the control, so it
      takes the pointer and a focus ring, and an open node comes forward so its
      list reads over the orb and the split heading. No donor element is
      resized, recoloured or moved by these. */
.qx-whatwedo .qx-wrapper-main-services { cursor: pointer; }
.qx-whatwedo .qx-wrapper-main-services[aria-expanded="true"] { z-index: 5; }
.qx-whatwedo .qx-wrapper-main-services:focus-visible { outline: 1px solid var(--_color---normal-color--snow-white); outline-offset: 6px; }

/* 6. The panel — this block's own markup, so the donor has no rule to restore.
      It hangs off the node as an overlay so the donor's node stays exactly
      where the donor put it (measured: opening one moves no node by more than
      the 0.4px the scroll animation itself moves them), and it opens toward
      the centre of the stage — over the orb and the split heading, never over
      a neighbouring node — because that is the only room the donor's
      composition has (the sticky stage is `overflow: hidden`):
        node 1 (top-left)      → to its right
        node 2 (right)         → below it, into the empty bottom-right
        node 3 (bottom)        → above it
        node 4 (bottom-left)   → above and to its right
      Painted in the donor's own black so the list reads over what it crosses,
      spaced on the donor's own node gap; picks are `.qx-body` and keep the
      donor's body type and colour. Below 479 the donor lets everything flow,
      and so does the panel.
      These are the places a list starts from. On narrower or shorter screens
      (tablets, 480–1279) some of them land on a neighbouring node or run out
      of the pinned frame; tools/blocks/qx-whatwedo.js then moves that list,
      with inline left/top/width, to the nearest place that is clear. */
.qx-whatwedo .qx-whatwedo-panel { --qx-gap: var(--_common-spacing---spacing-medium);
  display: flex; flex-flow: column; gap: var(--qx-gap);
  position: absolute; width: 100%; top: 0; left: calc(100% + var(--qx-gap));
  background: var(--_color---normal-color--black); }
.qx-whatwedo .qx-wrapper-main-services-two .qx-whatwedo-panel { left: 0; top: calc(100% + var(--qx-gap)); }
.qx-whatwedo .qx-wrapper-main-services-three .qx-whatwedo-panel { left: 0; top: auto; bottom: calc(100% + var(--qx-gap)); }
.qx-whatwedo .qx-whatwedo-four .qx-whatwedo-panel { left: calc(100% + var(--qx-gap)); }
.qx-whatwedo .qx-whatwedo-panel[hidden] { display: none; }
@media screen and (max-width: 479px) {
  .qx-whatwedo .qx-whatwedo-panel,
  .qx-whatwedo .qx-wrapper-main-services-two .qx-whatwedo-panel,
  .qx-whatwedo .qx-wrapper-main-services-three .qx-whatwedo-panel,
  .qx-whatwedo .qx-whatwedo-four .qx-whatwedo-panel { position: static; width: auto; margin-top: var(--qx-gap); }
}

/* 8. Between 768 and 991 the two bottom nodes overlap by 13px.
      The donor puts `-three` at `left: 46%` and rule 2 above puts the clone at
      `left: 0%`; both nodes are 336px wide. That is fine on the donor's own
      desktop, where 46% is far past the first node's right edge, but the nodes
      stop shrinking while the column does: measured on the built page, the
      clone runs 33..369 and `-three` starts at 356 (768px viewport) and
      144..480 against 467 (991px) — 13px of overlap at both, which lands on the
      last character of the left paragraph and the first of the right, and reads
      as two sentences printed on top of each other.

      46% -> 52% is the whole fix: it puts `-three` at 365.6 of a 703px column
      against the clone's 337, a 28px gutter, and keeps it inside the column
      (365.6 + 336 = 701.6). Below 768 rule 3 already lifts the clone onto its
      own line and above 991 the column is wide enough for the donor's own 46%
      (measured at 1024: 40..376 against 474, clear), so neither side of this
      band is touched. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .qx-whatwedo .qx-wrapper-main-services.qx-wrapper-main-services-three:not(.qx-whatwedo-four) {
    left: 52%;
  }
}

/* 9. The condition that closes a panel (qx-whatwedo.mjs) — a connection is not
      live until authorized, an improvement is approved before use. Same body
      type as the lines above it, set off by a hairline on the donor's own
      node gap so it reads as the panel's footnote, not as one more line. */
.qx-whatwedo .qx-whatwedo-caveat {
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-top: var(--qx-gap);
}

/* 10. Between 480 and 767 the donor stacks the first two nodes: node 01 at
       `top: 2vw`, node 02 at `margin-top: 25%` of the column. The English
       node 01 is two lines taller than the Chinese one (a four-line promise
       under a one-line title, 131px in a 492px column), so its last line ran
       under node 02's title — measured at 600: node 01 at 98..229, node 02
       from 209 — and while node 01 was open (it comes forward, rule 5) it hid
       the top of that title and took its clicks. Node 02 starts 4rem lower in
       English, which clears node 01 across the band (at 480, where the column
       is 432px and node 01 wraps to five lines, too). */
@media screen and (min-width: 480px) and (max-width: 767px) {
  html[lang^="en"] .qx-whatwedo .qx-wrapper-main-services.qx-wrapper-main-services-two {
    margin-top: calc(25% + 4rem);
  }
}