.contact {
  padding: 2.5rem 0 3rem;
}

.contact-panel {
  /* uses fx-panel for padding already; this just ensures it looks good */
  padding: 32px 28px;
  overflow: visible;
}

.contact-head {
  margin-bottom: 1.25rem;
}

.contact-head p {
  margin: 0.25rem 0 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 1.25rem;
  align-items: start;
}

.contact-col {
  display: grid;
  gap: 0.95rem;
}

/* Button row */
.contact-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.contact-note {
  font-size: 0.95rem;
}

/* Make textarea feel “premium” but still your style */
.contact .field textarea {
  min-height: 180px;
  resize: none;
}

/* Responsive stack */
@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .contact-panel {
    padding: 28px 20px;
  }
}

/* =========================================
   Contact form — hover-only FX activation
   ========================================= */

/* Disable FX by default */
.contact input.fx-glow,
.contact textarea.fx-glow,
.contact input.fx-plain-hover,
.contact textarea.fx-plain-hover {
  box-shadow: none;
  transform: none;
}

/* Enable FX ONLY when the field wrapper is hovered */
.contact .field:hover input.fx-glow,
.contact .field:hover textarea.fx-glow,
.contact .field:hover input.fx-plain-hover,
.contact .field:hover textarea.fx-plain-hover {
  box-shadow: var(--fx-glow-shadow);
}

/* Prevent focus from triggering glow */
.contact input:focus,
.contact textarea:focus {
  box-shadow: none;
}