/* ==========================================================================
   contact.css — closing wordmark, contact card, footer
   ========================================================================== */
.contact {
  position: relative;
  padding-bottom: calc(var(--sec) - 20px);
  text-align: center; overflow: hidden; overflow: clip;
}
.contact .kicker { color: var(--soft); opacity: 1; margin-bottom: 32px; }
.contact .word { justify-content: center; gap: .02em; }

.card {
  margin: 64px auto 0; max-width: 620px; padding: 12px 28px;
  text-align: left; background: var(--white); border-radius: var(--r-card);
  box-shadow: 0 24px 50px -36px rgba(0, 0, 0, .35);
}
.card > div {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-block: 18px;
  transition: padding .35s var(--ease);
}
.card > div + div { border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.card > div:hover { padding-left: 6px; }
.card dt { width: 96px; color: var(--soft); }
.card dd { flex: 1; min-width: 0; font-weight: 600; font-size: 18px; user-select: all; overflow-wrap: anywhere; }
.card dd.muted { color: var(--soft); font-weight: 400; user-select: auto; }
.card a.ext { text-decoration: none; background: linear-gradient(var(--blue), var(--blue)) 0 100% / 0 2px no-repeat; transition: background-size .4s var(--ease), color .3s var(--ease); }
.card a.ext::after { content: " ↗"; }
.card a.ext:hover, .card a.ext:focus-visible { color: var(--blue); background-size: 100% 2px; }
.copy.is-done span { display: none; }
.copy.is-done::after { content: "✓"; }

.contact .btns { margin-top: 44px; }

footer .in {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding-block: 28px max(36px, env(safe-area-inset-bottom, 0px)); color: var(--soft);
}