---
title: "Unlocking systemic change: mapping leverage points across legal education and training"
date: 2025-12-08T11:45:39Z
modified: 2025-12-08T13:11:47Z
permalink: "https://chancerylaneproject.org/news/unlocking-systemic-change-mapping-leverage-points-across-legal-education-and-training/"
type: post
status: publish
excerpt: "This latest instalment in our 'Unlocking systemic change' series explores how legal education and training can foster climate-aligned practice. Drawing on our updated, jurisdiction-agnostic lifecycle map, it highlights the key leverage points, blockers, and opportunities across a lawyer’s development."
wpid: 10511
categories:
  - Project updates
featured_image: "https://chancerylaneproject.org/wp-content/uploads/2025/12/christian-lendl-nxBucBB_ihQ-unsplash-scaled.jpg"
---

As part of our series [exploring the hidden power of non-contentious law](https://chancerylaneproject.org/news/the-hidden-power-of-non-contentious-law-in-the-climate-transition/), we move from overarching development opportunities to the specific potential of legal education and training to realise systemic change in the field.

In our previous piece, [_Our insights into legal education and professional regulation_](https://chancerylaneproject.org/news/bridging-the-climate-gap-our-insights-into-legal-education-and-professional-regulation/), we mapped the journey of a solicitor across education, training, qualification, and practice. We also examined how these environments influence how legal professionals understand and engage with climate and nature issues. The first version of this map helped us identify the key decision-makers shaping that journey, the blockers that limit climate-aligned practice, and the opportunities emerging across the system.

Over the past year, further interviews, workshops, and collaborations deepened our understanding. We revisited the map to make it clearer, more adaptable across jurisdictions, and more useful for ongoing analysis and collaboration.

This updated visual now moves from “understanding the landscape” towards a more structured phase of strategic design.

## **1. Leverage points: a clearer, more universal lifecycle structure**

One of the strongest signals from our research is that many critical leverage points sit at predictable moments in a lawyer’s development. Many of them appear far earlier than expected.

To reflect this more clearly, the updated map now follows a simplified five-stage lifecycle that appears consistently across most jurisdictions:

- Education & foundation
- Vocational training
- Qualification & induction
- Specialisation
- Leadership & legacy

This provides a shared structure that colleagues across different legal systems can adapt to their own contexts. It also allows leverage points to be located not just by topic (for example climate competency or drafting practice) but by when they emerge in a lawyer’s career. That timing becomes crucial for understanding sequencing and practical influence.

## **2. Power analysis: parallel lenses showing how influence operates**

To better understand how decisions are shaped at each stage of the lifecycle, this interactive map now sets out four parallel lenses that consistently appeared in our interviews and analysis:

- **Workflows** – the core activities shaping lawyer behaviour and expectations
- **Actors** – the institutions, gatekeepers and organisations influencing those activities
- **Blockers** – the frictions that prevent climate and nature from being integrated into routine legal work
- **System opportunities** – existing initiatives or mechanisms with potential to create alignment

This layered structure provides a clearer view of where influence sits and how it flows. It also shows how different actors shape professional development.

Rather than viewing challenges in isolation, the map enables a more holistic understanding of how different interactions shape legal practice. These interactions determine whether climate and nature become embedded in day-to-day work.

This aligns with the broader objective of building architecture that clarifies “who controls outcomes” and where cascading effects may arise. That objective was outlined in the first article of this series.

## **3. Assessing leverage points and sequencing: a more adaptable, jurisdiction-agnostic frame**

One limitation of the original map was its anchoring in England and Wales, which made it harder to explore how similar dynamics appear globally. As our conversations broadened internationally, it became clear that a more jurisdiction-agnostic frame was needed.

The updated map removes jurisdiction-specific references. It focuses instead on structural patterns that appear across legal systems. This makes it easier to:

- Compare jurisdictions
- Identify missing interventions
- Explore how leverage points appear earlier or later depending on regulatory context
- Consider sequencing more systematically

By presenting the lifecycle in a universal format, and the lenses in parallel, the map supports the kind of comparative and sequenced analysis outlined in our first blog.

## **4. Associating results with leverage points: a clearer sense of direction**

While the map itself does not include outcomes, this blog adds a concise set of desired outcomes that emerged across our research. These help readers understand why the relationships in the map matter. They also signal what improved alignment could look like in practice:

- Stronger baseline climate competency for new lawyers
- Clearer climate-related expectations embedded into professional standards
- Wider adoption of climate-aligned drafting practices across firms
- More climate-informed advice reaching senior decision-makers
- Improved integration of climate and nature risks into transactional and governance work

These outcomes are intentionally high-level. They are not prescriptive and do not dictate specific interventions. Instead, they provide a frame for interpreting the map and understanding how the system might evolve as leverage points are acted on. This echoes the fourth step identified in the series introduction.

## **What this updated map contributes**

Our aim with this redesigned map is simple: to make the complexity of the legal career lifecycle easier to understand, compare, and discuss across jurisdictions. It is not intended as a complete representation of the system, and it cannot capture every nuance of legal education, training, and practice. But it provides a clearer starting point for anyone examining how different elements of the legal profession influence engagement with climate and nature issues.

We will continue refining this work as our research develops. We also welcome reflections from readers engaging with the map in their own contexts.

Scroll through the interactive map below and explore the areas that resonate most with your experience. Let us know whether it supports your work. Please feel free to send your comments to <guillermo.miranda@chancerylaneproject.org>.


  tailwind.config = {
    corePlugins: {
      preflight: false, // CRITICAL: Stops Tailwind from resetting your WordPress theme styles
    },
    prefix: 'tw-', // Prefixes all classes to avoid conflicts
  }

    /* The Safe Container - Always 100% width, never affects page layout */
    #tclp-map-wrapper {
        width: 100%;
        max-width: 100%; /* Strict limit - won't break page layout */
        height: 800px;
        position: relative;
        background-color: #F9FAFB;
        border: 1px solid #E5E7EB;
        border-radius: 8px;
        overflow: hidden; /* Keeps everything inside */
        margin: 20px 0;
        font-family: 'Noto Sans', sans-serif;

        /* CSS Containment - Isolates this element from page layout */
        contain: layout size style;
        isolation: isolate;

        /* Ensure children can never escape */
        box-sizing: border-box;
    }

    /* Ensure all children also use border-box */
    #tclp-map-wrapper * {
        box-sizing: border-box;
    }

    /* Mobile adjustments */
    @media (max-width: 768px) {
        #tclp-map-wrapper {
            height: 600px;
            margin: 10px 0;
            border-radius: 4px;
        }
    }

    /* Scrollable Inner Area - Horizontal scroll for 1050px content */
    #map-scroll-area {
        width: 100%;
        height: 100%;
        max-width: 100%; /* Absolutely cannot exceed container */
        max-height: 100%;
        overflow: auto; /* Horizontal and vertical scrollbars as needed */
        overflow-x: auto;
        overflow-y: auto;
        position: relative;
        /* Smooth momentum scrolling for touch devices */
        -webkit-overflow-scrolling: touch;
    }

    /* Map Content - Fixed 1050px, scrolls within container */
    #react-root {
        min-width: 1050px;
        width: 1050px;
        height: 100%;
        transform-origin: top left;
        position: relative;

        /* Prevent any child from escaping */
        overflow: visible; /* Allow React content to render fully */
    }

    /* Print Logic */
    @media print {
        body * { visibility: hidden; }
        #tclp-map-wrapper, #tclp-map-wrapper * {
            visibility: visible;
        }
        #tclp-map-wrapper {
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            z-index: 9999;
            background: white;
            border: none;
            overflow: visible;
        }
        #map-scroll-area { overflow: visible; }
        #react-root { min-width: 0; width: 100%; transform: scale(0.6); }
        .no-print { display: none !important; }
    }


 




    const { useState, useEffect, useRef } = React;

    // --- ICONS ---
    const Icon = ({ children }) => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{children};
    const Icons = {
        ZoomIn: () => <Icon><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/>,
        ZoomOut: () => <Icon><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="8" x2="14" y1="11" y2="11"/>,
        Maximize: () => <Icon><path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/>,
        LayoutGrid: () => <Icon><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/>,
        Printer: () => <Icon><path d="M6 9V2h12v7"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><path d="M6 14h12v8H6z"/>,
        ArrowLeft: () => <Icon><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>
    };

    // --- Data ---
    const INITIAL_DATA = [
        { id: 'w1', category: 'WORKFLOWS', stage: 'EDUCATION', title: 'Degree Selection', description: 'Students choosing law or conversion courses based on perceived value.', icon: '🎓' },
        { id: 'w2', category: 'WORKFLOWS', stage: 'EDUCATION', title: 'University Life', description: 'Joining societies; first exposure to legal ethics and "black letter" law.', icon: '🏫' },
        { id: 'w3', category: 'WORKFLOWS', stage: 'VOCATIONAL', title: 'Licensure Exams', description: 'Sitting standardised entry tests (e.g., Bar, SQE).', icon: '📝' },
        { id: 'w4', category: 'WORKFLOWS', stage: 'VOCATIONAL', title: 'Practical Training', description: 'Apprenticeships, pupillage, or training contracts.', icon: '💼' },
        { id: 'w5', category: 'WORKFLOWS', stage: 'QUALIFICATION', title: 'Professional Induction', description: 'Admission to the roll/bar; first real client work.', icon: '🤝' },
        { id: 'w6', category: 'WORKFLOWS', stage: 'QUALIFICATION', title: 'Drafting Foundation', description: 'Learning to use precedents and document management systems.', icon: '📄' },
        { id: 'w7', category: 'WORKFLOWS', stage: 'SPECIALIZATION', title: 'Niche Development', description: 'Specialising in energy, corporate, or supply chain law.', icon: '🌱' },
        { id: 'w8', category: 'WORKFLOWS', stage: 'SPECIALIZATION', title: 'Client Advisory', description: 'Directing external counsel and advising boards on risk.', icon: '🗣️' },
        { id: 'w9', category: 'WORKFLOWS', stage: 'LEADERSHIP', title: 'Strategic Decision Making', description: 'Partnership votes or judicial appointments.', icon: '⚖️' },
        { id: 'a1', category: 'ACTORS', stage: 'EDUCATION', title: 'Universities', description: 'Deans, lecturers, student law societies.', icon: '🏛️' },
        { id: 'a2', category: 'ACTORS', stage: 'EDUCATION', title: 'Standard Setters', description: 'Accreditation bodies defining core curriculum.', icon: '📋' },
        { id: 'a3', category: 'ACTORS', stage: 'VOCATIONAL', title: 'Exam Boards', description: 'Organisations designing competency frameworks (e.g., SRA, NCBE).', icon: '🏢' },
        { id: 'a4', category: 'ACTORS', stage: 'QUALIFICATION', title: 'Talent Gatekeepers', description: 'HR directors and graduate recruitment teams.', icon: '👥' },
        { id: 'a5', category: 'ACTORS', stage: 'SPECIALIZATION', title: 'Key Clients', description: 'General Counsel (GCs), procurement leads, sustainability heads.', icon: '👔' },
        { id: 'a6', category: 'ACTORS', stage: 'SPECIALIZATION', title: 'Rankers', description: 'Legal directories (e.g., Legal 500, Chambers).', icon: '⭐' },
        { id: 'b1', category: 'BLOCKERS', stage: 'EDUCATION', title: 'Siloed Curriculum', description: 'Climate law treated as a niche elective, not a core risk skill.', icon: '🚧' },
        { id: 'b2', category: 'BLOCKERS', stage: 'EDUCATION', title: 'Fossil Funding', description: 'Reliance on high-carbon funding for research centres.', icon: '🛢️' },
        { id: 'b3', category: 'BLOCKERS', stage: 'VOCATIONAL', title: 'Rote Testing', description: 'Exams focus on procedural memory, missing complex risk analysis.', icon: '🧠' },
        { id: 'b4', category: 'BLOCKERS', stage: 'QUALIFICATION', title: 'Hierarchy of Silence', description: 'Juniors feel unable to raise ethical concerns on specific matters.', icon: '🤫' },
        { id: 'b5', category: 'BLOCKERS', stage: 'QUALIFICATION', title: 'The Billable Hour', description: 'Efficiency models discourage "non-billable" learning time.', icon: '⏳' },
        { id: 'b6', category: 'BLOCKERS', stage: 'SPECIALIZATION', title: 'Neutrality Myth', description: 'Belief that lawyers must be "neutral cab ranks" without moral agency.', icon: '🎭' },
        { id: 'b7', category: 'BLOCKERS', stage: 'SPECIALIZATION', title: 'Precedent Inertia', description: 'Copying and pasting old clauses ("zombie contracts").', icon: '🧟' },
        { id: 'b8', category: 'BLOCKERS', stage: 'LEADERSHIP', title: 'Risk Aversion', description: 'Conservative culture slows adoption of novel "green" clauses.', icon: '🛡️' },
        { id: 'e1', category: 'ENGINEERING', stage: 'EDUCATION', title: 'Curriculum Rewire', description: 'Integrating climate risk into contract, tort, and property modules.', icon: '⚡' },
        { id: 'e2', category: 'ENGINEERING', stage: 'EDUCATION', title: 'Clinical Education', description: 'Student clinics focused on climate justice/risk.', icon: '🏥' },
        { id: 'e3', category: 'ENGINEERING', stage: 'VOCATIONAL', title: 'Mandatory Competency', description: 'Requiring "climate competency" for licensure (regulation lever).', icon: '📜' },
        { id: 'e4', category: 'ENGINEERING', stage: 'QUALIFICATION', title: 'Green Drafting Defaults', description: 'Standardising TCLP clauses in firm-wide precedent banks.', icon: '📝' },
        { id: 'e5', category: 'ENGINEERING', stage: 'QUALIFICATION', title: 'Reverse Mentoring', description: 'Juniors educating seniors on climate urgency.', icon: '🔄' },
        { id: 'e6', category: 'ENGINEERING', stage: 'SPECIALIZATION', title: 'Precedent Flywheel', description: 'Widespread use of green clauses creates new market norms.', icon: '🎡' },
        { id: 'e7', category: 'ENGINEERING', stage: 'SPECIALIZATION', title: 'Supply Chain Mapping', description: 'Lawyers mapping carbon hotspots in client supply chains.', icon: '🗺️' },
        { id: 'e8', category: 'ENGINEERING', stage: 'LEADERSHIP', title: 'Fiduciary Duty Reform', description: 'Redefining "best interest" to include long-term viability.', icon: '⚖️' },
        { id: 'e9', category: 'ENGINEERING', stage: 'LEADERSHIP', title: 'Pension Stewardship', description: 'Directing firm pensions and investments towards low-carbon funds.', icon: '💰' },
    ];

    const STAGES = [
        { id: 'EDUCATION', label: 'Education & Foundation' },
        { id: 'VOCATIONAL', label: 'Vocational Training' },
        { id: 'QUALIFICATION', label: 'Qualification & Induction' },
        { id: 'SPECIALIZATION', label: 'Specialisation' },
        { id: 'LEADERSHIP', label: 'Leadership & Legacy' },
    ];

    const CATEGORIES = [
        { id: 'WORKFLOWS', label: 'Workflows', color: 'tw-text-slate-700', bg: 'tw-bg-slate-50', border: 'tw-border-slate-200' },
        { id: 'ACTORS', label: 'Actors', color: 'tw-text-blue-700', bg: 'tw-bg-blue-50', border: 'tw-border-blue-200' },
        { id: 'BLOCKERS', label: 'Blockers', color: 'tw-text-red-700', bg: 'tw-bg-red-50', border: 'tw-border-red-200' },
        { id: 'ENGINEERING', label: 'System Engineering', color: 'tw-text-emerald-700', bg: 'tw-bg-emerald-50', border: 'tw-border-emerald-200' },
    ];

    // --- Main Component ---
    function App() {
        const [items, setItems] = useState(INITIAL_DATA);
        const [scale, setScale] = useState(1.0);
        const [isPrinting, setIsPrinting] = useState(false);
        
        // No auto-scaling needed - content scrolls horizontally instead
        useEffect(() => {
            // Optional: Auto-scroll hint for mobile users
            const scrollArea = document.getElementById('map-scroll-area');
            if (scrollArea && window.innerWidth < 1050) {
                // Small visual hint that content is scrollable
                setTimeout(() => {
                    scrollArea.scrollLeft = 50;
                    setTimeout(() => { scrollArea.scrollLeft = 0; }, 300);
                }, 500);
            }
        }, []);

        const handlePrint = () => { setIsPrinting(true); setTimeout(() => window.print(), 500); };

        const MapGrid = ({ isPrintMode = false }) => (
            <div className={`tw-grid tw-grid-cols-[200px_repeat(5,1fr)] ${isPrintMode ? 'tw-w-full tw-max-w-[1000px]' : 'tw-min-w-[1050px]'}`}>
                <div className="tw-p-4 tw-border-b tw-border-r tw-border-gray-100 tw-bg-gray-50/50 tw-flex tw-items-center tw-justify-center">
                    {isPrintMode && <div className="tw-text-[8px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-widest">Lifecycle Stage ⮕}
                
                {STAGES.map(stage => (
                    <div key={stage.id} className={`tw-p-4 tw-border-b tw-border-r tw-border-gray-100 tw-bg-slate-50 tw-text-center tw-relative tw-group ${isPrintMode ? 'tw-p-2' : ''}`}>
                        <h3 className={`tw-font-bold tw-text-slate-700 tw-uppercase tw-tracking-wider ${isPrintMode ? 'tw-text-[10px]' : 'tw-text-sm'}`}>{stage.label}
                        {!isPrintMode && <div className="tw-absolute tw-bottom-0 tw-left-0 tw-w-full tw-h-0.5 tw-bg-indigo-600 tw-opacity-0 group-hover:tw-opacity-100 tw-transition-opacity">}
                    
                ))}
                {CATEGORIES.map(cat => (
                    <React.Fragment key={cat.id}>
                        <div className={`tw-p-6 tw-border-b tw-border-r tw-border-gray-100 ${cat.bg} tw-flex tw-flex-col tw-justify-center tw-relative`}>
                            <h3 className={`tw-font-black tw-uppercase tw-tracking-widest ${cat.color} tw-mb-1 ${isPrintMode ? 'tw-text-[10px]' : 'tw-text-xs'}`}>{cat.label}
                        
                        {STAGES.map(stage => {
                            const cellItems = items.filter(i => i.category === cat.id && i.stage === stage.id);
                            return (
                                <div key={`${cat.id}-${stage.id}`} className={`tw-border-b tw-border-r tw-border-dashed tw-border-gray-200 tw-relative tw-group/cell tw-transition-colors ${!isPrintMode ? 'hover:tw-bg-gray-50/80 tw-p-3 tw-min-h-[180px]' : 'tw-p-1 tw-min-h-[100px]'}`}>
                                    <div className="tw-flex tw-flex-col tw-gap-2 tw-h-full">
                                        {cellItems.map(item => (
                                            <div key={item.id} className={`group/card tw-relative tw-rounded-lg tw-border-l-4 tw-bg-white tw-shadow-sm tw-border tw-border-gray-100 tw-break-inside-avoid ${!isPrintMode ? 'hover:tw-shadow-md tw-p-3' : 'tw-p-1.5'} ${cat.id === 'BLOCKERS' ? 'tw-border-l-red-500' : cat.id === 'ENGINEERING' ? 'tw-border-l-emerald-500' : cat.id === 'ACTORS' ? 'tw-border-l-blue-500' : 'tw-border-l-slate-500'}`}>
                                                <div className="tw-flex tw-items-start tw-gap-2">
                                                    <span className={`${isPrintMode ? 'tw-text-sm' : 'tw-text-lg'} tw-select-none`}>{item.icon}
                                                    <div className="tw-flex-1 tw-min-w-0">
                                                        <h4 className={`tw-font-bold tw-text-slate-800 tw-leading-snug tw-mb-0.5 ${isPrintMode ? 'tw-text-[9px]' : 'tw-text-sm'}`}>{item.title}
                                                        <p className={`tw-text-slate-500 tw-leading-tight ${isPrintMode ? 'tw-text-[8px]' : 'tw-text-xs'}`}>{item.description}
                                                    
                                                
                                            
                                        ))}
                                    
                                
                            );
                        })}
                    
                ))}
            
        );

        if (isPrinting) {
            return (
                <div className="tw-bg-white tw-h-full tw-p-2 tw-flex tw-flex-col tw-items-center tw-justify-center tw-overflow-auto">
                    <div className="tw-fixed tw-top-4 tw-right-4 tw-z-50 tw-flex tw-gap-3 no-print">
                        <div className="tw-bg-yellow-50 tw-text-yellow-800 tw-px-3 tw-py-2 tw-rounded-md tw-text-xs tw-font-medium tw-border tw-border-yellow-200 tw-shadow-sm">Press Ctrl+P / Cmd+P to save as PDF
                        <button onClick={() => setIsPrinting(false)} className="tw-flex tw-items-center tw-gap-2 tw-px-4 tw-py-2 tw-bg-gray-800 tw-text-white tw-rounded-md hover:tw-bg-gray-700 tw-shadow-lg tw-transition-colors tw-text-sm tw-font-bold"><Icons.ArrowLeft /> Back to Map
                    
                    <div className="print-container tw-w-full tw-max-w-[1100px]">
                        <div className="tw-mb-4 tw-border-b tw-border-gray-300 tw-pb-2">
                            <h1 className="tw-text-xl tw-font-bold tw-text-slate-900 tw-mb-1">System Engineering Map: The Legal Lifecycle
                            <p className="tw-text-xs tw-text-slate-600 tw-leading-relaxed tw-max-w-4xl">This map visualises the lifecycle of a legal professional, identifying key workflows, actors, and blockers. Crucially, it highlights <strong>System Engineering opportunities—strategic leverage points designed to shift the sector towards climate-conscious practice.
                        
                        <div className="tw-transform tw-origin-top-left tw-scale-[0.55] tw-w-[180%]">
                            <MapGrid isPrintMode={true} />
                        
                        <div className="tw-mt-2 tw-pt-2 tw-border-t tw-border-gray-300 tw-text-[8px] tw-text-slate-500 tw-flex tw-justify-between">
                            <p>Source: Developed based on The Chancery Lane Project (TCLP) research.
                            <p>© The Chancery Lane Project
                        
                    
                
            );
        }

        return (
            <div className="tw-flex tw-flex-col tw-h-full tw-bg-gray-50 tw-font-sans tw-text-slate-800" style={{ maxWidth: '100%', overflow: 'hidden' }}>
                <header className="tw-bg-white tw-border-b tw-border-gray-200 tw-px-4 tw-py-2 tw-flex tw-items-center tw-justify-between tw-shadow-sm tw-z-10 no-print tw-sticky tw-top-0 tw-h-14" style={{ maxWidth: '100%', width: '100%' }}>
                    <div className="tw-flex tw-items-center tw-gap-2">
                        <div className="tw-bg-indigo-600 tw-p-1.5 tw-rounded-lg tw-text-white"><Icons.LayoutGrid />
                        <div>
                            <h1 className="tw-text-md tw-font-bold tw-text-slate-900 tw-leading-tight">System Engineering Map
                        
                    
                    <div className="tw-flex tw-items-center tw-gap-2">
                        <button onClick={handlePrint} className="tw-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1.5 tw-bg-indigo-50 tw-text-indigo-700 hover:tw-bg-indigo-100 tw-rounded-md tw-transition-all tw-text-xs tw-font-medium tw-border tw-border-indigo-100"><Icons.Printer /> Export PDF
                        <div className="tw-flex tw-items-center tw-gap-1 tw-bg-gray-100 tw-p-1 tw-rounded-lg zoom-controls">
                            <button onClick={() => setScale(s => Math.max(0.5, s - 0.1))} className="tw-p-1 hover:tw-bg-white tw-rounded-md tw-text-slate-600"><Icons.ZoomOut />
                            <span className="tw-text-[10px] tw-font-mono tw-w-8 tw-text-center">{Math.round(scale * 100)}%
                            <button onClick={() => setScale(s => Math.min(2, s + 0.1))} className="tw-p-1 hover:tw-bg-white tw-rounded-md tw-text-slate-600"><Icons.ZoomIn />
                            <button onClick={() => setScale(1)} className="tw-p-1 hover:tw-bg-white tw-rounded-md tw-text-slate-600"><Icons.Maximize />
                        
                    
                
                <div className="tw-flex-1 tw-overflow-auto tw-p-4 tw-bg-slate-100 tw-cursor-grab active:tw-cursor-grabbing interactive-ui" style={{ maxWidth: '100%' }}>
                    <div className="tw-bg-white tw-shadow-xl tw-rounded-lg tw-border tw-border-gray-200 tw-origin-top-left tw-transition-transform tw-duration-200 tw-ease-out tw-flex tw-flex-col" style={{ transform: `scale(${scale})`, width: '1050px', maxWidth: '1050px' }}>
                        <div className="tw-p-8 tw-border-b tw-border-gray-200 tw-bg-white tw-rounded-t-lg">
                            <h1 className="tw-text-3xl tw-font-extrabold tw-text-slate-900 tw-mb-2">System Engineering Map: The Legal Lifecycle
                            <p className="tw-text-lg tw-text-slate-600 tw-max-w-4xl tw-leading-relaxed">This map visualises the lifecycle of a legal professional, identifying key workflows, actors, and blockers. Crucially, it highlights <strong>System Engineering opportunities—strategic leverage points designed to shift the sector towards climate-conscious practice. It serves as a blueprint for moving from observation to active system design.
                        
                        <MapGrid isPrintMode={false} />
                        <div className="tw-p-6 tw-bg-gray-50 tw-border-t tw-border-gray-200 tw-text-xs tw-text-slate-500 tw-flex tw-justify-between tw-items-center tw-rounded-b-lg">
                            <p>Source: Developed based on The Chancery Lane Project (TCLP) research.
                            <p>© The Chancery Lane Project
                        
                    
                
            
        );
    }

    const root = ReactDOM.createRoot(document.getElementById('react-root'));
    root.render(<App />);

## Topics

**Categories:** [Project updates](https://chancerylaneproject.org/news/category/project-updates/)