/* Contacts: side info + form card. */

.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.contact__side { display: grid; gap: 14px; }
.contact__card { padding: 24px; border-radius: var(--radius-lg); background: var(--color-surface-1); border: 1px solid var(--color-line); }
.contact__card .icard__ico { margin-bottom: 14px; }
.contact__card .h3 { margin-bottom: 8px; }
.contact__card p { color: var(--color-muted); font-size: .95rem; }
.contact__mail { display: inline-block; margin-bottom: 8px; font: 600 1.15rem/1.3 var(--font-display); color: var(--color-brand); text-decoration: none; overflow-wrap: anywhere; }
.contact__mail:hover { text-decoration: underline; }
.contact__steps { counter-reset: s; display: grid; gap: 12px; margin-top: 8px; }
.contact__steps li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; }
.contact__steps li::before { content: counter(s, decimal-leading-zero); grid-row: span 2; font: 600 .85rem/1.6 var(--font-display); color: var(--color-brand); }
.contact__steps b { font-weight: 600; }
.contact__steps span { color: var(--color-muted); font-size: .92rem; }

.contact__form { padding: clamp(22px, 3vw, 36px); border-radius: var(--radius-lg); background: var(--color-surface-1); border: 1px solid var(--color-line-strong); box-shadow: var(--shadow-card); }
.field__opt { font-weight: 400; color: var(--color-subtle); }
.field__hint--count { margin: 6px 0 0; text-align: right; font-variant-numeric: tabular-nums; }
.field__hint--count.is-low { color: var(--color-warning); }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact__form .btn--lg { margin-top: 6px; }
.contact__alt { margin-top: 16px; font-size: var(--fs-small); color: var(--color-muted); }
.contact__alt a { color: var(--color-text); }
.contact__done { text-align: center; padding: 24px 8px; display: grid; justify-items: center; gap: 12px; }
.contact__done-ico { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--color-mint-tint); color: var(--color-mint); animation: pop .6s var(--ease); }
.contact__done-ico .icon { width: 36px; height: 36px; }
.contact__done p { color: var(--color-muted); max-width: 46ch; }
.icard--link { display: block; text-decoration: none; color: inherit; }
.icard--link:hover h2 { color: var(--color-brand); }

@media (max-width: 1100px) { .contact { grid-template-columns: 1fr; } .contact__form { order: -1; } }