DHsite/mediation.html at main · magnate/DHsite · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mediation — Dawson House</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="shared.css">
<style>
  .route-wrap { padding: 160px 56px 120px; }
  .route-intro { max-width: 600px; margin-bottom: 64px; }
  .route-intro p { font-size: 17px; font-weight: 300; line-height: 1.85; color: var(--soft-slate); }
  .route-grid { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--light-grey); margin-bottom: 56px; }
  .route-card { display: block; padding: 52px 40px 48px; border-right: 1px solid var(--light-grey); text-decoration: none; color: inherit; position: relative; overflow: hidden; }
  .route-card:last-child { border-right: none; }
  .route-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--deep-teal); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.65,0,0.35,1); }
  .route-card:hover::after { transform: scaleX(1); }
  .route-card-number { display: block; font-family: var(--font-display); font-size: 12px; font-weight: 300; color: var(--greige); letter-spacing: 0.12em; margin-bottom: 28px; }
  .route-card-title { font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.2; color: var(--charcoal); margin-bottom: 16px; transition: color 0.3s; }
  .route-card:hover .route-card-title { color: var(--deep-teal); }
  .route-card-desc { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--soft-slate); margin-bottom: 36px; }
  .route-card-cta { display: block; font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass); opacity: 0; transform: translateX(-6px); transition: opacity 0.3s, transform 0.3s; }
  .route-card:hover .route-card-cta { opacity: 1; transform: translateX(0); }
  .route-close { font-size: 14px; font-weight: 300; color: var(--soft-slate); }
  .route-close a { color: var(--deep-teal); text-decoration: none; transition: opacity 0.2s; }
  .route-close a:hover { opacity: 0.7; }
  @media (max-width: 960px) {
    .route-wrap { padding: 120px 28px 80px; }
    .route-grid { grid-template-columns: 1fr; }
    .route-card { border-right: none; border-bottom: 1px solid var(--light-grey); }
    .route-card:last-child { border-bottom: none; }
  }
</style>
</head>
<body>

<nav id="main-nav">
  <a href="index.html" class="nav-logo" aria-label="Dawson House home">
    <svg viewBox="0 0 835 1000" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="#2F3235" d="M357.2,21.1H22v957.8h794V480C816,226.5,610.6,21.1,357.2,21.1z M92.3,91.5h264.8c214.2,0,388.5,174.3,388.5,388.5v87H414V308.9h-74.4v599.6H92.3V91.5z M414,908.5V636.5h331.6v272.1H414z"/></svg>
    <span class="nav-wordmark">Dawson House</span>
  </a>
        <ul class="nav-links">
    <li class="nav-hide"><a href="about.html">About</a></li>
    <li class="nav-hide"><a href="deputy.html">Deputies</a></li>
    <li class="nav-hide"><a href="mediation.html">Mediation</a></li>
    <li><a href="contact.html" class="nav-contact">Contact</a></li>
  </ul>
</nav>

<div class="route-wrap">
  <div class="breadcrumb" style="margin-bottom: 48px;">
    <a href="index.html">Home</a>
    <span class="breadcrumb-sep">—</span>
    <span>Mediation</span>
  </div>

  <h1 style="font-family: var(--font-display); font-size: clamp(40px, 5.5vw, 72px); font-weight: 300; line-height: 1.05; letter-spacing: -0.01em; color: var(--charcoal); margin-bottom: 40px; max-width: 700px;">Who are you in this situation?</h1>

  <div class="route-intro">
    <p>You are looking for a structured way to resolve a dispute, or you need to establish whether mediation is the right route at all. The suitability of mediation, and how it should be approached, depends on your role and the nature of the dispute. Choose the route that best reflects your position.</p>
  </div>

  <div class="route-grid">
    <a href="mediation-individual.html" class="route-card">
      <span class="route-card-number">01</span>
      <h2 class="route-card-title">Individual, family member or carer</h2>
      <p class="route-card-desc">You are in dispute with a statutory body or within a family about care, treatment or best interests. You want to understand whether mediation is the right route, and what it would involve in practice.</p>
      <span class="route-card-cta">Continue →</span>
    </a>
    <a href="deputy-mediation.html" class="route-card">
      <span class="route-card-number">02</span>
      <h2 class="route-card-title">Professional deputy</h2>
      <p class="route-card-desc">You are managing a dispute affecting your client and considering whether mediation is appropriate. The decision carries professional and regulatory implications — it requires careful assessment before proceeding.</p>
      <span class="route-card-cta">Continue →</span>
    </a>
    <a href="contact.html" class="route-card">
      <span class="route-card-number">03</span>
      <h2 class="route-card-title">Service provider or organisation</h2>
      <p class="route-card-desc">You are a care provider, organisation or professional body involved in a dispute where mediation may be relevant. Get in touch directly and we will advise on whether and how we can assist.</p>
      <span class="route-card-cta">Get in touch →</span>
    </a>
  </div>

  <p class="route-close">Not sure which route fits? <a href="contact.html">Get in touch</a> and we will help you find the right path.</p>
</div>

<footer>
  <div class="footer-main">
    <a href="index.html" class="footer-logo" aria-label="Dawson House">
      <svg viewBox="0 0 835 1000" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="rgba(246,244,241,0.5)" d="M357.2,21.1H22v957.8h794V480C816,226.5,610.6,21.1,357.2,21.1z M92.3,91.5h264.8c214.2,0,388.5,174.3,388.5,388.5v87H414V308.9h-74.4v599.6H92.3V91.5z M414,908.5V636.5h331.6v272.1H414z"/></svg>
      <span class="footer-name">Dawson House</span>
    </a>
                <ul class="footer-links">
      <li><a href="about.html">About</a></li>
      <li><a href="deputy.html">Deputies</a></li>
      <li><a href="mediation.html">Mediation</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    <p class="footer-copy">&copy; 2026 Dawson House &mdash; dawsonhouse.org.uk</p>
  </div>
  <div class="footer-compliance">
    <p>Dawson House is not a firm of solicitors. Our work encompasses advisory, mediation and consultancy services. Where matters require regulated legal representation, we will say so and can assist in identifying appropriate referrals.</p>
  </div>
</footer>

<script>
  const nav = document.getElementById('main-nav');
  window.addEventListener('scroll', () => { nav.classList.toggle('scrolled', window.scrollY > 60); }, { passive: true });
</script>
</body>
</html>