.contact-hero{
  display:grid;
  grid-template-columns:2fr 1fr;
  height:min(72svh,640px);
}
.contact-hero-body{
  background:var(--umber);
  color:var(--cream);
  display:flex;
  align-items:flex-end;
  padding:9rem var(--gut) 4rem;
  overflow:hidden;
}
.contact-hero-body .eyebrow{color:rgba(249,247,244,.55)}
.contact-hero-body .d1{max-width:14ch}
.contact-sub{
  margin:1.5rem 0 0;
  max-width:48ch;
  color:rgba(249,247,244,.8);
  font-size:clamp(1rem,.5vw + .9rem,1.1875rem);
  line-height:1.65;
}
.contact-hero-img{
  background:#9c8e7e;
}

.contact-layout{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(3rem,7vw,7rem);
  align-items:start;
}

#submit-btn {
  cursor: pointer;
}

.form-field{margin-bottom:2rem}

.form-field label{
  display:block;
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--sage-soft);
  margin-bottom:.6rem;
}

.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(72,77,73,.25);
  border-radius:0;
  padding:.65rem 0;
  font-family:var(--body);
  font-size:1rem;
  font-weight:300;
  color:var(--sage);
  outline:none;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .3s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder{
  color:rgba(72,77,73,.35);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-bottom-color:var(--umber);
}

.form-field textarea{
  resize:vertical;
  min-height:9rem;
  line-height:1.6;
}

.form-field select{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23484d49'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .25rem center;
  padding-right:1.5rem;
}

.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 1.75rem;
}

#submit-btn{
  margin-top:.5rem;
  min-width:12rem;
}

.form-alert{
  margin-top:1.25rem;
  font-size:.9375rem;
  line-height:1.55;
  display:none;
}
.form-alert.ok{color:var(--sage)}
.form-alert.err{color:var(--umber)}
.form-alert.show{display:block}

.contact-info{padding-top:.25rem}

.contact-info-block{margin-bottom:2.5rem}

.contact-info-block h3{
  font-size:.625rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--sage-soft);
  margin:0 0 .85rem;
}

.contact-info-block p{
  margin:0 0 .35rem;
  font-size:.9375rem;
  line-height:1.6;
  color:var(--sage);
}

.contact-info-block a{
  color:var(--sage);
  text-decoration:none;
  border-bottom:1px solid rgba(72,77,73,.28);
  transition:color .3s ease, border-color .3s ease;
}
.contact-info-block a:hover{color:var(--umber);border-bottom-color:var(--umber)}

.contact-foot{
  border-top:var(--rule);
  padding-block:2rem;
}
.contact-foot-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem 2rem;
  font-size:.6875rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(72,77,73,.5);
}

@media (max-width:820px){
  .contact-hero{grid-template-columns:1fr;height:auto}
  .contact-hero-body{padding-top:8rem}
  .contact-hero-img{height:55vw;order:-1}
  .contact-layout{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
}