/* Connect Zone Contact Us — Figma node 1273:2547 */
.cz-contact {
  --cz-black: #191d23;
  --cz-blue: #2667ff;
  --cz-navy: #00123d;
  --cz-muted: #423e3b;
  --cz-yellow: #e59e00;
  --cz-orange: #fea82f;
  --cz-placeholder: #97a3b4;
  --cz-border: rgba(151, 163, 180, 0.3);
  font-family: Poppins, Inter, sans-serif;
  color: var(--cz-black);
}

.cz-contact *,
.cz-contact *::before,
.cz-contact *::after {
  box-sizing: border-box;
}

.cz-contact img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Hero */
.cz-contact__hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 560px);
  gap: 100px;
  align-items: center;
  min-height: 757px;
  padding: 100px 72px;
  overflow: hidden;
  background-color: #00123d;
  background-image: url("/wp-content/uploads/figma/contact-us/hero-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cz-contact__hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}


.cz-contact__info,
.cz-contact__card {
  position: relative;
  z-index: 2;
}

.cz-contact__info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  max-width: 620px;
}

.cz-contact__title {
  margin: 0;
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
}

.cz-contact__accent {
  width: 98px;
  height: 5px;
  background: linear-gradient(90deg, #ffe065 -0.6%, #fea82f 99.92%);
  border: 0;
}

.cz-contact__info-label {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  color: #fff;
}

.cz-contact__rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.cz-contact__row {
  display: flex;
  gap: 15px;
  align-items: center;
}

.cz-contact__icon {
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  object-fit: contain;
}

.cz-contact__row-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  color: #fff;
}

.cz-contact__row-text span {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
}

.cz-contact__row-text strong,
.cz-contact__row-text a {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  text-decoration: none;
}

.cz-contact__row-text a:hover {
  text-decoration: underline;
}

/* Form card */
.cz-contact__card {
  width: 100%;
  max-width: 560px;
  justify-self: end;
  background: #fff;
  border-radius: 16px;
  padding: 32px 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

.cz-contact__card-head {
  text-align: center;
  margin-bottom: 32px;
}

.cz-contact__card-head h2 {
  margin: 0 0 8px;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--cz-black);
}

.cz-contact__card-head p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cz-muted);
}

.cz-contact__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cz-contact__form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.cz-contact__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  width: 100%;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--cz-black);
}

.cz-contact__field input,
.cz-contact__field textarea {
  width: 100%;
  border: 1px solid var(--cz-border);
  border-radius: 4px;
  background: #fff;
  color: var(--cz-black);
  font-family: Poppins, Inter, sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.5px;
  padding: 10px 12px;
  outline: none;
}

.cz-contact__field input {
  height: 40px;
}

.cz-contact__field textarea {
  min-height: 88px;
  resize: vertical;
  padding: 10px 16px;
}

.cz-contact__field input::placeholder,
.cz-contact__field textarea::placeholder {
  color: var(--cz-placeholder);
}

.cz-contact__field input:focus,
.cz-contact__field textarea:focus {
  border-color: var(--cz-blue);
}

.cz-contact__honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}

.cz-contact__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 24px;
  border: 0;
  border-radius: 4px;
  background: var(--cz-blue);
  color: #fff;
  font-family: Poppins, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.2s ease;
}

.cz-contact__submit:hover {
  background: #1a54e0;
}

.cz-contact__status {
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: var(--cz-muted);
}

.cz-contact__status.is-success {
  color: #0a7a3e;
}

.cz-contact__status.is-error {
  color: #b42318;
}

/* Yellow CTA */
.cz-contact__cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.9fr);
  gap: 24px;
  align-items: center;
  min-height: 272px;
  padding: 40px 72px;
  overflow: hidden;
  background: linear-gradient(90deg, #ffe065 -0.6%, #fea82f 99.92%);
}

.cz-contact__cta-copy {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

.cz-contact__cta-copy h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--cz-black);
}

