# Protectionhelp — Clean base site (starting from **your** index)

Below are copy‑paste files that keep your **exact index look/structure** and add matching inner pages with **identical header/footer**, fixed links, and a single stylesheet `styles.css` (no more `stylesx.css`).

> 📁 Put every HTML file and `styles.css` together. Your images are referenced with `../../images/...` to match your current index.

---

## 1) styles.css (unchanged from your v2.2 — just keep the filename exactly `styles.css`)

```css
/* ===== Protectionhelp — Unified Styles (v2.2 — restored) ===== */
:root{
  --ink:#12131a; --muted:#5e6470; --brand:#5b2a86; --brand-quiet:#efe9f7;
  --bg:#fafbfc; --card:#ffffff; --line:#e6e6ee; --notice:#0b6b3a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans";color:var(--ink);background:var(--bg)}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:3px solid rgba(91,42,134,.35);outline-offset:2px;border-radius:8px}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

/* ----- Header ----- */
header{position:sticky;top:0;z-index:1000;background:var(--card);border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:46px;width:auto}
.brand h1{font-size:18px;margin:0;line-height:1.2;white-space:nowrap}
nav ul.menu{list-style:none;display:flex;gap:18px;margin:0;padding:0;position:relative}
nav ul.menu>li{position:relative}
nav ul.menu a{color:var(--ink);font-weight:600}
.has-submenu> a::after{content:"▾";margin-left:6px;font-size:.85em}
.submenu{display:none;position:absolute;left:0;top:100%;background:var(--card);border:1px solid var(--line);border-radius:10px;min-width:260px;padding:6px 0;box-shadow:0 12px 24px rgba(0,0,0,.08);z-index:10}
.submenu li{list-style:none}
.submenu a{display:block;padding:10px 14px;white-space:nowrap}
.has-submenu:hover>.submenu,.has-submenu:focus-within>.submenu{display:block}

/* ----- Buttons ----- */
.btn{display:inline-block;padding:12px 18px;border-radius:12px;background:var(--brand);color:#fff;font-weight:700;border:0;box-shadow:0 2px 8px rgba(0,0,0,.08);min-width:240px;text-align:center}
.btn:hover,.btn:focus{filter:brightness(.95);outline:2px solid transparent}
.btn:active{transform:translateY(1px)}

/* ----- Index Hero (3‑column) ----- */
.site-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--card),var(--brand-quiet));border-bottom:1px solid var(--line)}
.site-hero::before{content:"";position:absolute;inset:0;background:var(--hero-image, url('images/hero.jpg')) center/cover no-repeat;opacity:.32;transform:scale(1.06);filter:saturate(.95) contrast(1.05) blur(1px);z-index:0}
.site-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(239,233,247,.52));z-index:0}
.site-hero .wrap{display:grid;grid-template-columns:1fr .9fr 1fr;gap:22px 28px;padding:36px 20px 24px;align-items:stretch;grid-auto-rows:auto;position:relative;z-index:1}
.panel,.hero-image{display:flex;flex-direction:column}
.panel .cta{margin-top:auto;display:flex;justify-content:center}
.hero-image img{width:100%;max-width:440px;border-radius:14px;box-shadow:0 10px 26px rgba(0,0,0,.12);align-self:center}
.hero-image .center-cta{display:flex;justify-content:center;margin-top:auto}
.site-hero h2{font-size:32px;margin:0 0 10px}
.site-hero p{font-size:18px;color:var(--muted);margin:0 0 18px}
.hero-divider{grid-column:1/-1;height:1px;background:linear-gradient(to right,transparent,#e9e9f3,transparent);margin-top:8px}

/* ----- Notice Banner ----- */
.notice{background:var(--notice);color:#fff;margin-bottom:16px}
.notice .wrap{padding:10px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* ----- Inner Hero (all inner pages) ----- */
.inner-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--card),var(--brand-quiet));border-bottom:1px solid var(--line);margin-bottom:14px}
.inner-hero::before{content:"";position:absolute;inset:0;background:var(--hero-image, url('images/hero.jpg')) center/cover no-repeat;opacity:.32;transform:scale(1.06);filter:saturate(.95) contrast(1.05) blur(1px)}
.inner-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(239,233,247,.52))}
/* Per-page adjustable padding; safe fallback even without :has */
.inner-hero .wrap{position:relative;z-index:1;padding:34px 20px;padding-right:var(--hero-pad, 420px)}
/* If :has is supported, scale padding with the foreground image (still overridable per page) */
@supports selector(:has(*)){
  .inner-hero .wrap:has(.hero-foreground){padding-right:var(--hero-pad, clamp(320px, 36vw, 640px))}
}
.hero-foreground{position:absolute;right:24px;top:20px;bottom:auto;width:clamp(280px,34vw,560px);border-radius:14px;box-shadow:0 10px 26px rgba(0,0,0,.12)}
@media (max-width:1100px){
  @supports selector(:has(*)){
    .inner-hero .wrap:has(.hero-foreground){padding-right:var(--hero-pad, clamp(260px,34vw,520px))}
  }
}
@media (max-width:920px){.hero-foreground{display:none}.inner-hero .wrap{padding-right:20px}}

/* ----- Sections & Cards ----- */
section{padding:36px 0}
#contact{scroll-margin-top:120px}
h3.section{font-size:26px;margin:0 0 16px}
.grid{display:grid;gap:18px}
.grid.cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--card);padding:18px;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.05);border:1px solid #ececf5}
.card h4{margin:0 0 8px;font-size:18px}
.muted{color:var(--muted)}
ul.tick{padding-left:18px;margin:8px 0 0}
ul.tick li{margin:6px 0}
.process{counter-reset:step}
.process .step{position:relative;padding-left:54px;margin:10px 0}
.process .step::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700}

/* ----- Forms ----- */
form{background:var(--card);padding:18px;border-radius:12px;border:1px solid #ececf5;box-shadow:0 8px 24px rgba(0,0,0,.05)}
label{display:block;font-weight:600;margin:10px 0 6px}
input,select,textarea{width:100%;padding:12px;border:1px solid #dfe3ea;border-radius:10px;font:inherit}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ----- Tables ----- */
table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #ececf5;border-radius:12px;overflow:hidden}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid #f0f1f5}
th{background:#f7f7fb;font-weight:700}
tr:last-child td{border-bottom:0}

/* ----- Footer ----- */
footer{background:#0e1020;color:#d6dbef;margin-top:36px}
footer .wrap{padding:26px 20px}
footer a{color:#b7c9ff}
.compliance{font-size:13px;line-height:1.5;opacity:.95}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:22px}
.fineprint{font-size:12px;color:#c9cde0}

/* ----- Responsive tweaks ----- */
@media (max-width:920px){
  .site-hero .wrap{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}
```

