<div class="frp-salarycalc-hero">
  <style>
    .frp-salarycalc-hero, .frp-salarycalc-hero *, .frp-salarycalc-hero *::before, .frp-salarycalc-hero *::after { box-sizing: border-box; }
    .frp-salarycalc-hero {
      font-family: 'Roboto', Arial, Helvetica, sans-serif;
      max-width: 1150px;
      margin: -110px auto 40px;
      padding: 70px 70px 60px;
      border-radius: 32px;
      background: #ffffff;
      box-shadow: 0 15px 40px rgba(0,0,0,.08);
      border: 1px solid #dde1e4;
      position: relative;
      overflow: hidden;
    }
    @media (max-width: 640px) {
      .frp-salarycalc-hero { padding: 40px 26px 34px; margin-top: -60px; }
    }
    .frp-salarycalc-hero-circle {
      position: absolute; top: -80px; right: -80px;
      width: 240px; height: 240px; border-radius: 50%;
      background: rgba(0,0,0,.04);
    }
    .frp-salarycalc-eyebrow {
      display: inline-block; font-weight: 800; letter-spacing: .08em;
      margin-bottom: 22px; font-size: 12px; text-transform: uppercase; color: #000000;
    }
    .frp-salarycalc-hero h1 {
      font-size: clamp(34px, 4.6vw, 56px);
      line-height: 1.05; max-width: 820px; margin: 0 0 20px;
      color: #000000; font-weight: 800;
    }
    .frp-salarycalc-hero h1 span { color: #374047; }
    .frp-salarycalc-lead {
      font-size: 22px; line-height: 1.55; max-width: 780px; margin: 0 0 16px; color: #374047;
    }
    .frp-salarycalc-body {
      font-size: 16px; line-height: 1.7; max-width: 780px; margin: 0 0 28px; color: #374047;
    }
    .frp-salarycalc-jump { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
    .frp-salarycalc-jump-card {
      flex: 1 1 260px;
      display: block;
      background: #ffffff;
      border: 1px solid #dde1e4;
      border-radius: 16px;
      padding: 20px 22px;
      text-decoration: none;
      transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }
    .frp-salarycalc-jump-card:hover {
      border-color: #000000; box-shadow: 0 12px 28px rgba(0,0,0,.08); transform: translateY(-2px);
    }
    .frp-salarycalc-jump-card h2 {
      font-family: 'Roboto', Arial, Helvetica, sans-serif;
      font-size: 17px; font-weight: 800; color: #000000; margin: 0 0 4px;
    }
    .frp-salarycalc-jump-card p { font-size: 13.5px; line-height: 1.5; color: #5f6e78; margin: 0 0 10px; }
    .frp-salarycalc-jump-card span {
      font-family: 'Roboto', Arial, Helvetica, sans-serif;
      font-weight: 800; font-size: 13px; color: #000000;
    }
    .frp-salarycalc-jump-card span::after { content: "  \2193"; white-space: pre; }
    .frp-salarycalc-note {
      font-size: 13px; line-height: 1.6; color: #697278; max-width: 780px;
      margin: 0; padding-top: 18px; border-top: 1px solid #eff2f4;
    }
  </style>

  <div class="frp-salarycalc-hero-circle" aria-hidden="true"></div>
  <span class="frp-salarycalc-eyebrow">For Candidates</span>
  <h1>Salary <span>Calculator</span></h1>
  <p class="frp-salarycalc-lead">Whatever kind of role you&rsquo;re considering, get a realistic estimate of what you&rsquo;d actually take home.</p>
  <p class="frp-salarycalc-body">We&rsquo;ve got two calculators on this page, depending on the type of work you&rsquo;re looking at: one for temporary and freelance assignments paid by the hour or day, and one for permanent roles paid an annual salary. Pick the one that matches your situation below.</p>
  <div class="frp-salarycalc-jump">
    <a class="frp-salarycalc-jump-card" href="#frp-temp-pay-calc">
      <h2>Temporary &amp; Freelance</h2>
      <p>Paid by the hour or day? Work out your take-home pay incl. holiday pay.</p>
      <span>Temp calculator</span>
    </a>
    <a class="frp-salarycalc-jump-card" href="#frp-perm-pay-calc">
      <h2>Permanent</h2>
      <p>Paid an annual salary? Work out what it&rsquo;s worth after tax.</p>
      <span>Permanent calculator</span>
    </a>
  </div>
  <p class="frp-salarycalc-note">Both are a guide, not a payslip. Your actual pay will also depend on your tax code, benefits and personal circumstances. Nothing you enter is saved.</p>
</div>

<div aria-hidden="true" style="height:40px"></div>

<div id="frp-perm-pay-calc">
  <style>
    #frp-perm-pay-calc, #frp-perm-pay-calc * { box-sizing: border-box; }
    #frp-perm-pay-calc {
      --ink: #000000;
      --text: #374047;
      --muted: #697278;
      --line: #dde1e4;
      --soft: #eff2f4;
      font-family: Arial, Helvetica, sans-serif;
      color: var(--text);
      font-size: 16px;
      line-height: 1.55;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 16px;
    }
    #frp-perm-pay-calc .fpsc-card {
      background: #ffffff;
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: clamp(22px, 4vw, 40px);
    }
    #frp-perm-pay-calc h2 {
      font-family: 'Roboto', Arial, Helvetica, sans-serif;
      font-weight: 800;
      font-size: clamp(24px, 3.4vw, 32px);
      line-height: 1.1;
      color: var(--ink);
      margin: 0 0 8px;
    }
    #frp-perm-pay-calc h3 {
      font-family: 'Roboto', Arial, Helvetica, sans-serif;
      font-weight: 800;
      font-size: 18px;
      color: var(--ink);
      margin: 0 0 14px;
    }
    #frp-perm-pay-calc .fpsc-intro { margin: 0 0 24px; max-width: 60ch; }
    #frp-perm-pay-calc .fpsc-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(300px, 0.92fr);
      gap: 28px;
      align-items: start;
    }
    #frp-perm-pay-calc fieldset { border: 0; padding: 0; margin: 0; }
    #frp-perm-pay-calc .fpsc-field { margin-bottom: 18px; }
    #frp-perm-pay-calc label,
    #frp-perm-pay-calc legend {
      display: block;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 6px;
    }
    #frp-perm-pay-calc .fpsc-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    #frp-perm-pay-calc input[type="number"],
    #frp-perm-pay-calc select {
      width: 100%;
      min-height: 48px;
      padding: 10px 12px;
      border: 1px solid var(--muted);
      border-radius: 8px;
      background: #ffffff;
      color: #111111;
      font: inherit;
    }
    #frp-perm-pay-calc input:focus-visible,
    #frp-perm-pay-calc select:focus-visible,
    #frp-perm-pay-calc button:focus-visible {
      outline: 3px solid var(--ink);
      outline-offset: 2px;
    }
    #frp-perm-pay-calc [aria-invalid="true"] { border: 2px solid var(--ink); }
    #frp-perm-pay-calc .fpsc-hint {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 13.5px;
      font-weight: 400;
    }
    #frp-perm-pay-calc .fpsc-check label {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      font-weight: 400;
      color: var(--text);
    }
    #frp-perm-pay-calc .fpsc-check input { width: auto; min-height: 0; margin-top: 4px; }
    #frp-perm-pay-calc .fpsc-hidden { display: none !important; }

    #frp-perm-pay-calc .fpsc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
    #frp-perm-pay-calc .fpsc-btn {
      min-height: 50px;
      padding: 12px 24px;
      border: 2px solid var(--ink);
      border-radius: 999px;
      background: var(--ink);
      color: #ffffff;
      font: 700 15px 'Roboto', Arial, sans-serif;
      cursor: pointer;
    }
    #frp-perm-pay-calc .fpsc-btn--ghost { background: transparent; color: var(--ink); }

    #frp-perm-pay-calc .fpsc-results {
      position: sticky;
      top: 16px;
      border: 1px solid var(--line);
      border-top: 6px solid var(--ink);
      border-radius: 4px 4px 16px 16px;
      background: var(--soft);
      padding: 24px;
    }
    #frp-perm-pay-calc .fpsc-total {
      font-family: 'Roboto', Arial, Helvetica, sans-serif;
      font-weight: 900;
      font-size: clamp(34px, 5vw, 46px);
      line-height: 1;
      color: var(--ink);
      margin: 6px 0 2px;
    }
    #frp-perm-pay-calc .fpsc-total-sub { font-size: 14px; color: var(--muted); margin: 0 0 18px; }
    #frp-perm-pay-calc table { width: 100%; border-collapse: collapse; font-size: 14px; }
    #frp-perm-pay-calc thead th {
      text-align: right;
      font-family: 'Roboto', Arial, sans-serif;
      font-weight: 700;
      font-size: 11.5px;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 8px 6px;
      border-bottom: 1px solid var(--line);
    }
    #frp-perm-pay-calc thead th:first-child { text-align: left; }
    #frp-perm-pay-calc tbody th {
      text-align: left;
      font-weight: 400;
      color: var(--text);
      padding: 9px 6px;
      border-bottom: 1px solid var(--line);
    }
    #frp-perm-pay-calc tbody td {
      text-align: right;
      padding: 9px 6px;
      border-bottom: 1px solid var(--line);
      font-variant-numeric: tabular-nums;
      color: var(--text);
    }
    #frp-perm-pay-calc tbody tr.fpsc-net th,
    #frp-perm-pay-calc tbody tr.fpsc-net td {
      font-weight: 800;
      color: var(--ink);
      border-bottom: 0;
      padding-top: 12px;
    }
    #frp-perm-pay-calc .fpsc-note {
      margin: 16px 0 0;
      padding: 12px 14px;
      background: #ffffff;
      border-left: 4px solid var(--ink);
      font-size: 13.5px;
    }
    #frp-perm-pay-calc .fpsc-extra { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); }
    #frp-perm-pay-calc .fpsc-extra strong { color: var(--ink); }
    #frp-perm-pay-calc details { margin-top: 14px; font-size: 13.5px; }
    #frp-perm-pay-calc summary { cursor: pointer; font-weight: 700; color: var(--ink); }
    #frp-perm-pay-calc details ul { margin: 10px 0 0; padding-left: 18px; }
    #frp-perm-pay-calc details li { margin: 3px 0; }

    #frp-perm-pay-calc .fpsc-errors {
      margin: 0 0 20px;
      padding: 14px 16px;
      border: 2px solid var(--ink);
      border-radius: 8px;
      background: #ffffff;
    }
    #frp-perm-pay-calc .fpsc-errors ul { margin: 8px 0 0; padding-left: 18px; }
    #frp-perm-pay-calc .fpsc-errors a { color: var(--ink); }
    #frp-perm-pay-calc .fpsc-disclaimer { margin: 22px 0 0; font-size: 13px; color: var(--muted); }

    @media (max-width: 820px) {
      #frp-perm-pay-calc .fpsc-grid { grid-template-columns: 1fr; }
      #frp-perm-pay-calc .fpsc-results { position: static; }
    }
    @media (max-width: 520px) {
      #frp-perm-pay-calc .fpsc-row { grid-template-columns: 1fr; }
      #frp-perm-pay-calc .fpsc-btn { width: 100%; }
    }
  </style>
