/* ── /contact — Website AI 2.1 › Contact (3060:2036) ─────────────────────────
   Two blocks the tech shell does not have: the question band (copy column, the
   paper plane, the form card with its navy header) and the team grid.
   Everything resolves to base.css tokens; where the frame drew an off-palette value
   (#eaedf1 ground, #c5d1e1 strokes, #fbfbfb fills, 10px corners) the system's
   nearest value is used instead, as §01 asks. The frame is desktop-only (§18);
   the two breakpoints below are the site's own. */

/* ── the band ──────────────────────────────────────────────────────────────── */
/* .hero is kept for the header-clearance padding exemption and the shell's hero
   hooks; everything it draws for the service pages is undone here. */
.hero.qhero { background: var(--light-bg); text-align: left; min-height: 0; overflow: visible;
  padding: calc(var(--hero-pt) + var(--s-6)) 0 var(--s-7); }
.qh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 571px); gap: var(--s-4); align-items: stretch; }
.qh-copy { position: relative; }
.qh-head { padding-top: 16px; }
.qh-head h1 { line-height: var(--lh-h2); font-size: var(--fs-h2); font-weight: 500; color: var(--ink); margin: 0; }
.qh-head p { line-height: 1.6; font-size: var(--fs-p); color: var(--ink); margin: 4px 0 0; }
.qh-alt { margin-top: var(--s-6); }
.qh-alt h2 { line-height: 1.3; font-size: var(--fs-h5); font-weight: 400; color: var(--ink); margin: 0 0 8px; }
/* the frame's plane and dashed flight path, free-placed between the links and the
   addresses (Graphics 3060:2040 at 286,261 in the copy column) */
.qh-plane { position: absolute; left: 286px; top: 261px; width: 539px; height: 413px; max-width: none; pointer-events: none; }
.qh-addr { position: absolute; left: 0; top: 442px; margin: 0; display: flex; flex-direction: column; gap: var(--s-5); }
.qh-addr dt { line-height: 1.6; font-size: var(--fs-p); font-weight: 400; color: var(--ink); }
.qh-addr dd { line-height: 1.3; font-size: var(--fs-h5); font-weight: 400; color: var(--ink); margin: 8px 0 0; }
.qh-slash { font-size: var(--fs-p-small); }

/* ── the form card ─────────────────────────────────────────────────────────── */
.qform { background: var(--white); border-radius: var(--r-lg); overflow: hidden; }
.qf-head { background: var(--grad-dark); color: var(--white); padding: var(--s-3) var(--s-4); }
.qf-head h2 { line-height: 1.3; font-size: var(--fs-h5); font-weight: 700; color: var(--white); margin: 0; }
.qf-head p { line-height: 1.4; font-size: var(--fs-p-small); color: var(--white); margin: 8px 0 0; max-width: none; }
.qform .form-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); padding: var(--s-4); }
.qform .form-body > * { align-self: stretch; }
.qform .form-body > .btn { align-self: flex-start; }   /* 154 wide in the frame, not the card */
.form-body .qf-fields { display: flex; flex-direction: column; gap: 20px; }
/* The frame's control: label and value in one bordered box, 60 tall (Frame 39799).
   8 + 20 + 4 + 20 + 8. form.css's loose label/field rules are undone here, in a more
   specific selector, so the shared form on the other 111 pages is untouched. */
.form-body .qf-field { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 8px 16px; min-height: 60px;
  background: var(--off-white); border: 1px solid var(--light-border); border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.form-body .qf-field label, .form-body .qf-field .qf-label { display: block; line-height: var(--lh-label); font-size: var(--fs-label); font-weight: 600; color: var(--ink); margin: 0; }
.form-body .qf-field .req { color: var(--ink); }
.form-body .qf-field input, .form-body .qf-field select, .form-body .qf-field textarea { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent;
  line-height: var(--lh-label); font-size: var(--fs-p-small); color: var(--ink); min-height: 20px; }
.form-body .qf-field input:focus, .form-body .qf-field select:focus, .form-body .qf-field textarea:focus { border-color: transparent; }
.form-body .qf-field input:focus-visible, .form-body .qf-field select:focus-visible, .form-body .qf-field textarea:focus-visible { outline: none; box-shadow: none; }
/* one focus indicator for the whole box, the form's amber (form.css) */
.form-body .qf-field:focus-within { border-color: var(--amber); background: var(--white); box-shadow: 0 0 0 3px rgba(255,189,14,0.35); }
.form-body .qf-field:hover:not(:focus-within) { border-color: var(--mid-neutral); }
.form-body .qf-area { min-height: 120px; }
.form-body .qf-area textarea { flex: 1; min-height: 76px; resize: none; padding-top: 0; }
.form-body .qf-select select { -webkit-appearance: none; appearance: none; background-image: none; padding-right: 40px; cursor: pointer; }
.form-body .qf-select select:invalid { color: var(--text-dim); }
.qf-ic { position: absolute; right: 16px; top: 50%; width: 24px; height: 24px; transform: translateY(-50%); color: var(--ink); pointer-events: none; }

/* the file field (File attachment input, 3070:713): default, hover, focus, file
   added and error, each the component's own; the <input> stays in the tab order */
.form-body .qf-attach { cursor: pointer; }
.form-body .qf-attach input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; min-height: 0; }
.form-body .qf-attach-row { display: flex; align-items: center; gap: 8px; line-height: var(--lh-label); font-size: var(--fs-label); color: var(--ink); }
.form-body .qf-attach .qf-ic-up { position: static; transform: none; width: 20px; height: 20px; margin: 0; color: var(--text-dim); }
.form-body .qf-attach-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-body .qf-attach-action { position: relative; z-index: 1; font-weight: 600; color: var(--text-dim); }
.form-body .qf-attach.has-file .qf-attach-name { font-weight: 600; }
.form-body .qf-attach:hover:not(:focus-within) { background: var(--soft-hover); }
.form-body .qf-attach.is-err { border-color: var(--error); }
.form-body .qf-attach.is-err .qf-attach-name, .form-body .qf-attach.is-err .qf-attach-action, .form-body .qf-attach.is-err .qf-ic-up { color: var(--error); }
.form-body .qf-help { line-height: 1.4; font-size: var(--fs-p-smallest); color: var(--text-dim); margin: 8px 0 0; }
.form-body .qf-help.is-err { color: var(--error); }

