/* Contact dialog: the homepage enquiry form, opened from every sample and package link. */
.contact { width: min(720px, calc(100% - 24px)); max-height: calc(100svh - 48px); margin: auto; padding: 0; border: 0; border-radius: 8px; background: var(--surface); color: var(--text); overflow-y: auto; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8); }
.contact::backdrop { background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px); }
.contact[open] { animation: rise 0.35s var(--ease); }
.contact .modal-close { background: var(--raised); }
.contact-body { padding: clamp(28px, 5vw, 48px); }
.contact h2 { font: 400 clamp(2rem, 1.4rem + 2vw, 3rem)/1.05 var(--display); letter-spacing: -0.01em; margin-top: 12px; padding-right: 40px; }
.contact h2 em { font-style: italic; color: var(--gold); }
.contact-lede { margin-top: 12px; color: var(--muted); max-width: 54ch; }

.contact form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.contact form[hidden], .contact-thanks[hidden], .contact-head[hidden] { display: none; }
.contact .field { display: grid; gap: 6px; align-content: start; }
.contact .field-wide, .contact .terms-acceptance, .contact form > .btn-next, .contact .form-error, .contact form > .nx-fine { grid-column: 1 / -1; }
.contact .field label { font-size: 0.8125rem; color: var(--muted); }
/* Fields are filled, not outlined: focus lightens the fill and draws a line under it, an error tints it red. */
.contact input:not([type="checkbox"]), .contact select, .contact textarea {
  width: 100%; padding: 13px 14px; border: 0; border-radius: 4px;
  background: #2a2a2a; color: var(--text); font: inherit; transition: background-color 0.2s, box-shadow 0.2s;
}
.contact textarea { resize: vertical; min-height: 96px; }
.contact input:not([type="checkbox"]):hover, .contact select:hover, .contact textarea:hover { background: #313131; }
.contact input:not([type="checkbox"]):focus, .contact select:focus, .contact textarea:focus { background: #363636; box-shadow: inset 0 -2px 0 var(--gold); outline: none; }
.contact :is(input, select, textarea)[aria-invalid="true"] { background: #3a2523; box-shadow: inset 0 -2px 0 #ff8a7a; }
.contact .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact .terms-acceptance { display: grid; gap: 12px; margin-top: 6px; }
.contact .terms-acceptance label { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; font-size: 0.875rem; color: #ddd; cursor: pointer; }
.contact .terms-acceptance input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--gold); }
.contact .terms-acceptance label:has(input[aria-invalid="true"]) span { color: #ff8a7a; }
.contact .terms-acceptance a { color: inherit; text-underline-offset: 3px; }
.contact .terms-acceptance p { font-size: 0.8125rem; color: var(--dim); }
.contact form > .btn-next { justify-self: start; margin-top: 4px; border: 0; }
.contact form > .btn-next:disabled { opacity: 0.6; cursor: progress; }
.contact .form-error { color: #ff8a7a; font-size: 0.875rem; }
.contact form > .nx-fine a { color: inherit; }

.contact-thanks:focus { outline: none; }
.contact-thanks p:not(.nx-step) { margin-top: 14px; color: var(--muted); max-width: 46ch; }
.contact-thanks .btn-next { border: 0; }

/* On a phone the form rises as a sheet from the bottom and fills the width. */
@media (max-width: 759px) {
  .contact { width: 100%; max-width: none; max-height: calc(100svh - 24px); margin: auto 0 0; border-radius: 12px 12px 0 0; }
  .contact form { grid-template-columns: 1fr; }
  .contact form > .btn-next { justify-self: stretch; }
}