.cz-contact__cta-copy p {
  margin: 0 0 24px;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cz-black);
}

.cz-contact__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 24px;
  border-radius: 4px;
  background: var(--cz-blue);
  color: #fff !important;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none !important;
}

.cz-contact__cta-btn:hover {
  background: #1a54e0;
  color: #fff !important;
}

.cz-contact__cta-art {
  position: relative;
  z-index: 1;
  justify-self: end;
  align-self: end;
  width: min(620px, 100%);
  margin: 0 -72px -40px 0;
  pointer-events: none;
}

.cz-contact__cta-art img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1100px) {
  .cz-contact__hero,
  .cz-contact__cta {
    padding-left: 32px;
    padding-right: 32px;
    gap: 48px;
  }

  .cz-contact__hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .cz-contact__card {
    justify-self: stretch;
    max-width: none;
  }

  .cz-contact__cta-art {
    margin-right: -32px;
  }
}

@media (max-width: 700px) {
  .cz-contact__form-grid {
    grid-template-columns: 1fr;
  }

  .cz-contact__card-head h2 {
    font-size: 32px;
  }

  .cz-contact__info-label {
    font-size: 22px;
  }

  .cz-contact__cta {
    grid-template-columns: 1fr;
    padding-bottom: 0;
  }

  .cz-contact__cta-art {
    justify-self: center;
    width: min(480px, 110%);
    margin: 8px -16px 0;
  }
}

/* ── Submission states ──────────────────────────────────────────────────────
   The card swaps between the form and its confirmation in place. JS pins the
   current height, swaps the panes, then transitions to the new height so the
   card never jumps. Every transform here is opt-out under reduced motion. */

.cz-contact__panes {
  position: relative;
  transition: height 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Only clip while a height transition is in flight — otherwise this would
   crop focus rings on the fields. Centring during the swap keeps the incoming
   pane in the middle of the collapsing card instead of stranded at its top. */
.cz-contact__panes.is-animating {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cz-contact__pane[hidden] {
  display: none;
}

.cz-contact__pane--form {
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.cz-contact__pane--form.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
}

/* Sending */

.cz-contact__submit {
  position: relative;
  gap: 10px;
}

.cz-contact__submit[disabled] {
  cursor: progress;
  background: #5b86ff;
}

.cz-contact__spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cz-spin 620ms linear infinite;
}

.cz-contact__submit.is-sending .cz-contact__spinner {
  display: block;
}

@keyframes cz-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Field-level validation */

.cz-contact__field-error {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: #c0392b;
}

.cz-contact__field input[aria-invalid="true"],
.cz-contact__field textarea[aria-invalid="true"] {
  border-color: #c0392b;
}

.cz-contact__field input[aria-invalid="true"]:focus,
.cz-contact__field textarea[aria-invalid="true"]:focus {
  border-color: #c0392b;
}

.cz-contact__status.is-error {
  color: #c0392b;
}

.cz-contact__form.is-rejected {
  animation: cz-nudge 300ms ease;
}

@keyframes cz-nudge {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

/* Confirmation */

.cz-contact__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 8px 8px;
}

.cz-contact__check {
  width: 96px;
  height: 96px;
  overflow: visible;
}

.cz-contact__check-halo {
  transform-origin: 48px 48px;
  opacity: 0;
}

.cz-contact__check-ring {
  stroke-dasharray: 271;
  stroke-dashoffset: 271;
  transform: rotate(-90deg);
  transform-origin: 48px 48px;
}

.cz-contact__check-disc {
  transform: scale(0);
  transform-origin: 48px 48px;
}

.cz-contact__check-mark {
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
}

.cz-contact__done-title {
  margin: 20px 0 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--cz-black);
  outline: none;
}

.cz-contact__done-title:focus-visible {
  outline: 2px solid var(--cz-blue);
  outline-offset: 4px;
  border-radius: 4px;
}

