Immersive Legal Hero

Create an immersive hero for a premium law firm. Use a softly desaturated full-viewport photograph of Lady Justice and classical courthouse columns as the background, treated with a warm ivory veil so dark navy typography remains readable. Place the navigation over the image with an elegant shield-and-scales wordmark and a dark appointment CTA. Center the hero content: a small gold uppercase eyebrow with a short horizontal rule, a large high-contrast serif headline in two lines with the final word in muted antique gold, a restrained supporting paragraph and two pill CTAs. Near the bottom, present four unframed trust pillars in a balanced row; each uses a white circular medallion with a fine gold legal icon, a dark title and two lines of copy. Add a very slow background push-in, subtle light movement across the statue and staggered reveals for the trust pillars. Do not use loud gradients or startup-style cards. The mood must be dignified, calm, established and human.

Build this as a complete, production-ready website hero in React and TypeScript using Tailwind CSS and Framer Motion. Reproduce the reference composition faithfully while creating original brand assets and copy. The page must include a semantic header, responsive navigation, strong single H1, supporting paragraph, two purposeful calls to action, proof or feature items, and the main visual composition.

Interaction and quality requirements:
- Animate the entrance as a restrained cinematic sequence: navigation fades down, copy reveals line by line, the main visual scales from 0.97, and supporting cards enter with a short stagger.
- Add subtle pointer parallax only to decorative or photographic layers; never reduce readability or move interactive controls.
- Buttons need polished hover, pressed and keyboard-focus states. Navigation must become an accessible compact menu on mobile.