---

## 2) index.html (your structure, with only 2 safe fixes)

**Fixes applied:**

* Link the stylesheet as `styles.css` (not `stylesx.css`).
* Make **Contact** always work from any page: use `href="index.html#contact"` in the nav.

```html
<!doctype html>
<html lang="en-GB">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Protectionhelp | Legacy & Will Planning</title>
  <meta name="description" content="Professional legacy planning, will writing and related services. Fixed fees. Member of the Institute of Professional Willwriters via APS Legal & Associates Ltd." />
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <!-- HEADER -->
  <header aria-label="Site header">
    <div class="wrap topbar">
      <div class="brand">
        <a href="index.html" aria-label="Protectionhelp home"><img src="../../images/protectionhelp-logo.png" alt="Protectionhelp logo" /></a>
        <h1>Protectionhelp</h1>
      </div>
      <nav aria-label="Primary">
        <ul class="menu" role="menubar">
          <li role="none"><a role="menuitem" href="index.html" aria-current="page">Home</a></li>
          <li role="none"><a role="menuitem" href="services-and-fees.html">Services &amp; Fees</a></li>
          <li role="none" class="has-submenu">
            <a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#">Products / Services</a>
            <ul class="submenu" role="menu">
              <li role="none"><a role="menuitem" href="inheritance-tax-review.html">Inheritance Tax Review</a></li>
              <li role="none"><a role="menuitem" href="wills.html">Single &amp; Mirror Wills</a></li>
              <li role="none"><a role="menuitem" href="lpa.html">Lasting Power of Attorney</a></li>
              <li role="none"><a role="menuitem" href="probate-estate-administration.html">Probate &amp; Estate Administration</a></li>
              <li role="none"><a role="menuitem" href="private-medical-insurance-advice.html">Private Medical Insurance</a></li>
              <li role="none"><a role="menuitem" href="about-aps.html">About APS Legal &amp; the IPW</a></li>
            </ul>
          </li>
          <li role="none"><a role="menuitem" href="index.html#contact">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- HERO (split: Legacy | Image | Wills) -->
  <div class="site-hero" style="--hero-image: url('../../images/hero.jpg')">
    <div class="wrap">
      <!-- Left: Legacy Planning -->
      <div class="panel panel-left">
        <h2>Professional Legacy Planning</h2>
        <p>Clear, confidential guidance for your family’s future. Protect your legacy with a review of your financial protection, inheritance tax planning, and private medical insurance.</p>
        <div class="cta">
          <a class="btn" href="index.html#contact">Ask us a question</a>
        </div>
      </div>

      <!-- Centre: Image with middle CTA -->
      <div class="hero-image">
        <img src="../../images/hero.jpg" alt="Advisor writing a will at a wooden desk, close-up of hands and fountain pen" />
        <div class="cta center-cta">
          <a class="btn" href="services-and-fees.html">Services &amp; Fees</a>
        </div>
      </div>

      <!-- Right: Will Writing -->
      <div class="panel panel-right">
        <h2>Clear, Professional Will Writing and Estate Planning</h2>
        <p>Friendly, jargon‑free advice. Fixed fees. Documents drafted on behalf of APS Legal &amp; Associates Ltd and compliant with the Institute of Professional Willwriters’ Code of Practice.</p>
        <div class="cta">
          <a class="btn" href="https://calendly.com/protectionhelp-team/protectionhelp-legacy-planning" target="_blank" rel="noopener">Book a free initial chat</a>
        </div>
      </div>

      <div class="hero-divider" aria-hidden="true"></div>
    </div>
  </div>

  <!-- GREEN NOTICE BANNER -->
  <div class="notice" role="note" aria-label="Regulatory notice">
    <div class="wrap">
      <strong>Member of the Institute of Professional Willwriters.</strong>
      <span>APS Legal &amp; Associates complies with the Trading Standards Institute Approved IPW Code of Practice.</span>
    </div>
  </div>

  <!-- MAIN CONTENT (unchanged) -->
  <main id="content" tabindex="-1">
    <!-- Services cards -->
    <!-- ... keep your existing sections here exactly as in your current index ... -->
  </main>

  <!-- FOOTER WITH COMPLIANCE (identical across all pages) -->
  <footer role="contentinfo">
    <div class="wrap footer-grid">
      <div>
        <h4 style="margin:0 0 8px;">Trading disclosure</h4>
        <p class="fineprint">Trading as Protectionhelp. Services are provided on behalf of APS Legal &amp; Associates Ltd using APS instruction forms and paperwork.</p>
        <div class="compliance" aria-label="APS/IPW compliance wording">
          <p><strong>On behalf of APS Legal &amp; Associates Ltd</strong>, Head office: Worksop Turbine Innovation Centre, Shireoaks Triangle Business Park, Coach Close, Worksop, Nottinghamshire, S81 8AP</p>
          <p>APS Legal &amp; Associates is a member of the Institute of Professional Willwriters</p>
          <p>APS Legal &amp; Associates complies with the Trading Standards Institute Approved IPW Code of Practice</p>
          <div class="logos" style="margin-top:10px">
            <a class="ipw-badge" href="https://cdn.yoshki.com/iframe/55068r.html" target="_blank" rel="nofollow"><img src="../../images/ipw-ctsi-logo.png" alt="IPW / CTSI Approved Code badge" width="220" height="72" /></a>
            <img src="../../images/aps-logo.png" alt="APS Legal & Associates logo" />
          </div>
        </div>
        <p class="fineprint" style="margin-top:10px">© <span id="year">2025</span> Protectionhelp.</p>
        <p class="fineprint">Protectionhelp, Annuityhelp Direct, Pensionhelp and Pensionhelp Direct are trading styles of Pensionhelp Limited.</p>
        <p class="fineprint">Pensionhelp Limited is authorised and regulated by the Financial Conduct Authority. Pensionhelp Limited is registered in England and Wales No.09437056.</p>
        <p class="fineprint">Registered 18-22 Lloyd Street, Manchester, M2 5WA.</p>
        <p class="fineprint">The guidance and/or advice contained in this website is subject to the UK regulatory regime and is therefore restricted to consumers based in the UK.</p>
      </div>
      <div>
        <h4 style="margin:0 0 8px;">Useful links</h4>
        <ul class="fineprint" style="list-style: none; padding:0; margin:0; display:grid; gap:6px">
          <li><a href="index.html#services">Services</a></li>
          <li><a href="services-and-fees.html">Services &amp; Fees</a></li>
          <li><a href="inheritance-tax-review.html">Inheritance Tax Review</a></li>
          <li><a href="private-medical-insurance-advice.html">Private Medical Insurance</a></li>
          <li><a href="wills.html">Single &amp; Mirror Wills</a></li>
          <li><a href="lpa.html">Lasting Power of Attorney</a></li>
          <li><a href="probate-estate-administration.html">Probate &amp; Estate Administration</a></li>
          <li><a href="about-aps.html">About APS/IPW</a></li>
          <li><a href="index.html#contact">Contact</a></li>
          <li><a href="privacy.html">Privacy notice</a></li>
          <li><a href="terms-of-business.html">Terms of business</a></li>
        </ul>
      </div>
    </div>
    <script>document.getElementById('year').textContent = new Date().getFullYear();</script>
  </footer>
</body>
</html>
```