.form-body .qf-legal { display: flex; flex-direction: column; gap: 12px; }
.form-body .qf-legal .form-consent { margin: 0; }
.form-body .qf-legal .form-optin { margin: 0; min-height: 0; }
.form-body .qf-nda span { line-height: 1.5; }
.form-body .qf-nda .ca-link { display: inline-flex; vertical-align: baseline; font-size: inherit; margin-left: 4px; }
.form-body .qf-nda .ca-link .ca-ic { width: 20px; height: 20px; }

/* ── Trusted by ─────────────────────────────────────────────────────────────── */
/* The strip is the service pages' (tech.css); there it continues the hero's gradient.
   Here it continues the band's flat grey instead, and the grid below fades out of it. */
.qhero + .trust { background: var(--light-bg); }

/* ── The faces behind the work (team-members-grid, 3340:6116) ──────────────── */
/* The frame's ground fades from the band's grey into white over the top 30%, so the
   two sections read as one surface; its own gradient, so kept (§04). 80/104 of padding
   in the frame → the standard section's 96. */
.tmg-sec { background: linear-gradient(180deg, var(--light-bg) 0%, var(--white) 30%); }
.tmg-head { text-align: center; margin-bottom: var(--s-6); }
.tmg-head h2 { line-height: var(--lh-h2); font-size: var(--fs-h2); font-weight: 500; color: var(--ink); margin: 0; }
.tmg-head p { line-height: 1.3; font-size: var(--fs-subtitle); color: var(--ink); margin: 4px auto 0; max-width: none; }
/* four 266-wide cards on a 30 gutter in the frame; flex-wrap so a short team centres
   and a longer one fills rows of four */
/* Four 266 cards on 32 is 1160, and the row is capped there so a wide screen never
   runs five across. The basis is what decides when a row drops to three: 220 keeps
   five out of a 1160 row; below 1280 it eases to 200 so four still share a 1024 column. */
.tmg { list-style: none; margin: 0 auto; padding: 0; max-width: 1160px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-6) var(--s-4); }
.tmg-card { flex: 1 1 220px; max-width: 266px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tmg-photo { display: block; width: 120px; height: 120px; object-fit: cover; border-radius: 50%; margin: 0 0 var(--s-2);
  background: radial-gradient(circle at 50% 40%, var(--off-white) 0%, var(--light-bg) 70%); }
.tmg-card h3 { line-height: 1.3; font-size: var(--fs-p-small); font-weight: 500; color: var(--ink); margin: 0; }
.tmg-role { line-height: var(--lh-label); font-size: var(--fs-label); color: var(--text-dim); margin: 4px 0 0; max-width: none; }
.tmg-quote { line-height: var(--lh-label); font-size: var(--fs-label); color: var(--text-dim); margin: var(--s-2) 0 0; max-width: none; }

/* ── narrower than the frame ───────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .qh-plane { display: none; }
  .qh-addr { position: static; margin-top: var(--s-6); }
}
@media (max-width: 1279px) {
  .tmg-card { flex-basis: 200px; }
}
@media (max-width: 940px) {
  .qh-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .qh-head { padding-top: 0; }
  .tmg { gap: var(--s-5) var(--s-3); }
}
@media (max-width: 480px) {
  /* page gutter 16 + bar inset 24: the logo is at 40 */
  /* two across on a phone — eight cards in one column ran 2400px; 96 portraits */
  .tmg { gap: var(--s-3) var(--s-2); }
  .tmg-card { flex-basis: 140px; }
  .tmg-photo { width: 96px; height: 96px; }
  .qform .form-body { padding: var(--s-2); }
  .qf-head { padding: var(--s-3); }
  .form-body .qf-field { padding-left: 12px; padding-right: 12px; }
  .qf-ic { right: 12px; }
  .qform .btn { width: 100%; }
}