/* ----------  CONTACT-FORM CSS – uses your existing fonts  ---------- */

/* your site already defines:
   body, p              → 'Montserrat-Regular-400'
   h2                   → 'Montserrat-SemiBold-600'
   h3,h4,h5,h6          → 'Montserrat-Medium-500'
   --------------------------------------------------------------- */

.contact-section {
  width: 100%;
  min-height: 100vh;
  background: #fdfff9;
  padding: 2.5rem 0;
}

.contact-container {
  max-width: 50rem;          /* 800 px */
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}

.contact-form-wrapper {
  padding: 3.75rem 3.125rem; /* 60 50 */
}

/* ----  only font change: use your h2 font for the title  ---- */
.form-title {
  font-family: 'Montserrat-SemiBold-600', sans-serif !important;
  font-size: 2rem;           /* 32 px */
  margin-bottom: 2.5rem;
  color: #111;
  letter-spacing: .0625rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;                /* 24 px */
}

.form-row-name {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group.full-width { width: 100%; }

/* ----  labels: your h3-h6 font  ---- */
label {
  font-family: 'Montserrat-Medium-500', sans-serif !important;
  font-size: .8125rem;       /* 13 px */
  margin-bottom: .5rem;
  color: #222;
  letter-spacing: .03125rem;
}

/* ----  inputs / textarea: body font  ---- */
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  font-family: 'Montserrat-Regular-400', sans-serif !important;
  font-weight: 400;
  padding: .75rem .875rem;
  border: none;
  border-bottom: 2px solid #ddd;
  background: transparent;
  font-size: .875rem;
  transition: border-color .25s;
  outline: none;
  width: 100%;
}

input:focus,
select:focus,
textarea:focus { border-bottom-color: #111; }

select {
  cursor: pointer;
  appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E") no-repeat right .625rem center;
  padding-right: 2rem;
}

textarea {
  resize: vertical;
  min-height: 7.5rem;        /* 120 px */
}

textarea::placeholder { color: #777; }

/* ----  file upload text: body font  ---- */
.file-text {
  font-family: 'Montserrat-Regular-400', sans-serif !important;
  font-size: .8125rem;
  color: #555;
  padding: .75rem .875rem;
  border-bottom: 2px solid #ddd;
  display: block;
  cursor: pointer;
  transition: border-color .25s;
}
.file-text:hover { border-bottom-color: #111; }

/* ----  submit button: h3-h6 font (medium weight)  ---- */
.submit-btn {
  font-family: 'Montserrat-Medium-500', sans-serif !important;
  font-weight: 500;
  background: #000;
  color: #fff;
  padding: 3rem 2.5rem;
  border: none;
  cursor: pointer;
  font-size: .875rem;
  letter-spacing: .125rem;
  transition: background .3s;
  margin-top: .625rem;
  width: 100%;
}

.submit-btn:hover { background: #333; }
.submit-btn:disabled {
  background: #666;
  cursor: not-allowed;
  opacity: .7;
}

/* ----  response text: body font  ---- */
.form-response {
  margin-top: 1.25rem;
  font-family: 'Montserrat-Regular-400', sans-serif !important;
  font-size: .875rem;
  line-height: 1.4;
}
.form-response.success { color: #155724; }
.form-response.error   { color: #721c24; }

/* ----------  spinner inside button  ---------- */
.submit-btn {
  position: relative;
  min-width: 140px;               /* keeps width while text changes */
}
.btn-spinner{
  display:inline-block;width:16px;height:16px;
  border:2px solid #fff;border-top-color:transparent;border-radius:50%;
  animation:spin .6s linear infinite;margin-right:.5rem;vertical-align:middle;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ----------  responsive (same as before)  ---------- */
@media (max-width: 54em) {          /* 864 px */
  .contact-container { max-width: 100%; box-shadow: none; }
  .contact-form-wrapper { padding: 2.5rem 1.25rem; }
}
@media (max-width: 48em) {          /* 768 px */
  .form-row-name { grid-template-columns: 1fr; }
  .form-title { font-size: 1.625rem; }
}
@media (max-width: 30em) {          /* 480 px */
  .contact-form-wrapper { padding: 1.25rem; }
  .submit-btn { padding: .875rem 1.25rem; font-size: .8125rem; }
}