.cz-contact__done-copy {
  margin: 10px 0 0;
  max-width: 38ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cz-muted);
}

.cz-contact__done-ref {
  margin: 14px 0 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cz-placeholder);
}

.cz-contact__again {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  border: 1px solid var(--cz-border);
  border-radius: 4px;
  background: #fff;
  color: var(--cz-blue);
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.cz-contact__again:hover {
  border-color: var(--cz-blue);
  background: rgba(38, 103, 255, 0.06);
}

.cz-contact__again:focus-visible {
  outline: 2px solid var(--cz-blue);
  outline-offset: 2px;
}

/* Entrance choreography — the mark resolves, then the words arrive. */

.cz-contact__pane--done.is-entering .cz-contact__check-halo {
  animation: cz-halo 900ms cubic-bezier(0.22, 1, 0.36, 1) 160ms both;
}

.cz-contact__pane--done.is-entering .cz-contact__check-ring {
  animation: cz-draw-ring 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cz-contact__pane--done.is-entering .cz-contact__check-disc {
  animation: cz-pop 440ms cubic-bezier(0.34, 1.56, 0.64, 1) 160ms both;
}

.cz-contact__pane--done.is-entering .cz-contact__check-mark {
  animation: cz-draw-mark 320ms cubic-bezier(0.65, 0, 0.35, 1) 440ms both;
}

.cz-contact__pane--done.is-entering .cz-contact__done-title {
  animation: cz-rise 460ms cubic-bezier(0.22, 1, 0.36, 1) 500ms both;
}

.cz-contact__pane--done.is-entering .cz-contact__done-copy {
  animation: cz-rise 460ms cubic-bezier(0.22, 1, 0.36, 1) 580ms both;
}

.cz-contact__pane--done.is-entering .cz-contact__done-ref {
  animation: cz-rise 460ms cubic-bezier(0.22, 1, 0.36, 1) 640ms both;
}

.cz-contact__pane--done.is-entering .cz-contact__again {
  animation: cz-rise 460ms cubic-bezier(0.22, 1, 0.36, 1) 700ms both;
}

@keyframes cz-draw-ring {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes cz-draw-mark {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes cz-pop {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@keyframes cz-halo {
  0% {
    opacity: 0.55;
    transform: scale(0.6);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

@keyframes cz-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 700px) {
  .cz-contact__done {
    padding: 16px 4px 4px;
  }

  .cz-contact__check {
    width: 80px;
    height: 80px;
  }

  .cz-contact__done-title {
    font-size: 23px;
  }

  .cz-contact__again {
    width: 100%;
  }
}

/* Reduced motion: the state still changes, it just stops moving. */
@media (prefers-reduced-motion: reduce) {
  .cz-contact__panes,
  .cz-contact__pane--form {
    transition: none;
  }

  .cz-contact__pane--form.is-leaving {
    transform: none;
  }

  .cz-contact__form.is-rejected {
    animation: none;
  }

  .cz-contact__spinner {
    animation-duration: 1.6s;
  }

  .cz-contact__check-ring,
  .cz-contact__check-mark {
    stroke-dashoffset: 0;
  }

  .cz-contact__check-disc {
    transform: scale(1);
  }

  .cz-contact__pane--done.is-entering .cz-contact__check-halo,
  .cz-contact__pane--done.is-entering .cz-contact__check-ring,
  .cz-contact__pane--done.is-entering .cz-contact__check-disc,
  .cz-contact__pane--done.is-entering .cz-contact__check-mark,
  .cz-contact__pane--done.is-entering .cz-contact__done-title,
  .cz-contact__pane--done.is-entering .cz-contact__done-copy,
  .cz-contact__pane--done.is-entering .cz-contact__done-ref,
  .cz-contact__pane--done.is-entering .cz-contact__again {
    animation: cz-fade-in 200ms ease both;
  }

  @keyframes cz-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}