My Work

.zd-work-page * {
box-sizing: border-box;
}

.zd-wrap {
width: min(1180px, 92%);
margin: 0 auto;
}

.zd-hero {
padding: 96px 0 72px;
text-align: center;
}

.zd-eyebrow {
font-size: 13px;
letter-spacing: 0.24em;
text-transform: uppercase;
margin-bottom: 18px;
color: var(–lavender);
font-weight: 700;
}

.zd-hero h1 {
font-family: Georgia, “Times New Roman”, serif;
font-size: clamp(48px, 7vw, 92px);
line-height: 0.95;
margin: 0 auto 26px;
max-width: 900px;
font-weight: 500;
}

.zd-hero p {
font-size: 20px;
line-height: 1.7;
max-width: 760px;
margin: 0 auto 34px;
color: var(–muted);
}

.zd-btn {
display: inline-block;
padding: 16px 28px;
border-radius: 999px;
background: var(–lavender);
color: white !important;
text-decoration: none;
font-weight: 700;
letter-spacing: 0.04em;
transition: 0.2s ease;
}

.zd-btn:hover {
transform: translateY(-2px);
opacity: 0.92;
}

.zd-project {
padding: 84px 0;
border-top: 1px solid var(–line);
}

.zd-project-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 58px;
align-items: center;
}

.zd-project.reverse .zd-project-grid {
grid-template-columns: 0.95fr 1.05fr;
}

.zd-project.reverse .zd-media {
order: 2;
}

.zd-project.reverse .zd-copy {
order: 1;
}

.zd-project-tag {
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(–lavender);
font-weight: 700;
margin-bottom: 16px;
}

.zd-project h2 {
font-family: Georgia, “Times New Roman”, serif;
font-size: clamp(38px, 5vw, 64px);
line-height: 1.02;
margin: 0 0 22px;
font-weight: 500;
}

.zd-project p {
font-size: 18px;
line-height: 1.7;
color: var(–muted);
margin-bottom: 28px;
}

.zd-services {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 22px;
margin: 0 0 30px;
}

.zd-services div {
padding: 11px 0;
border-bottom: 1px solid var(–line);
font-size: 15px;
}

.zd-media {
display: grid;
gap: 16px;
}

.zd-media-main,
.zd-media-small {
border-radius: 24px;
overflow: hidden;
background: #eee;
box-shadow: 0 18px 45px rgba(0,0,0,0.08);
}

.zd-media img {
display: block;
width: 100%;
height: auto;
}

.zd-media-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}

.zd-note {
background: var(–lavender-soft);
border-radius: 22px;
padding: 22px 24px;
margin-top: 24px;
font-size: 15px;
line-height: 1.6;
}

.zd-bottom-cta {
text-align: center;
padding: 100px 0 110px;
border-top: 1px solid var(–line);
}

.zd-bottom-cta h2 {
font-family: Georgia, “Times New Roman”, serif;
font-size: clamp(42px, 6vw, 72px);
margin: 0 0 22px;
font-weight: 500;
}

.zd-bottom-cta p {
max-width: 700px;
margin: 0 auto 30px;
font-size: 19px;
line-height: 1.7;
color: var(–muted);
}

@media (max-width: 850px) {
.zd-hero {
padding: 70px 0 50px;
}

.zd-project {
padding: 60px 0;
}

.zd-project-grid,
.zd-project.reverse .zd-project-grid {
grid-template-columns: 1fr;
gap: 34px;
}

.zd-project.reverse .zd-media,
.zd-project.reverse .zd-copy {
order: initial;
}

.zd-services {
grid-template-columns: 1fr;
}

.zd-media-row {
grid-template-columns: 1fr;
}
}
</style>

<section class=”zd-hero”>
<div class=”zd-wrap”>
<div class=”zd-eyebrow”>Real Projects • Real Businesses</div>
<h1>Websites built to actually work.</h1>
<p>
From brand-new websites to strategic cleanups, I help small businesses
turn their online presence into something clearer, easier to use,
and easier to find.
</p>
<a class=”zd-btn” href=”/start-a-project/”>Start a Project</a>
</div>
</section>

<div class=”zd-copy”>
<div class=”zd-project-tag”>Private Practice • New Build</div>
<h2>Building a digital presence from the ground up.</h2>

<p>
This private practice needed more than a pretty website.
The goal was to create a clear, welcoming digital foundation
that makes it easier for potential clients to understand the practice,
explore services, and take the next step.
</p>

<div class=”zd-services”>
<div>Website Design & Build</div>
<div>Mobile Optimization</div>
<div>SEO Foundation</div>
<div>Calls to Action</div>
<div>Google Presence</div>
<div>Social Setup</div>
</div>

<!– Add live link only after client approves –>
<!–
<a class=”zd-btn” href=”CLIENT-WEBSITE-URL” target=”_blank” rel=”noopener”>
View Live Website
</a>
–>

<div class=”zd-note”>
Built as a complete digital launch for a growing therapy practice.
</div>
</div>

</div>
</div>
</section>

<div class=”zd-copy”>
<div class=”zd-project-tag”>Private Practice • Website Optimization</div>
<h2>A better experience without starting over.</h2>

<p>
This project didn’t need a full rebuild. It needed focus.
I reorganized information, improved the mobile experience,
strengthened calls to action, clarified services, and cleaned up
the on-page SEO so visitors could navigate with more confidence.
</p>

<div class=”zd-services”>
<div>Mobile Optimization</div>
<div>Navigation Cleanup</div>
<div>Service Organization</div>
<div>Stronger CTAs</div>
<div>Contact Forms</div>
<div>SEO Structure</div>
<div>Image Alt Text</div>
<div>Readability & Spacing</div>
</div>

<!– Add live link only after client approves –>
<!–
<a class=”zd-btn” href=”CLIENT-WEBSITE-URL” target=”_blank” rel=”noopener”>
View Live Website
</a>
–>

<div class=”zd-note”>
Strategic improvements designed to make an existing website clearer,
easier to use, and more effective.
</div>
</div>

</div>
</div>
</section>

<section class=”zd-bottom-cta”>
<div class=”zd-wrap”>
<div class=”zd-eyebrow”>Your Website Could Be Next</div>
<h2>Starting from scratch or fixing what’s already there?</h2>
<p>
Either way, I’ll help you figure out what actually needs to happen
and build the digital side around your business.
</p>
<a class=”zd-btn” href=”/start-a-project/”>Start a Project</a>
</div>
</section>

</div>