/* Contact page: intro band, four ways to reach us, then the message form. */

.ct-hero h1 { max-width: 14em; }
.ct-hero .ab-lead { max-width: 38em; }

.ct-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
.ct-card {
  display: grid; gap: 4px; align-content: start; height: 100%; padding: 22px 22px 20px;
  background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--sky); border-radius: var(--r-md);
  color: var(--ink); text-decoration: none; transition: background-color .15s, border-color .15s;
}
a.ct-card:hover { background: var(--panel); border-color: var(--accent); }
a.ct-card:focus-visible { outline: var(--focus); outline-offset: 3px; }
.ct-ico {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 10px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--sky) 16%, var(--surface)); color: var(--accent);
}
.ct-label { font-family: var(--label, inherit); font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ct-value { font-family: var(--display); font-weight: 700; font-size: 1.3rem; line-height: 1.25; overflow-wrap: anywhere; }
.ct-hint { color: var(--ink-2); font-size: .98rem; line-height: 1.4; }

@media (min-width: 640px) { .ct-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .ct-cards { grid-template-columns: repeat(3, 1fr); } }

/* the form band: copy on the left, form on the right (the shared .contact-grid does the columns) */
#contact .contact-copy p { max-width: 26em; }
#contact .contact-list { margin-top: 28px; }
#contact .ct-addr { font-weight: 600; font-size: 1.15rem; line-height: 1.4; }
#contact .ct-post { color: var(--band-ink); opacity: .85; }

/* phones: slim cards, icon beside the text */
@media (max-width: 759px) {
  .ct-cards { gap: 10px; }
  .ct-card { grid-template-columns: 44px 1fr; column-gap: 14px; padding: 14px 16px; border-top-width: 1px; border-left: 4px solid var(--sky); align-items: center; }
  .ct-ico { grid-row: 1 / span 3; margin: 0; }
  .ct-value { font-size: 1.12rem; }
  .ct-hint { font-size: .92rem; }
}