/* ============================================================
   CONTACT — split layout, form, info blocks
   ============================================================ */

.contact-section{
  display:grid;grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--rule);
}
.contact-form-wrap{
  padding:80px 64px;
  border-right:1px solid var(--rule);
}
.contact-info{
  padding:80px 64px;
  display:flex;flex-direction:column;justify-content:space-between;
}

/* ── FORM ── */
.form-group{margin-bottom:28px}
.form-label{
  font-family:var(--mono);font-size:10px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--text-dim);
  display:block;margin-bottom:10px;
}
.form-input,.form-textarea,.form-select{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--rule);
  padding:12px 0;
  font-family:var(--sans);font-size:15px;
  color:var(--text);
  outline:none;
  transition:border-color 0.3s;
}
.form-input:focus,.form-textarea:focus,.form-select:focus{
  border-bottom-color:var(--accent);
}
.form-input::placeholder,.form-textarea::placeholder{
  color:rgba(234,236,240,0.2);
}
.form-textarea{
  resize:vertical;min-height:120px;
  line-height:1.7;
}
.form-select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2358a3c2' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 4px center;
  padding-right:32px;
  cursor:pointer;
}
.form-select option{background:var(--bg2);color:var(--text)}
.form-select:invalid{color:rgba(234,236,240,0.2)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.btn-submit{
  font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;
  background:var(--accent);color:var(--bg);
  padding:16px 40px;border:none;border-radius:2px;
  cursor:pointer;transition:background 0.2s;
  margin-top:8px;
}
.btn-submit:hover{background:var(--accent-bright)}
.btn-submit:disabled{opacity:0.6;cursor:not-allowed}
.form-status{
  margin-top:20px;font-family:var(--mono);font-size:12px;letter-spacing:0.06em;
  padding:14px 16px;border:1px solid var(--rule);border-radius:2px;
  display:none;line-height:1.6;
}
.form-status.success{display:block;color:#7ee0a8;border-color:rgba(126,224,168,0.35);background:rgba(126,224,168,0.06)}
.form-status.error{display:block;color:#ff8c93;border-color:rgba(255,140,147,0.35);background:rgba(255,140,147,0.06)}

/* Cloudflare Turnstile widget.
   With data-appearance="interaction-only", the widget is invisible by default
   and only appears (taking ~65px height) if Cloudflare needs the user to
   solve an interactive challenge. */
.cf-turnstile{margin:8px 0 16px}

/* ── INFO BLOCKS ── */
.info-block{margin-bottom:48px}
.info-block:last-child{margin-bottom:0}
.info-label{
  font-family:var(--mono);font-size:10px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--text-dim);
  margin-bottom:16px;padding-bottom:12px;
  border-bottom:1px solid var(--rule);
}
.info-value{font-size:15px;color:var(--text-mid);line-height:1.8}
.info-value a{
  color:var(--text);transition:color 0.2s;
  text-decoration:underline;text-underline-offset:3px;
}
.info-value a:hover{color:var(--accent)}
.info-address{
  font-style:normal;font-size:15px;color:var(--text-mid);line-height:1.8;
}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .contact-section{grid-template-columns:1fr}
  .contact-form-wrap{border-right:none;border-bottom:1px solid var(--rule)}
}
@media(max-width:768px){
  .contact-form-wrap{padding:48px 24px}
  .contact-info{padding:48px 24px}
  .form-input,.form-textarea,.form-select{font-size:16px}
  /* 16px prevents iOS Safari zoom-on-focus */
  .btn-submit{width:100%;padding:18px 32px}
  .info-block{margin-bottom:36px}
}
@media(max-width:600px){
  .form-row{grid-template-columns:1fr;gap:0}
}
@media(max-width:480px){
  .contact-form-wrap{padding:36px 20px}
  .contact-info{padding:36px 20px}
  .form-group{margin-bottom:24px}
}