/* =============================================================================
   CONTACT  |  Enquiry form.
   HTML: index.html -> <!-- SECTION: CONTACT -->     JS: js/contact.js
   Edit only this file when you want to change how contact looks.
   ============================================================================= */

.contact{max-width:760px;margin-inline:auto;padding:clamp(1.6rem,5vw,3rem)}
.contact h2{margin-bottom:.4rem}
.contact>p{margin:0 0 1.5rem;color:var(--muted)}
.row{display:grid;gap:1rem}
@media(min-width:620px){
  .row{grid-template-columns:1fr 1fr}
}
label{display:block;font-size:.82rem;font-weight:500;margin-bottom:.35rem;color:var(--muted)}
.f{margin-bottom:1rem}
input,textarea{width:100%;font:inherit;color:var(--ink);padding:.85rem 1.05rem;border-radius:16px;border:1px solid rgba(10,10,10,.1);background:rgba(255,255,255,.65);box-shadow:inset 0 2px 6px rgba(0,0,0,.05);transition:.25s}
textarea{min-height:130px;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(142,198,65,.28)}
[data-theme=dark] input,[data-theme=dark] textarea{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.05);box-shadow:inset 0 2px 8px rgba(0,0,0,.4)}
[data-theme=dark] ::placeholder{color:rgba(244,244,239,.35)}
.f.err input,.f.err textarea{border-color:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.18)}