/* contact page: page head, form panel, form elements */
.pageHead{padding:40px 0 24px}
.pageHead h1{margin:0 0 8px; font-size:28px; letter-spacing:-.02em}
.pageHead p{margin:0; color:var(--muted); font-size:15px; line-height:1.8}

main.contact .panel{
  padding:20px;
  margin-bottom:24px;
}
main.contact .grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:720px){ main.contact .grid{grid-template-columns:1fr} }

label{display:block; font-size:12px; font-weight:900; color:var(--muted2); margin:4px 0 8px}
input, textarea{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(27,27,42,.12);
  background: rgba(255,255,255,.85);
  color:var(--ink);
  font:inherit;
  outline:none;
}
input::placeholder, textarea::placeholder{color:var(--muted2)}
textarea{min-height:140px; resize:vertical}
main.contact .row{margin-bottom:14px}
.actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:14px}
.note{font-size:12px; color:var(--muted2); font-weight:800}
.check{display:flex; gap:10px; align-items:flex-start; margin-top:12px}
.check input{width:auto; margin-top:4px}
.check a{text-decoration:underline; text-underline-offset:3px}
main.contact .panel footer{margin-top:14px; padding-top:14px; border-top:1px solid rgba(27,27,42,.08); font-size:12px; color:var(--muted2); font-weight:800}

@media (max-width:640px){
  .pageHead h1{font-size:22px}
  main.contact .panel{padding:18px 20px}
}