/* ==========================================================================
   Contact — "Talk to us." + map + request form
   ========================================================================== */

.page-contact main { background: linear-gradient(90deg, #ffffff 0%, #f5f6ff 100%); }
/* The contact screenshot shows no "Request a demo" button in the header (the form is on this page). */
.page-contact .header__tools .btn--nav { display: none; }

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 64px;
  align-items: start;
  padding-top: 44px;
  padding-bottom: 39px;
}
.contact__title { margin-top: 26px; }
.contact__lead { max-width: 640px; margin-top: 18px; }

/* ---------- Map ---------- */
.map {
  --pin-x: 39.56%;
  --pin-y: 14.98%;
  position: relative;
  display: block;
  margin-top: 38px;
  aspect-ratio: 640 / 300;
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 2px 6px rgba(7, 26, 95, 0.06), 0 10px 30px -10px rgba(7, 26, 95, 0.18);
  transition: box-shadow 0.6s var(--ease-out);
}
.map__img, .map__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__img img { object-fit: cover; transition: transform 1.4s var(--ease-out); transform-origin: var(--pin-x) 30%; }
.map:hover { box-shadow: 0 2px 6px rgba(7, 26, 95, 0.06), 0 20px 44px -14px rgba(53, 90, 240, 0.3); }
.map:hover .map__img img { transform: scale(1.035); }

.map__pin {
  position: absolute;
  left: var(--pin-x);
  top: var(--pin-y);
  z-index: 2;
  width: 62px;
  height: 62px;
  pointer-events: none;
}
.map__pin img {
  position: relative;
  z-index: 1;
  width: 62px;
  height: 62px;
  transform-origin: 31px 57px;
  filter: drop-shadow(0 6px 6px rgba(7, 26, 95, 0.25));
}
/* lytra.js drops [data-reveal] + .is-in once revealed: hide only before the reveal, drop while .is-in */
.map[data-reveal]:not(.is-in) .map__pin img { opacity: 0; transform: translateY(-70px); }
.map.is-in .map__pin img { animation: pin-drop 0.9s var(--ease-out) 0.55s both; }
.map:not([data-reveal]):hover .map__pin img { animation: pin-hop 0.7s var(--ease-out); }
@keyframes pin-drop {
  0% { opacity: 0; transform: translateY(-70px) scaleY(1.05); }
  45% { opacity: 1; transform: translateY(0) scale(1.08, 0.86); }
  65% { transform: translateY(-9px) scale(0.97, 1.03); }
  82% { transform: translateY(0) scale(1.02, 0.97); }
  100% { opacity: 1; transform: none; }
}
@keyframes pin-hop {
  0%, 100% { transform: none; }
  40% { transform: translateY(-8px); }
  70% { transform: translateY(0) scale(1.04, 0.95); }
}
.map__pulse {
  position: absolute;
  left: 31px;
  top: 57px;
  width: 44px;
  height: 18px;
  margin: -9px 0 0 -22px;
  border-radius: 50%;
  background: rgba(52, 90, 239, 0.35);
  box-shadow: 0 0 0 2px rgba(52, 90, 239, 0.35);
  opacity: 0;
  transform: scale(0.2);
}
.map.is-in .map__pulse, .map:not([data-reveal]) .map__pulse { animation: pin-pulse 2.4s var(--ease-out) 1.3s infinite; }
@keyframes pin-pulse {
  0% { opacity: 0.9; transform: scale(0.2); }
  70% { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}
.map__cta {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px -6px rgba(7, 26, 95, 0.35);
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s, transform 0.5s var(--ease-out);
}
.map__cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.map:hover .map__cta, .map:focus-visible .map__cta { opacity: 1; transform: none; }

/* ---------- Office ---------- */
.office { margin-top: 42px; font-style: normal; color: var(--navy); }
.office__brand { font-size: 14px; line-height: 18px; font-weight: 700; }
.office__city { font-size: 20px; line-height: 26px; font-weight: 700; }
.office__addr { margin-top: 24px; font-size: 20px; line-height: 32px; }
.office__contact { display: grid; grid-template-columns: 195px auto; margin-top: 24px; font-size: 20px; line-height: 32px; }
.office__label { display: block; }
.office a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: color 0.3s, background-size 0.5s var(--ease-out); }
.office a:hover { color: var(--blue); background-size: 100% 1.5px; }

/* ---------- Form card ---------- */
.contact-form {
  margin-top: -4px;
  padding: 25px 20px 26px;
  background: #fff;
  border: 1px solid #e5e8ef;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(7, 26, 95, 0.03), 0 12px 32px -12px rgba(7, 26, 95, 0.14);
  transition: height 0.7s var(--ease-in-out), box-shadow 0.6s var(--ease-out);
}
.contact-form:focus-within { box-shadow: 0 2px 4px rgba(7, 26, 95, 0.03), 0 18px 44px -14px rgba(53, 90, 240, 0.25); }
.contact-form__title { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--navy); }
.contact-form .field { margin-top: 14px; }
.contact-form__title + .field { margin-top: 15px; }
.contact-form .field__label { margin-bottom: 11px; }
.contact-form .consent { margin-top: 21px; }
.contact-form .form-submit { margin-top: 21px; }
.contact-form .form-success { padding: 64px 16px 72px; }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1199px) {
  .contact { grid-template-columns: minmax(0, 1fr); padding-top: 39px; padding-bottom: 65px; }
  .contact__title { margin-top: 17px; }
  .contact__lead { max-width: none; margin-top: 15px; }
  .map { --pin-x: 40.87%; --pin-y: 12.99%; margin-top: 36px; aspect-ratio: 688 / 300; }
  .office { margin-top: 44px; }
  .office__addr { margin-top: 24px; font-size: 16px; line-height: 22px; }
  .office__contact { display: block; margin-top: 24px; font-size: 16px; line-height: 22px; }
  .office__contact p + p { margin-top: 8px; }
  .contact-form__title + .field { margin-top: 3px; }
  .contact-form { margin-top: 39px; }
  .contact-form .consent { margin-top: 9px; }
  .contact-form .form-submit { margin-top: 8px; }
}

/* ==========================================================================
   Phone
   ========================================================================== */
@media (max-width: 767px) {
  .contact { padding-top: 40px; padding-bottom: 34px; }
  .contact__title { margin-top: 16px; font-size: 39px; line-height: 46px; }
  .contact__lead { margin-top: 14px; }
  .map { --pin-x: 33.6%; --pin-y: 16.31%; margin-top: 14px; aspect-ratio: 328 / 300; }
  .office { margin-top: 20px; }
  .office__addr { margin-top: 16px; }
  .office__contact { margin-top: 17px; }
  .office__contact p + p { margin-top: 7px; }
  .contact-form { margin-top: 14px; }
  .contact-form .field__pair { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .map__pulse { display: none; }
  .map__pin img { opacity: 1; transform: none; animation: none !important; }
}

/* ==========================================================================
   German (html[lang="de"]) — EN rendering is untouched
   ========================================================================== */
html[lang="de"] .contact__lead { -webkit-hyphens: manual; hyphens: manual; text-wrap: balance; }

/* Demo/email card that replaces the unconnected form (contact.astro). */
.contact-form .lead { margin-top: 12px; }
.contact-form .btn-row { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }