/* ==========================================================================
   SECTION 10 — CONTACT & CONSULTATION
   Light section. Contact details + inquiry form.
   ========================================================================== */

.contact__grid {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-7);
  align-items: start;
}

/* ---- Info column ------------------------------------------------------ */
.contact__details { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.contact-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.contact-row__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--gold-100); color: var(--accent-strong);
  border: 1px solid rgba(197, 157, 95, 0.22);
}
.contact-row__icon svg { width: 20px; height: 20px; }
.contact-row__label { font-size: var(--fs-eyebrow); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-subtle); }
.contact-row__value { font-weight: var(--fw-medium); color: var(--fg); }
.contact-row__value a:hover { color: var(--accent-strong); }

/* ---- Form ------------------------------------------------------------- */
.contact__form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  box-shadow: var(--elev-1);
}
.form-row { display: grid; gap: var(--space-5); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--fg);
}
.field label .req { color: var(--gold-600); }
.field input,
.field textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-body-sm);
  color: var(--fg);
  background: var(--light-100);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus,
.field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px var(--gold-100);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--slate-400); }

.contact__form .btn { margin-top: var(--space-6); }

.form-status {
  margin-top: var(--space-4);
  font-size: var(--fs-body-sm);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  display: none;
}
.form-status.is-success { display: block; background: rgba(14, 159, 110, 0.10); color: var(--success); border: 1px solid rgba(14, 159, 110, 0.3); }
.form-status.is-error   { display: block; background: rgba(220, 38, 38, 0.08); color: var(--danger); border: 1px solid rgba(220, 38, 38, 0.25); }

@media (min-width: 880px) {
  .contact__grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-9); }
  .form-grid-2 { grid-template-columns: 1fr 1fr; }
}