</div>

<script>
(function (window, document) {
  "use strict";

  var MOUNT_ID = "frp-perm-pay-calc";

  /* =====================================================================
     CONFIGURATION — 2025/26 UK figures. Same engine as the Temp Pay
     Calculator (frp-temp-pay-calculator.html) minus the rate/hours/
     holiday logic, since a permanent salary is already an annual figure.
     FRP to confirm before publishing, and review every tax year.
     ===================================================================== */
  var C = {
    taxYear: "2025/26",
    version: "0.1.0",
    personalAllowance: 12570,
    taperStart: 100000,
    taperEnd: 125140,
    /* Income Tax bands expressed as taxable income ABOVE the personal allowance */
    bands: {
      restUK: [
        { to: 37700, rate: 0.20 },
        { to: 112570, rate: 0.40 },
        { to: Infinity, rate: 0.45 }
      ],
      scotland: [
        { to: 2827, rate: 0.19 },
        { to: 14921, rate: 0.20 },
        { to: 31092, rate: 0.21 },
        { to: 62430, rate: 0.42 },
        { to: 112570, rate: 0.45 },
        { to: Infinity, rate: 0.48 }
      ]
    },
    ni: { primaryThreshold: 12570, upperLimit: 50270, mainRate: 0.08, upperRate: 0.02 },
    /* Student / postgraduate loan — annual repayment thresholds */
    loans: {
      none: null,
      plan1: { threshold: 26065, rate: 0.09 },
      plan2: { threshold: 28470, rate: 0.09 },
      plan4: { threshold: 32745, rate: 0.09 },
      plan5: { threshold: 25000, rate: 0.09 },
      pg:    { threshold: 21000, rate: 0.06 }
    }
  };

  /* ---------- helpers ---------- */
  function toNum(v) { var n = parseFloat(v); return isFinite(n) ? n : 0; }
  function money(v) {
    return new Intl.NumberFormat("en-GB", {
      style: "currency", currency: "GBP", minimumFractionDigits: 2, maximumFractionDigits: 2
    }).format(toNum(v));
  }

  /* ---------- calculation engine ---------- */
  function personalAllowance(income) {
    if (income <= C.taperStart) return C.personalAllowance;
    if (income >= C.taperEnd) return 0;
    return Math.max(0, C.personalAllowance - Math.floor((income - C.taperStart) / 2));
  }

  function bandTax(amountAbovePA, bands) {
    var tax = 0, prev = 0;
    for (var i = 0; i < bands.length; i++) {
      if (amountAbovePA <= prev) break;
      var inBand = Math.min(amountAbovePA, bands[i].to) - prev;
      if (inBand > 0) tax += inBand * bands[i].rate;
      prev = bands[i].to;
    }
    return tax;
  }

  function niAnnual(gross) {
    var main = Math.max(0, Math.min(gross, C.ni.upperLimit) - C.ni.primaryThreshold) * C.ni.mainRate;
    var upper = Math.max(0, gross - C.ni.upperLimit) * C.ni.upperRate;
    return main + upper;
  }

  function loanAnnual(gross, key) {
    var loan = C.loans[key];
    if (!loan) return 0;
    return Math.max(0, gross - loan.threshold) * loan.rate;
  }

  function calculate(input) {
    var annualGross = input.salary;
    var pension = input.pensionPct > 0 ? annualGross * (input.pensionPct / 100) : 0;

    var taxableForTax = Math.max(0, annualGross - pension);
    var pa = personalAllowance(annualGross);
    var abovePA = Math.max(0, taxableForTax - pa);
    var bands = input.region === "scotland" ? C.bands.scotland : C.bands.restUK;

    var incomeTax = bandTax(abovePA, bands);
    var ni = niAnnual(annualGross);
    var studentLoan = loanAnnual(annualGross, input.studentLoan);
    var netAnnual = Math.max(0, annualGross - incomeTax - ni - studentLoan - pension);

    return {
      annualGross: annualGross,
      incomeTax: incomeTax,
      ni: ni,
      studentLoan: studentLoan,
      pension: pension,
      netAnnual: netAnnual,
      takeHomePct: annualGross > 0 ? (netAnnual / annualGross) * 100 : 0
    };
  }

  /* ---------- form / view ---------- */
  function template() {
    return '' +
    '<section class="fpsc-card">' +
      '<h2>Permanent salary calculator</h2>' +
      '<p class="fpsc-intro">Enter your annual salary to estimate what you would take home after Income Tax and National Insurance. Nothing you type is saved.</p>' +
      '<div id="fpsc-errors" class="fpsc-errors fpsc-hidden" role="alert" tabindex="-1"></div>' +
      '<div class="fpsc-grid">' +
        '<form id="fpsc-form" novalidate>' +
          '<div class="fpsc-field">' +
            '<label for="fpsc-salary">Annual salary (£)</label>' +
            '<input id="fpsc-salary" name="salary" type="number" min="0" step="100" inputmode="decimal" placeholder="e.g. 32000" required>' +
          '</div>' +
          '<div class="fpsc-field">' +
            '<label for="fpsc-region">Where you pay Income Tax</label>' +
            '<select id="fpsc-region" name="region">' +
              '<option value="restUK">England, Wales or Northern Ireland</option>' +
              '<option value="scotland">Scotland</option>' +
            '</select>' +
          '</div>' +
          '<div class="fpsc-field">' +
            '<label for="fpsc-loan">Student loan</label>' +
            '<select id="fpsc-loan" name="studentLoan">' +
              '<option value="none">None</option>' +
              '<option value="plan1">Plan 1</option>' +
              '<option value="plan2">Plan 2</option>' +
              '<option value="plan4">Plan 4 (Scotland)</option>' +
              '<option value="plan5">Plan 5</option>' +
              '<option value="pg">Postgraduate loan</option>' +
            '</select>' +
          '</div>' +
          '<div class="fpsc-check fpsc-field">' +
            '<label><input id="fpsc-pension-on" name="pensionOn" type="checkbox"> I pay into a workplace pension</label>' +
          '</div>' +
          '<div id="fpsc-pension-wrap" class="fpsc-field fpsc-hidden">' +
            '<label for="fpsc-pension">Your pension contribution (%)</label>' +
            '<input id="fpsc-pension" name="pensionPct" type="number" min="0" max="100" step="0.5" value="5" inputmode="decimal">' +
            '<span class="fpsc-hint">Assumes your contribution comes off your pay before Income Tax.</span>' +
          '</div>' +
          '<div class="fpsc-actions">' +
            '<button class="fpsc-btn" type="submit">Work out my take-home</button>' +
            '<button class="fpsc-btn fpsc-btn--ghost" type="reset">Start again</button>' +
          '</div>' +
        '</form>' +
        '<aside id="fpsc-results" class="fpsc-results" aria-live="polite" aria-atomic="true" tabindex="-1">' +
          '<h3>Your estimate</h3>' +
          '<p>Fill in the form to see what you&rsquo;d take home.</p>' +
        '</aside>' +
      '</div>' +
      '<p class="fpsc-disclaimer">Estimate only — not a payslip, tax advice or a guarantee of pay. Based on ' + C.taxYear +
      ' tax rates, a standard tax code, Category A National Insurance and a non-cumulative calculation. Bonuses, overtime, benefits-in-kind and other deductions are not included. Always check your contract and payslip.</p>' +
    '</section>';
  }

  function readForm(form) {
    var d = new FormData(form);
    return {
      salary: toNum(d.get("salary")),
      region: d.get("region"),
      studentLoan: d.get("studentLoan"),
      pensionPct: d.get("pensionOn") === "on" ? toNum(d.get("pensionPct")) : 0
    };
  }

  function validate(input, root) {
    var errors = [];
    root.querySelectorAll('[aria-invalid="true"]').forEach(function (el) { el.removeAttribute("aria-invalid"); });
    if (input.salary <= 0) errors.push(["fpsc-salary", "Enter your annual salary as a number above £0."]);
    errors.forEach(function (e) {
      var el = root.querySelector("#" + e[0]);
      if (el) el.setAttribute("aria-invalid", "true");
    });
    return errors;
  }

  function showErrors(errors, root) {
    var box = root.querySelector("#fpsc-errors");
    if (!errors.length) { box.className = "fpsc-errors fpsc-hidden"; box.innerHTML = ""; return; }
    box.innerHTML = "<strong>Please check:</strong><ul>" +
      errors.map(function (e) { return '<li><a href="#' + e[0] + '">' + e[1] + "</a></li>"; }).join("") + "</ul>";
    box.className = "fpsc-errors";
    box.focus();
  }

  function renderResult(r, root) {
    var wk = function (v) { return money(v / 52); };
    var mo = function (v) { return money(v / 12); };
    var yr = function (v) { return money(v); };

    var rows = [["Gross salary", r.annualGross]];
    rows.push(["Income Tax", -r.incomeTax], ["National Insurance", -r.ni]);
    if (r.studentLoan > 0) rows.push(["Student loan", -r.studentLoan]);
    if (r.pension > 0) rows.push(["Pension", -r.pension]);

    var body = rows.map(function (row) {
      return "<tr><th>" + row[0] + "</th><td>" + wk(row[1]) + "</td><td>" + mo(row[1]) + "</td><td>" + yr(row[1]) + "</td></tr>";
    }).join("");

    root.querySelector("#fpsc-results").innerHTML = '' +
      "<h3>Your estimated take-home</h3>" +
      '<div class="fpsc-total">' + money(r.netAnnual / 12) + "</div>" +
      '<p class="fpsc-total-sub">a month &middot; about ' + money(r.netAnnual / 52) + " a week &middot; " + money(r.netAnnual) + " a year</p>" +
      "<table><thead><tr><th>&nbsp;</th><th>Week</th><th>Month</th><th>Year</th></tr></thead><tbody>" +
      body +
      '<tr class="fpsc-net"><th>Take-home pay</th><td>' + wk(r.netAnnual) + "</td><td>" + mo(r.netAnnual) + "</td><td>" + yr(r.netAnnual) + "</td></tr>" +
      "</tbody></table>" +
      '<p class="fpsc-extra">You keep about <strong>' + r.takeHomePct.toFixed(0) + "%</strong> of your gross salary.</p>" +
      "<details><summary>How this is worked out</summary><ul>" +
        "<li>" + C.taxYear + " Income Tax and Category A National Insurance.</li>" +
        "<li>Standard tax code and personal allowance; non-cumulative estimate.</li>" +
        "<li>Bonuses, overtime, benefits-in-kind and other deductions are not included.</li>" +
      "</ul></details>";

    root.querySelector("#fpsc-results").focus();
  }

  function syncInterface(root) {
    var pensionOn = root.querySelector("#fpsc-pension-on").checked;
    root.querySelector("#fpsc-pension-wrap").classList.toggle("fpsc-hidden", !pensionOn);
  }

  function mount() {
    var root = document.getElementById(MOUNT_ID);
    if (!root) return;
    root.insertAdjacentHTML("beforeend", template());

    var form = root.querySelector("#fpsc-form");
    form.addEventListener("change", function () { syncInterface(root); });
    form.addEventListener("submit", function (ev) {
      ev.preventDefault();
      var input = readForm(form);
      var errors = validate(input, root);
      showErrors(errors, root);
      if (errors.length) return;
      renderResult(calculate(input), root);
    });
    form.addEventListener("reset", function () {
      window.setTimeout(function () {
        showErrors([], root);
        syncInterface(root);
        root.querySelector("#fpsc-results").innerHTML =
          "<h3>Your estimate</h3><p>Fill in the form to see what you&rsquo;d take home.</p>";
      }, 0);
    });

    syncInterface(root);
  }

  /* exposed for console/testing */
  window.FRPPermSalaryCalculator = { version: C.version, config: C, calculate: calculate };

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", mount);
  } else {
    mount();
  }
})(window, document);
</script>