<!-- SERVICES WE OFFER — Engaging + "Show More" Toggle (GHL Friendly) -->
<style>
.svc3-wrap{
background:#0b72a6;
padding:70px 18px 90px;
font-family:Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color:#fff;
}
.svc3{
max-width:1180px;
margin:0 auto;
text-align:center;
}
.svc3-title{
font-size:28px;
font-weight:800;
letter-spacing:2px;
text-transform:uppercase;
margin:0 0 10px;
}
.svc3-sub{
margin:0 auto 44px;
max-width:760px;
opacity:.92;
line-height:1.6;
font-size:15.5px;
}
.svc3-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0,1fr));
gap:44px;
}
.svc-card{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
padding:6px 8px 0;
}
.svc-badge{
width:270px;
height:270px;
border-radius:50%;
position:relative;
display:grid;
place-items:center;
margin-bottom:22px;
background:
radial-gradient(circle at center, transparent 63%, #f1d278 66%, #c58e2c 76%, transparent 78%),
radial-gradient(circle at 35% 30%, rgba(255,255,255,.22), transparent 55%);
filter:drop-shadow(0 18px 28px rgba(0,0,0,.35));
transition: transform .25s ease, filter .25s ease;
}
.svc-badge::before{
content:"";
position:absolute;
inset:18px;
border-radius:50%;
background:linear-gradient(135deg,#1caa68,#00784e);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.svc-thumb{
position:relative;
z-index:2;
width:230px;
height:230px;
display:grid;
place-items:center;
}
.svc-thumb img{
width:100%;
height:100%;
object-fit:contain;
filter:drop-shadow(0 16px 24px rgba(0,0,0,.4));
transform: translateY(-4px);
}
.svc-card:hover .svc-badge{
transform: translateY(-7px);
filter: drop-shadow(0 24px 34px rgba(0,0,0,.42));
}
.svc-name{
font-size:22px;
font-weight:800;
margin:4px 0 10px;
}
.svc-desc{
font-size:15.5px;
line-height:1.7;
max-width:320px;
opacity:.95;
margin: 0;
}
.svc-actions{
display:flex;
gap:10px;
align-items:center;
justify-content:center;
flex-wrap:wrap;
margin-top:16px;
}
/* Primary button */
.svc-btn{
padding:10px 24px;
font-size:14px;
font-weight:800;
border-radius:999px;
background:#fff;
color:#0b72a6;
text-decoration:none;
transition:all .25s ease;
display:inline-flex;
align-items:center;
justify-content:center;
min-width: 140px;
}
.svc-btn:hover{
background:#f1d278;
color:#0b0b0b;
transform:translateY(-2px);
}
/* Toggle button */
.svc-toggle{
padding:10px 18px;
font-size:14px;
font-weight:800;
border-radius:999px;
background: rgba(255,255,255,.14);
color:#fff;
border:1px solid rgba(255,255,255,.30);
cursor:pointer;
transition:all .25s ease;
display:inline-flex;
align-items:center;
gap:10px;
}
.svc-toggle:hover{
background: rgba(255,255,255,.22);
transform:translateY(-2px);
}
.svc-toggle .chev{
width: 10px;
height: 10px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
transition: transform .25s ease;
margin-top:-2px;
}
/* Expand area */
.svc-more{
width:100%;
max-width: 360px;
margin-top:14px;
text-align:left;
background: rgba(0,0,0,.12);
border: 1px solid rgba(255,255,255,.18);
border-radius: 14px;
padding: 14px 14px;
overflow:hidden;
max-height: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
transition: max-height .35s ease, opacity .25s ease, padding .25s ease;
}
.svc-more p{
margin: 0 0 10px;
line-height: 1.65;
opacity:.96;
font-size: 14.5px;
}
.svc-more ul{
margin: 0;
padding-left: 18px;
}
.svc-more li{
margin: 6px 0;
line-height: 1.5;
font-size: 14.5px;
}
/* Open state */
.svc-card.is-open .svc-more{
max-height: 420px; /* enough room for content */
opacity: 1;
padding: 14px 14px;
}
.svc-card.is-open .svc-toggle .chev{
transform: rotate(-135deg); /* points up */
margin-top: 2px;
}
@media(max-width:980px){
.svc3-grid{grid-template-columns:1fr; gap:36px;}
.svc-badge{width:250px;height:250px;}
.svc-thumb{width:210px;height:210px;}
}
</style>
<section class="svc3-wrap">
<div class="svc3">
<div class="svc3-title">Service We Offer</div>
<p class="svc3-sub">
Choose the support you need — tap <strong>Show details</strong> to see what’s included and how we help you move faster with confidence.
</p>
<div class="svc3-grid">
<!-- CREDIT REPAIR -->
<div class="svc-card" data-svc="1">
<div class="svc-badge">
<div class="svc-thumb">
<img src="https://storage.googleapis.com/msgsndr/mrwdXG6FyFhf9lz7QIoF/media/696d85f1e125ef61b01ddb98.png" alt="Credit Repair"/>
</div>
</div>
<div class="svc-name">Credit Repair</div>
<p class="svc-desc">Dispute support, strategy, and guidance to help improve your credit profile.</p>
<div class="svc-actions">
<a href="#" class="svc-btn">Get Started</a>
<button class="svc-toggle" type="button" aria-expanded="false">
Show details <span class="chev"></span>
</button>
</div>
<div class="svc-more" role="region" aria-label="Credit Repair Details">
<p><strong>What you can expect:</strong></p>
<ul>
<li>Personalized credit review + action plan</li>
<li>Dispute support for inaccurate items</li>
<li>Ongoing progress tracking & tips</li>
<li>Education to help you maintain results</li>
</ul>
</div>
</div>
<!-- BOOKKEEPING -->
<div class="svc-card" data-svc="2">
<div class="svc-badge">
<div class="svc-thumb">
<img src="https://storage.googleapis.com/msgsndr/mrwdXG6FyFhf9lz7QIoF/media/696d85f1439b6b61a45aaef8.png" alt="Bookkeeping"/>
</div>
</div>
<div class="svc-name">Bookkeeping</div>
<p class="svc-desc">Clean, consistent books so you can make decisions with real numbers.</p>
<div class="svc-actions">
<a href="#" class="svc-btn">Get Started</a>
<button class="svc-toggle" type="button" aria-expanded="false">
Show details <span class="chev"></span>
</button>
</div>
<div class="svc-more" role="region" aria-label="Bookkeeping Details">
<p><strong>What’s included:</strong></p>
<ul>
<li>Monthly categorization & reconciliation</li>
<li>Profit & loss reporting</li>
<li>Cleanup options (if you’re behind)</li>
<li>Year-round support for tax readiness</li>
</ul>
</div>
</div>
<!-- TAX PREPARATION -->
<div class="svc-card" data-svc="3">
<div class="svc-badge">
<div class="svc-thumb">
<img src="https://storage.googleapis.com/msgsndr/mrwdXG6FyFhf9lz7QIoF/media/696d85f1439b6b500c5aaef7.png" alt="Tax Preparation"/>
</div>
</div>
<div class="svc-name">Tax Preparation</div>
<p class="svc-desc">File accurately, maximize eligible deductions, and stay compliant.</p>
<div class="svc-actions">
<a href="#" class="svc-btn">Get Started</a>
<button class="svc-toggle" type="button" aria-expanded="false">
Show details <span class="chev"></span>
</button>
</div>
<div class="svc-more" role="region" aria-label="Tax Preparation Details">
<p><strong>What we help with:</strong></p>
<ul>
<li>Individual & small business filing support</li>
<li>Organized document checklist</li>
<li>Guidance for common deductions/credits</li>
<li>Next-step recommendations after filing</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<script>
(function(){
var cards = document.querySelectorAll('.svc-card');
function closeAll(except){
cards.forEach(function(c){
if(except && c === except) return;
c.classList.remove('is-open');
var btn = c.querySelector('.svc-toggle');
if(btn) btn.setAttribute('aria-expanded','false');
});
}
cards.forEach(function(card){
var btn = card.querySelector('.svc-toggle');
if(!btn) return;
btn.addEventListener('click', function(){
var isOpen = card.classList.contains('is-open');
closeAll(card); /* accordion behavior (only one open) */
card.classList.toggle('is-open', !isOpen);
btn.setAttribute('aria-expanded', String(!isOpen));
});
});
})();
</script>
