← back to Osborne Redesign
service-area.html
275 lines
<!doctype html>
<html lang="en" data-theme="heritage">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Service Area · Osborne Partners</title>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@200;300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Libre+Caslon+Text:wght@400;700&family=Playfair+Display:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/theme.css">
</head>
<body>
<div id="site-header-slot"></div>
<main>
<section class="hero">
<div class="container">
<div class="hero__eyebrow">San Francisco · Menlo Park · Within 50 miles</div>
<h1 class="hero__title">Rooted in the <em>Bay Area</em>.<br>Trusted across thirty states.</h1>
<p class="hero__sub">
Two physical offices anchor the practice — One Embarcadero in San Francisco and Middlefield
Road in Menlo Park. We meet most local clients in person at their preferred cadence; clients
beyond a comfortable drive are served by phone, video, and the occasional flight.
</p>
</div>
</section>
<!-- MAP -->
<section class="section">
<div class="container">
<div class="section__eyebrow">Bay Area service map</div>
<h2 class="section__title">Within fifty miles of San Francisco.</h2>
<p class="section__lead">
Our two offices sit roughly thirty miles apart. Most clients within the inner ring (≤25 mi)
prefer in-person quarterly reviews; clients in the outer ring (25–50 mi) typically blend
in-person and video. Beyond that, we travel to you, or you to us.
</p>
<div class="map-shell">
<svg viewBox="0 0 1000 700" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="topo" patternUnits="userSpaceOnUse" width="14" height="14">
<circle cx="2" cy="2" r="0.6" fill="var(--line-strong)" opacity="0.18"/>
</pattern>
</defs>
<!-- Bay Area landmass abstraction -->
<path d="M 100 100 L 250 80 L 350 120 L 420 180 L 460 240 L 500 320 L 540 400 L 560 480 L 540 560 L 480 620 L 400 640 L 320 620 L 260 580 L 200 540 L 160 480 L 130 400 L 110 320 L 100 240 Z"
fill="var(--bg-alt)" stroke="var(--line-strong)" stroke-width="0.8"/>
<!-- East Bay landmass -->
<path d="M 580 100 L 720 90 L 840 110 L 900 160 L 920 240 L 900 320 L 870 400 L 820 480 L 760 540 L 680 580 L 620 580 L 580 540 L 560 480 L 560 400 L 580 320 L 600 240 L 590 160 Z"
fill="var(--bg-alt)" stroke="var(--line-strong)" stroke-width="0.8"/>
<!-- Bay water -->
<path d="M 460 240 L 540 200 L 580 220 L 600 280 L 580 360 L 560 440 L 540 500 L 520 540 L 500 500 L 480 420 L 470 340 Z"
fill="url(#topo)" opacity="0.6"/>
<!-- Topographic dot pattern overlay -->
<rect x="0" y="0" width="1000" height="700" fill="url(#topo)" opacity="0.4"/>
<!-- Radius rings around SF office -->
<circle cx="320" cy="280" r="80" fill="none" stroke="var(--accent)" stroke-width="1" stroke-dasharray="4 4" opacity="0.5"/>
<circle cx="320" cy="280" r="160" fill="none" stroke="var(--accent)" stroke-width="1" stroke-dasharray="6 6" opacity="0.4"/>
<circle cx="320" cy="280" r="240" fill="none" stroke="var(--accent)" stroke-width="1" stroke-dasharray="8 8" opacity="0.3"/>
<!-- Radius labels -->
<text x="320" y="195" text-anchor="middle" font-family="JetBrains Mono" font-size="10" fill="var(--accent)">10 mi</text>
<text x="320" y="115" text-anchor="middle" font-family="JetBrains Mono" font-size="10" fill="var(--accent)">25 mi</text>
<text x="320" y="35" text-anchor="middle" font-family="JetBrains Mono" font-size="10" fill="var(--accent)">50 mi</text>
<!-- SF office pin -->
<g>
<line x1="320" y1="280" x2="320" y2="240" stroke="var(--accent)" stroke-width="1.5"/>
<circle cx="320" cy="280" r="8" fill="var(--accent)"/>
<circle cx="320" cy="280" r="14" fill="var(--accent)" opacity="0.2"/>
<text x="335" y="265" font-family="Playfair Display" font-size="14" font-weight="700" fill="var(--ink)">San Francisco</text>
<text x="335" y="282" font-family="Inter" font-size="10" fill="var(--ink-soft)">One Embarcadero · Suite 4100</text>
</g>
<!-- Menlo Park office pin -->
<g>
<line x1="380" y1="460" x2="380" y2="430" stroke="var(--accent)" stroke-width="1.5"/>
<circle cx="380" cy="460" r="8" fill="var(--accent)"/>
<circle cx="380" cy="460" r="14" fill="var(--accent)" opacity="0.2"/>
<text x="395" y="455" font-family="Playfair Display" font-size="14" font-weight="700" fill="var(--ink)">Menlo Park</text>
<text x="395" y="472" font-family="Inter" font-size="10" fill="var(--ink-soft)">545 Middlefield · Suite 165</text>
</g>
<!-- Notable cities -->
<g font-family="Inter" font-size="10" fill="var(--ink-mute)">
<circle cx="280" cy="240" r="2" fill="var(--ink-mute)"/><text x="276" y="232" text-anchor="end">Sausalito</text>
<circle cx="280" cy="200" r="2" fill="var(--ink-mute)"/><text x="276" y="192" text-anchor="end">Tiburon</text>
<circle cx="240" cy="160" r="2" fill="var(--ink-mute)"/><text x="236" y="152" text-anchor="end">Mill Valley</text>
<circle cx="200" cy="120" r="2" fill="var(--ink-mute)"/><text x="196" y="112" text-anchor="end">Ross</text>
<circle cx="370" cy="320" r="2" fill="var(--ink-mute)"/><text x="375" y="324">Daly City</text>
<circle cx="395" cy="370" r="2" fill="var(--ink-mute)"/><text x="400" y="374">Burlingame</text>
<circle cx="375" cy="410" r="2" fill="var(--ink-mute)"/><text x="380" y="414">Hillsborough</text>
<circle cx="370" cy="510" r="2" fill="var(--ink-mute)"/><text x="375" y="514">Palo Alto</text>
<circle cx="430" cy="540" r="2" fill="var(--ink-mute)"/><text x="435" y="544">Atherton</text>
<circle cx="430" cy="580" r="2" fill="var(--ink-mute)"/><text x="435" y="584">Woodside</text>
<circle cx="480" cy="600" r="2" fill="var(--ink-mute)"/><text x="485" y="604">Portola Valley</text>
<circle cx="660" cy="240" r="2" fill="var(--ink-mute)"/><text x="665" y="244">Berkeley</text>
<circle cx="700" cy="290" r="2" fill="var(--ink-mute)"/><text x="705" y="294">Oakland</text>
<circle cx="730" cy="350" r="2" fill="var(--ink-mute)"/><text x="735" y="354">Piedmont</text>
<circle cx="760" cy="200" r="2" fill="var(--ink-mute)"/><text x="765" y="204">Lafayette</text>
<circle cx="800" cy="180" r="2" fill="var(--ink-mute)"/><text x="805" y="184">Orinda</text>
<circle cx="840" cy="240" r="2" fill="var(--ink-mute)"/><text x="845" y="244">Walnut Creek</text>
<circle cx="870" cy="320" r="2" fill="var(--ink-mute)"/><text x="875" y="324">Danville</text>
</g>
<!-- Compass -->
<g transform="translate(900,80)">
<circle cx="0" cy="0" r="22" fill="var(--bg-card)" stroke="var(--line-strong)"/>
<text x="0" y="-26" text-anchor="middle" font-family="JetBrains Mono" font-size="10" fill="var(--ink-soft)">N</text>
<line x1="0" y1="-12" x2="0" y2="12" stroke="var(--ink)" stroke-width="1"/>
<polygon points="0,-12 -4,-2 4,-2" fill="var(--accent)"/>
</g>
<!-- Scale -->
<g transform="translate(60,640)">
<line x1="0" y1="0" x2="160" y2="0" stroke="var(--ink-soft)" stroke-width="1"/>
<line x1="0" y1="-4" x2="0" y2="4" stroke="var(--ink-soft)" stroke-width="1"/>
<line x1="80" y1="-4" x2="80" y2="4" stroke="var(--ink-soft)" stroke-width="1"/>
<line x1="160" y1="-4" x2="160" y2="4" stroke="var(--ink-soft)" stroke-width="1"/>
<text x="0" y="20" font-family="JetBrains Mono" font-size="10" fill="var(--ink-soft)">0</text>
<text x="80" y="20" font-family="JetBrains Mono" font-size="10" fill="var(--ink-soft)" text-anchor="middle">25 mi</text>
<text x="160" y="20" font-family="JetBrains Mono" font-size="10" fill="var(--ink-soft)" text-anchor="middle">50 mi</text>
</g>
</svg>
</div>
</div>
</section>
<!-- TOWNS LIST -->
<section class="section section--alt">
<div class="container">
<div class="section__eyebrow">Bay Area communities served</div>
<h2 class="section__title">A partial list of where our clients live.</h2>
<p class="section__lead">
Listed by approximate driving distance from One Embarcadero. We serve clients across the
Bay Area, the Peninsula, the East Bay, Marin, and the Monterey Bay corridor — and meet
them in person whenever the rhythm of their year permits.
</p>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:48px">
<div>
<h4 style="font-size:11px;letter-spacing:2px;color:var(--accent);margin-bottom:16px">SAN FRANCISCO · 0–10 mi</h4>
<ul class="cities">
<li>Pacific Heights<span class="miles">0.8 mi</span></li>
<li>Presidio Heights<span class="miles">2.4 mi</span></li>
<li>Sea Cliff<span class="miles">4.1 mi</span></li>
<li>St. Francis Wood<span class="miles">5.7 mi</span></li>
<li>Telegraph Hill<span class="miles">0.6 mi</span></li>
<li>Daly City<span class="miles">9.4 mi</span></li>
<li>South San Francisco<span class="miles">10.0 mi</span></li>
</ul>
</div>
<div>
<h4 style="font-size:11px;letter-spacing:2px;color:var(--accent);margin-bottom:16px">PENINSULA · 10–30 mi</h4>
<ul class="cities">
<li>Burlingame<span class="miles">15 mi</span></li>
<li>Hillsborough<span class="miles">17 mi</span></li>
<li>San Mateo<span class="miles">20 mi</span></li>
<li>Belmont<span class="miles">22 mi</span></li>
<li>Atherton<span class="miles">28 mi</span></li>
<li>Menlo Park<span class="miles">30 mi</span></li>
<li>Palo Alto<span class="miles">32 mi</span></li>
<li>Woodside<span class="miles">29 mi</span></li>
<li>Portola Valley<span class="miles">32 mi</span></li>
<li>Los Altos Hills<span class="miles">34 mi</span></li>
</ul>
</div>
<div>
<h4 style="font-size:11px;letter-spacing:2px;color:var(--accent);margin-bottom:16px">MARIN · 5–25 mi</h4>
<ul class="cities">
<li>Sausalito<span class="miles">5 mi</span></li>
<li>Tiburon<span class="miles">9 mi</span></li>
<li>Belvedere<span class="miles">10 mi</span></li>
<li>Mill Valley<span class="miles">11 mi</span></li>
<li>Ross<span class="miles">14 mi</span></li>
<li>Larkspur<span class="miles">12 mi</span></li>
<li>Kentfield<span class="miles">15 mi</span></li>
<li>San Rafael<span class="miles">16 mi</span></li>
<li>Tiburon Peninsula<span class="miles">9 mi</span></li>
<li>Stinson Beach<span class="miles">23 mi</span></li>
</ul>
</div>
<div>
<h4 style="font-size:11px;letter-spacing:2px;color:var(--accent);margin-bottom:16px">EAST BAY · 10–35 mi</h4>
<ul class="cities">
<li>Berkeley<span class="miles">14 mi</span></li>
<li>Oakland (Hills)<span class="miles">16 mi</span></li>
<li>Piedmont<span class="miles">17 mi</span></li>
<li>Alameda<span class="miles">15 mi</span></li>
<li>Lafayette<span class="miles">22 mi</span></li>
<li>Orinda<span class="miles">21 mi</span></li>
<li>Moraga<span class="miles">22 mi</span></li>
<li>Walnut Creek<span class="miles">26 mi</span></li>
<li>Danville<span class="miles">32 mi</span></li>
<li>Blackhawk<span class="miles">35 mi</span></li>
</ul>
</div>
<div>
<h4 style="font-size:11px;letter-spacing:2px;color:var(--accent);margin-bottom:16px">SILICON VALLEY · 30–55 mi</h4>
<ul class="cities">
<li>Mountain View<span class="miles">37 mi</span></li>
<li>Los Altos<span class="miles">38 mi</span></li>
<li>Sunnyvale<span class="miles">42 mi</span></li>
<li>Cupertino<span class="miles">45 mi</span></li>
<li>Saratoga<span class="miles">48 mi</span></li>
<li>Los Gatos<span class="miles">50 mi</span></li>
<li>San Jose (Willow Glen)<span class="miles">48 mi</span></li>
<li>Almaden Valley<span class="miles">55 mi</span></li>
</ul>
</div>
<div>
<h4 style="font-size:11px;letter-spacing:2px;color:var(--accent);margin-bottom:16px">FURTHER AFIELD</h4>
<ul class="cities">
<li>Carmel-by-the-Sea<span class="miles">125 mi</span></li>
<li>Pebble Beach<span class="miles">125 mi</span></li>
<li>Napa<span class="miles">52 mi</span></li>
<li>St. Helena<span class="miles">68 mi</span></li>
<li>Sonoma<span class="miles">45 mi</span></li>
<li>Lake Tahoe (clients)<span class="miles">196 mi</span></li>
<li>Los Angeles area<span class="miles">383 mi</span></li>
<li>National (28 other states)<span class="miles">—</span></li>
</ul>
</div>
</div>
<p style="margin-top:48px;font-size:13px;color:var(--ink-mute);max-width:820px;line-height:1.7">
Distances approximate, calculated from One Embarcadero Center, San Francisco. We have served
clients in 30 states. Where geography prevents in-person meetings, we coordinate by video and
secure portal — and travel to you for material life events: a sale, a transfer, a passing.
</p>
</div>
</section>
<!-- HOW WE MEET -->
<section class="section">
<div class="container">
<div class="section__eyebrow">How we meet</div>
<h2 class="section__title">In person whenever the rhythm permits.</h2>
<div class="cards">
<div class="card">
<div class="card__num">Quarterly review</div>
<h3 class="card__title">In-person at our office.</h3>
<p class="card__body">A 60–90-minute quarterly conversation at One Embarcadero or Middlefield Road, including portfolio review, planning items, and life updates. Coffee provided.</p>
</div>
<div class="card">
<div class="card__num">On-site at home</div>
<h3 class="card__title">We come to you.</h3>
<p class="card__body">For clients in Marin, Carmel, Tahoe, or wherever the year takes you. We have met clients at home, at vacation properties, and even at a café in Carmel-by-the-Sea.</p>
</div>
<div class="card">
<div class="card__num">Secure video</div>
<h3 class="card__title">Anywhere, anytime.</h3>
<p class="card__body">Encrypted video review with screen-shared portfolio reporting. Useful for clients out of state, traveling, or coordinating multi-generational family meetings.</p>
</div>
</div>
</div>
</section>
</main>
<div id="site-footer-slot"></div>
<div id="theme-picker-slot"></div>
<script src="assets/site.js"></script>
</body>
</html>