> If you prefer *no* change at all to your current `index.html`, just keep your file and only change the stylesheet line to `styles.css`. Everything else below will still work.

---

## 3) Shared header/footer snippet (used verbatim on **all** inner pages)

```html
<!-- HEADER -->
<header aria-label="Site header">
  <div class="wrap topbar">
    <div class="brand">
      <a href="index.html" aria-label="Protectionhelp home"><img src="../../images/protectionhelp-logo.png" alt="Protectionhelp logo" /></a>
      <h1>Protectionhelp</h1>
    </div>
    <nav aria-label="Primary">
      <ul class="menu" role="menubar">
        <li role="none"><a role="menuitem" href="index.html">Home</a></li>
        <li role="none"><a role="menuitem" href="services-and-fees.html">Services &amp; Fees</a></li>
        <li role="none" class="has-submenu">
          <a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#">Products / Services</a>
          <ul class="submenu" role="menu">
            <li role="none"><a role="menuitem" href="inheritance-tax-review.html">Inheritance Tax Review</a></li>
            <li role="none"><a role="menuitem" href="wills.html">Single &amp; Mirror Wills</a></li>
            <li role="none"><a role="menuitem" href="lpa.html">Lasting Power of Attorney</a></li>
            <li role="none"><a role="menuitem" href="probate-estate-administration.html">Probate &amp; Estate Administration</a></li>
            <li role="none"><a role="menuitem" href="private-medical-insurance-advice.html">Private Medical Insurance</a></li>
            <li role="none"><a role="menuitem" href="about-aps.html">About APS Legal &amp; the IPW</a></li>
          </ul>
        </li>
        <li role="none"><a role="menuitem" href="index.html#contact">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

<!-- FOOTER (same as index) -->
<footer role="contentinfo">
  <div class="wrap footer-grid">
    <div>
      <h4 style="margin:0 0 8px;">Trading disclosure</h4>
      <p class="fineprint">Trading as Protectionhelp. Services are provided on behalf of APS Legal &amp; Associates Ltd using APS instruction forms and paperwork.</p>
      <div class="compliance" aria-label="APS/IPW compliance wording">
        <p><strong>On behalf of APS Legal &amp; Associates Ltd</strong>, Head office: Worksop Turbine Innovation Centre, Shireoaks Triangle Business Park, Coach Close, Worksop, Nottinghamshire, S81 8AP</p>
        <p>APS Legal &amp; Associates is a member of the Institute of Professional Willwriters</p>
        <p>APS Legal &amp; Associates complies with the Trading Standards Institute Approved IPW Code of Practice</p>
        <div class="logos" style="margin-top:10px">
          <a class="ipw-badge" href="https://cdn.yoshki.com/iframe/55068r.html" target="_blank" rel="nofollow"><img src="../../images/ipw-ctsi-logo.png" alt="IPW / CTSI Approved Code badge" width="220" height="72" /></a>
          <img src="../../images/aps-logo.png" alt="APS Legal & Associates logo" />
        </div>
      </div>
      <p class="fineprint" style="margin-top:10px">© <span id="year">2025</span> Protectionhelp.</p>
      <p class="fineprint">Protectionhelp, Annuityhelp Direct, Pensionhelp and Pensionhelp Direct are trading styles of Pensionhelp Limited.</p>
      <p class="fineprint">Pensionhelp Limited is authorised and regulated by the Financial Conduct Authority. Pensionhelp Limited is registered in England and Wales No.09437056.</p>
      <p class="fineprint">Registered 18-22 Lloyd Street, Manchester, M2 5WA.</p>
      <p class="fineprint">The guidance and/or advice contained in this website is subject to the UK regulatory regime and is therefore restricted to consumers based in the UK.</p>
    </div>
    <div>
      <h4 style="margin:0 0 8px;">Useful links</h4>
      <ul class="fineprint" style="list-style: none; padding:0; margin:0; display:grid; gap:6px">
        <li><a href="index.html#services">Services</a></li>
        <li><a href="services-and-fees.html">Services &amp; Fees</a></li>
        <li><a href="inheritance-tax-review.html">Inheritance Tax Review</a></li>
        <li><a href="private-medical-insurance-advice.html">Private Medical Insurance</a></li>
        <li><a href="wills.html">Single &amp; Mirror Wills</a></li>
        <li><a href="lpa.html">Lasting Power of Attorney</a></li>
        <li><a href="probate-estate-administration.html">Probate &amp; Estate Administration</a></li>
        <li><a href="about-aps.html">About APS/IPW</a></li>
        <li><a href="index.html#contact">Contact</a></li>
        <li><a href="privacy.html">Privacy notice</a></li>
        <li><a href="terms-of-business.html">Terms of business</a></li>
      </ul>
    </div>
  </div>
  <script>document.getElementById('year').textContent = new Date().getFullYear();</script>
</footer>
```

