/* ================= Manar Technology — contact-page stylesheet =================
   Page-unique rules ported from contact.html as part of the
   Phase B shared-template conversion (see
   .claude/plans/vectorized-tickling-blossom.md). Everything already shared
   across pages (design tokens, buttons, nav, footer, section furniture,
   motion primitives, .sr-only) lives in assets/css/site.css and is not
   repeated here — this file is loaded in addition to site.css, only on
   contact.php. */

/* Page intro banner on contact — no padding-bottom override (unlike about's
   page-intro, which shortens the bottom gap); contact keeps the default
   .section 110px bottom padding, exactly as contact.html did. */
.page-intro { padding-top: calc(var(--nav-h) + 70px); }

/* ================= Assessment ================= */
.assess-wrap {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  background: var(--white); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-lg); margin-top: 56px; border: 1px solid var(--line);
}
.assess-intro {
  background:
    radial-gradient(600px 400px at 0% 100%, rgba(216, 154, 46,0.12), transparent 60%),
    linear-gradient(160deg, var(--navy), var(--navy-deep));
  color: #fff; padding: 48px 40px; position: relative; overflow: hidden;
}
.assess-intro h3 { font-size: 26px; font-weight: 700; margin-bottom: 14px; }
.assess-intro > p { color: rgba(255,255,255,0.82); margin-bottom: 30px; }
.assess-perks { list-style: none; display: grid; gap: 16px; }
.assess-perks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: rgba(255,255,255,0.88); }
.assess-perks svg { flex-shrink: 0; margin-top: 3px; }
.assess-form { padding: 48px 40px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--ink); }
.form-field label .req { color: #B91C1C; }
.form-field input, .form-field select {
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  min-height: 50px; padding: 10px 16px; width: 100%;
  border: 1.5px solid var(--line-control); border-radius: 12px;
  background: #fff; transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.form-field input:hover, .form-field select:hover { border-color: var(--navy); }
.form-field input:focus-visible, .form-field select:focus-visible {
  border-color: var(--navy-deep);
  box-shadow: 0 0 0 3px var(--white);
  transition: none;
}
.form-error { font-size: 13.5px; color: #B91C1C; display: none; }
.form-field.invalid input { border-color: #B91C1C; }
.form-field.invalid .form-error { display: block; }
fieldset.form-field { border: none; padding: 0; margin: 0; min-inline-size: 0; }
fieldset.form-field legend {
  font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--ink);
  padding: 0; margin-bottom: 8px;
}
.checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; margin-top: 4px; }
.checks label {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--ink);
  min-height: 46px; padding: 8px 14px;
  border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer;
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.checks label:hover { border-color: var(--gold); background: #FDFAF0; transform: translateY(-2px); }
.checks input { width: 18px; height: 18px; accent-color: var(--navy); cursor: pointer; flex-shrink: 0; }
.form-submit { margin-top: 28px; width: 100%; }
.form-note { font-size: 13.5px; color: var(--mut); margin-top: 14px; text-align: center; }
.form-success { display: none; text-align: center; padding: 44px 20px; }
.form-success.show { display: block; animation: fadeUp 500ms var(--ease-out); }
.form-success h4 { font-family: var(--font-display); font-size: 23px; color: var(--success); margin: 16px 0 8px; }
.form-success p { color: var(--mut); }
@media (max-width: 880px) {
  .assess-wrap { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .checks { grid-template-columns: 1fr; }
}

/* ================= Contact ================= */
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 52px; }
.contact-card {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-md); padding: 30px 22px; text-align: center;
  text-decoration: none; display: block;
  transition: border-color 300ms var(--ease-out), background-color 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.contact-card:hover { border-color: var(--gold); background: rgba(255,255,255,0.09); transform: translateY(-6px); }
.contact-card .cc-icon {
  width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%;
  background: rgba(216, 154, 46, 0.14); border: 1px solid rgba(216, 154, 46, 0.45);
  display: flex; align-items: center; justify-content: center;
  transition: transform 300ms var(--ease-out);
}
.contact-card:hover .cc-icon { transform: scale(1.12) rotate(-6deg); }
.contact-card h3 { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.contact-card p { font-size: 14.5px; color: rgba(255,255,255,0.7); }
.contact-note { text-align: center; margin-top: 40px; color: rgba(255,255,255,0.6); font-size: 15.5px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .contact-grid { grid-template-columns: 1fr; } }