/* eslint-disable */
// Practice Areas overview page

function PracticePage() {
  useReveal();

  return (
    <React.Fragment>
      <Nav current="practice" />

      <section className="page-hero">
        <div className="inner">
          <div className="crumb reveal">
            <a href="Home.html">Home</a>
            <span className="sep">/</span>
            <span>Practice Areas</span>
          </div>
          <h1 className="reveal d1">Practice <em>Areas.</em></h1>
          <p className="ld reveal d2">
            Four disciplines, one standard. We accept matters narrowly, so we can
            give every client the depth of attention the work demands.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="practice-grid">
          <a href="Estate Planning.html" className="practice-card reveal">
            <div className="card-media">
              <img className="photo" src="assets/estate-planning.jpg" alt="Estate planning" style={{objectPosition:"center 65%"}} />
            </div>
            <div className="card-body">
              <div className="num">01 / 04</div>
              <div className="ico"><Icon.Estate /></div>
              <h3>Estate <em>Planning</em></h3>
              <p>Wills, revocable and irrevocable trusts, asset protection strategies, powers of attorney, and advance healthcare directives. Drafted to your circumstances, never your template.</p>
              <span className="more">Explore<span className="ar"></span></span>
            </div>
          </a>
          <a href="Real Estate Law.html" className="practice-card reveal d1">
            <div className="card-media">
              <img className="photo" src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=900&q=80&auto=format&fit=crop" alt="Real estate law" />
            </div>
            <div className="card-body">
              <div className="num">02 / 04</div>
              <div className="ico"><Icon.RealEstate /></div>
              <h3>Real <em>Estate Law</em></h3>
              <p>Residential and commercial closings, purchase and sale contracts, lease drafting and review, landlord/tenant matters, and thorough title diligence.</p>
              <span className="more">Explore<span className="ar"></span></span>
            </div>
          </a>
          <a href="Business Law.html" className="practice-card reveal d2">
            <div className="card-media">
              <img className="photo" src="assets/business-law.jpg" alt="Business law" />
            </div>
            <div className="card-body">
              <div className="num">03 / 04</div>
              <div className="ico"><Icon.Business /></div>
              <h3>Business <em>Law</em></h3>
              <p>LLC and corporation formation, operating and shareholder agreements, commercial contract drafting, and outside general counsel for entrepreneurs.</p>
              <span className="more">Explore<span className="ar"></span></span>
            </div>
          </a>
          <a href="Civil Litigation.html" className="practice-card reveal d3">
            <div className="card-media">
              <img className="photo" src="https://images.unsplash.com/photo-1568092806323-8ec13dfa9b92?w=900&q=80&auto=format&fit=crop" alt="Civil litigation" />
            </div>
            <div className="card-body">
              <div className="num">04 / 04</div>
              <div className="ico"><Icon.Gavel /></div>
              <h3>Civil <em>Litigation</em></h3>
              <p>Pre-suit demand and negotiation, complaints and motion practice, mediation and ADR, and trial representation in state and federal courts.</p>
              <span className="more">Explore<span className="ar"></span></span>
            </div>
          </a>
        </div>
      </section>

      <section className="section tight" style={{paddingTop: 0}}>
        <div className="section-head center">
          <div className="eyebrow reveal" style={{justifyContent:"center"}}>How We Work</div>
          <h2 className="section-title reveal d1">A method, <em>not a process.</em></h2>
          <p className="section-lede reveal d2" style={{marginInline:"auto"}}>
            Every engagement follows a careful sequence designed to surface what matters
            and remove ambiguity before it becomes risk.
          </p>
        </div>

        <div style={{maxWidth: 880, margin: "0 auto"}}>
          <div className="svc-process">
            <div className="step reveal"><div className="n"><em>i.</em></div><div><h4>Listen first.</h4><p>An initial conversation. We want to understand the matter, the people involved, and what a good outcome looks like — before we propose anything.</p></div></div>
            <div className="step reveal d1"><div className="n"><em>ii.</em></div><div><h4>Scope clearly.</h4><p>A written engagement letter that defines what we will do, what we will not, the timeline, and the fee. No open meters, no surprises.</p></div></div>
            <div className="step reveal d2"><div className="n"><em>iii.</em></div><div><h4>Draft with care.</h4><p>Every document is drafted from scratch or carefully tailored from prior work. We do not "fill in the blanks" on templates.</p></div></div>
            <div className="step reveal d3"><div className="n"><em>iv.</em></div><div><h4>Walk you through it.</h4><p>We review every instrument together, in plain language, until you understand it. The document is yours; you should know what it says.</p></div></div>
            <div className="step reveal d4"><div className="n"><em>v.</em></div><div><h4>Stay available.</h4><p>Most matters resurface — a life change, a new asset, a question. You will continue to have direct access to the same attorney who drafted your work.</p></div></div>
          </div>
        </div>
      </section>

      <section className="cta-band">
        <div className="inner">
          <h2 className="reveal">Not sure where to <em>begin?</em></h2>
          <p className="reveal d1">An initial consultation is the easiest way to find out. It is private and complimentary.</p>
          <div className="actions reveal d2">
            <a href="Contact.html" className="btn btn-primary">Schedule Consultation <span className="arr">→</span></a>
            <a href="tel:6104003147" className="btn btn-ghost">Call 610.400.3147</a>
          </div>
        </div>
      </section>

      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<PracticePage />);