/* Contact Page — Cloudasys */
:root{
  --cld-bg:#04042c;
  --cld-accent:#9243f9;
}

.contact-hero{
  background:#04042c;
  color:#fff;
  padding:40px 0 24px;
}
.contact-hero h1{color:#ff7854;}
.contact-hero .lead{ color:#e6e6e6; max-width: 900px; }
.contact-meta{
  display:flex; gap:18px; flex-wrap:wrap; margin-top:10px;
}
.contact-meta a{ color:#e6e6e6; }
.contact-meta a:hover{ color:#fff; }

/* Grid (builds on your existing contact-grid idea) */
.contact-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
}
.contact-grid .span-2{ grid-column: span 2; }
.contact-grid .span-3{ grid-column: span 3; }
.req{ color:#d9534f; }

/* Honeypot: visually hidden but accessible-safe */
.hp-wrap{
  position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden;
}

/* Captcha row */
.captcha-row{
  display:flex; align-items:center; gap:10px;
}
.captcha-row span{
  font-weight:700; color:#04042c; background:#f3f3f3; border-radius:6px; padding:6px 10px;
}
.captcha-input{ max-width:140px; }
.captcha-refresh{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background:#eee; color:#333; text-decoration:none;
}
.captcha-refresh:hover{ background:#e2e2e2; }

.btn-submit{
  width:100%;
  text-align:center;
}

/* Small screens */
@media (max-width: 767px){
  .contact-grid{ grid-template-columns: 1fr; }
  .contact-grid .span-2, .contact-grid .span-3{ grid-column: span 1; }
}