/* =====================================================================
   AXIA — CONTACT PAGE (contact.css)
   ===================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

/* ---- Left: address block ---- */
.contact-info dl { margin: 0; }
.contact-info .info-row { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.contact-info .info-row:first-child { padding-top: 0; }
.contact-info dt {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-muted); font-weight: 600; margin: 0 0 4px;
}
.contact-info dd { margin: 0; font-size: 1.05rem; color: var(--brand-ink); }
.contact-info dd a { color: var(--brand); font-weight: 600; }

/* ---- Right: form ---- */
.contact-form {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: calc(var(--radius) * 3);
  padding: clamp(24px, 4vw, 38px);
  box-shadow: 0 8px 32px rgba(5,32,23,.06);
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-weight: 600; font-size: 0.92rem;
  color: var(--brand-ink); margin-bottom: 7px;
}
.field .req { color: var(--neg); }

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(15,77,63,.18);
}
.field textarea { resize: vertical; min-height: 130px; }

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(139,30,30,.15);
}
.field-error {
  display: none;
  color: var(--error);
  font-size: 0.85rem; font-weight: 600;
  margin-top: 6px;
}
.field-error.is-shown { display: block; }

.form-status {
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: var(--radius);
  font-weight: 600;
  background: rgba(15,77,63,.10);
  color: var(--brand-deep);
  border: 1px solid rgba(15,77,63,.25);
}

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