.contact-layout {
  display:grid;
  grid-template-columns:1fr 1.12fr;
  gap:90px;
  padding-top:0;
  align-items:start
}
.contact-heading {
  font-size:40px;
  max-width:430px;
  margin-bottom:22px
}
.contact-copy>p {
  max-width:420px;
  margin-bottom:35px
}
.contact-detail {
  padding:22px 0;
  border-top:1px solid var(--line)
}
.contact-detail dt {
  font:11px Code,monospace;
  color:var(--muted);
  text-transform:uppercase;
  margin-bottom:9px
}
.contact-detail dd {
  margin:0;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between
}
.contact-detail dd>a,.contact-detail dd>span {
  font-size:19px;
  overflow-wrap:anywhere;
  line-height:1.5
}
.contact-detail dd>a:hover {
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-underline-offset:5px
}
.contact-detail .icon-btn {
  width:35px;
  height:35px;
  flex:none
}
.contact-detail:last-child {
  border-bottom:1px solid var(--line)
}
.contact-local {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:22px;
  font:11px Code,monospace;
  color:var(--muted)
}
.contact-form {
  background:var(--surface);
  border:1px solid var(--line);
  padding:36px
}
.contact-form h2 {
  font-size:28px;
  margin-bottom:9px
}
.form-intro {
  font-size:14px;
  margin-bottom:32px
}
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}
.form-field {
  margin-bottom:22px;
  min-width:0
}
.form-field label {
  display:block;
  font-size:13px;
  margin-bottom:10px
}
.form-field label span {
  color:var(--muted)
}
.form-field input,.form-field select,.form-field textarea {
  width:100%;
  background:var(--bg);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:3px;
  padding:12px 14px;
  min-height:48px;
  font-size:16px
}
.form-field textarea {
  resize:vertical;
  min-height:140px;
  max-height:500px
}
.form-field input::placeholder,.form-field textarea::placeholder {
  color:var(--muted);
  opacity:.7
}
.form-field select {
  cursor:pointer
}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus {
  border-color:var(--muted)
}
.form-actions {
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap
}
.form-note {
  font-size:12px;
  color:var(--muted);
  margin-top:19px;
  line-height:1.6
}
.form-status {
  margin-top:17px;
  font-size:14px;
  color:var(--ink)
}
.draft-preview {
  margin-top:24px;
  border-top:1px solid var(--line);
  padding-top:24px
}
.draft-preview h3 {
  font-size:20px;
  margin-bottom:12px
}
.draft-preview pre {
  font:13px/1.7 Code,monospace;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  background:var(--bg);
  padding:17px;
  max-height:320px;
  overflow:auto;
  margin-bottom:18px
}
.draft-preview .text-link {
  margin-right:20px
}
.contact-faq {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:75px
}
.contact-faq h2 {
  font-size:42px;
  max-width:360px
}
.faq-item {
  border-top:1px solid var(--line);
  padding:20px 0
}
.faq-item:last-child {
  border-bottom:1px solid var(--line)
}
.faq-item summary {
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  line-height:1.4;
  padding:5px 0
}
.faq-item p {
  margin-top:18px;
  font-size:15px;
  max-width:560px
}
@media(max-width:1050px) {
  .contact-layout {
    gap:40px
  }
  .contact-form {
    padding:28px
  }
  .contact-detail dd>a,.contact-detail dd>span {
    font-size:17px
  }
  .contact-heading {
    font-size:35px
  }
  .form-row {
    grid-template-columns:1fr;
    gap:0
  }
}
@media(max-width:700px) {
  .contact-layout {
    grid-template-columns:1fr;
    gap:40px
  }
  .contact-heading {
    font-size:34px
  }
  .contact-form {
    padding:25px 20px
  }
  .contact-local {
    font-size:10px
  }
  .contact-faq {
    grid-template-columns:1fr;
    gap:30px
  }
  .contact-faq h2 {
    font-size:35px
  }
  .contact-detail dd>a {
    font-size:16px
  }
  .form-actions .btn {
    flex-grow:1
  }
  .contact-copy>p {
    max-width:100%
  }
}