.contact-overlay {
  --contact-enter-y: max(calc(-33px * var(--contact-scale, 1) - 40px), calc(132px - 50dvh));
  --contact-open-y: max(calc(-49px * var(--contact-scale, 1) - 40px), calc(132px - 50dvh));
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}
.contact-overlay[hidden] { display: none; }
.contact-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 240ms ease, visibility 0s;
}
.contact-overlay__backdrop { position: absolute; inset: 0; }
.contact-card {
  position: relative;
  width: 376px;
  height: 240px;
  overflow: hidden;
  border-radius: 7px;
  /* Figma clips a 770 × 288 image inside the 376 × 240 card. */
  background: #f3f5fa url("./assets/contact-light-bg.png") -191px -23px / 770px 288px no-repeat;
  box-shadow: 0 16px 45px rgba(0, 0, 0, .13);
  color: #050609;
  opacity: 0;
  transform: translateY(var(--contact-enter-y)) scale(var(--contact-scale, 1));
  transition: opacity 240ms ease, transform 300ms cubic-bezier(.22, 1, .36, 1);
}
.contact-overlay.is-open .contact-card {
  opacity: 1;
  transform: translateY(var(--contact-open-y)) scale(var(--contact-scale, 1));
}
.contact-overlay.is-work .contact-card { background: radial-gradient(ellipse 110% 115% at 4% -12%, #17398b 0%, #081644 45%, #02050d 100%); color: #fff; box-shadow: 0 16px 45px rgba(0, 0, 0, .25); }
.contact-card__title { position: absolute; left: 20px; top: 20px; display: flex; align-items: center; gap: 6px; margin: 0; font-family: "Source Han Sans CN", "Helvetica Neue", Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 29px; }
.contact-card__title img { display: block; width: 20px; height: 20px; object-fit: contain; }
.contact-card__email, .contact-card__channels { position: absolute; left: 20px; font-size: 12px; line-height: 17px; }
.contact-card__email { top: 65px; }
.contact-card__channels { top: 120px; right: 20px; display: grid; grid-template-columns: 203px 1fr; }
.contact-card__email span, .contact-card__channels span { display: block; color: #868686; }
.contact-overlay.is-work .contact-card :is(.contact-card__email, .contact-card__channels) span { color: rgba(255,255,255,.5); }
.contact-card__email button, .contact-card__channels a, .contact-card__channels button { display: block; color: inherit; font: inherit; text-decoration: none; white-space: nowrap; }
.contact-card__email button, .contact-card__channels button { padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.contact-card__email button:hover, .contact-card__channels a:hover, .contact-card__channels button:hover { text-decoration: underline; text-underline-offset: 2px; }
.contact-copy-toast { position: fixed; z-index: 2; top: max(24px, env(safe-area-inset-top)); left: 50%; padding: 10px 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: #292b31; box-shadow: 0 8px 28px rgba(0,0,0,.28); color: #fff; font: 500 14px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, -8px); transition: opacity 180ms ease, transform 180ms ease; }
.contact-copy-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.contact-card__close { position: absolute; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: 500 12px/15px "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; }
.contact-card__close img { display: block; width: 12px; height: 12px; }
.contact-overlay.is-work .contact-card__close img { filter: invert(1); }
.contact-card :is(a, button):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

@media (max-width: 700px) {
  .contact-overlay {
    --contact-enter-y: max(-73px, calc(132px - 50dvh));
    --contact-open-y: max(-89px, calc(132px - 50dvh));
  }
  .contact-card { width: min(376px, calc(100vw - 28px)); }
  .contact-card__channels { grid-template-columns: min(203px, 60%) 1fr; }
  .contact-copy-toast { top: max(64px, calc(env(safe-area-inset-top) + 52px)); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-overlay, .contact-card, .contact-copy-toast { transition: none; }
}