/* Contact page: feedback form and business details. */

.contact-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px; align-items: start; padding-bottom: clamp(64px, 8vw, 104px); }
.feedback-card { position: relative; padding: clamp(24px, 3.5vw, 40px); border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--highlight), var(--shadow-lg); scroll-margin-top: calc(var(--header-h) + 16px); }
.feedback-card h2 { font-size: clamp(1.5rem, 1.3rem + .6vw, 1.875rem); }
.feedback-card > p:not(.eyebrow) { margin: 8px 0 24px; color: var(--muted); }
.feedback-card .eyebrow { margin-bottom: 8px; }
.message-field { display: grid; gap: 8px; }
.message-meta { display: flex; justify-content: space-between; gap: 12px; }
.message-counter { flex: none; color: var(--faint); font-size: .875rem; font-variant-numeric: tabular-nums; }
.message-counter.is-near { color: var(--amber-ink); }
.feedback-card .button[type="submit"] { margin-top: 4px; }
.feedback-done { display: grid; justify-items: start; gap: 14px; }
.feedback-done-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--lime); color: var(--lime-ink); box-shadow: 0 0 0 8px color-mix(in srgb, var(--lime) 25%, transparent); }
.feedback-done-icon .icon { width: 26px; height: 26px; stroke-width: 2.5; }
.feedback-done p { color: var(--ink-2); }

.contact-aside { display: grid; gap: 12px; }
.contact-card { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--highlight), var(--shadow-sm); }
.contact-card-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--violet-soft); color: var(--violet-text); }
.contact-card > div { display: grid; gap: 2px; min-width: 0; }
.contact-card > div > span { color: var(--muted); font-size: .875rem; font-weight: 500; }
.contact-card strong, .contact-card address { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.contact-card p { color: var(--muted); font-size: .9375rem; }
.contact-card a.link-arrow { margin-top: 6px; font-size: .9375rem; }
a.contact-card { transition: border-color .2s; }
a.contact-card:hover { border-color: var(--violet-line); }
.contact-card.is-address { background: linear-gradient(135deg, color-mix(in srgb, var(--lime-soft) 70%, var(--surface)), var(--surface)); }
.contact-card.is-address .contact-card-icon { background: var(--lime); color: var(--lime-ink); }
.contact-legal { margin-top: 4px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); }
.contact-legal h2 { margin-bottom: 8px; font-size: 1.0625rem; }
.contact-legal p { color: var(--muted); font-size: .9375rem; }
.contact-legal p + p { margin-top: 8px; }
.contact-legal a { color: var(--violet-text); font-weight: 600; }

@media (max-width: 960px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
}