.ai-contact-page {
  position: relative;
  padding: 112px 0 0;
  overflow: hidden;
  background: #f4f5f9;
}

.ai-contact-page::before {
  position: absolute;
  inset: 0;
  opacity: .42;
  background-image:
    linear-gradient(rgba(19, 29, 70, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 29, 70, .055) 1px, transparent 1px);
  background-size: 96px 96px;
  content: "";
  pointer-events: none;
}

.ai-contact-page > .container {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 64px), 1320px);
  max-width: none;
}

.ai-contact-page .contactbox {
  overflow: hidden;
  border: 1px solid #d9dfeb;
  border-top: 4px solid #6d7ee5;
  border-radius: 0;
  background: var(--ai-color-white);
  box-shadow: 0 24px 70px rgba(14, 22, 55, .1) !important;
}

.ai-contact-page .contactbox > .row {
  --bs-gutter-x: 0;
  align-items: stretch;
  margin: 0;
}

.ai-contact-page .contactbox > .row > [class*="col-"] {
  padding: 0;
}

.ai-contact-page .contactleft,
.ai-contact-page .contactright {
  height: 100%;
  min-height: 690px;
}

.ai-contact-page .contactleft {
  padding: 72px clamp(42px, 5vw, 78px) 68px;
}

.ai-contact-page__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px !important;
  color: #5265d9;
  font-size: var(--ai-type-label-size) !important;
  font-weight: 700;
  line-height: 1.4 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ai-contact-page__eyebrow::before {
  width: 34px;
  height: 2px;
  background: currentColor;
  content: "";
}

