/* ==========================================================================
   Contact
   ========================================================================== */

.contact__title { max-width: 12ch; }
.routes { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.route {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: var(--stroke);
  border-radius: var(--radius-sm);
  scroll-margin-top: calc(var(--header-h) + var(--space-5));
}
.route:target { box-shadow: var(--shadow-hard); }
.route__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: var(--color-brand-deep);
  background-color: var(--color-highlight);
  border: var(--stroke);
  border-radius: var(--radius-pill);
}
.route__icon .icon { width: var(--icon-lg); height: var(--icon-lg); }
.route__title { font-size: var(--text-subheading); font-weight: 600; }
.route p { color: var(--color-text-secondary); }
.route__copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.route__nudge {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-4);
  width: 100%;
  font-size: var(--text-body);
  border-top: var(--stroke);
}
.route__nudge .icon { color: var(--color-brand); }
@media (min-width: 64em) { .routes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Copy button (icon + label) */
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap);
  padding: 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--black-900);
  background-color: var(--neutral-0);   /* black or white only (round 224) */
  border: var(--stroke);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}
.copy-btn .icon { width: var(--icon-sm); height: var(--icon-sm); }
.copy-btn:hover { background-color: var(--neutral-50); border-color: var(--black-900); }
.copy-btn:active { transform: scale(0.96); }

.office {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-9);
  padding-top: var(--space-6);
  border-top: var(--stroke);
}
.office__address { font-family: var(--font-display); font-size: var(--text-subheading); font-weight: 500; line-height: var(--leading-subheading); color: var(--color-brand-deep); }
.office__note { color: var(--color-text-secondary); align-self: end; }
@media (min-width: 48em) { .office { grid-template-columns: repeat(2, minmax(0, 1fr)); } }