/* Additions for the WordPress version (the build does not overwrite this folder) */

/* ---------- thank-you card shown after an enquiry is sent ---------- */
.form[hidden] { display: none !important; }

.form-thanks {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(32px, 4vw, 52px) clamp(26px, 4vw, 48px);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(42, 43, 94, .12);
  overflow: hidden;
  outline: none;
  animation: thanks-in .6s cubic-bezier(.2, .8, .2, 1) both;
}
/* soft brand wave in the corner */
.form-thanks::before {
  content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(241, 106, 69, .14), rgba(241, 106, 69, 0) 70%);
  pointer-events: none;
}
.form-thanks__icon { display: block; width: 76px; height: 76px; margin: 0 0 22px; }
.form-thanks__icon svg { width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.form-thanks__icon circle {
  fill: var(--orange); stroke: var(--orange); stroke-width: 2;
  transform-origin: center; animation: thanks-pop .5s .1s cubic-bezier(.3, 1.6, .5, 1) both;
}
.form-thanks__icon path {
  stroke: #fff; stroke-width: 4.5;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: thanks-tick .45s .45s ease-out forwards;
}
.form-thanks__eyebrow {
  margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange);
}
.form-thanks__title {
  margin: 0 0 12px; font-size: clamp(30px, 3vw, 42px); line-height: 1.1; color: var(--blue);
}
.form-thanks__text { margin: 0 0 28px; max-width: 30em; font-size: 19px; line-height: 1.5; color: var(--ink); }
.form-thanks__again { margin: 0; }

/* inside the pop-up form */
.lightbox .form-thanks { box-shadow: none; padding: 40px clamp(20px, 4vw, 44px); background: transparent; align-self: stretch; justify-content: center; min-height: 340px; }
.lightbox .form-thanks::before { display: none; }

@keyframes thanks-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes thanks-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes thanks-tick { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .form-thanks, .form-thanks__icon circle { animation: none; }
  .form-thanks__icon path { animation: none; stroke-dashoffset: 0; }
}