---

## 4) Inner pages (minimal content now; all links wired)

> Each page includes a small **inner hero**. Swap the foreground image or remove it; the layout will adapt.

### /services-and-fees.html

```html
<!doctype html>
<html lang="en-GB">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Services &amp; Fees | Protectionhelp</title>
  <meta name="description" content="Clear, fixed fees for will writing, LPAs, probate, and reviews." />
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <!-- header -->
  <!-- (paste the shared header here) -->
  <header aria-label="Site header">...</header>

  <section class="inner-hero" style="--hero-image:url('../../images/hero-services.jpg'); --hero-pad:520px">
    <div class="wrap">
      <h2>Services &amp; Fees</h2>
      <p class="muted">Simple, transparent pricing. No surprises.</p>
      <img class="hero-foreground" src="../../images/fees-hero.png" alt="Calculator and paperwork on a desk" />
    </div>
  </section>

  <main class="wrap">
    <table>
      <thead><tr><th>Service</th><th>What’s included</th><th>Fee</th></tr></thead>
      <tbody>
        <tr><td>Single Will</td><td>Consultation, draft, one set of amendments, final document</td><td>£XXX</td></tr>
        <tr><td>Mirror Wills</td><td>As above, for couples</td><td>£XXX</td></tr>
        <tr><td>LPA (per LPA)</td><td>Property &amp; Financial or Health &amp; Welfare (OPG fee extra)</td><td>£XXX</td></tr>
        <tr><td>Probate support</td><td>Initial assessment, checklist, application guidance</td><td>From £XXX</td></tr>
      </tbody>
    </table>
    <p style="margin-top:14px" class="muted">Government/third‑party fees are not included unless stated.</p>
  </main>

  <!-- footer -->
  <footer role="contentinfo">...</footer>
</body>
</html>
```

