/* [05] hire: service rows + the flare form */
.hr { padding-top: 140px; }
.hr-shd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hr-shd .shd-p { max-width: 54ch; }
.hr-rows { position: relative; margin-top: 44px; border-bottom: 1px solid var(--line-2); }
.lrow { display: grid; grid-template-columns: 56px minmax(0, 1.3fr) minmax(0, 1.6fr) 140px 170px; align-items: center; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line-2); }
.hr-n { color: var(--text-6); }
.hr-t { font-size: 20px; color: var(--hire-title, var(--title)); }
.hr-d { font-size: 14px; color: var(--text-3); }
.hr-p { font-weight: 600; font-size: 26px; color: var(--hire-price, var(--text)); }
.hr-a { font-size: 13px; letter-spacing: .16em; }
a.hr-a:hover, a.hr-a:focus-visible { color: var(--hilite); }

.hr-form { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; margin-top: 44px; padding: 30px;
  border: 1px solid var(--line); background: var(--bg-2); }
.hr-wide { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
.field input, .field select, .field textarea { min-height: 48px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 0; background: var(--bg-3);
  font-family: "Share Tech Mono", ui-monospace, monospace; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--text); }
.field textarea { resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-6); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field select { transition: border-color .6s, background-color .6s; }
.field select.jobhot { border-color: var(--accent); background-color: color-mix(in srgb, var(--accent) 14%, var(--bg-3)); transition: none; }
.field.bad input, .field.bad textarea { border-color: var(--alert); }
.hr-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.hr-note { font-size: 13px; color: var(--text-5); }
.hr-note.is-ok { color: var(--ok); }
.hr-note.is-bad { color: var(--alert); }
.hr-form button[disabled] { opacity: .6; cursor: progress; }
.hr-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 900px) {
  .lrow { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "n t p" ". d d" ". a a"; gap: 6px 16px; align-items: baseline; }
  .hr-n { grid-area: n; } .hr-t { grid-area: t; } .hr-d { grid-area: d; } .hr-p { grid-area: p; justify-self: end; } .hr-a { grid-area: a; margin-top: 6px; }
}
@media (max-width: 700px) { .hr-shd { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .hr-form { padding: 22px; } }

/* human check (Turnstile / hCaptcha): right-aligned above the send button. Invisible by default; when Cloudflare wants a click it
   appears above it. 'always' keeps its space so the button doesn't move when it loads. */
.hr-act { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; margin-left: auto; }   /* the check sits above the button, right-aligned */
.hr-cap:empty { display: none; }
.hr-cap.is-always { min-width: 300px; min-height: 65px; }
.hr-cap.is-always.is-compact { min-width: 150px; min-height: 140px; }
.hr-cap.is-always:empty { display: block; border: 1px dashed var(--line); background: var(--bg-3); }
@media (max-width: 600px) { .hr-act { width: 100%; align-items: stretch; } .hr-act .btn { justify-content: center; } .hr-cap { align-self: center; } }
.hr-foot:has(.hr-cap:not(:empty)) { align-items: flex-end; }                 /* the note stays level with the button */
.hr-foot:has(.hr-cap:not(:empty)) .hr-note { padding-bottom: 15px; }
@media (max-width: 600px) { .hr-foot:has(.hr-cap:not(:empty)) .hr-note { padding-bottom: 0; } }