/* Contact uses the shared shade, chrome, heading and button geometry. */
.contact-details { margin-bottom: 3vmin; color: #fff; font-family: AvalonSemibold, sans-serif; font-size: clamp(20px, 2.75vmin, 26px); }
.contact-detail { display: grid; grid-template-columns: 1.25em minmax(0, 1fr); align-items: start; gap: .6em; margin-block: 1vmin; font-family: inherit; font-weight: 600; font-size: inherit; line-height: 1.3; }
.contact-detail svg { width: 1.1em; height: 1.1em; margin-top: .1em; fill: none; stroke: var(--action-orange); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-detail > span:last-child { text-align: left; overflow-wrap: anywhere; }
#contact-form-area { box-sizing: border-box; width: 100%; max-width: 900px; padding-inline-end: 3vmin; color: #fff; }
#contact-form-area > p { margin-bottom: 3vmin; }
#contact-form { font-size: var(--paragraph-size); }
#contact-form fieldset { min-width: 0; border: 0; padding: 0; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2vmin 3vmin; }
.contact-grid label, #contact-math label { display: block; }
.contact-grid label > span, #contact-math label > span[aria-hidden] { color: var(--action-orange); }
.contact-wide { grid-column: 1 / -1; }
#contact-form input:not([type="file"]), #contact-form select, #contact-form textarea {
  display: block; box-sizing: border-box; width: 100%; margin-top: .75vmin; padding: .25em .75em;
  border: 1px solid rgba(255, 153, 51, .65); border-radius: .4vmin;
  background: rgba(0, 0, 0, .55); color: #fff; font: inherit; line-height: 1.5;
}
#contact-form input:focus, #contact-form select:focus, #contact-form textarea:focus { border-color: #fff; outline: 1px solid #fff; outline-offset: 1px; }
#contact-form select option { color: #fff; background: #111; }
#contact-form textarea { resize: vertical; min-height: 6em; }
.contact-uploads { margin-block: 3vmin; }
.contact-uploads h3 { margin-inline-start: 0; }
.contact-optional { font-family: Avalon, sans-serif; font-size: .8em; font-weight: 400; }
.contact-file-buttons { display: flex; flex-wrap: wrap; gap: 2vmin; }
#contact-form .contact-help { margin-block: 1.5vmin; font-size: .9em; line-height: 1.5; }
#attachment-list { list-style: none; margin: 2vmin 0; padding: 0; }
#attachment-list li { display: flex; align-items: center; gap: 2vmin; padding: 1vmin 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.attachment-preview { display: grid; place-items: center; flex: 0 0 12vmin; height: 12vmin; max-width: 72px; max-height: 72px; overflow: hidden; border-radius: .4vmin; background: rgba(0,0,0,.55); font-size: .8em; }
.attachment-preview img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
.attachment-preview span { grid-area: 1 / 1; }
.attachment-description { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.attachment-description small { display: block; }
#attachment-list button { flex: 0 0 auto; padding: 1vmin; font-size: .85em; }
.contact-submit { display: flex; justify-content: center; margin-top: 3vmin; }
#contact-submit:disabled { cursor: wait; opacity: .65; }
#contact-status { margin-top: 2vmin; font-size: 16px; }
#contact-math { margin-top: 2vmin; }
#contact-form #AntiSpam { width: 6em; }
#contact-form #Telephone_Number { width: calc(14ch + 1.5em + 2px); max-width: 100%; }
.contact-honeypot, .contact-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#contact-success { margin-block: 8vmin 3vmin; }
#contact-success h2 { text-align: center; }
@media (max-width: 600px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

/* Reserve 26 address characters plus the icon and its gap; the form takes the rest. */
@media (min-width: 800px) {
  .contact-details { min-width: calc(26ch + 1.85em); }
  body[data-page="contact"] .content-columns { grid-template-columns: max-content minmax(0, 1fr); column-gap: 5%; }
}