/* Sub-page styles (Contact, legal). Loads on top of homepage.css (base + nav + footer + vars). */

.page-hero{padding:150px 0 34px;position:relative}
.page-hero h1{font-size:clamp(40px,5vw,66px);line-height:1.02;letter-spacing:-.05em;margin:0 0 18px}
.page-lede{font-size:clamp(18px,1.5vw,21px);color:var(--muted);max-width:620px;margin:0;line-height:1.55}

.contact-section{padding:16px 0 120px}
.contact-form{max-width:760px}

.legal-section{padding:8px 0 100px}

/* Long-form text (legal pages) */
.prose{max-width:820px;color:#c6cdd3;font-size:16px;line-height:1.75}
.prose h2{color:var(--text);font-size:24px;letter-spacing:-.02em;margin:36px 0 12px}
.prose h3{color:var(--text);font-size:18px;margin:26px 0 10px}
.prose p{margin:0 0 16px}
.prose a{color:var(--blue)}
.prose ul,.prose ol{margin:0 0 16px 22px}
.prose li{margin:0 0 8px}

/* ---- FluentForm dark theme overrides ---- */
.humatics-contact .fluentform{color:var(--text)}
.humatics-contact .fluentform .ff-el-group{margin-bottom:20px}
.humatics-contact .fluentform label,
.humatics-contact .fluentform .ff-el-input--label label{color:var(--text);font-weight:600;font-size:14px;letter-spacing:-.01em;margin-bottom:8px;display:inline-block}
.humatics-contact .fluentform .ff-el-is-required-symbol{color:var(--blue)}

.humatics-contact .fluentform input.ff-el-form-control,
.humatics-contact .fluentform textarea.ff-el-form-control,
.humatics-contact .fluentform select{
  background:#0d1217 !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
  border-radius:8px !important;
  padding:12px 14px !important;
  font-size:15px !important;
  line-height:1.4 !important;
  width:100% !important;
  height:auto !important;
  box-shadow:none !important;
  transition:border-color .15s, box-shadow .15s
}
.humatics-contact .fluentform input.ff-el-form-control::placeholder,
.humatics-contact .fluentform textarea.ff-el-form-control::placeholder{color:#5f6b74}
.humatics-contact .fluentform input.ff-el-form-control:focus,
.humatics-contact .fluentform textarea.ff-el-form-control:focus,
.humatics-contact .fluentform select:focus{
  border-color:var(--blue) !important;outline:none !important;box-shadow:0 0 0 3px rgba(0,168,224,.15) !important
}
.humatics-contact .fluentform textarea.ff-el-form-control{min-height:130px;resize:vertical}

/* native select arrow on dark */
.humatics-contact .fluentform select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239aa5ae' d='M6 8 0 0h12z'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;background-position:right 14px center !important;padding-right:36px !important
}

/* FluentForm multi-column rows */
.humatics-contact .fluentform .ff-t-container{gap:18px}
.humatics-contact .fluentform .ff-t-cell{padding:0}

/* submit button */
.humatics-contact .fluentform .ff-btn-submit,
.humatics-contact .fluentform button[type=submit]{
  background:var(--blue) !important;border:1px solid var(--blue) !important;color:#031017 !important;
  border-radius:999px !important;padding:13px 28px !important;font-size:14px !important;font-weight:700 !important;
  cursor:pointer;box-shadow:none !important;transition:.2s
}
.humatics-contact .fluentform .ff-btn-submit:hover{transform:translateY(-1px);filter:brightness(1.06)}

/* validation + messages */
.humatics-contact .fluentform .ff-el-is-error input,
.humatics-contact .fluentform .ff-el-is-error textarea,
.humatics-contact .fluentform .ff-el-is-error select{border-color:#e0564f !important}
.humatics-contact .fluentform .error-text,
.humatics-contact .fluentform .text-danger{color:#e88b86 !important;font-size:13px;margin-top:5px}
.humatics-contact .fluentform .ff-message-success,
.humatics-contact .ff_submit_success{
  background:rgba(0,168,224,.08);border:1px solid rgba(0,168,224,.35);color:var(--text);
  padding:16px 18px;border-radius:10px
}

@media(max-width:520px){
  .page-hero{padding-top:118px}
  .contact-section{padding-bottom:80px}
  .humatics-contact .fluentform .ff-t-container{gap:0}
}