<!--
=============================================================
SIMPLE AMP — Squarespace Code Block Version
=============================================================
HOW TO INSTALL IN SQUARESPACE:
STEP 1 — Add a Code Block
In your page editor, click an insert point,
choose "Code", then paste this entire file.
STEP 2 — Add fonts via Custom CSS
Go to Design > Custom CSS and add:
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Bebas+Neue&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
STEP 3 — Remove Squarespace page padding
Go to Pages > (this page) > gear icon > Advanced
and paste into "Page Header Code Injection":
<style>
.page-section, .content-wrapper, .sqs-layout,
.sqs-row, .sqs-col-12 {
padding: 0 !important;
margin: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
</style>
STEP 4 — Add your photos
Search for "Your portrait here" comments below
and replace the placeholder div with:
<img src="YOUR-SQUARESPACE-IMAGE-URL" alt="Your Name">
=============================================================
-->
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Bebas+Neue&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<style>
/* Scoped reset — only affects our wrapper */
#sa-root, #sa-root * {
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
}
#sa-root a { text-decoration: none !important; }
#sa-root img { display: block !important; }
#sa-root ul { list-style: none !important; }
#sa-root {
--sa-black: #0a0a0a;
--sa-white: #f5f4f0;
--sa-mid: #888888;
--sa-line: rgba(0,0,0,0.13);
font-family: 'Libre Baskerville', Georgia, serif !important;
color: #0a0a0a !important;
background: #f5f4f0 !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
display: block !important;
}
/* ── HERO ── */
.sa-hero {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
min-height: 90vh !important;
width: 100% !important;
}
.sa-hero-left {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding: 6rem 4rem 6rem 5rem !important;
border-right: 1px solid var(--sa-line) !important;
}
.sa-hero-tag {
font-family: 'Space Mono', monospace !important;
font-size: 0.65rem !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
color: var(--sa-mid) !important;
margin-bottom: 2rem !important;
display: flex !important;
align-items: center !important;
gap: 0.8rem !important;
}
.sa-hero-tag::before {
content: '' !important;
display: inline-block !important;
width: 28px !important; height: 1px !important;
background: var(--sa-mid) !important;
flex-shrink: 0 !important;
}
.sa-hero-headline {
font-family: 'Bebas Neue', Impact, sans-serif !important;
font-size: clamp(4rem, 7vw, 7.5rem) !important;
line-height: 0.9 !important;
letter-spacing: 0.01em !important;
margin-bottom: 2rem !important;
color: #0a0a0a !important;
}
.sa-hero-headline em {
font-style: italic !important;
font-family: 'Libre Baskerville', Georgia, serif !important;
font-size: 0.52em !important;
display: block !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
margin-top: 0.4rem !important;
}
.sa-hero-body {
font-size: 1rem !important;
line-height: 1.75 !important;
color: #444 !important;
max-width: 38ch !important;
margin-bottom: 3rem !important;
}
.sa-hero-ctas {
display: flex !important;
gap: 1.5rem !important;
align-items: center !important;
flex-wrap: wrap !important;
}
.sa-btn-primary {
font-family: 'Space Mono', monospace !important;
font-size: 0.7rem !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
background: #0a0a0a !important;
color: #f5f4f0 !important;
padding: 0.9rem 2rem !important;
display: inline-block !important;
border: 1px solid #0a0a0a !important;
transition: transform 0.15s, box-shadow 0.15s, background 0.15s !important;
}
.sa-btn-primary:hover {
transform: translate(-2px,-2px) !important;
box-shadow: 4px 4px 0 #0a0a0a !important;
background: #f5f4f0 !important;
color: #0a0a0a !important;
}
.sa-btn-secondary {
font-family: 'Space Mono', monospace !important;
font-size: 0.7rem !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: #0a0a0a !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.5rem !important;
transition: gap 0.2s !important;
}
.sa-btn-secondary:hover { gap: 1rem !important; }
/* hero right */
.sa-hero-right {
position: relative !important;
background: #0a0a0a !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
min-height: 500px !important;
}
.sa-hero-schematic {
position: absolute !important;
inset: 0 !important;
width: 100% !important; height: 100% !important;
opacity: 0.2 !important;
}
.sa-portrait-box {
position: relative !important;
z-index: 2 !important;
width: 300px !important; height: 420px !important;
border: 1px solid rgba(255,255,255,0.18) !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
.sa-portrait-box img {
width: 100% !important; height: 100% !important;
object-fit: cover !important;
filter: grayscale(100%) contrast(1.05) !important;
position: absolute !important;
inset: 0 !important;
}
.sa-portrait-ph {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0.8rem !important;
padding: 2rem !important;
}
.sa-portrait-ph-label {
font-family: 'Space Mono', monospace !important;
font-size: 0.6rem !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,0.3) !important;
}
.sa-portrait-caption {
position: absolute !important;
bottom: 0 !important; left: 0 !important; right: 0 !important;
padding: 1.2rem 1.5rem !important;
background: linear-gradient(transparent, rgba(0,0,0,0.85)) !important;
z-index: 3 !important;
}
.sa-portrait-name {
font-family: 'Bebas Neue', Impact, sans-serif !important;
font-size: 1.4rem !important;
color: #f5f4f0 !important;
letter-spacing: 0.05em !important;
display: block !important;
}
.sa-portrait-title {
font-family: 'Space Mono', monospace !important;
font-size: 0.58rem !important;
color: rgba(255,255,255,0.45) !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
display: block !important;
margin-top: 0.2rem !important;
}
/* ── TICKER ── */
.sa-ticker {
background: #0a0a0a !important;
padding: 0.85rem 0 !important;
overflow: hidden !important;
width: 100% !important;
}
.sa-ticker-track {
display: flex !important;
gap: 3.5rem !important;
animation: sa-ticker 30s linear infinite !important;
white-space: nowrap !important;
width: max-content !important;
}
@keyframes sa-ticker {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.sa-ticker-item {
font-family: 'Space Mono', monospace !important;
font-size: 0.63rem !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,0.5) !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.8rem !important;
flex-shrink: 0 !important;
}
.sa-ticker-item::before {
content: '◆' !important;
font-size: 0.35rem !important;
color: rgba(255,255,255,0.25) !important;
}
/* ── SERVICES + PROCESS ── */
.sa-work {
background: #0a0a0a !important;
color: #f5f4f0 !important;
padding: 7rem 5rem !important;
position: relative !important;
overflow: hidden !important;
width: 100% !important;
}
.sa-work-schematic {
position: absolute !important;
right: -5% !important; top: -10% !important;
width: 60% !important; height: 120% !important;
opacity: 0.055 !important;
pointer-events: none !important;
}
.sa-work-header {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 4rem !important;
align-items: end !important;
margin-bottom: 4rem !important;
position: relative !important;
z-index: 1 !important;
}
.sa-work-tag {
font-family: 'Space Mono', monospace !important;
font-size: 0.6rem !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,0.35) !important;
margin-bottom: 1.2rem !important;
display: block !important;
}
.sa-work-headline {
font-family: 'Bebas Neue', Impact, sans-serif !important;
font-size: clamp(2.8rem, 4.5vw, 5rem) !important;
line-height: 0.92 !important;
color: #f5f4f0 !important;
}
.sa-work-headline em {
font-style: italic !important;
font-family: 'Libre Baskerville', Georgia, serif !important;
font-size: 0.72em !important;
}
.sa-work-intro {
font-size: 0.92rem !important;
line-height: 1.8 !important;
color: rgba(255,255,255,0.5) !important;
padding-top: 0.5rem !important;
}
.sa-services-grid {
display: grid !important;
grid-template-columns: repeat(3,1fr) !important;
border-top: 1px solid rgba(255,255,255,0.1) !important;
position: relative !important;
z-index: 1 !important;
}
.sa-service {
padding: 2.5rem !important;
border-right: 1px solid rgba(255,255,255,0.1) !important;
}
.sa-service:first-child { padding-left: 0 !important; }
.sa-service:last-child { padding-right: 0 !important; border-right: none !important; }
.sa-service-num {
font-family: 'Space Mono', monospace !important;
font-size: 0.58rem !important;
color: rgba(255,255,255,0.3) !important;
letter-spacing: 0.1em !important;
margin-bottom: 1.2rem !important;
display: block !important;
}
.sa-service-icon {
width: 42px !important; height: 42px !important;
margin-bottom: 1.2rem !important;
opacity: 0.7 !important;
display: block !important;
}
.sa-service-name {
font-family: 'Bebas Neue', Impact, sans-serif !important;
font-size: 1.6rem !important;
letter-spacing: 0.02em !important;
margin-bottom: 0.7rem !important;
color: #f5f4f0 !important;
display: block !important;
}
.sa-service-desc {
font-size: 0.84rem !important;
line-height: 1.75 !important;
color: rgba(255,255,255,0.48) !important;
}
.sa-divider {
display: flex !important;
align-items: center !important;
gap: 1.5rem !important;
padding: 2.2rem 0 !important;
border-top: 1px solid rgba(255,255,255,0.1) !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
position: relative !important;
z-index: 1 !important;
}
.sa-divider-label {
font-family: 'Space Mono', monospace !important;
font-size: 0.58rem !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,0.28) !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
.sa-divider-line {
flex: 1 !important;
height: 1px !important;
background: rgba(255,255,255,0.06) !important;
}
.sa-process-grid {
display: grid !important;
grid-template-columns: repeat(4,1fr) !important;
position: relative !important;
z-index: 1 !important;
}
.sa-process-step {
padding: 2.5rem !important;
border-right: 1px solid rgba(255,255,255,0.1) !important;
}
.sa-process-step:first-child { padding-left: 0 !important; }
.sa-process-step:last-child { padding-right: 0 !important; border-right: none !important; }
.sa-step-num {
font-family: 'Bebas Neue', Impact, sans-serif !important;
font-size: 3.5rem !important;
color: rgba(255,255,255,0.07) !important;
line-height: 1 !important;
margin-bottom: 0.4rem !important;
display: block !important;
}
.sa-step-name {
font-family: 'Bebas Neue', Impact, sans-serif !important;
font-size: 1.4rem !important;
letter-spacing: 0.03em !important;
margin-bottom: 0.7rem !important;
color: #f5f4f0 !important;
display: block !important;
}
.sa-step-desc {
font-size: 0.83rem !important;
line-height: 1.75 !important;
color: rgba(255,255,255,0.45) !important;
}
/* ── ABOUT ── */
.sa-about {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 6rem !important;
padding: 7rem 5rem !important;
align-items: center !important;
background: #f5f4f0 !important;
width: 100% !important;
}
.sa-about-portrait-wrap {
position: relative !important;
}
.sa-about-portrait-frame {
width: 100% !important;
aspect-ratio: 3/4 !important;
background: #dedad2 !important;
border: 1px solid var(--sa-line) !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
}
.sa-about-portrait-frame img {
width: 100% !important; height: 100% !important;
object-fit: cover !important;
filter: grayscale(100%) contrast(1.05) !important;
}
.sa-about-ph {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0.8rem !important;
}
.sa-about-ph-label {
font-family: 'Space Mono', monospace !important;
font-size: 0.6rem !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: #aaa !important;
}
.sa-about-accent {
position: absolute !important;
bottom: -1.2rem !important; right: -1.2rem !important;
width: 65% !important; height: 65% !important;
border: 1px solid #0a0a0a !important;
z-index: 0 !important;
pointer-events: none !important;
}
.sa-section-tag {
font-family: 'Space Mono', monospace !important;
font-size: 0.62rem !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
color: var(--sa-mid) !important;
margin-bottom: 1.2rem !important;
display: flex !important;
align-items: center !important;
gap: 0.6rem !important;
}
.sa-section-tag-num {
width: 20px !important; height: 20px !important;
border: 1px solid #888 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0.52rem !important;
flex-shrink: 0 !important;
}
.sa-about-headline {
font-family: 'Bebas Neue', Impact, sans-serif !important;
font-size: clamp(2.5rem, 4vw, 4.2rem) !important;
line-height: 0.93 !important;
margin-bottom: 1.8rem !important;
color: #0a0a0a !important;
}
.sa-about-body {
font-size: 0.94rem !important;
line-height: 1.85 !important;
color: #444 !important;
margin-bottom: 1.2rem !important;
}
.sa-about-stats {
display: grid !important;
grid-template-columns: repeat(3,1fr) !important;
gap: 1rem !important;
margin-top: 2.5rem !important;
padding-top: 2rem !important;
border-top: 1px solid var(--sa-line) !important;
}
.sa-stat-num {
font-family: 'Bebas Neue', Impact, sans-serif !important;
font-size: 2.6rem !important;
line-height: 1 !important;
display: block !important;
color: #0a0a0a !important;
}
.sa-stat-label {
font-family: 'Space Mono', monospace !important;
font-size: 0.58rem !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--sa-mid) !important;
margin-top: 0.3rem !important;
display: block !important;
}
/* ── CTA ── */
.sa-cta {
background: #0a0a0a !important;
color: #f5f4f0 !important;
padding: 7rem 5rem !important;
display: grid !important;
grid-template-columns: 1fr auto !important;
gap: 4rem !important;
align-items: center !important;
position: relative !important;
overflow: hidden !important;
width: 100% !important;
}
.sa-cta-schematic {
position: absolute !important;
left: 0 !important; top: 0 !important;
width: 50% !important; height: 100% !important;
opacity: 0.05 !important;
pointer-events: none !important;
}
.sa-cta-headline {
font-family: 'Bebas Neue', Impact, sans-serif !important;
font-size: clamp(3rem, 5vw, 5.5rem) !important;
line-height: 0.92 !important;
color: #f5f4f0 !important;
position: relative !important;
z-index: 1 !important;
}
.sa-cta-headline em {
font-style: italic !important;
font-family: 'Libre Baskerville', Georgia, serif !important;
font-size: 0.75em !important;
}
.sa-cta-actions {
display: flex !important;
flex-direction: column !important;
gap: 1rem !important;
align-items: flex-start !important;
position: relative !important;
z-index: 1 !important;
}
.sa-btn-white {
font-family: 'Space Mono', monospace !important;
font-size: 0.7rem !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
background: #f5f4f0 !important;
color: #0a0a0a !important;
padding: 0.95rem 2.2rem !important;
display: inline-block !important;
white-space: nowrap !important;
border: 1px solid #f5f4f0 !important;
transition: transform 0.15s, box-shadow 0.15s !important;
}
.sa-btn-white:hover {
transform: translate(-2px,-2px) !important;
box-shadow: 4px 4px 0 rgba(255,255,255,0.3) !important;
}
.sa-cta-sub {
font-family: 'Space Mono', monospace !important;
font-size: 0.6rem !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,0.3) !important;
display: block !important;
}
/* ── RESPONSIVE ── */
@media (max-width: 860px) {
.sa-hero { grid-template-columns: 1fr !important; }
.sa-hero-right { display: none !important; }
.sa-hero-left { padding: 4rem 1.5rem !important; }
.sa-work { padding: 4rem 1.5rem !important; }
.sa-work-header { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
.sa-services-grid { grid-template-columns: 1fr !important; }
.sa-service { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; padding: 2rem 0 !important; }
.sa-process-grid { grid-template-columns: 1fr 1fr !important; }
.sa-process-step { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; padding: 1.5rem 0 !important; }
.sa-about { grid-template-columns: 1fr !important; padding: 4rem 1.5rem !important; gap: 3rem !important; }
.sa-cta { grid-template-columns: 1fr !important; padding: 4rem 1.5rem !important; }
.sa-about-accent { display: none !important; }
}
@media (max-width: 500px) {
.sa-process-grid { grid-template-columns: 1fr !important; }
}
</style>
<div id="sa-root">
<!-- ════════ HERO ════════ -->
<div class="sa-hero">
<div class="sa-hero-left">
<p class="sa-hero-tag">Marketing Consultancy</p>
<h1 class="sa-hero-headline">
Turn Up<br>Your Signal.
<em>Marketing that cuts through the noise.</em>
</h1>
<p class="sa-hero-body">
We help ambitious brands find their frequency — crafting sharp strategy, resonant messaging, and campaigns that amplify what makes you genuinely different.
</p>
<div class="sa-hero-ctas">
<a href="#sa-contact" class="sa-btn-primary">Start a Project</a>
<a href="#sa-work" class="sa-btn-secondary">How We Work →</a>
</div>
</div>
<div class="sa-hero-right">
<svg class="sa-hero-schematic" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid slice">
<g stroke="#fff" stroke-width="0.8" fill="none">
<rect x="50" y="80" width="500" height="640" stroke-dasharray="6,4"/>
<line x1="50" y1="160" x2="550" y2="160"/>
<line x1="100" y1="80" x2="100" y2="160"/>
<line x1="100" y1="220" x2="100" y2="380"/>
<line x1="100" y1="440" x2="100" y2="640"/>
<polyline points="100,220 115,220 120,235 132,205 144,235 156,205 168,235 173,220 188,220"/>
<line x1="100" y1="380" x2="100" y2="410"/>
<line x1="75" y1="410" x2="125" y2="410"/>
<line x1="75" y1="422" x2="125" y2="422"/>
<line x1="100" y1="422" x2="100" y2="440"/>
<circle cx="300" cy="400" r="70"/>
<line x1="270" y1="375" x2="300" y2="375"/>
<line x1="270" y1="425" x2="300" y2="425"/>
<line x1="300" y1="350" x2="300" y2="375"/>
<line x1="300" y1="425" x2="300" y2="450"/>
<path d="M220,400 Q235,370 250,400 Q265,430 280,400 Q295,370 310,400 Q325,430 340,400 Q355,370 370,400 Q385,430 400,400"/>
<polygon points="480,350 480,450 540,400"/>
<line x1="430" y1="400" x2="480" y2="400"/>
<line x1="540" y1="400" x2="570" y2="400"/>
<text x="54" y="96" font-family="monospace" font-size="9" fill="#fff" opacity="0.5">PATENT NO. 2,851,534 — AUDIO AMPLIFIER CIRCUIT</text>
<line x1="50" y1="105" x2="550" y2="105"/>
<text x="54" y="770" font-family="monospace" font-size="7" fill="#fff" opacity="0.35">FIG. 3 — SIGNAL CHAIN DIAGRAM — SHEET 2 OF 4</text>
</g>
</svg>
<!-- YOUR PORTRAIT — replace the sa-portrait-ph div below with:
<img src="YOUR-IMAGE-URL" alt="Your Name">
once uploaded to Squarespace media -->
<div class="sa-portrait-box">
<div class="sa-portrait-ph">
<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="1">
<circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
</svg>
<span class="sa-portrait-ph-label">Your portrait here</span>
</div>
<div class="sa-portrait-caption">
<span class="sa-portrait-name">Your Name</span>
<span class="sa-portrait-title">Founder & Principal Strategist</span>
</div>
</div>
</div>
</div>
<!-- ════════ TICKER ════════ -->
<div class="sa-ticker">
<div class="sa-ticker-track">
<span class="sa-ticker-item">Brand Strategy</span>
<span class="sa-ticker-item">Content Marketing</span>
<span class="sa-ticker-item">Campaign Development</span>
<span class="sa-ticker-item">Market Positioning</span>
<span class="sa-ticker-item">Audience Research</span>
<span class="sa-ticker-item">Go-To-Market Planning</span>
<span class="sa-ticker-item">Brand Voice & Messaging</span>
<span class="sa-ticker-item">Growth Marketing</span>
<span class="sa-ticker-item">Brand Strategy</span>
<span class="sa-ticker-item">Content Marketing</span>
<span class="sa-ticker-item">Campaign Development</span>
<span class="sa-ticker-item">Market Positioning</span>
<span class="sa-ticker-item">Audience Research</span>
<span class="sa-ticker-item">Go-To-Market Planning</span>
<span class="sa-ticker-item">Brand Voice & Messaging</span>
<span class="sa-ticker-item">Growth Marketing</span>
</div>
</div>
<!-- ════════ SERVICES + PROCESS ════════ -->
<div class="sa-work" id="sa-work">
<svg class="sa-work-schematic" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 600" preserveAspectRatio="xMidYMid slice">
<g stroke="#fff" stroke-width="0.6" fill="none">
<line x1="0" y1="100" x2="700" y2="100"/><line x1="0" y1="300" x2="700" y2="300"/><line x1="0" y1="500" x2="700" y2="500"/>
<line x1="100" y1="0" x2="100" y2="600"/><line x1="300" y1="0" x2="300" y2="600"/><line x1="500" y1="0" x2="500" y2="600"/>
<path d="M0 200 Q50 180 100 200 Q150 220 200 200 Q250 180 300 200 Q350 220 400 200 Q450 180 500 200 Q550 220 600 200 Q650 180 700 200" stroke-width="1.2"/>
<circle cx="200" cy="300" r="30"/><circle cx="400" cy="300" r="30"/>
<polygon points="350,100 350,200 430,150"/>
</g>
</svg>
<div class="sa-work-header">
<div>
<span class="sa-work-tag">// 01 — What We Do & How We Do It</span>
<h2 class="sa-work-headline">Every Signal<br>Deserves to<br><em>Be Heard.</em></h2>
</div>
<p class="sa-work-intro">From first brief to final launch, we work as an extension of your team — cutting through complexity to deliver marketing that's precise, purposeful, and built to perform.</p>
</div>
<div class="sa-services-grid">
<div class="sa-service">
<span class="sa-service-num">— 01</span>
<svg class="sa-service-icon" viewBox="0 0 48 48" fill="none" stroke="white" stroke-width="1.5">
<rect x="6" y="14" width="36" height="24" rx="1"/>
<circle cx="24" cy="26" r="6"/><circle cx="24" cy="26" r="2"/>
<line x1="6" y1="20" x2="18" y2="20"/><line x1="30" y1="20" x2="42" y2="20"/>
</svg>
<span class="sa-service-name">Brand Strategy</span>
<p class="sa-service-desc">We define what you stand for and why it matters. Positioning, voice, and a clear narrative that earns attention and builds lasting trust.</p>
</div>
<div class="sa-service">
<span class="sa-service-num">— 02</span>
<svg class="sa-service-icon" viewBox="0 0 48 48" fill="none" stroke="white" stroke-width="1.5">
<path d="M8 36 L8 28 L16 20 L24 26 L32 14 L40 20 L40 36 Z"/>
<line x1="8" y1="36" x2="40" y2="36"/>
</svg>
<span class="sa-service-name">Campaign Development</span>
<p class="sa-service-desc">Multi-channel campaigns engineered for impact — from concept through execution, with measurement baked in from the start.</p>
</div>
<div class="sa-service">
<span class="sa-service-num">— 03</span>
<svg class="sa-service-icon" viewBox="0 0 48 48" fill="none" stroke="white" stroke-width="1.5">
<circle cx="16" cy="24" r="8"/><circle cx="32" cy="24" r="8"/>
<path d="M24 17 Q20 24 24 31"/><path d="M24 17 Q28 24 24 31"/>
</svg>
<span class="sa-service-name">Go-to-Market</span>
<p class="sa-service-desc">Launch with precision. We map your audience, sharpen your message, and build the market entry plan that gives you momentum from day one.</p>
</div>
</div>
<div class="sa-divider">
<span class="sa-divider-label">// How We Work</span>
<div class="sa-divider-line"></div>
<span class="sa-divider-label">Simple Signal. Measurable Results.</span>
</div>
<div class="sa-process-grid">
<div class="sa-process-step">
<span class="sa-step-num">01</span>
<span class="sa-step-name">Diagnose</span>
<p class="sa-step-desc">We audit your current positioning, competitive landscape, and audience signals to understand exactly where you are — and what's holding you back.</p>
</div>
<div class="sa-process-step">
<span class="sa-step-num">02</span>
<span class="sa-step-name">Tune</span>
<p class="sa-step-desc">Strategy and messaging refined to your specific frequency. No generic frameworks — everything is built around your brand, your goals, your people.</p>
</div>
<div class="sa-process-step">
<span class="sa-step-num">03</span>
<span class="sa-step-name">Amplify</span>
<p class="sa-step-desc">We take the plan live — launching campaigns, activating channels, and ensuring every touchpoint is working in concert.</p>
</div>
<div class="sa-process-step">
<span class="sa-step-num">04</span>
<span class="sa-step-name">Measure</span>
<p class="sa-step-desc">Clear reporting. Real attribution. We track what matters, cut what doesn't, and continuously optimize toward the outcomes that drive your business forward.</p>
</div>
</div>
</div>
<!-- ════════ ABOUT ════════ -->
<div class="sa-about" id="sa-about">
<div class="sa-about-portrait-wrap">
<div class="sa-about-portrait-frame">
<!-- YOUR PORTRAIT — replace sa-about-ph div with:
<img src="YOUR-IMAGE-URL" alt="Your Name"> -->
<div class="sa-about-ph">
<svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#bbb" stroke-width="1">
<circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
</svg>
<span class="sa-about-ph-label">Your portrait here</span>
</div>
</div>
<div class="sa-about-accent"></div>
</div>
<div>
<p class="sa-section-tag"><span class="sa-section-tag-num">02</span> About</p>
<h2 class="sa-about-headline">The Consultant<br>Behind the Signal.</h2>
<p class="sa-about-body">I founded Simple Amp after a decade leading marketing at agencies and in-house teams. I noticed the same problem everywhere: brands drowning in tactics, disconnected from strategy, spending money without a clear signal to amplify.</p>
<p class="sa-about-body">Simple Amp exists to fix that. I work with a select number of clients at a time — getting deep, staying hands-on, and delivering the kind of clarity that moves business forward. No bloated retainers. No junior account managers. Just direct, experienced work.</p>
<div class="sa-about-stats">
<div>
<span class="sa-stat-num">12+</span>
<span class="sa-stat-label">Years in Marketing</span>
</div>
<div>
<span class="sa-stat-num">80+</span>
<span class="sa-stat-label">Brands Served</span>
</div>
<div>
<span class="sa-stat-num">3×</span>
<span class="sa-stat-label">Avg. Client Growth</span>
</div>
</div>
</div>
</div>
<!-- ════════ CTA ════════ -->
<div class="sa-cta" id="sa-contact">
<svg class="sa-cta-schematic" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300" preserveAspectRatio="xMidYMid slice">
<g stroke="#fff" stroke-width="0.7" fill="none">
<path d="M0 150 Q30 130 60 150 Q90 170 120 150 Q150 130 180 150 Q210 170 240 150 Q270 130 300 150 Q330 170 360 150 Q390 130 420 150 Q450 170 480 150 Q510 130 540 150 Q570 170 600 150" stroke-width="1.5"/>
<line x1="0" y1="50" x2="600" y2="50"/><line x1="0" y1="250" x2="600" y2="250"/>
<circle cx="150" cy="150" r="40"/>
<polygon points="350,110 350,190 420,150"/>
<line x1="420" y1="150" x2="500" y2="150"/>
</g>
</svg>
<h2 class="sa-cta-headline">Ready to<br>Find Your<br><em>Frequency?</em></h2>
<div class="sa-cta-actions">
<a href="mailto:hello@simpleamp.co" class="sa-btn-white">Book a Free Call</a>
<span class="sa-cta-sub">hello@simpleamp.co</span>
</div>
</div>
</div><!-- #sa-root -->