function Quote() {
  return (
    <section style={{ maxWidth: 980, margin: '0 auto', padding: '128px 32px', textAlign: 'left' }}>
      <div style={{
        fontFamily: 'var(--font-serif)', fontSize: 'clamp(32px, 4vw, 48px)',
        lineHeight: 1.2, letterSpacing: '-0.015em', color: 'var(--fg)',
      }}>
        <span style={{ color: 'var(--brand)', fontStyle: 'italic' }}>&ldquo;</span>
        It does the work I kept meaning to get to.
        After a week, I stopped checking what it had handled — that was the moment I trusted it.
        <span style={{ color: 'var(--brand)', fontStyle: 'italic' }}>&rdquo;</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 36 }}>
        <div style={{ width: 44, height: 44, borderRadius: '50%', background: 'var(--accent-warm)' }}></div>
        <div>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 500, color: 'var(--fg)' }}>Maya Okafor</div>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--fg-subtle)' }}>Head of Operations, Lattice Studios</div>
        </div>
      </div>
    </section>
  );
}
window.Quote = Quote;