/* ─────────────────────────────────────────────────────────────
   Contact — form controls and office cards.
   Builds on assets/site.css. No new brand colours.
   Blue (--accent) carries "attention / exception" across this site
   (alarm threshold, blocked aisle, advise-against), so it also
   carries form validation messages.
   ───────────────────────────────────────────────────────────── */

/* ── Form field ───────────────────────────────────────────── */
.field{ display:block; }

.field > .lab{
  display:flex; align-items:baseline; justify-content:space-between; gap:.75rem;
  font-family:"Space Grotesk", sans-serif;
  font-weight:500;
  font-size:.6875rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tag-ink);
  margin-bottom:.6rem;
}
.field > .lab .opt{
  font-family:"IBM Plex Mono", monospace;
  letter-spacing:.04em;
  text-transform:none;
  font-size:.6875rem;
  opacity:.75;
}

.field input,
.field select,
.field textarea{
  width:100%;
  background:var(--surface-base);
  border:1px solid var(--hairline-strong);
  color:var(--mist);
  font-family:Inter, sans-serif;
  font-size:.9375rem;
  line-height:1.5;
  padding:.85rem 1rem;
  transition:border-color .35s var(--ease-out), background-color .35s var(--ease-out),
             box-shadow .35s var(--ease-out);
  appearance:none;
  border-radius:0;
}
.field textarea{ resize:vertical; min-height:8.5rem; }

.field input::placeholder,
.field textarea::placeholder{ color:#6D6F73; }

.field input:hover,
.field select:hover,
.field textarea:hover{ border-color:color-mix(in oklab, var(--sig) 45%, transparent); }

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--sig);
  background:var(--surface-elevated);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--sig) 22%, transparent);
}

/* native select arrow */
.field .sel-wrap{ position:relative; }
.field .sel-wrap::after{
  content:'▾';
  position:absolute; right:1rem; top:50%;
  transform:translateY(-50%);
  color:var(--sig);
  pointer-events:none;
  font-size:.75rem;
}
.field select{ padding-right:2.5rem; cursor:pointer; }
.field select option{ background:var(--surface-floating); color:var(--mist); }

/* ── Validation ───────────────────────────────────────────── */
.field .err{
  display:none;
  margin-top:.5rem;
  font-family:"IBM Plex Mono", monospace;
  font-size:.6875rem;
  letter-spacing:.04em;
  color:var(--accent);
}
.field.invalid .err{ display:block; }
.field.invalid input,
.field.invalid select,
.field.invalid textarea{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
}

/* ── Consent checkbox ─────────────────────────────────────── */
.check{
  display:flex; align-items:flex-start; gap:.85rem;
  cursor:pointer;
}
.check input{
  appearance:none;
  width:18px; height:18px;
  margin-top:.15rem;
  flex:none;
  background:var(--surface-base);
  border:1px solid var(--hairline-strong);
  transition:background-color .3s var(--ease-out), border-color .3s var(--ease-out);
  cursor:pointer;
}
.check input:checked{ background:var(--sig); border-color:var(--sig); }
.check input:checked::after{
  content:'';
  display:block;
  width:5px; height:9px;
  margin:2px auto 0;
  border:solid var(--ink);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.check input:focus-visible{ outline:2px solid var(--sig); outline-offset:3px; }
.check.invalid input{ border-color:var(--accent); }

/* ── Honeypot (bots fill it, humans never see it) ─────────── */
.hp{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* ── Form status message ──────────────────────────────────── */
#formStatus{
  display:none;
  border:1px solid color-mix(in oklab, var(--sig) 40%, transparent);
  background:linear-gradient(115deg, rgba(55,179,74,.1), transparent 62%);
  padding:1.1rem 1.25rem;
}
#formStatus.show{ display:block; }

/* ── Office card ──────────────────────────────────────────── */
.office{
  position:relative;
  background:var(--surface-elevated);
  border:1px solid var(--hairline);
  padding:1.75rem;
  transition:border-color .5s var(--ease-out), transform .5s var(--ease-spring);
}
.office:hover{ border-color:color-mix(in oklab, var(--sig) 45%, transparent); transform:translateY(-3px); }
.office--soon{ background:transparent; border-style:dashed; }

.office address{ font-style:normal; }

.contact-row{
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem 0;
  color:var(--mist);
  font-size:.9375rem;
  transition:color .3s var(--ease-out);
}
a.contact-row:hover{ color:var(--sig); }
.contact-row svg{ flex:none; color:var(--sig); }