/* Contact form send animation */
.cs-ready { position: relative; }
.cs-ready .w-form-done, .cs-ready .w-form-fail { display: none !important; }   /* replaced by the animated card */
.cs-stage { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.cs-stage > * { pointer-events: auto; }

.cs-ready .input-field { transition: transform .45s cubic-bezier(.6, -0.3, .7, .6), opacity .35s ease; }
.cs-ready .input-field.cs-fold { transform: translateY(40px) scale(.85, .4); opacity: 0; }
.cs-ready .contact-heading-wrapper { transition: opacity .5s ease, transform .5s ease; }
.cs-ready .contact-heading-wrapper.cs-dim { opacity: .15; transform: scale(.98); }
.cs-hide { visibility: hidden; }

.cs-ghost {
  position: absolute; border-radius: 90px; background: #181b2e; color: #fff;
  display: grid; place-items: center; overflow: hidden;
  font: 500 1.125rem Outfit, sans-serif;
  transition: left .45s cubic-bezier(.3, 1.4, .5, 1), width .45s cubic-bezier(.3, 1.4, .5, 1), border-radius .45s, transform .3s;
}
.cs-ghost > span { grid-area: 1 / 1; transition: opacity .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.cs-ghost-plane { opacity: 0; transform: scale(.3) rotate(-30deg); width: 30px; height: 30px; }
.cs-ghost-plane svg { width: 100%; height: 100%; }
.cs-ghost.cs-circle { border-radius: 50%; background: #fe5621; }
.cs-ghost.cs-circle .cs-ghost-label { opacity: 0; transform: scale(.6); }
.cs-ghost.cs-circle .cs-ghost-plane { opacity: 1; transform: none; }
.cs-ghost.cs-launch { transform: scale(.2); opacity: 0; transition: transform .35s ease-in, opacity .3s ease-in; }

.cs-plane {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; z-index: 2;
  offset-rotate: auto 45deg; offset-distance: 0%;
  filter: drop-shadow(0 6px 10px rgba(24, 27, 46, .2));
}
.cs-plane svg { width: 100%; height: 100%; display: block; }
.cs-plane.cs-fly { offset-distance: 100%; transition: offset-distance 1.45s cubic-bezier(.45, .05, .55, .95); }
.cs-dot { position: absolute; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #181b2e; opacity: .35; animation: cs-fade 1.4s ease-out forwards; }
@keyframes cs-fade { to { opacity: 0; transform: scale(.3); } }

.cs-conf {
  position: absolute; left: 50%; top: 45%; width: 9px; height: 6px; margin: -3px -4.5px; border-radius: 2px;
  font-style: normal; font-size: 18px; line-height: 6px; text-align: center;
  animation: cs-conf 1.25s cubic-bezier(.15, .7, .3, 1) forwards;
}
@keyframes cs-conf {
  0% { transform: translate(0, 0) rotate(0) scale(.4); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 120px)) rotate(var(--rot)) scale(1); opacity: 0; }
}

.cs-card {
  position: absolute; left: 50%; top: 50%; width: min(440px, 92%);
  transform: translate(-50%, -40%) scale(.9); opacity: 0;
  background: #fff; border-radius: 28px; padding: 36px 32px 32px; text-align: center;
  box-shadow: 0 30px 70px -30px rgba(24, 27, 46, .35);
  transition: transform .55s cubic-bezier(.3, 1.5, .5, 1), opacity .3s ease;
}
.cs-card.cs-show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.cs-card h3 { margin: 18px 0 8px; font: 500 2rem/1.15 Outfit, sans-serif; color: #181b2e; }
.cs-card p { margin: 0 auto 22px; max-width: 32ch; font-size: 1rem; line-height: 1.55; color: #3a3d53; }
.cs-card strong { color: #181b2e; white-space: nowrap; }
@media (max-width: 420px) { .cs-card strong { white-space: normal; overflow-wrap: anywhere; } }
.cs-check { width: 76px; height: 76px; fill: none; stroke: #fe5621; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.cs-check circle { stroke-dasharray: 190; stroke-dashoffset: 190; animation: cs-draw .6s .15s ease-out forwards; }
.cs-check path { stroke-dasharray: 50; stroke-dashoffset: 50; animation: cs-draw .4s .65s cubic-bezier(.3, 1.4, .5, 1) forwards; }
.cs-card-fail .cs-check { stroke: #181b2e; }
@keyframes cs-draw { to { stroke-dashoffset: 0; } }
.cs-again {
  border: 0; cursor: pointer; background: #181b2e; color: #fff; border-radius: 90px; padding: 12px 30px;
  font: 500 1.0625rem Outfit, sans-serif; transition: background-color .25s, transform .25s;
}
.cs-again:hover { background: #fe5621; transform: translateY(-2px); }
.cs-again:focus-visible { outline: 2px solid #fe5621; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .cs-card { transition: opacity .3s ease; transform: translate(-50%, -50%); }
  .cs-check circle, .cs-check path { animation: none; stroke-dashoffset: 0; }
}