/* CloudCrew shared contact/footer artwork system. */
:root {
  --cc-footer-artwork-image: url("/_nuxt/img/footerBackground.440ab63.webp");
  --cc-footer-surface: #eeefea;
  --cc-footer-ink: #1c1d20;
  --cc-footer-content-max: 1680px;
  --cc-footer-artwork-size: clamp(1460px, 88vw, 3200px);
  --cc-footer-artwork-height: clamp(320px, 27vw, 700px);
  --cc-contact-side-pad: max(18.23vw, calc((100vw - var(--cc-footer-content-max)) / 2));
}

.cc-contact-section,
.cc-footer-artwork {
  box-sizing: border-box;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.cc-footer-artwork {
  background: var(--cc-footer-surface);
  min-height: var(--cc-footer-artwork-height);
  pointer-events: none;
}

.cc-footer-artwork::before,
.cc-footer-artwork::after,
.cc-contact-section::after {
  content: "";
  inset: auto 0 0;
  pointer-events: none;
  position: absolute;
}

.cc-footer-artwork::before,
.cc-footer-artwork::after {
  height: 100%;
  z-index: 0;
}

.cc-footer-artwork::before {
  background: var(--cc-footer-surface);
}

.cc-footer-artwork::after,
.cc-contact-section::after {
  background-image: var(--cc-footer-artwork-image);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: var(--cc-footer-artwork-size) auto;
}

.cc-footer-artwork--project {
  min-height: clamp(340px, 24vw, 620px);
}

.cc-footer-artwork--home {
  min-height: var(--cc-footer-artwork-height);
}

.homePage .form,
.javexWrap .form,
.levelSoundWrap .form,
.sevenForceWrap .form,
.sovtonWrap .form,
.blackOnWhiteWrap .form {
  --cc-footer-artwork-height: clamp(320px, 27vw, 700px);
  --cc-footer-artwork-size: clamp(1460px, 88vw, 3200px);
  background-image: none !important;
  box-sizing: border-box;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.homePage .form {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding-left: var(--cc-contact-side-pad) !important;
  padding-right: var(--cc-contact-side-pad) !important;
  padding-top: clamp(112px, 7vw, 156px) !important;
  padding-bottom: clamp(300px, 23vw, 600px) !important;
}

.homePage .form::after,
.javexWrap .form::after,
.levelSoundWrap .form::after,
.sevenForceWrap .form::after,
.sovtonWrap .form::after,
.blackOnWhiteWrap .form::after {
  background-image: var(--cc-footer-artwork-image);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: var(--cc-footer-artwork-size) auto;
  bottom: 0;
  content: "";
  height: var(--cc-footer-artwork-height);
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 0;
}

.homePage .form > .formTitle,
.homePage .form > .formMobileDesc,
.homePage .form > .formContent,
.homePage .form > .actionButtonWrap,
.homePage .form > .formMobileLinks {
  box-sizing: border-box;
  max-width: var(--cc-footer-content-max);
  position: relative;
  width: 100%;
  z-index: 2;
}

.homePage .form > .formTitle {
  font-size: clamp(42px, 5vw, 86px) !important;
  line-height: 1.12 !important;
  margin-bottom: clamp(54px, 5vw, 92px) !important;
  max-width: min(100%, 1120px);
  overflow: visible;
  word-break: normal;
}

.homePage .form > .formContent {
  gap: clamp(54px, 7vw, 140px) !important;
}

.homePage .form .formWrap,
.homePage .form .formContent,
.homePage .form .formContent .formWrap .formItem input,
.homePage .form .formContent .formWrap .formItem textarea {
  min-width: 0;
}

.homePage .form input,
.homePage .form textarea,
.homePage .form .actionButton {
  pointer-events: auto;
  position: relative;
  z-index: 3;
}

.homePage .form .actionButtonWrap {
  margin-bottom: clamp(42px, 3.5vw, 78px);
}

.javexWrap .form,
.levelSoundWrap .form,
.sevenForceWrap .form,
.sovtonWrap .form,
.blackOnWhiteWrap .form {
  --cc-footer-artwork-height: clamp(420px, 34vw, 760px);
  padding-bottom: clamp(420px, 34vw, 760px) !important;
}

.javexWrap .form::before,
.levelSoundWrap .form::before,
.sevenForceWrap .form::before,
.sovtonWrap .form::before,
.blackOnWhiteWrap .form::before {
  background: var(--cc-footer-surface);
  bottom: 0;
  content: "";
  height: var(--cc-footer-artwork-height);
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 0;
}

.javexWrap .form::after,
.levelSoundWrap .form::after,
.sevenForceWrap .form::after,
.sovtonWrap .form::after,
.blackOnWhiteWrap .form::after {
  background-position: center bottom;
  z-index: 1;
}

.javexWrap .form > *,
.levelSoundWrap .form > *,
.sevenForceWrap .form > *,
.sovtonWrap .form > *,
.blackOnWhiteWrap .form > * {
  position: relative;
  z-index: 2;
}

.javexWrap .form .formTitle,
.levelSoundWrap .form .formTitle,
.sevenForceWrap .form .formTitle,
.sovtonWrap .form .formTitle,
.blackOnWhiteWrap .form .formTitle {
  font-size: clamp(42px, 5vw, 86px) !important;
  line-height: 1.12 !important;
  max-width: min(100%, 1120px);
  overflow: visible;
}

.javexWrap .form .formContent,
.levelSoundWrap .form .formContent,
.sevenForceWrap .form .formContent,
.sovtonWrap .form .formContent,
.blackOnWhiteWrap .form .formContent {
  gap: clamp(54px, 7vw, 140px) !important;
  max-width: var(--cc-footer-content-max);
}

.javexWrap .form input,
.javexWrap .form textarea,
.javexWrap .form .actionButton,
.levelSoundWrap .form input,
.levelSoundWrap .form textarea,
.levelSoundWrap .form .actionButton,
.sevenForceWrap .form input,
.sevenForceWrap .form textarea,
.sevenForceWrap .form .actionButton,
.sovtonWrap .form input,
.sovtonWrap .form textarea,
.sovtonWrap .form .actionButton,
.blackOnWhiteWrap .form input,
.blackOnWhiteWrap .form textarea,
.blackOnWhiteWrap .form .actionButton {
  pointer-events: auto;
  position: relative;
  z-index: 3;
}

.hancu-cloudcrew-footer.cc-footer-artwork {
  --cc-footer-artwork-height: clamp(340px, 24vw, 620px);
  --cc-footer-artwork-size: clamp(1460px, 88vw, 3200px);
  background-image: none !important;
  min-height: var(--cc-footer-artwork-height) !important;
}

.hancu-cloudcrew-footer.cc-footer-artwork::before,
.hancu-cloudcrew-footer.cc-footer-artwork::after {
  display: block;
}

@media (max-width: 1023px) {
  :root {
    --cc-contact-side-pad: max(30px, env(safe-area-inset-left));
    --cc-footer-artwork-image: url("/_nuxt/img/footerBackground-mobile-860.webp");
    --cc-footer-artwork-height: clamp(145px, 40vw, 235px);
    --cc-footer-artwork-size: clamp(470px, 132vw, 660px);
  }

  .homePage .form,
  .javexWrap .form,
  .levelSoundWrap .form,
  .sevenForceWrap .form,
  .sovtonWrap .form,
  .blackOnWhiteWrap .form {
    --cc-footer-artwork-height: clamp(145px, 40vw, 235px);
    --cc-footer-artwork-size: clamp(470px, 132vw, 660px);
    padding-bottom: clamp(150px, 42vw, 235px) !important;
  }

  .homePage .form {
    padding-left: max(30px, env(safe-area-inset-left)) !important;
    padding-right: max(30px, env(safe-area-inset-right)) !important;
    padding-top: clamp(58px, 14vw, 86px) !important;
  }

  .homePage .form > .formTitle,
  .javexWrap .form .formTitle,
  .levelSoundWrap .form .formTitle,
  .sevenForceWrap .form .formTitle,
  .sovtonWrap .form .formTitle,
  .blackOnWhiteWrap .form .formTitle {
    font-size: clamp(24px, 7.6vw, 34px) !important;
    line-height: 1.12 !important;
    margin-bottom: 0 !important;
    max-width: 100%;
  }

  .homePage .form > .formContent,
  .javexWrap .form .formContent,
  .levelSoundWrap .form .formContent,
  .sevenForceWrap .form .formContent,
  .sovtonWrap .form .formContent,
  .blackOnWhiteWrap .form .formContent {
    gap: 0 !important;
    max-width: 100%;
  }

  .homePage .form .actionButtonWrap,
  .javexWrap .form .actionButtonWrap,
  .levelSoundWrap .form .actionButtonWrap,
  .sevenForceWrap .form .actionButtonWrap,
  .sovtonWrap .form .actionButtonWrap,
  .blackOnWhiteWrap .form .actionButtonWrap {
    margin-bottom: clamp(20px, 6vw, 34px);
  }

  .homePage .form .actionButtonWrap {
    justify-content: center !important;
    margin-bottom: clamp(20px, 6vw, 34px);
  }

  .homePage .form .actionButton {
    margin-left: 0 !important;
    padding-left: 34px !important;
    padding-right: 34px !important;
  }

  .hancu-cloudcrew-footer.cc-footer-artwork {
    --cc-footer-artwork-height: clamp(150px, 42vw, 245px);
    --cc-footer-artwork-size: clamp(470px, 132vw, 660px);
    min-height: var(--cc-footer-artwork-height) !important;
  }
}

/* mobile rescue v2: compact contact forms and branded footer artwork. */
@media (max-width: 768px) {
  .homePage .form .formContent,
  .javexWrap .form .formContent,
  .levelSoundWrap .form .formContent,
  .sevenForceWrap .form .formContent,
  .sovtonWrap .form .formContent,
  .blackOnWhiteWrap .form .formContent {
    margin-top: clamp(30px, 8vw, 42px) !important;
  }

  .homePage .form .formMobileDesc,
  .javexWrap .form .formMobileDesc,
  .levelSoundWrap .form .formMobileDesc,
  .sevenForceWrap .form .formMobileDesc,
  .sovtonWrap .form .formMobileDesc,
  .blackOnWhiteWrap .form .formMobileDesc {
    margin-top: 24px !important;
  }

  .homePage .form .formMobileLinks,
  .javexWrap .form .formMobileLinks,
  .levelSoundWrap .form .formMobileLinks,
  .sevenForceWrap .form .formMobileLinks,
  .sovtonWrap .form .formMobileLinks,
  .blackOnWhiteWrap .form .formMobileLinks {
    margin-top: 36px !important;
  }

  .homePage .form .formContent .formWrap .formItem p,
  .javexWrap .form .formContent .formWrap .formItem p,
  .levelSoundWrap .form .formContent .formWrap .formItem p,
  .sevenForceWrap .form .formContent .formWrap .formItem p,
  .sovtonWrap .form .formContent .formWrap .formItem p,
  .blackOnWhiteWrap .form .formContent .formWrap .formItem p {
    font-size: 15px !important;
    line-height: 22px !important;
  }

  .homePage .form .formContent .formWrap .formItem input,
  .homePage .form .formContent .formWrap .formItem textarea,
  .javexWrap .form .formContent .formWrap .formItem input,
  .javexWrap .form .formContent .formWrap .formItem textarea,
  .levelSoundWrap .form .formContent .formWrap .formItem input,
  .levelSoundWrap .form .formContent .formWrap .formItem textarea,
  .sevenForceWrap .form .formContent .formWrap .formItem input,
  .sevenForceWrap .form .formContent .formWrap .formItem textarea,
  .sovtonWrap .form .formContent .formWrap .formItem input,
  .sovtonWrap .form .formContent .formWrap .formItem textarea,
  .blackOnWhiteWrap .form .formContent .formWrap .formItem input,
  .blackOnWhiteWrap .form .formContent .formWrap .formItem textarea {
    font-size: 16px !important;
    line-height: 22px !important;
    margin-bottom: 22px !important;
    min-height: 44px;
    padding: 10px 0 12px !important;
  }

  .homePage .form .formContent .formWrap .formItem textarea,
  .javexWrap .form .formContent .formWrap .formItem textarea,
  .levelSoundWrap .form .formContent .formWrap .formItem textarea,
  .sevenForceWrap .form .formContent .formWrap .formItem textarea,
  .sovtonWrap .form .formContent .formWrap .formItem textarea,
  .blackOnWhiteWrap .form .formContent .formWrap .formItem textarea {
    min-height: 68px;
  }

  .homePage .form .actionButton,
  .javexWrap .form .actionButton,
  .levelSoundWrap .form .actionButton,
  .sevenForceWrap .form .actionButton,
  .sovtonWrap .form .actionButton,
  .blackOnWhiteWrap .form .actionButton {
    margin-left: 0 !important;
    min-height: 46px;
    padding: 13px 30px !important;
    white-space: nowrap;
  }

  .homePage .form .formMobileLinks .socialsWrapLinks,
  .javexWrap .form .formMobileLinks .socialsWrapLinks,
  .levelSoundWrap .form .formMobileLinks .socialsWrapLinks,
  .sevenForceWrap .form .formMobileLinks .socialsWrapLinks,
  .sovtonWrap .form .formMobileLinks .socialsWrapLinks,
  .blackOnWhiteWrap .form .formMobileLinks .socialsWrapLinks {
    gap: 0 14px;
  }

  .homePage .form .formMobileLinks .socialsWrapLinks a,
  .javexWrap .form .formMobileLinks .socialsWrapLinks a,
  .levelSoundWrap .form .formMobileLinks .socialsWrapLinks a,
  .sevenForceWrap .form .formMobileLinks .socialsWrapLinks a,
  .sovtonWrap .form .formMobileLinks .socialsWrapLinks a,
  .blackOnWhiteWrap .form .formMobileLinks .socialsWrapLinks a {
    width: auto !important;
  }
}

@media (min-width: 1800px) {
  .homePage .form,
  .javexWrap .form,
  .levelSoundWrap .form,
  .sevenForceWrap .form,
  .sovtonWrap .form,
  .blackOnWhiteWrap .form {
    --cc-footer-artwork-height: clamp(390px, 23vw, 700px);
    padding-bottom: clamp(360px, 22vw, 650px) !important;
  }
}

@media (min-width: 3200px) {
  .homePage .form,
  .javexWrap .form,
  .levelSoundWrap .form,
  .sevenForceWrap .form,
  .sovtonWrap .form,
  .blackOnWhiteWrap .form,
  .hancu-cloudcrew-footer.cc-footer-artwork {
    --cc-footer-artwork-size: clamp(2600px, 72vw, 3400px);
  }
}

/* mobile production v4: compact contact form and contain the branded artwork. */
@media (max-width: 768px) {
  :root {
    --cc-footer-artwork-height: clamp(170px, 52vw, 200px);
    --cc-footer-artwork-size: min(82vw, 350px);
  }

  .homePage .form,
  .javexWrap .form,
  .levelSoundWrap .form,
  .sevenForceWrap .form,
  .sovtonWrap .form,
  .blackOnWhiteWrap .form {
    --cc-footer-artwork-height: clamp(170px, 52vw, 200px);
    --cc-footer-artwork-size: min(82vw, 350px);
    padding-bottom: calc(var(--cc-footer-artwork-height) + 4px) !important;
  }

  .homePage .form {
    padding-top: clamp(42px, 10vw, 58px) !important;
  }

  .homePage .form::after,
  .javexWrap .form::after,
  .levelSoundWrap .form::after,
  .sevenForceWrap .form::after,
  .sovtonWrap .form::after,
  .blackOnWhiteWrap .form::after,
  .cc-footer-artwork::after,
  .hancu-cloudcrew-footer.cc-footer-artwork::after {
    background-position: center bottom !important;
    background-size: var(--cc-footer-artwork-size) auto !important;
    height: var(--cc-footer-artwork-height) !important;
  }

  .homePage .form .formContent,
  .javexWrap .form .formContent,
  .levelSoundWrap .form .formContent,
  .sevenForceWrap .form .formContent,
  .sovtonWrap .form .formContent,
  .blackOnWhiteWrap .form .formContent {
    margin-top: 24px !important;
  }

  .homePage .form .formContent .formWrap,
  .javexWrap .form .formContent .formWrap,
  .levelSoundWrap .form .formContent .formWrap,
  .sevenForceWrap .form .formContent .formWrap,
  .sovtonWrap .form .formContent .formWrap,
  .blackOnWhiteWrap .form .formContent .formWrap {
    gap: 0 !important;
  }

  .homePage .form .formContent .formWrap .formItem,
  .javexWrap .form .formContent .formWrap .formItem,
  .levelSoundWrap .form .formContent .formWrap .formItem,
  .sevenForceWrap .form .formContent .formWrap .formItem,
  .sovtonWrap .form .formContent .formWrap .formItem,
  .blackOnWhiteWrap .form .formContent .formWrap .formItem {
    margin-bottom: 14px !important;
  }

  .homePage .form .formMobileDesc,
  .javexWrap .form .formMobileDesc,
  .levelSoundWrap .form .formMobileDesc,
  .sevenForceWrap .form .formMobileDesc,
  .sovtonWrap .form .formMobileDesc,
  .blackOnWhiteWrap .form .formMobileDesc {
    margin-top: 18px !important;
  }

  .homePage .form .formMobileLinks,
  .javexWrap .form .formMobileLinks,
  .levelSoundWrap .form .formMobileLinks,
  .sevenForceWrap .form .formMobileLinks,
  .sovtonWrap .form .formMobileLinks,
  .blackOnWhiteWrap .form .formMobileLinks {
    margin-top: 24px !important;
  }

  .homePage .form .formContent .formWrap .formItem input,
  .homePage .form .formContent .formWrap .formItem textarea,
  .javexWrap .form .formContent .formWrap .formItem input,
  .javexWrap .form .formContent .formWrap .formItem textarea,
  .levelSoundWrap .form .formContent .formWrap .formItem input,
  .levelSoundWrap .form .formContent .formWrap .formItem textarea,
  .sevenForceWrap .form .formContent .formWrap .formItem input,
  .sevenForceWrap .form .formContent .formWrap .formItem textarea,
  .sovtonWrap .form .formContent .formWrap .formItem input,
  .sovtonWrap .form .formContent .formWrap .formItem textarea,
  .blackOnWhiteWrap .form .formContent .formWrap .formItem input,
  .blackOnWhiteWrap .form .formContent .formWrap .formItem textarea {
    font-size: 15px !important;
    line-height: 20px !important;
    margin-bottom: 10px !important;
    min-height: 38px !important;
    padding: 8px 0 10px !important;
  }

  .homePage .form .formContent .formWrap .formItem textarea,
  .javexWrap .form .formContent .formWrap .formItem textarea,
  .levelSoundWrap .form .formContent .formWrap .formItem textarea,
  .sevenForceWrap .form .formContent .formWrap .formItem textarea,
  .sovtonWrap .form .formContent .formWrap .formItem textarea,
  .blackOnWhiteWrap .form .formContent .formWrap .formItem textarea {
    min-height: 58px !important;
  }

  .homePage .form .actionButton,
  .javexWrap .form .actionButton,
  .levelSoundWrap .form .actionButton,
  .sevenForceWrap .form .actionButton,
  .sovtonWrap .form .actionButton,
  .blackOnWhiteWrap .form .actionButton {
    min-height: 42px !important;
    padding: 11px 26px !important;
  }

  .hancu-cloudcrew-footer.cc-footer-artwork {
    --cc-footer-artwork-height: clamp(170px, 52vw, 200px);
    --cc-footer-artwork-size: min(82vw, 350px);
    min-height: var(--cc-footer-artwork-height) !important;
  }
}

@media (max-width: 360px) {
  :root {
    --cc-footer-artwork-height: clamp(166px, 52vw, 188px);
    --cc-footer-artwork-size: 82vw;
  }
}
