/* ============================================================
   CONTACT PAGE
   ============================================================ */

.contact-page{
  overflow:auto;
}

.contact-main{
  width:100%;
  min-height:100vh;
  padding:112px 6vw 60px;
}

.contact-intro{
  max-width:820px;
  padding-bottom:30px;
  border-bottom:1px solid var(--border);
}

.contact-kicker,
.contact-index,
.contact-side h2,
.contact-note,
.contact-form label > span,
.form-security{
  font-family:"IBM Plex Mono",monospace;
  text-transform:uppercase;
}

.contact-kicker{
  margin-bottom:18px;
  color:#a1a1a1;
  font-size:11px;
  letter-spacing:.08em;
}

.contact-intro h1{
  margin:0;
  font-size:clamp(54px,6vw,90px);
  line-height:.94;
  letter-spacing:-.055em;
  font-weight:500;
}

.contact-intro p{
  max-width:680px;
  margin:22px 0 0;
  color:#aaa;
  font-size:13px;
  line-height:1.65;
}

.contact-layout{
  max-width:1180px;
  margin-top:36px;
  display:grid;
  grid-template-columns:32% 68%;
  gap:7vw;
}

.contact-side{
  padding-top:3px;
}

.contact-index{
  display:block;
  margin-bottom:15px;
  color:#777;
  font-size:9px;
  letter-spacing:.08em;
}

.contact-side h2{
  margin:0 0 15px;
  color:#eee;
  font-size:14px;
  line-height:1.35;
  letter-spacing:.055em;
  font-weight:400;
}

.contact-side p{
  max-width:330px;
  margin:0;
  color:#777;
  font-size:12px;
  line-height:1.65;
}

.contact-line{
  width:45px;
  height:1px;
  margin:30px 0 18px;
  background:#555;
}

.contact-note{
  color:#555;
  font-size:8px;
  letter-spacing:.08em;
}

.contact-form{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:25px;
}

.contact-form label{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.contact-form label > span{
  color:#858585;
  font-size:9px;
  letter-spacing:.09em;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  border:0;
  border-bottom:1px solid #393939;
  border-radius:0;
  outline:none;
  background:transparent;
  color:#f4f4f2;
  font-family:"DM Sans",Arial,sans-serif;
  font-size:13px;
  padding:9px 0 11px;
  transition:border-color .2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color:#aaa;
}

.contact-form textarea{
  min-height:150px;
  resize:vertical;
  line-height:1.6;
}

.form-row.two-column{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:35px;
}

.form-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding-top:2px;
}

.form-security{
  color:#555;
  font-size:8px;
  letter-spacing:.07em;
}

.contact-form .cta{
  flex:0 0 210px;
  cursor:pointer;
}

.form-trap{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

@media (max-width:900px){
  .contact-main{
    padding:100px 7vw 50px;
  }

  .contact-layout{
    grid-template-columns:1fr;
    gap:35px;
  }

  .contact-side p{
    max-width:600px;
  }
}

@media (max-width:640px){
  .contact-main{
    padding:92px 7vw 40px;
  }

  .contact-intro h1{
    font-size:54px;
  }

  .form-row.two-column{
    grid-template-columns:1fr;
    gap:25px;
  }

  .form-footer{
    align-items:flex-start;
    flex-direction:column;
  }

  .contact-form .cta{
    width:100%;
    flex-basis:45px;
  }
}