/* ============================================================
   Contact - Figma frame 6195:3311 ("Contact — High Fidelity v1")
   ============================================================ */

/* ---- 01 Hero (6195:3353) ---- */
.contact-hero{padding:128px 0 var(--space-8)}           /* top = Figma Spacing/10 (128), not in the shared scale */
.contact-hero__head{max-width:760px}                     /* Section Head instance is 760 wide on this page */
.contact-hero .eyebrow{color:var(--primary-500)}         /* instance override: label uses Primary/primary-500 here */

/* ---- 02 Form and channels (6195:3363) ---- */
.contact-main{padding:var(--space-7) 0 var(--space-9)}
.contact-main__row{display:flex;gap:var(--space-8);align-items:flex-start}

.contact-form{
  flex:none;width:720px;
  display:flex;flex-direction:column;gap:var(--space-5);align-items:flex-start;
  padding:var(--space-7);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
}
.contact-form > .field,
.contact-form__pair,
.contact-form__note{align-self:stretch}
.contact-form__pair{display:flex;gap:var(--space-5)}
.contact-form__pair .field{flex:1;min-width:0}
.contact-form textarea.input{height:132px;line-height:26px}   /* Figma: 132 tall, Body/Base 16/26 */
.contact-form__note{color:var(--text-muted)}

.contact-channels{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-5)}
.contact-channel{display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start}
.contact-channel + .contact-channel{border-top:1px solid var(--border);padding-top:var(--space-3)}
.contact-channel p{color:var(--text-secondary)}
.contact-channel p a:hover{color:var(--brand)}

/* ---- Responsive ---- */
@media (max-width:1100px){
  .contact-hero{padding-top:var(--space-9)}
  .contact-main__row{flex-direction:column;gap:var(--space-7)}
  .contact-form{width:100%}
  .contact-channels{width:100%}
}
@media (max-width:640px){
  .contact-hero{padding-top:var(--space-8)}
  .contact-main{padding-top:var(--space-5)}
  .contact-form{padding:var(--space-5)}
  .contact-form__pair{flex-direction:column}
}