/* ============================================================
   Contact page — layout + brand styling for the embedded
   Gravity Form. GF's "orbital" theme CSS loads late (when the
   shortcode renders), so the form rules below use !important to
   win regardless of load order. All form rules are scoped to
   .contact-form-panel so nothing else is affected.
   ============================================================ */

/* --- Two-column layout: form (left) + reason cards (right) --- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .contact-layout {
    grid-template-columns: 1.5fr 1fr;
    gap: 3.5rem;
  }
}

/* --- Reassurance note, attached to the bottom of the form panel --- */
.contact-note {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-gray-100, #F0F0F6);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-gray-500, #7E7E96);
}

/* ============================================================
   Gravity Form, branded
   ============================================================ */

.contact-form-panel .gform_wrapper,
.contact-form-panel form { margin: 0 !important; }

/* GF reset is stripped too, so normalize box sizing ourselves */
.contact-form-panel .gform_wrapper *,
.contact-form-panel .gform_wrapper *::before,
.contact-form-panel .gform_wrapper *::after { box-sizing: border-box; }

/* hide GF heading + anti-spam honeypot + hidden fields */
.contact-form-panel .gform_heading,
.contact-form-panel .gform_validation_container,
.contact-form-panel .gfield--type-honeypot,
.contact-form-panel .gfield_visibility_hidden { display: none !important; }

.contact-form-panel .gform_required_legend { display: none !important; }

/* field stack */
.contact-form-panel .gform_fields {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.contact-form-panel .gfield { margin: 0 !important; padding: 0 !important; }

/* labels */
.contact-form-panel .gfield_label {
  display: block !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 0 0.5rem !important;
  color: var(--color-purple-700, #3D1499) !important;
}
.contact-form-panel .gfield_required { color: var(--color-purple-600, #5B34B5) !important; margin-left: 0.15rem !important; }

/* inputs, textarea, select */
.contact-form-panel input[type="text"],
.contact-form-panel input[type="email"],
.contact-form-panel textarea,
.contact-form-panel select {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 2px solid var(--color-gray-200, #E2E2EC) !important;
  border-radius: 12px !important;
  background-color: #ffffff !important;
  padding: 0.5rem 1rem !important;
  font-size: 1rem !important;
  font-family: inherit !important;
  line-height: 1.5 !important;
  color: var(--color-gray-900, #1A1A2E) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  height: auto !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
}
.contact-form-panel input[type="text"],
.contact-form-panel input[type="email"],
.contact-form-panel select { height: auto !important; }
.contact-form-panel textarea { min-height: 150px !important; resize: vertical !important; }

/* select: custom chevron */
.contact-form-panel select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237E7E96' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 1.1rem !important;
  padding-right: 2.85rem !important;
  cursor: pointer !important;
}

.contact-form-panel input::placeholder,
.contact-form-panel textarea::placeholder { color: var(--color-gray-400, #9E9EB4) !important; }

.contact-form-panel input[type="text"]:focus,
.contact-form-panel input[type="email"]:focus,
.contact-form-panel textarea:focus,
.contact-form-panel select:focus {
  outline: none !important;
  border-color: var(--color-purple-500, #7C5CCF) !important;
  box-shadow: 0 0 0 1px var(--color-purple-500, #7C5CCF) !important;
}

/* submit button */
.contact-form-panel .gform_footer { margin: 1.5rem 0 0 !important; padding: 0 !important; }
.contact-form-panel .gform_footer input[type="submit"],
.contact-form-panel .gform-button,
.contact-form-panel .gform_button,
.contact-form-panel button.gform_button {
  width: 100% !important;
  display: inline-block !important;
  background: var(--color-purple-600, #5B34B5) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.9375rem !important;
  font-family: inherit !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 0.875rem 1.5rem !important;
  cursor: pointer !important;
  transition: background 150ms ease, box-shadow 150ms ease !important;
}
.contact-form-panel .gform_footer input[type="submit"]:hover,
.contact-form-panel .gform-button:hover,
.contact-form-panel .gform_button:hover {
  background: var(--color-purple-700, #3D1499) !important;
  box-shadow: var(--shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.08)) !important;
}

/* validation + confirmation */
.contact-form-panel .validation_message,
.contact-form-panel .gfield_validation_message {
  color: var(--color-status-fail, #EF4444) !important;
  font-size: 0.8125rem !important;
  margin-top: 0.375rem !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
.contact-form-panel .gform_validation_errors {
  border: 1px solid var(--color-status-fail, #EF4444) !important;
  background: #FEF2F2 !important;
  border-radius: 12px !important;
  padding: 0.75rem 1rem !important;
  margin-bottom: 1.25rem !important;
}
.contact-form-panel .gfield_error input,
.contact-form-panel .gfield_error textarea,
.contact-form-panel .gfield_error select { border-color: var(--color-status-fail, #EF4444) !important; }

.contact-form-panel .gform_confirmation_message {
  color: var(--color-gray-900, #1A1A2E) !important;
  font-size: 1.0625rem !important;
  line-height: 1.6 !important;
  text-align: center !important;
  padding: 1.5rem 0 !important;
}