update

components/ContactForm.module.css

@@ -0,0 +1,100 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+  max-width: 640px;
+}
+
+.row {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-5);
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.label {
+  font-size: var(--font-size-small, 0.9rem);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-heading);
+}
+
+.optional {
+  font-weight: var(--font-weight-regular, 400);
+  color: var(--color-text-muted, #6b7280);
+}
+
+.required {
+  color: var(--color-accent);
+}
+
+.input,
+.textarea {
+  border: 1px solid color-mix(in srgb, var(--color-heading) 15%, transparent);
+  border-radius: var(--radius-md, 8px);
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--font-size-base);
+  font-family: inherit;
+  background: #fff;
+  transition: border-color 0.2s ease;
+}
+
+.input:focus,
+.textarea:focus {
+  outline: none;
+  border-color: var(--color-accent);
+}
+
+.textarea {
+  resize: vertical;
+  min-height: 140px;
+}
+
+.checkboxField {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+}
+
+.checkbox {
+  margin-top: 4px;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  accent-color: var(--color-accent);
+}
+
+.checkboxLabel {
+  font-size: var(--font-size-small, 0.9rem);
+  line-height: 1.5;
+}
+
+.checkboxLabel a {
+  color: var(--color-accent);
+  text-decoration: underline;
+}
+
+.errorText {
+  font-size: var(--font-size-small, 0.85rem);
+  color: #d92d20;
+  margin: 0;
+}
+
+.successBox {
+  max-width: 640px;
+  padding: var(--space-6);
+  border-radius: var(--radius-lg);
+  background: color-mix(in srgb, var(--color-accent) 12%, white);
+  color: var(--color-heading);
+}
+
+/* Tablet: 768px */
+@media (min-width: 768px) {
+  .row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}