/* ==========================================================================
   CONTACT.CSS — Contact page only (template-contact.php).
   Loaded on top of base.css. The form itself (.django-contact-form-wrap
   and everything inside it) is styled by the Django Leads plugin's own
   frontend.css — this file only handles this page's two-column layout and
   the info column (Django address / Careers).
   ========================================================================== */

.contact-section{
  background:var(--light-bg); color:var(--black);
  padding:150px clamp(20px,5vw,64px) 110px;
  display:grid; grid-template-columns:1.4fr 1fr; gap:70px;
  align-items:start;
}
.contact-main .hero-heading{
  color:var(--black);
  font-size:clamp(30px,4.4vw,52px);
  margin-bottom:44px;
}
.contact-form-col .django-contact-form-wrap{
  max-width:520px;
}
.contact-info{
  display:flex; flex-direction:column; gap:56px;
}
.contact-info-block h2{
  font-family:'Fraunces',serif; font-weight:500; font-size:26px; margin-bottom:18px;
}
.contact-info-block p{
  font-family:'IBM Plex Mono',monospace; font-size:14px; line-height:1.7; color:#4a453d;
  max-width:44ch;
}
.contact-info-line{
  margin-top:14px;
}
.contact-info-line a:hover{color:var(--orange);}
.contact-info-sep{color:#b5afa2; margin:0 4px;}

@media (max-width:900px){
  .contact-section{grid-template-columns:1fr; gap:50px;}
}
@media (max-width:760px){
  .contact-section{padding:110px 20px 70px;}
  .contact-main .hero-heading{margin-bottom:30px;}
  .contact-info{gap:40px;}
}