### /inheritance-tax-review.html

```html
<!doctype html>
<html lang="en-GB">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Inheritance Tax Review | Protectionhelp</title>
  <meta name="description" content="Whole‑of‑market IHT review, trusts and protection options." />
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header aria-label="Site header">...</header>
  <section class="inner-hero" style="--hero-image:url('../../images/hero-iht.jpg'); --hero-pad:480px">
    <div class="wrap">
      <h2>Inheritance Tax (IHT) Review</h2>
      <p class="muted">Reduce exposure with the right mix of planning and protection.</p>
      <img class="hero-foreground" src="../../images/iht-hero.png" alt="Family estate planning documents" />
    </div>
  </section>
  <main class="wrap">
    <div class="grid cards">
      <div class="card"><h4>Whole of Life Assurance</h4><p class="muted">Designed to meet anticipated IHT liabilities.</p></div>
      <div class="card"><h4>Gifts &amp; Trusts</h4><p class="muted">Options to move value outside your estate.</p></div>
      <div class="card"><h4>Review &amp; Report</h4><p class="muted">Clear, actionable summary of options.</p></div>
    </div>
  </main>
  <footer role="contentinfo">...</footer>
</body>
</html>
```

### /wills.html

```html
<!doctype html>
<html lang="en-GB">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Single &amp; Mirror Wills | Protectionhelp</title>
  <meta name="description" content="Clear, fixed‑fee will writing with guardians, gifts and executors guidance." />
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header aria-label="Site header">...</header>
  <section class="inner-hero" style="--hero-image:url('../../images/hero-wills.jpg'); --hero-pad:520px">
    <div class="wrap">
      <h2>Single &amp; Mirror Wills</h2>
      <p class="muted">Make your wishes clear and protect those you love.</p>
      <img class="hero-foreground" src="../../images/wills-hero.png" alt="Signing a will with witnesses" />
    </div>
  </section>
  <main class="wrap">
    <div class="grid cards">
      <div class="card"><h4>Guardianship</h4><p class="muted">Name who looks after children.</p></div>
      <div class="card"><h4>Executors</h4><p class="muted">Choose trusted people to carry out your wishes.</p></div>
      <div class="card"><h4>Gifts &amp; Legacies</h4><p class="muted">Leave specific items or sums to people/charities.</p></div>
    </div>
  </main>
  <footer role="contentinfo">...</footer>
</body>
</html>
```

