<p>Hello, World!</p>Here's the header CSS for Squarespace. Paste it into **Design → Custom CSS** (not a Code Block).

A quick caveat first: Squarespace builds its header for you, so you don't replace it with code — you build the structure in the editor (logo, nav links, the "Let's Talk" button) and use this CSS to style it to match the mockup. The class names below are Squarespace's standard header classes, but Squarespace occasionally tweaks them by template version, so if a piece doesn't take effect, tell me and I'll adjust.

```css
/* ===== HEADER STYLING ===== */

/* Header bar background — dark, semi-transparent, blurred */
.header {
  background: rgba(13, 13, 13, 0.88) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 45, 120, 0.1);
}

/* Nav links — uppercase, spaced, light */
.header-nav-item a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #FAF8F5 !important;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.header-nav-item a:hover {
  opacity: 1;
}

/* The "Let's Talk" button — hot pink */
.header-actions .btn,
.header-actions-action .btn {
  background: #FF2D78 !important;
  color: #ffffff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 10px 22px !important;
  border-radius: 2px !important;
  border: none !important;
  transition: background 0.2s ease;
}

.header-actions .btn:hover,
.header-actions-action .btn:hover {
  background: #e0005c !important;
}

/* Mobile menu overlay — keep it dark on brand */
.header-menu {
  background: rgba(13, 13, 13, 0.97) !important;
}

.header-menu-nav-item a {
  font-family: 'Cormorant Garamond', serif !important;
  color: #FAF8F5 !important;
}
```

**To set it up in the editor first:**
1. Edit your header → add the nav links: Services, Lead Management, Process, Work, About.
2. Turn on the header button, label it **Let's Talk**, link it to your contact section.
3. Set the header to "Fixed" position so it stays pinned as you scroll (Header settings → there's a fixed/floating toggle).
4. Then paste the CSS above.

Two things to know: the `!important` flags are there because Squarespace's own styles are aggressive — you usually need them to win. And the exact button class (`.header-actions .btn`) can vary; if your button doesn't turn pink, right-click it on desktop → Inspect to find the real class name, send it to me, and I'll correct the snippet.

Want the hero section CSS next?