Source HTML
<!doctype html><html><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=Geist+Mono:wght@400&display=swap" rel="stylesheet">
<style>*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Bricolage Grotesque',sans-serif;background:#ebe8e1;color:#1a1a1a;line-height:1.5}
.s{padding:56px 36px;display:flex;flex-direction:column;gap:36px;max-width:1100px;margin:0 auto}
.hd{max-width:600px}
.k{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#ff6b35;margin-bottom:12px}
.h{font-size:48px;font-weight:800;letter-spacing:-.025em;line-height:1.05}
.h em{font-style:italic;color:#ff6b35;font-weight:600}
.sb{font-size:16px;color:#5a5346;line-height:1.55;margin-top:14px;max-width:50ch}
.cs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.c{background:#fff;border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:14px}
.c.dk{background:#1a1a1a;color:#fff}
.c.ac{background:#ff6b35;color:#fff}
.ct{display:flex;align-items:center;gap:14px}
.av{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#5d6b3f,#ff6b35);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:22px}
.c.dk .av{background:linear-gradient(135deg,#ff6b35,#ffaa3a);color:#1a1a1a}
.c.ac .av{background:#1a1a1a;color:#fff}
.w b{display:block;font-size:18px;font-weight:700;letter-spacing:-.01em}
.w span{font-size:12px;color:#666;font-family:'Geist Mono',monospace;letter-spacing:.04em;text-transform:uppercase}
.c.dk .w span{color:#999}.c.ac .w span{color:rgba(255,255,255,.85)}
.bio{font-size:14px;line-height:1.55;color:#5a5346}
.c.dk .bio{color:#bbb}.c.ac .bio{color:rgba(255,255,255,.92)}
.hl{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:14px;border-top:1px dashed rgba(0,0,0,.15)}
.c.dk .hl{border-color:rgba(255,255,255,.15)}.c.ac .hl{border-color:rgba(255,255,255,.25)}
.hd-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-family:'Geist Mono',monospace}
.hd-row .l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#999}
.c.dk .hd-row .l{color:#777}.c.ac .hd-row .l{color:rgba(255,255,255,.7)}
.hd-row a{color:#1a1a1a;text-decoration:none;border-bottom:1px solid #ff6b35}
.c.dk .hd-row a{color:#fff;border-color:#ff6b35}.c.ac .hd-row a{color:#fff;border-color:#1a1a1a}
@media(max-width:880px){.cs{grid-template-columns:1fr}.s{padding:32px 16px}.h{font-size:32px}}</style></head><body><section class="s">
<header class="hd"><div class="k">— Get in touch with the right person</div><h1 class="h">Who do you <em>actually</em> need to reach?</h1><p class="sb">No central inbox. Every project starts with a real person. Pick whoever's work overlaps with yours.</p></header>
<div class="cs">
<div class="c"><div class="ct"><div class="av">JR</div><div class="w"><b>Janelle Reyes</b><span>Partner, Strategy</span></div></div><p class="bio">Leads positioning, naming, brand voice. New project inquiries and existing strategic work.</p><div class="hl"><div class="hd-row"><span class="l">Email</span><a>janelle@field.studio</a></div><div class="hd-row"><span class="l">Cal</span><a>/janelle-reyes</a></div></div></div>
<div class="c dk"><div class="ct"><div class="av">RC</div><div class="w"><b>Reid Cao</b><span>Partner, Design</span></div></div><p class="bio">Heads identity, type systems, the visual side. Best for design-led conversations.</p><div class="hl"><div class="hd-row"><span class="l">Email</span><a>reid@field.studio</a></div><div class="hd-row"><span class="l">Read.cv</span><a>/reid-cao</a></div></div></div>
<div class="c ac"><div class="ct"><div class="av">MO</div><div class="w"><b>Mira Okafor</b><span>Studio Manager</span></div></div><p class="bio">Scheduling, contracts, project ops. For existing clients coordinating something — Mira.</p><div class="hl"><div class="hd-row"><span class="l">Email</span><a>mira@field.studio</a></div><div class="hd-row"><span class="l">Phone</span><a>(510) 555-1492</a></div></div></div>
</div></section></body></html>