/* ── CONTACT LAYOUT ── */
#contact {
  padding: 6rem 5vw;
  border-top: 1px solid var(--border);
  position: relative; z-index: 1;
}
.contact-inner {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 5vw; align-items: start;
}

/* ── FORM ── */
.contact-form {
  display: flex; flex-direction: column; gap: 1.2rem;
}
.cf-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
}
.cf-group {
  display: flex; flex-direction: column; gap: .45rem;
}
.cf-label {
  font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.cf-input {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: .88rem;
  padding: .85rem 1rem;
  outline: none;
  transition: border-color .2s, background .2s;
  width: 100%;
}
.cf-input:focus {
  border-color: var(--cyan);
  background: rgba(0,229,255,.03);
}
.cf-input::placeholder { color: var(--muted); opacity: .7; }
.cf-textarea { min-height: 140px; resize: vertical; }
select.cf-input { cursor: pointer; appearance: none; }
select.cf-input option { background: var(--surface); color: var(--text); }

.cf-submit {
  font-family: 'Syne', sans-serif;
  font-size: .82rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--bg); background: var(--cyan);
  border: none; cursor: pointer;
  padding: 1.1rem 2rem;
  clip-path: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px);
  transition: background .25s, transform .2s;
  width: 100%;
}
.cf-submit:hover {
  background: var(--green); transform: translateY(-2px);
}

/* ── CONTACT INFO ── */
.contact-info { position: sticky; top: 7rem; }
.contact-info h2 { margin-bottom: 1.8rem; }

.contact-cards {
  display: flex; flex-direction: column; gap: .8rem;
}
.contact-card {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.2rem 1.4rem;
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color .25s;
}
.contact-card:hover { border-color: rgba(0,229,255,.3); }
.cc-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: .05rem; }
.cc-title {
  font-family: 'Syne', sans-serif;
  font-size: .82rem; font-weight: 700;
  color: var(--white); margin-bottom: .2rem;
}
.cc-val {
  font-size: .78rem; color: var(--muted); line-height: 1.55;
}

/* ── RESPONSE BANNER ── */
.contact-banner {
  margin-top: 1.5rem;
  padding: 1.2rem 1.4rem;
  background: rgba(0,229,255,.04);
  border: 1px solid rgba(0,229,255,.18);
}
.contact-banner p {
  font-size: .8rem; color: var(--text); line-height: 1.65;
}
.contact-banner strong { color: var(--cyan); }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .contact-inner { grid-template-columns: 1fr; }
  .contact-info { position: static; }
}
@media (max-width: 600px) {
  .cf-row { grid-template-columns: 1fr; }
}