/* ==========================================================================
   Taq Ventures — Contact page styles
   Loaded after assets/styles.css on contact.html
   ========================================================================== */

.contact-hero{
  padding: 84px 0 60px;
  border-bottom: 1px solid var(--line);
}
.contact-eyebrow{
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); font-size: 14px; margin-bottom: 24px;
}
.contact-eyebrow .rule{ width: 28px; height: 2px; background: var(--accent-bright); }
.contact-hero h1{
  font-size: clamp(30px, 4.5vw, 44px);
  letter-spacing: -0.01em;
}
.contact-hero p{
  color: var(--muted);
  font-size: 18px;
}

.contact-block{ padding: 64px 0; }
.contact-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
}
@media (max-width: 720px){
  .contact-grid{ grid-template-columns: 1fr; gap: 40px; }
}

.contact-form .field{ margin-bottom: 26px; }
/* Two short fields to a row, so the longer forms on video-call.html and
   contact.html keep the submit button near the fold. Column gap only — the row's height comes from
   the .field margins above. */
.field-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
}
/* Matching the .contact-grid stacking point above, so the form goes to one
   column at the same width the page does. */
@media (max-width: 720px){
  .field-row{ grid-template-columns: 1fr; gap: 0; }
}
.contact-form label{
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  padding: 10px 2px;
  resize: vertical;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-bottom-color: var(--accent);
  outline: none;
}

.contact-form select{
  cursor: pointer;
}
.contact-form ::placeholder{ color: var(--muted); opacity: 0.7; }

/* Consent checkbox: box and wording side by side, the wording at body size
   rather than the small field-label size, because it is the sentence people
   are agreeing to. */
.contact-form .field-check{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.contact-form .field-check input{
  width: auto;
  flex: none;
  margin: 3px 0 0;
  accent-color: var(--accent);
}
.contact-form .field-check label{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* The spam honeypot (see the comment on the form in contact.html). Off-screen
   rather than display:none, because some bots skip fields hidden that way. */
.form-honeypot{
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-direct-heading{
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 4px;
}
.contact-direct p{
  color: var(--muted);
  font-size: 15px;
  margin-top: 10px;
}
.contact-direct a{
  color: var(--accent);
  text-decoration: none;
}
.contact-direct a:hover{
  color: var(--accent-bright);
  text-decoration: underline;
}

/* ---- mobile vertical rhythm: see the matching block in styles.css ---- */
@media (max-width: 640px){
  .contact-hero{ padding: 40px 0 32px; }
  .contact-eyebrow{ margin-bottom: 18px; }
  .contact-hero p{ font-size: 17px; }
  .contact-block{ padding: 40px 0; }
  .contact-form .field{ margin-bottom: 20px; }
}