.contact-page{
  max-width: 1100px;
  margin: 120px auto 60px;
  padding: 0 16px;
  color: #000000;
}

.contact-title{
  font-size: clamp(2rem, 3vw, 2.6rem);
  margin-bottom: .4rem;
}
.contact-subtitle{
  color: #000000cc;
  font-size: 1.4rem;
  margin-bottom: 1.2rem;
}

.contact-form{
  background: #111;
  border: 1px solid #00000022;
  border-left: 4px solid #b74b4b;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  padding: 1.6rem;
}

.field{ margin-bottom: 1.2rem; }
.field label{
  display: block;
  font-size: 1.35rem;
  margin-bottom: .4rem;
}

.field input,
.field textarea{
  width: 100%;
  background: #0a0a0a;
  color: #fff;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: .95rem 1rem;
  font-size: 1.4rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input::placeholder,
.field textarea::placeholder{
  color: #000000;
  opacity: .85;
}
.field input:focus,
.field textarea:focus{
  border-color: #b74b4b;
  box-shadow: 0 0 0 3px rgba(183,75,75,.25);
}


.error{
  display: none;
  color: #ffb4b4;
  font-size: 1.2rem;
  margin-top: .35rem;
}
.form-status{
  margin-top: .8rem;
  font-size: 1.3rem;
}
.form-status.ok{ color: #b6ffb6; }
.form-status.err{ color: #ffb4b4; }

#sendBtn[disabled]{ opacity: .7; cursor: not-allowed; }
.contact-form .btn{ margin-top: .4rem; }

#contact { scroll-margin-top: 120px; }

@media (max-width: 640px){
  .contact-page{ margin: 110px auto 40px; }
}

.contact.section{
  min-height: auto;           
  padding: 2.4rem 9%;
}
.contact h2{
  font-size: clamp(2rem, 3vw, 2.6rem);
  margin-bottom: 1.2rem;
}

.contact-box{
  margin-top: 1.2rem;
  padding: 1.6rem 2rem;
  background: #111;
  color: #fff;
  border: 1px solid #ffffff22;
  border-left: 4px solid #b74b4b;   
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.contact-lead{
  font-size: 1.4rem;
  color: #cbd5e1cc;
  margin: .2rem 0 1.2rem;
}

.contact-form .field{ margin-bottom: 1.0rem; }
.contact-form label{
  display:block;
  font-size: 1.35rem;
  margin-bottom: .4rem;
}
.contact-form input,
.contact-form textarea{
  width: 100%;
  background: #0a0a0a;
  color: #fff;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: .95rem 1rem;
  font-size: 1.4rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color: #94a3b8;
  opacity: .85;
}
.contact-form input:focus,
.contact-form textarea:focus{
  border-color: #b74b4b;
  box-shadow: 0 0 0 3px rgba(183,75,75,.25);
}

.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px){
  .contact-grid{ grid-template-columns: 1fr; }
}

.error{
  display:none;
  color:#ffb4b4;
  font-size:1.2rem;
  margin-top:.35rem;
}
.form-status{
  margin-top:.8rem;
  font-size:1.3rem;
}
.form-status.ok{ color:#b6ffb6; }
.form-status.err{ color:#ffb4b4; }
#sendBtn[disabled]{ opacity:.7; cursor:not-allowed; }

#contact{ scroll-margin-top: 120px; }