/* The Our Work page (render-work-html.js). Built on product.css. */
.work-page [hidden]{display:none !important}
.work{max-width:1160px;margin:0 auto}
.work h1{font:700 34px/1.2 var(--font-head);margin:14px 0 6px}
.work .lead{font-size:18px;margin:0 0 22px;color:#3a3a3c;max-width:720px}
.bar-logo{display:block;max-height:56px;max-width:min(320px,100%);margin:0 auto}
/* Fixed-width cards, the column count varies (Item Display Layout Rule). */
.wgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,360px);gap:20px;justify-content:center}
@media (max-width:420px){.wgrid{grid-template-columns:minmax(0,1fr)}}
.wcard{display:block;height:100%;text-decoration:none;color:#1d1d1f;border-radius:16px;overflow:hidden;border:1px solid #e5e5ea;background:#fff}
.wcard:hover,.wcard:focus-visible{border-color:var(--accent-raw);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.wcard img,.wcard-ph{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#f2f2f4}
.wcard .t{display:flex;flex-direction:column;gap:4px;padding:12px 14px 16px}
.wname{font:700 20px/1.3 var(--font-head);overflow-wrap:anywhere}
.wwhen{color:#55595e;font-size:15px}
.view{margin-top:4px;font-weight:700;color:var(--accent);font-size:16px}
.cta{margin:36px auto 0;max-width:720px;text-align:center;padding:24px 18px;border-radius:16px;background:#f6f4ef}
.cta h2{font:700 24px/1.3 var(--font-head);margin:0 0 8px}
.cta p{margin:0 0 6px;font-size:16px}
.cta .row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:14px 0 12px}
.cta .btn.primary{color:var(--on-accent)}
.cta .sent{margin-top:12px;padding:12px;border-radius:10px;background:#e8f5ec;font-weight:600}
.contact-dlg{width:min(520px,calc(100vw - 32px));padding:0;border:0;border-radius:16px}
.contact-dlg::backdrop{background:rgba(0,0,0,.45)}
.contact-dlg form{display:grid;gap:10px;padding:16px 18px 20px}
.dlg-head{display:flex;align-items:center;justify-content:space-between}
.dlg-head h2{margin:0;font:700 22px/1.3 var(--font-head)}
.contact-dlg label{display:grid;gap:4px;font-weight:600;font-size:16px}
.contact-dlg input,.contact-dlg textarea{width:100%;min-height:48px;padding:10px 12px;border:2px solid #c7c7cc;border-radius:10px;font:16px var(--font-body);font-weight:400}
.contact-dlg textarea{min-height:100px}
.contact-dlg .btn{width:100%;color:var(--on-accent)}
.req{color:#b3261e}
.field-err{margin:0;color:#b3261e;font-weight:600;font-size:15px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}