### /lpa.html

```html
<!doctype html>
<html lang="en-GB">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Lasting Power of Attorney | Protectionhelp</title>
  <meta name="description" content="Set up LPAs for finances and health, with registration guidance." />
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header aria-label="Site header">...</header>
  <section class="inner-hero" style="--hero-image:url('../../images/hero-lpa.jpg'); --hero-pad:520px">
    <div class="wrap">
      <h2>Lasting Power of Attorney (LPA)</h2>
      <p class="muted">Choose who can help if you can’t manage decisions yourself.</p>
      <img class="hero-foreground" src="../../images/lpa-hero.png" alt="Attorney signing LPA paperwork" />
    </div>
  </section>
  <main class="wrap">
    <div class="grid cards">
      <div class="card"><h4>Property &amp; Financial Affairs</h4><p class="muted">Bills, banking, property decisions.</p></div>
      <div class="card"><h4>Health &amp; Welfare</h4><p class="muted">Care and medical decisions.</p></div>
      <div class="card"><h4>OPG Registration</h4><p class="muted">Guidance on fees and process.</p></div>
    </div>
  </main>
  <footer role="contentinfo">...</footer>
</body>
</html>
```

### /probate-estate-administration.html

```html
<!doctype html>
<html lang="en-GB">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Probate &amp; Estate Administration | Protectionhelp</title>
  <meta name="description" content="Kind, practical probate guidance with fixed fees where possible." />
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header aria-label="Site header">...</header>
  <section class="inner-hero" style="--hero-image:url('../../images/hero-probate.jpg'); --hero-pad:520px">
    <div class="wrap">
      <h2>Probate &amp; Estate Administration</h2>
      <p class="muted">Support for executors and families.</p>
      <img class="hero-foreground" src="../../images/probate-hero.png" alt="Executor with estate folder" />
    </div>
  </section>
  <main class="wrap">
    <ul class="tick">
      <li>Initial assessment and plan</li>
      <li>Document checklist and templates</li>
      <li>Application preparation and guidance</li>
    </ul>
  </main>
  <footer role="contentinfo">...</footer>
</body>
</html>
```

### /private-medical-insurance-advice.html

```html
<!doctype html>
<html lang="en-GB">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Private Medical Insurance Advice | Protectionhelp</title>
  <meta name="description" content="Whole‑of‑market PMI help for individuals and families." />
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header aria-label="Site header">...</header>
  <section class="inner-hero" style="--hero-image:url('../../images/hero-pmi.jpg
```