/* ============================================================
   Contact Us page — Elementor Form widget rebuild
   Extends styles.css — does not duplicate shared tokens/classes
   ============================================================ */

.sec-contact{
  padding: 100px var(--pad-desktop);
  background: var(--bg-cream);
}
.contact-head{
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
}
.contact-head .h2-heading{ text-align:center; }
.contact-head .body-copy{ text-align:center; }

.contact-form{
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.form-row{
  display: flex;
  gap: 24px;
}
.form-field{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-field--full{ width: 100%; }
.form-field label{
  font-family: var(--font-body);
  font-size: clamp(14px,1vw,16px);
  color: var(--text);
}
.form-field label .req{ color: var(--secondary); }

.form-field input,
.form-field select,
.form-field textarea{
  font-family: var(--font-body);
  font-size: clamp(14px,1vw,16px);
  color: var(--text);
  background: var(--white);
  border: 1px solid #BCBCC0;
  border-radius: 20px;
  padding: 14px 20px;
  width: 100%;
}
.form-field textarea{
  border-radius: 20px;
  resize: vertical;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline: none;
  border-color: var(--secondary);
}
.form-field select{
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' stroke='%235D89B6' stroke-width='2' fill='none' fill-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-position: right 20px center;
  padding-right: 44px;
}

.contact-submit{
  align-self: flex-start;
  background: var(--primary);
  color: var(--white);
  border: none;
  cursor: pointer;
  border-radius: 20px;
  padding: 16px 40px;
  font-family: var(--font-display);
  font-size: clamp(16px,1.2vw,18px);
  font-weight: 600;
  transition: background .2s;
}
.contact-submit:hover{ background: var(--secondary); }

.form-notice{
  font-family: var(--font-body);
  font-size: clamp(14px,1vw,16px);
  color: var(--success);
  margin-top: 4px;
  display: none;
}
.form-notice.is-visible{ display: block; }
.form-notice.is-error{ color: var(--danger); }
.contact-submit:disabled{ opacity: .6; cursor: default; }

@media (max-width: 720px){
  .sec-contact{ padding: 60px var(--pad-mobile); }
  .form-row{ flex-direction: column; gap: 24px; }
}