/* /data/css/site.forms.css */

.form{
  display:grid;
  gap:12px;
}

.field label{
  display:block;
  font-weight:700;
  margin:0 0 6px;
  color:var(--dark);
}

.field input,
.field textarea{
  width:100%;
  border:1px solid rgba(47,47,47,.22);
  border-radius:12px;
  padding:12px 12px;
  font:inherit;
  background: rgba(255,255,255,.85);
  color:var(--text);
}

.field textarea{
  min-height:140px;
  resize:vertical;
}

.form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 700px){
  .form-row{ grid-template-columns:1fr; }
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid rgba(47,47,47,.22);
  background: var(--dark);
  color: var(--beige);
  padding:12px 14px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
}
.btn:hover{
  opacity:1;
  filter: brightness(1.05);
}
.btn:active{ transform: translateY(1px); }

/* Contact info */
.kv{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:10px 14px;
}
@media (max-width: 520px){
  .kv{ grid-template-columns:1fr; }
}
.kv b{ color:var(--dark); }
.kv div{ color:rgba(43,43,43,.86); }

/* Two-column contact + form layout */
.contact-split{
  display:grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 34px;
  align-items:start;
  margin-top: 18px;
}

@media (max-width: 900px){
  .contact-split{
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* Optional: make submit button full width */
.form .btn{
  width: 100%;
}