/* ===== Contact ===== */

.contact-wrap{
  max-width:1080px; margin:0 auto; padding:56px 32px 96px;
  display:grid; grid-template-columns:1fr 1.2fr; gap:56px; align-items:start;
}
.contact-intro .page-title{font-size:38px; margin:0 0 16px}
.contact-intro .page-sub{margin:0 0 32px; line-height:1.8; text-wrap:pretty}

.contact-details{display:flex; flex-direction:column; gap:18px; font-size:13.5px; color:var(--ink)}
.contact-detail-label{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin-bottom:4px;
}
.contact-detail p{margin:0; line-height:1.7}

.contact-form{
  background:var(--white); border:1px solid var(--line); border-radius:6px;
  padding:36px; box-shadow:0 2px 12px rgba(26,37,48,.06);
}
.contact-fields{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.contact-fields .span-2{grid-column:1 / -1}
.contact-fields input, .contact-fields textarea{
  width:100%; border:1px solid var(--line); border-radius:3px; padding:13px 14px;
  font-size:13.5px; font-family:var(--sans); background:var(--cream); outline:none;
}
.contact-fields textarea{resize:vertical}
.contact-fields input:focus, .contact-fields textarea:focus{border-color:var(--gold)}
.contact-fields .btn{
  grid-column:1 / -1; padding:15px; font-size:12px;
  letter-spacing:.1em; border-radius:3px; width:100%;
}

.contact-sent{max-width:640px; margin:0 auto; padding:96px 32px; text-align:center}
.contact-sent h2{font-family:var(--serif); font-size:32px; font-weight:600; margin:0 0 12px}
.contact-sent p{color:var(--sub); font-size:14px; line-height:1.7; margin:0}

@media (max-width:860px){
  .contact-wrap{grid-template-columns:1fr; gap:36px; padding:40px 20px 72px}
}
@media (max-width:520px){
  .contact-fields{grid-template-columns:1fr}
  .contact-form{padding:24px}
}