.site-header {
  position: sticky; z-index: 100; top: 0; border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--canvas) 90%, transparent);
  backdrop-filter: blur(16px);
  transition: border-color 200ms ease, background 200ms ease;
}
.site-header.is-scrolled { border-color: var(--hairline); background: color-mix(in srgb, var(--canvas) 96%, transparent); }
.header-inner { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: var(--space-5); }
.primary-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.hero { min-height: calc(100vh - 76px); padding-top: clamp(5rem, 9vw, 9rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(330px, 5fr); gap: clamp(3rem, 7vw, 8rem); align-items: end; }
.hero-copy { padding-bottom: var(--space-5); }
.hero-visual { align-self: stretch; display: flex; min-height: 520px; flex-direction: column; justify-content: space-between; padding: 1.25rem; border: 1px solid var(--hairline); background: var(--paper); box-shadow: var(--shadow-soft); }
.split-intro { display: grid; grid-template-columns: 3fr 9fr; gap: var(--space-6); }
.split-content { max-width: 970px; }
.split-content .lede { max-width: 840px; }
.section-heading { display: grid; grid-template-columns: 3fr 9fr; gap: var(--space-6); margin-bottom: var(--space-7); }
.section-heading h2 { margin-bottom: 0; }
.capability-list { border-top: 1px solid rgba(255, 255, 255, 0.22); }
.capability-row { display: grid; grid-template-columns: 0.75fr 4.25fr 5fr; gap: var(--space-5); align-items: start; padding-block: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.products-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(3rem, 8vw, 9rem); align-items: start; }
.product-copy { position: sticky; top: 120px; }
.team-grid, .experience-grid, .conversion-grid, .brief-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(3rem, 8vw, 9rem); align-items: start; }
.fit-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.footer-grid { display: grid; grid-template-columns: 5fr 3fr 4fr; gap: var(--space-6); padding-block: var(--space-7); }
.footer-bottom { display: flex; align-items: center; gap: var(--space-5); padding-block: 1.2rem; border-top: 1px solid rgba(255,255,255,.16); }
.footer-bottom p { margin: 0 auto 0 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }