function Positioning() {
  return (
    <section className="section inverse" style={{ paddingTop: 120, paddingBottom: 120 }}>
      <div className="shell">
        <div className="positioning-grid" style={{
          display: "grid",
          gridTemplateColumns: "80px 1fr",
          gap: 32,
          alignItems: "start",
          paddingTop: 24,
          borderTop: "1px solid rgba(250,248,245,.18)",
        }}>
          <div className="mono" style={{ fontSize: 12, letterSpacing: ".1em", color: "rgba(250,248,245,.55)", paddingTop: 10 }}>
            (04)
          </div>
          <div>
            <div style={{
              fontFamily: "var(--mono)",
              fontSize: 11,
              letterSpacing: ".14em",
              textTransform: "uppercase",
              color: "rgba(250,248,245,.65)",
              marginBottom: 28,
            }}>
              Positioning
            </div>
            <h2 className="h-section" style={{ maxWidth: 1000, color: "var(--cream)" }}>
              The smartest business owners<br/>
              <em style={{ fontStyle: "italic", fontWeight: 400, color: "var(--gold-warm)" }}>don't work alone.</em>
            </h2>

            <div className="positioning-copy" style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: 64,
              marginTop: 56,
              maxWidth: 1100,
            }}>
              <p className="body-lg" style={{ margin: 0, color: "var(--cream)" }}>
                Running a consultancy, creative practice, or coaching business means keeping track
                of moving parts as well as clients.
              </p>
              <p className="body-lg" style={{ margin: 0, color: "rgba(250,248,245,.78)" }}>
                Sophie's Bureau brings order to the background work so your business runs smoothly
                — and you have space to lead.
              </p>
            </div>

            <div className="positioning-stats" style={{
              marginTop: 64,
              display: "grid",
              gridTemplateColumns: "repeat(4, 1fr)",
              gap: 24,
              paddingTop: 32,
              borderTop: "1px solid rgba(250,248,245,.18)",
            }}>
              {[
                ["20+", "years' experience"],
                ["UK & EU", "client base"],
                ["100%", "privacy-first stack"],
                ["30+", "clients supported"],
              ].map(([n, l]) => (
                <div key={l}>
                  <div className="serif" style={{ fontSize: 44, lineHeight: 1, color: "var(--cream)", marginBottom: 8 }}>
                    {n}
                  </div>
                  <div className="mono" style={{
                    fontSize: 11,
                    letterSpacing: ".12em",
                    textTransform: "uppercase",
                    color: "rgba(250,248,245,.6)",
                  }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Positioning = Positioning;