/* ── CONTACT ── */
#contact{
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(217,168,76,0.06), transparent 60%),
    var(--bg-2);
  text-align:center;
}
#contact::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-line), transparent);
}
#contact .eyebrow{justify-content:center;}
#contact .eyebrow::before{display:none;}

.contact-headline{
  font-family:var(--display); font-weight:500;
  font-size:clamp(36px,5vw,64px); line-height:1.06; letter-spacing:-0.015em;
  color:var(--ink);
}
.contact-headline em{font-style:italic; color:var(--gold);}
.contact-sub{margin:22px auto 0; font-size:16px; color:var(--slate); max-width:480px;}

/* form + cards layout */
.contact-grid{
  max-width:1080px; margin:56px auto 0;
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:20px;
  text-align:left; align-items:start;
}

/* ── FORM ── */
.contact-form{
  border:1px solid var(--line); border-radius:14px;
  background:var(--card); padding:32px 30px;
  display:flex; flex-direction:column; gap:16px;
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-field{display:flex; flex-direction:column; gap:7px;}
.form-field label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate);
}
.form-field input,
.form-field textarea{
  font-family:var(--body); font-size:14.5px; color:var(--ink);
  background:rgba(255,255,255,0.02);
  border:1px solid var(--line); border-radius:8px;
  padding:13px 15px; outline:none; resize:vertical;
  transition:border-color .25s, background .25s;
}
html[data-theme="light"] .form-field input,
html[data-theme="light"] .form-field textarea{background:rgba(255,255,255,0.85);}
.form-field input::placeholder,
.form-field textarea::placeholder{color:var(--slate); opacity:.7;}
.form-field input:focus,
.form-field textarea:focus{border-color:var(--gold-line); background:var(--gold-tint);}
.form-field textarea{min-height:120px;}

.form-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px;}
.form-actions .btn-primary,
.form-actions .btn-secondary{padding:13px 24px; font-size:14px; cursor:pointer;}
.btn-wa svg{width:16px; height:16px;}

.form-status{font-size:13px; min-height:18px;}
.form-status.ok{color:#6FCF97;}
.form-status.err{color:#E58B8B;}

.contact-cards{
  display:grid; grid-template-columns:1fr; gap:14px;
  text-align:left;
}
.contact-card{
  display:flex; align-items:center; gap:16px;
  border:1px solid var(--line); border-radius:12px;
  background:var(--card); padding:22px 24px;
  text-decoration:none;
  transition:border-color .3s, background .3s, transform .3s var(--ease), box-shadow .3s;
}
.contact-card:hover{
  border-color:rgba(217,168,76,0.3); background:var(--card-hover);
  transform:translateY(-3px); box-shadow:var(--shadow);
}
.contact-card-icon{
  width:44px; height:44px; border-radius:10px; flex-shrink:0;
  border:1px solid var(--gold-line); background:var(--gold-tint);
  display:flex; align-items:center; justify-content:center; color:var(--gold);
}
.contact-card-icon svg{width:19px; height:19px;}
.contact-card-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--slate); margin-bottom:4px;
}
.contact-card-val{font-size:14.5px; font-weight:500; color:var(--ink);}

.contact-bottom{
  margin-top:56px; display:flex; flex-direction:column; align-items:center; gap:14px;
}
.contact-availability{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#6FCF97;
  border:1px solid rgba(111,207,151,0.3); border-radius:100px;
  background:rgba(111,207,151,0.07); padding:9px 18px;
}
.avail-dot{width:7px; height:7px; border-radius:50%; background:#6FCF97; box-shadow:0 0 10px rgba(111,207,151,0.9); animation:availPulse 2.2s ease-in-out infinite;}
@keyframes availPulse{0%,100%{opacity:1;} 50%{opacity:.4;}}

.contact-lead{font-size:13.5px; color:var(--slate);}
.contact-lead strong{color:var(--ink-soft); font-weight:600;}

@media (max-width: 900px){ .contact-grid{grid-template-columns:1fr;} }
@media (max-width: 560px){ .form-row{grid-template-columns:1fr;} }