/* 047 v5, Contact. Built ON theme.css, chrome.css and site.css (untouched here).
   The form on black: square fields with a control boundary of 3:1 (gun-400) and a lit top edge (the one light); labels in Mona;
   errors in a light red that reads at 4.5:1. Motion: after the opening's light the form is laid in, field by field (each rises
   into place in turn), then the three ways to reach us take the light (site.css .roll). */

.contact { padding-top: 24px; }
.contact__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: calc(var(--gap) * 1.4); row-gap: 56px; align-items: start; }

/* ------------------------------------------------------------------ the form */
.form { display: grid; gap: 26px; max-width: 760px; }
.field { display: grid; gap: 10px; align-content: start; }
.field__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }
.field label { font: 500 .9375rem/1.3 var(--sans); color: var(--bw-silver); letter-spacing: .01em; }
.req { font: 400 .8125rem/1 var(--sans); color: var(--bw-gun-300); margin-left: 4px; }
.req.is-hidden { display: none; }
.help { font: 400 .875rem/1.45 var(--sans); color: var(--bw-gun-300); }
.input { width: 100%; min-height: 52px; padding: 13px 16px; border: 1px solid var(--bw-gun-400); border-radius: 0; background: #0e0f10;
  box-shadow: inset 0 1px 0 rgba(254, 254, 253, .1); color: var(--bw-white); font: 400 1.0625rem/1.45 var(--sans); -webkit-appearance: none; appearance: none;
  transition: border-color .2s, box-shadow .2s; }
.input:hover { border-color: var(--bw-gun-300); }
.input:focus-visible { outline: 2px solid var(--bw-white); outline-offset: 2px; border-color: var(--bw-gun-300); }
textarea.input { min-height: 156px; resize: vertical; }
.input[aria-invalid="true"] { border-color: #ff7a85; }
.select { position: relative; display: block; }
.select .input { padding-right: 44px; cursor: pointer; }
.select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; margin-top: -6px; pointer-events: none;
  border: solid var(--bw-silver); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
select.input option { background: #111213; color: var(--bw-white); }
#field-role.is-hidden { display: none; }
.error { display: none; font: 500 .875rem/1.4 var(--sans); color: #ff7a85; }
.error.is-on { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: grid; gap: 16px; justify-items: start; margin-top: 8px; }
.form__under { font: 400 .875rem/1.55 var(--sans); color: var(--bw-gun-300); max-width: 46ch; }
.form-status { font: 500 1rem/1.5 var(--sans); color: var(--bw-silver); min-height: 1.5em; }
.form-status.ok { color: var(--bw-white); }
.form-status.err { color: #ff7a85; }
.form-status a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ------------------------------------------------------------------ reach us */
.reach { display: grid; gap: 22px; align-content: start; padding-top: 4px; }
.reach__list li { padding: 18px 0; display: grid; gap: 8px; }
.reach__list li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(254, 254, 253, .2), rgba(254, 254, 253, .05)); }
.reach__list a { display: inline-flex; align-items: center; min-height: 32px; font: 400 1.25rem/1.3 var(--sans); color: var(--bw-white); text-decoration: none; transition: color .2s; }
.reach__list a:hover { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.reach__loc { font: 400 1.25rem/1.3 var(--sans); color: var(--bw-white); }
.reach__sec { margin-top: 18px; font: 400 .9375rem/1.55 var(--sans); color: var(--bw-gun-300); }

/* ------------------------------------------------------------------ the form is laid in, field by field */
.field--1 { --i: 0; } .field--2 { --i: 1; } .field__row { --i: 1; } .field--5 { --i: 2; } .field--6 { --i: 3; } .form__foot { --i: 4; }
@media (prefers-reduced-motion: no-preference) {
  .motion .form:not(.is-on) > .field, .motion .form:not(.is-on) > .field__row, .motion .form:not(.is-on) > .form__foot { opacity: .12; transform: translateY(18px); }
  .form.is-on > .field, .form.is-on > .field__row, .form.is-on > .form__foot { animation: lay-in .55s var(--ease-light) calc(.55s + var(--i, 0) * .12s) both; }
  @keyframes lay-in { from { opacity: .12; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .reach.is-on .roll__i { animation-delay: calc(1.05s + var(--i, 0) * .14s); }
  .reach.is-on .roll__i::before { animation-delay: calc(1.1s + var(--i, 0) * .14s); }
}

@media (max-width: 899.98px) {
  .contact { padding-top: 16px; }
  .contact__in { grid-template-columns: minmax(0, 1fr); }
  .field__row { grid-template-columns: minmax(0, 1fr); }
}