/* Full-bleed, plain light background using palette vars */
#contact {
  background: var(--gray-50);
  color: var(--gray-900);
}

#contact .contact__inner { padding: 40px 0 52px; }

#contact .contact__title {
  font-weight: 600;
  font-size: clamp(22px, 3.5vw, 28px);
  line-height: 1.35;
  margin-bottom: 10px;
  color: var(--gray-900);
}
#contact .contact__lead {
  font-size: clamp(1rem, 2.6vw, 1.1rem);
  line-height: 1.7;
  margin-bottom: 18px;
  color: var(--gray-700);
}

/* Form layout */
#contact form { max-width: 720px; }
#contact .field { margin-bottom: 14px; }
#contact label {
  display: inline-block; margin-bottom: 6px; font-weight: 600; color: var(--gray-900);
}

#contact input[type="text"],
#contact input[type="email"],
#contact textarea {
  width: 100%;
  background: var(--gray-100);
  color: var(--gray-900);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 12px 12px;
  line-height: 1.5;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

#contact textarea {
  min-height: 140px;
  resize: vertical; /* only vertical resizing allowed */
}

#contact input:focus,
#contact textarea:focus {
  border-color: var(--blue-200);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-200) 35%, transparent);
}

/* Help & errors */
#contact .help { display: block; margin-top: 6px; color: var(--gray-600); }
#contact .error { display: block; margin-top: 6px; color: var(--red-700); min-height: 1em; }

.is-invalid {
  border-color: var(--red-700) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red-700) 25%, transparent) !important;
}

/* Button */
#contact .btn-primary {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--blue-700);
  background: var(--blue-700);
  color: var(--gray-100);
  font-weight: 600;
  transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
  cursor: pointer;
}
#contact .btn-primary:hover,
#contact .btn-primary:focus-visible {
  background: var(--blue-A400);
  border-color: var(--blue-A400);
}
#contact .btn-primary:active { transform: translateY(1px); }

/* Status message */
#contact .form-status {
  margin-top: 12px;
  color: var(--gray-900);
}

/* Make inputs & textarea use the same font size and family */
#contact input[type="text"],
#contact input[type="email"],
#contact textarea {
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.5;
}

/* Unify placeholder color across fields (some browsers tint differently) */
#contact input::placeholder,
#contact textarea::placeholder {
  color: var(--gray-600);
  opacity: 1; /* Safari/Firefox sometimes lower opacity */
}

/* Cross-browser placeholder fallbacks */
#contact input::-webkit-input-placeholder,
#contact textarea::-webkit-input-placeholder { color: var(--gray-600); opacity: 1; }
#contact input::-moz-placeholder,
#contact textarea::-moz-placeholder { color: var(--gray-600); opacity: 1; }
#contact input:-ms-input-placeholder,
#contact textarea:-ms-input-placeholder { color: var(--gray-600); opacity: 1; }
#contact input::-ms-input-placeholder,
#contact textarea::-ms-input-placeholder { color: var(--gray-600); opacity: 1; }

/* Spacing tweaks */
@media (max-width: 768px) {
  #contact .contact__inner { padding: 28px 0 36px; }
}
@media (min-width: 1200px) {
  #contact .contact__inner { padding: 52px 0 68px; }
}