Calder & Reshef Law Firm Website

Build a "Calder & Reshef Law Firm Website" React component.

CONCEPT: The website of a twelve-lawyer litigation and advisory boutique on Rothschild Boulevard, Tel Aviv, founded 1987. It should feel like security printing on good paper: authority through patience, not through gold and marble. The signature moment is a guilloche seal (the engraved rosette on a banknote) that draws itself line by line and keeps turning, very slowly.

LAYOUT & CONTENT:
- Nav (76px): 'Calder & Reshef' in serif with an italic ampersand and 'Advocates, Tel Aviv' small beside it; links Practice / Matters / Counsel / Writing; an outlined 'Consultation' button. A 1px rule under it.
- Hero: left, 'Disputes, settled with patience.' (second half in light italic of the same serif), one sentence ('A twelve-lawyer firm for commercial litigation, arbitration and family wealth. We take fewer matters, and we read every page of them.'), an oxblood 'Request a consultation' button and a text link 'How we work'. Right, a 560px guilloche seal: 12 phase-shifted sine rings (r = 226 + 14·sin(36t + φ)) in green, 10 rings in oxblood (r = 162 + 22·sin(18t + φ)), a 24-lobe hypotrochoid rosette inside, the firm name set on a circular textPath with textLength so it closes exactly, and 'C&R' in italic in a small centre disc. All generated in JS as path strings.
- Selected matters (bottle-green band): a ruled ledger of 4 rows (docket number, case name in serif, court, year). Hovering or focusing a row draws a brass rule under it and opens a one-line outcome ('Damages of ₪41.6m upheld on appeal').
- Practice: 'Four practices, one table.' with a tab list on the left (Commercial litigation, International arbitration, Private client and succession, Regulatory and public law) and a reading pane on the right: a large oxblood drop cap, two sentences, one fact line under a rule.
- Letter: a quote from the founding partner in large light serif, a guilloche fragment rotating with scroll behind it, and her signature as an SVG path.
- Counsel: five people as ledger rows, each with a 64px guilloche cameo (initials in italic), name, title, focus, 'Bar 1984'.
- Writing: three articles with date and reading time; titles underline in oxblood on hover.
- Contact (green band): 'Request a consultation', fixed fee ₪1,200 for forty minutes, address, email, hours; a form with full name, a 4-option segmented choice ('Litigation', 'Arbitration', 'An estate', 'A regulator') and a short note, submitting to an inline confirmation.

INTERACTIONS & MOTION:
- Seal: every ring animates pathLength 0 → 1 over 2.4-3.4s with a 60ms stagger on load; then the outer group rotates 360° in 260s, the oxblood group -360° in 200s, the rosette in 140s (linear). A soft light band (white linear gradient, mix-blend screen, clipped to the disc) sweeps across every ~9s with ease-in-out cubic-bezier(0.77, 0, 0.175, 1).
- Signature: useScroll on the letter section (offset ['start end', 'end start']), pathLength mapped from 0.2-0.62 of progress; the quote block drifts 40px with the same progress.
- Matters rows enter with clip-path inset(0 100% 0 0) → inset(0) staggered 120ms. Segmented control uses a shared layoutId highlight with a zero-bounce spring.
- Cameos rotate 360° in 90-150s, alternating direction.

DESIGN SYSTEM, Engraved Ledger:
- Bone paper #F1ECE1, bottle green #16302B, one accent oxblood #7A2430, brass #C9B99A for rules on green, ink #1E2220, muted #5E625C. A 5% fractal-noise grain over everything.
- Newsreader (light 300 for display, italic for emphasis, same family) and Geist for UI text. Display 5.4rem, line-height 0.98, tracking -0.03em.
- Square corners everywhere, 1px rules, no shadows. Guilloche lines 0.45-0.6px.

CRAFT RULES:
- Motion: Framer Motion. Springs (type: "spring") for anything interactive; ease-out cubic-bezier(0.23, 1, 0.32, 1) for entrances; UI feedback under 300ms, exits faster than entrances. Ambient loops are slow (6s and up) and never pulse in sync. Animate transform, opacity, clip-path and SVG attributes only. Respect prefers-reduced-motion via useReducedMotion(): loops and parallax become static, fades stay.
- Copy: real, specific names, prices and times; no em-dashes, no lorem ipsum, no eyebrow labels over every heading.
- Icons: lucide-react where icons are needed; every illustration is inline SVG, no external images.
- Accessibility: real <button>/<a>/<label>/<form> elements, visible focus rings, keyboard operable, aria-pressed / aria-selected / aria-live where state changes, tabular numerals for prices, times and measurements.

OUTPUT: one self-contained React component file (Tailwind CSS v4 utility classes, framer-motion, lucide-react), no external images, default export, ready to paste into a Next.js App Router page with "use client". Load the Google Fonts it needs with next/font/google.