/* Contact page. Copied from the contact mockup. Shared chrome stays in site.css. */
/* closer form, the contact card uses the same fields */
form{display:grid;gap:18px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:grid;gap:8px;font-size:14px;font-weight:600;color:var(--text-2)}
input,textarea{font:400 17px/1.5 var(--sans);color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;outline:none;transition:border-color var(--fast) var(--ease)}
input:hover,textarea:hover{border-color:var(--line-hi)}
input:focus,textarea:focus{border-color:rgba(244,244,245,.5)}
textarea{min-height:150px;resize:vertical}
form .btn-red{justify-self:start;padding:15px 30px;font-size:16px}
.btn .pi{width:18px;height:18px}
.btn-red .pi{width:18px;height:18px}
.frow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
input,textarea{width:100%;min-width:0}
.hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.errorlist{list-style:none;margin:0;padding:0;color:#fecaca;font:500 13px/1.4 var(--sans)}

/* ===== Pricing, Contact, How we work (27 Oct): static hero + paper price list. Reuses home/ERP/vertical parts. ===== */
.shero{padding-bottom:96px}
.shero .hero-content{text-align:center}
.shero h1{font-size:clamp(40px,5vw,72px);line-height:.98;letter-spacing:-0.035em;max-width:14em;margin:0 auto}
.shero .kick{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:10px;align-items:center;margin-bottom:22px;font:600 13px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.shero .lead{margin:24px auto 0;max-width:36em;font-size:19px;line-height:1.6;color:var(--text-2)}
.shero .visual{position:relative;margin:56px auto 0;max-width:860px;text-align:left}
/* contact */
.formcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:32px}
.formcard form{display:grid;gap:18px}
.shero .after-form{margin:26px auto 0;max-width:40em;display:grid;gap:8px;color:var(--text-2);font-size:16px}
.shero .after-form .q{font-family:var(--serif);font-size:20px;color:var(--text)}
.reach{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:48px}
.rc{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:22px;display:flex;flex-direction:column;gap:10px;min-width:0}
.rc .ic{width:44px;height:44px;border-radius:12px;border:1px solid var(--line-hi);display:grid;place-items:center;color:var(--text)}
.rc .ic .pi{width:22px;height:22px}
.rc .k{font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.rc .v{font-size:17px;line-height:1.5;color:var(--text);overflow-wrap:anywhere}
.rc a.v{border-bottom:1px solid var(--line-hi);align-self:flex-start}
.rc a.v:hover{border-color:var(--text)}
.rc .missing{align-self:flex-start}
.portal{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin-top:20px}
.portal p{font-family:var(--serif);font-size:22px;color:var(--text)}
.band.slim{padding:72px 0}
@media (max-width:980px){
  .reach{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .hero{padding:64px 0 64px}
  .frow{gap:12px}
  .shero{padding-bottom:72px}
  .shero h1{font-size:clamp(36px,10vw,44px)}
  .shero .lead{font-size:17px}
  .formcard{padding:20px}
  .reach{grid-template-columns:minmax(0,1fr)}
}
.shero .visual{width:100%;max-width:760px}