acg-website: Phase 3B - radio show promotion, funnel, enhanced CTAs, layout density

Radio Show Promotion:
- Add LIVE badge to header phone with subtle pulse animation
- Add radio promo bar under hero (show name, time, call-in number)
- Radio ticker at bottom remains from Phase 3A

3-Step Visual Funnel:
- New funnel-steps section after Trust
- Progression: 1. Build estimate → 2. Talk it through → 3. Month-to-month start
- Interactive number badges with hover lift + color fill
- Mobile responsive (stacks vertically on small screens)

Strengthen Calculator CTAs:
- Pricing teaser: Make 'Build your exact price' primary button (was more-link)
- All 6 service cards: Add inline 'See what this costs →' calculator links
- Guides prospect directly to calculator from any service mention

Increase Vertical Rhythm:
- Section padding: clamp(2.75rem, 5.5vw, 4.25rem) for breathing room
- Service list: +1.5x base margin-bottom after dense grid
- Dispatch grid: +1.5x base margin-bottom after blog cards

All changes deployed to ww9.azcomputerguru.com and verified live.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

projects/acg-website-showcase/multipage/css/styles.css

@@ -213,7 +213,7 @@ a:hover { color: var(--ink); }
 .wrap { width: min(100% - 3rem, var(--maxw)); margin-inline: auto; }
 .wrap--narrow { width: min(100% - 3rem, 760px); margin-inline: auto; }
 
-section { padding-block: calc(var(--base) * 3.5); }
+section { padding-block: clamp(2.75rem, 5.5vw, 4.25rem); }
 .section-tag {
   font-family: var(--f-mono);
   font-size: 0.72rem;
@@ -315,7 +315,20 @@ h3 { font-size: 1.5rem; font-weight: 600; }
 .nav__link--cta { color: var(--accent-ink) !important; font-weight: 600; }
 .nav__link--cta:hover { color: var(--accent) !important; }
 .nav__link--cta::after { background: var(--accent); }
-.nav__phone { font-family: var(--f-mono); color: var(--ink) !important; font-weight: 500; }
+.nav__phone {
+  font-family: var(--f-mono); color: var(--ink) !important; font-weight: 500;
+  display: flex; align-items: center; gap: 0.5rem;
+}
+.radio-badge {
+  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px;
+  background: var(--accent); color: var(--on-accent);
+  padding: 1px 5px; border-radius: 2px;
+  animation: pulse-subtle 2s ease-in-out infinite;
+}
+@keyframes pulse-subtle {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.75; }
+}
 .theme-toggle, .nav__toggle {
   background: transparent; border: 1px solid var(--rule); border-radius: 2px;
   width: 44px; height: 44px; cursor: pointer; color: var(--ink);
@@ -402,7 +415,11 @@ h3 { font-size: 1.5rem; font-weight: 600; }
 }
 
 /* ---- Services (continuous ledger list, not cards) ----------------------- */
-.svc-list { border-top: 1px solid var(--rule); margin-top: var(--base); }
+.svc-list {
+  border-top: 1px solid var(--rule);
+  margin-top: var(--base);
+  margin-bottom: calc(var(--base) * 1.5);
+}
 .svc {
   display: grid; grid-template-columns: 2.4rem 1fr auto; gap: 1.25rem;
   align-items: baseline; padding-block: calc(var(--base) * 0.9);
@@ -420,6 +437,18 @@ h3 { font-size: 1.5rem; font-weight: 600; }
 .svc__no { font-family: var(--f-mono); font-size: 0.8rem; color: var(--ink-3); }
 .svc__name { font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; }
 .svc__desc { color: var(--ink-2); font-size: 0.98rem; margin-top: 0.25rem; max-width: 60ch; }
+.svc__calc-link {
+  font-family: var(--f-mono);
+  font-size: 0.85rem;
+  color: var(--accent-ink);
+  text-decoration: none;
+  white-space: nowrap;
+  transition: color var(--t-fast);
+}
+.svc__calc-link:hover {
+  color: var(--accent);
+  text-decoration: underline;
+}
 .svc__meta { font-family: var(--f-mono); font-size: 0.82rem; color: var(--accent-ink);
   text-align: right; white-space: nowrap; }
 @media (max-width: 680px) {
@@ -790,6 +819,7 @@ select:focus, .stepper input:focus, input:focus { outline: 2px solid var(--accen
   background: var(--rule);
   border: 1px solid var(--rule);
   margin-top: var(--base);
+  margin-bottom: calc(var(--base) * 1.5);
 }
 
 .dispatch-card {
@@ -892,6 +922,82 @@ select:focus, .stepper input:focus, input:focus { outline: 2px solid var(--accen
   font-weight: 700;
 }
 
+/* ---- 3-Step Funnel ---------------------------------------------------- */
+.funnel-steps {
+  padding-block: calc(var(--base) * 1.25);
+  background: var(--surface);
+  border-block: 1px solid var(--rule);
+}
+.funnel-track {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: clamp(1rem, 3vw, 2rem);
+  flex-wrap: wrap;
+}
+.funnel-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  text-align: center;
+  min-width: 140px;
+}
+.funnel-step__num {
+  font-family: var(--f-display);
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--accent-ink);
+  width: 48px;
+  height: 48px;
+  border: 2px solid var(--accent);
+  border-radius: 2px;
+  display: grid;
+  place-items: center;
+  transition: background var(--t-med), color var(--t-med), transform var(--t-fast);
+}
+.funnel-step:hover .funnel-step__num {
+  background: var(--accent);
+  color: var(--on-accent);
+  transform: translateY(-2px);
+}
+.funnel-step__label {
+  font-family: var(--f-display);
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--ink);
+}
+.funnel-step__link {
+  font-family: var(--f-mono);
+  font-size: 0.8rem;
+  color: var(--accent-ink);
+  text-decoration: none;
+  transition: color var(--t-fast);
+}
+.funnel-step__link:hover {
+  color: var(--accent);
+  text-decoration: underline;
+}
+.funnel-step__note {
+  font-family: var(--f-mono);
+  font-size: 0.75rem;
+  color: var(--ink-2);
+}
+.funnel-connector {
+  font-family: var(--f-mono);
+  font-size: 1.5rem;
+  color: var(--rule);
+}
+@media (max-width: 640px) {
+  .funnel-connector {
+    display: none;
+  }
+  .funnel-track {
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+}
+
 /* ---- Radio Ticker Marquee (Pauseable on Hover) ------------------------- */
 .radio-ticker {
   position: fixed;