.ai-contact-page .contactleft > h2 {
  max-width: 680px;
  margin: 0;
  color: var(--ai-color-ink);
  font-family: var(--ai-font-display);
  font-size: clamp(42px, 4.1vw, 62px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.045em;
}

.ai-contact-page__intro {
  max-width: 680px;
  margin: 24px 0 42px !important;
  color: #59647b;
  font-size: var(--ai-type-body-size) !important;
  line-height: var(--ai-type-copy-leading) !important;
}

.ai-contact-page__form > h4,
.ai-contact-page__form > p {
  display: none;
}

.ai-contact-page .wpcf7-form > .row {
  --bs-gutter-x: 18px;
}

.ai-contact-page .wpcf7-form p,
.ai-contact-page .form-group {
  margin: 0;
}

.ai-contact-page .form-group {
  margin-bottom: 18px;
}

.ai-contact-page .contactleft .form-control {
  width: 100%;
  height: 58px;
  padding: 0 18px;
  border: 1px solid #d5dbea;
  border-radius: 0;
  outline: 0;
  background: #f7f8fb;
  color: var(--ai-color-ink);
  font-family: var(--ai-font-label);
  font-size: var(--ai-type-label-size);
  box-shadow: none;
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.ai-contact-page .contactleft textarea.form-control {
  min-height: 142px;
  padding-top: 17px;
  resize: vertical;
}

.ai-contact-page .contactleft .form-control::placeholder {
  color: #6c758a;
  opacity: 1;
}

.ai-contact-page .contactleft .form-control:hover {
  border-color: #aeb8d4;
  background: var(--ai-color-white);
}

.ai-contact-page .contactleft .form-control:focus {
  border-color: #6577e3;
  background: var(--ai-color-white);
  box-shadow: 0 0 0 3px rgba(101, 119, 227, .13);
}

.ai-contact-page .contactleft .wpcf7-not-valid {
  border-color: #bd4453;
}

.ai-contact-page .contactleft .wpcf7-not-valid-tip {
  margin-top: 7px;
  color: #a52f40;
  font-size: var(--ai-type-label-size);
}

.ai-contact-page .contactleft .btn {
  min-width: 190px;
  min-height: 54px;
  margin-top: 8px !important;
  padding: 15px 28px;
  border: 1px solid #5366dc;
  border-radius: 0;
  background: #5366dc;
  color: var(--ai-color-white);
  font-family: var(--ai-font-label);
  font-size: var(--ai-type-control-size);
  font-weight: 700;
  letter-spacing: var(--ai-type-label-tracking);
  text-transform: uppercase;
  box-shadow: none;
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.ai-contact-page .contactleft .btn:hover,
.ai-contact-page .contactleft .btn:focus-visible {
  border-color: var(--ai-color-ink);
  background: var(--ai-color-ink);
  color: var(--ai-color-white);
  transform: translateY(-2px);
}

.ai-contact-page .wpcf7-response-output {
  margin: 24px 0 0 !important;
  padding: 14px 16px !important;
  border: 1px solid #cbd3e5 !important;
  color: var(--ai-color-ink);
  font-size: var(--ai-type-label-size);
}

.ai-contact-page .contactright {
  position: relative;
  isolation: isolate;
  padding: 72px clamp(34px, 4vw, 58px) 62px;
  overflow: hidden;
  background: #101735;
  color: var(--ai-color-white);
}

.ai-contact-page .contactright::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 72px 72px;
  content: "";
}

.ai-contact-page .contactright::after {
  position: absolute;
  z-index: -1;
  right: -150px;
  bottom: -170px;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(137, 153, 240, .28);
  border-radius: 50%;
  content: "";
}

.ai-contact-page .contactright > h4 {
  margin: 0 0 18px;
  color: var(--ai-color-white);
  font-family: var(--ai-font-display);
  font-size: clamp(38px, 3.2vw, 50px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.035em;
}

.ai-contact-page .contactright > p {
  max-width: 440px;
  margin: 0 0 46px;
  color: rgba(255, 255, 255, .68);
  font-size: var(--ai-type-body-size);
  line-height: var(--ai-type-copy-leading);
}

.ai-contact-page .contactright .counter {
  align-items: flex-start;
  margin: 0;
  padding: 23px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .17);
}

.ai-contact-page .contactright .counter:first-of-type {
  border-top: 1px solid rgba(255, 255, 255, .17);
}

.ai-contact-page .contactright .counter-img {
  display: grid;
  width: 46px;
  height: 46px;
  margin: 0 18px 0 0;
  flex: 0 0 46px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 0;
  background: transparent;
  color: #aeb8ff;
  font-size: 16px;
}

.ai-contact-page .contactright .counter-body h5 {
  margin: 2px 0 7px;
  color: #aeb8ff;
  font-family: var(--ai-font-label);
  font-size: var(--ai-type-compact-size);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ai-contact-page .contactright .counter-body h6,
.ai-contact-page .contactright .counter-body h6 a {
  margin: 0;
  color: var(--ai-color-white);
  font-size: var(--ai-type-compact-size);
  font-weight: 400;
  line-height: 1.6;
}

.ai-contact-page .contsocialmedia {
  margin-top: 34px;
}

.ai-contact-page .contsocialmedia ul li {
  margin: 0 8px 0 0;
  border-radius: 0;
}

.ai-contact-page .contsocialmedia ul li a {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 0;
  color: var(--ai-color-white);
  font-size: var(--ai-type-control-size);
  transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}

.ai-contact-page .contsocialmedia ul li:hover a,
.ai-contact-page .contsocialmedia ul li a:focus-visible {
  border-color: var(--ai-color-white);
  background: var(--ai-color-white);
  color: #101735;
}

.ai-contact-page + .map {
  margin: 0;
  padding: 92px 0 0;
  background: #f4f5f9;
  filter: none;
}

.ai-contact-page + .map .maparea {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background: #dfe3ec;
}

.ai-contact-page + .map iframe {
  display: block;
  height: 500px;
  filter: grayscale(.65) contrast(.95);
}

@media (max-width: 991.98px) {
  .ai-contact-page {
    padding-top: 76px;
  }

  .ai-contact-page > .container {
    width: min(calc(100% - 40px), 760px);
  }

  .ai-contact-page .contactleft,
  .ai-contact-page .contactright {
    min-height: 0;
  }

  .ai-contact-page .contactleft {
    padding: 54px 42px 58px;
  }

  .ai-contact-page .contactright {
    padding: 54px 42px 58px;
  }

  .ai-contact-page + .map {
    padding-top: 72px;
  }
}

@media (max-width: 575.98px) {
  .ai-contact-page {
    padding-top: 54px;
  }

  .ai-contact-page > .container {
    width: calc(100% - 24px);
  }

  .ai-contact-page .contactleft,
  .ai-contact-page .contactright {
    padding: 42px 24px 46px;
  }

  .ai-contact-page .contactleft > h2 {
    font-size: clamp(37px, 11vw, 48px);
  }

  .ai-contact-page__intro {
    margin-bottom: 32px !important;
  }

  .ai-contact-page .wpcf7-form > .row {
    --bs-gutter-x: 0;
  }

  .ai-contact-page .contactleft .btn {
    width: 100%;
  }

  .ai-contact-page + .map {
    padding-top: 54px;
  }

  .ai-contact-page + .map iframe {
    height: 380px;
  }
}
