{"id":123167,"date":"2025-06-06T03:12:11","date_gmt":"2025-06-06T02:12:11","guid":{"rendered":"https:\/\/www.quartix.com\/roi-calculator\/"},"modified":"2026-02-04T21:06:11","modified_gmt":"2026-02-04T20:06:11","slug":"return-on-investment-calculator","status":"publish","type":"page","link":"https:\/\/www.quartix.com\/en-gb\/return-on-investment-calculator\/","title":{"rendered":"ROI Calculator"},"content":{"rendered":"\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h1 class=\"wp-block-heading has-text-align-center\" id=\"h-see-how-much-you-can-save-with-quartix\">See How Much You Can<br>Save with Quartix<\/h1>\n\n\n\n<p class=\"has-text-align-center\">Answer a few quick questions to estimate your potential savings with Quartix vehicle tracking,<br> from fuel and private mileage to time accountability and route optimisation.<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-7030a9a6 wp-block-group-is-layout-constrained\" style=\"padding-right:0;padding-left:0\">\n<!-- Start: Quartix Partner Earnings Calculator Widget -->\n<div id=\"quartix-calculator-widget-2023\">\n  <style nonce=\"\">\n    \/* Font imports *\/\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap');\n    \/* Base styling *\/\n    #quartix-calculator-widget-2023 {\n      width: 100%;\n      font-family: 'Inter', sans-serif;\n      color: #1F2121;\n      line-height: 1.6;\n      background-color: #ffffff;\n      position: relative;\n      z-index: 1;\n    }\n    \/* All headings *\/\n    #quartix-calculator-widget-2023 h1, \n    #quartix-calculator-widget-2023 h2, \n    #quartix-calculator-widget-2023 h3, \n    #quartix-calculator-widget-2023 h4, \n    #quartix-calculator-widget-2023 h5, \n    #quartix-calculator-widget-2023 h6, \n    #quartix-calculator-widget-2023 .section-header label,\n    #quartix-calculator-widget-2023 .metrics-title,\n    #quartix-calculator-widget-2023 .chart-title {\n      font-family: 'Inter', sans-serif;\n      color: #000000;\n    }\n    \/* Forms and Inputs *\/\n    #quartix-calculator-widget-2023 .form-group {\n      margin-bottom: 15px;\n      background-color: #f9f9f9;\n    }\n    #quartix-calculator-widget-2023 label {\n      display: block;\n      font-weight: 600;\n      margin-bottom: 8px;\n      font-family: 'Inter', sans-serif;\n      background-color: #f9f9f9;\n    }\n    #quartix-calculator-widget-2023 input[type=\"text\"],\n    #quartix-calculator-widget-2023 input[type=\"email\"],\n    #quartix-calculator-widget-2023 input[type=\"tel\"],\n    #quartix-calculator-widget-2023 input[type=\"number\"],\n    #quartix-calculator-widget-2023 select {\n      width: 100%;\n      padding: 12px;\n      border: 2px solid #e0e0e0;\n      border-radius: 6px;\n      font-size: 16px;\n      transition: border-color 0.2s ease;\n    }\n    #quartix-calculator-widget-2023 input[type=\"text\"]:focus,\n    #quartix-calculator-widget-2023 input[type=\"email\"]:focus,\n    #quartix-calculator-widget-2023 input[type=\"tel\"]:focus,\n    #quartix-calculator-widget-2023 input[type=\"number\"]:focus,\n    #quartix-calculator-widget-2023 select:focus {\n      border-color: #4EA863;\n      outline: none;\n    }\n    #quartix-calculator-widget-2023 input.error {\n      border-color: #e74c3c;\n    }\n    #quartix-calculator-widget-2023 .error-message {\n      color: #e74c3c;\n      font-size: 14px;\n      margin-top: 5px;\n      display: none;\n    }\n    #quartix-calculator-widget-2023 .email-note {\n      font-size: 14px;\n      color: #666;\n      margin-top: 5px;\n    }\n    \/* Currency input wrapper *\/\n    #quartix-calculator-widget-2023 .currency-input-wrapper {\n      position: relative;\n      display: flex;\n      align-items: center;\n    }\n    #quartix-calculator-widget-2023 .currency-symbol {\n      position: absolute;\n      left: 12px;\n      font-weight: 600;\n      color: #666;\n      pointer-events: none;\n    }\n    #quartix-calculator-widget-2023 .currency-input {\n      padding-left: 28px !important;\n    }\n    \/* Disclaimer Box *\/\n    #quartix-calculator-widget-2023 .disclaimer-box {\n      background-color: #f8f8f8;\n      padding: 15px;\n      margin-bottom: 25px;\n      border-radius: 4px;\n      font-size: 14px;\n      color: #666;\n      border: none;\n    }\n    \/* Business Type Selection *\/\n    #quartix-calculator-widget-2023 .business-type-selector {\n      display: flex;\n      gap: 15px;\n      margin-bottom: 25px;\n      background-color: #f9f9f9;\n    }\n    #quartix-calculator-widget-2023 .business-type-option {\n      flex: 1;\n      text-align: center;\n      padding: 15px;\n      border: 2px solid #e0e0e0;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n    #quartix-calculator-widget-2023 .business-type-option:hover {\n      border-color: #4EA863;\n      background-color: #f9f9f9;\n    }\n    #quartix-calculator-widget-2023 .business-type-option.active {\n      border-color: #4EA863;\n      background-color: #edf7f1;\n    }\n    #quartix-calculator-widget-2023 .business-type-option svg {\n      display: block;\n      margin: 0 auto 10px;\n      height: 40px;\n      width: 40px;\n    }\n    #quartix-calculator-widget-2023 .business-type-option h4 {\n      margin: 0;\n      font-size: 16px;\n    }\n    \/* Progress Steps *\/\n    #quartix-calculator-widget-2023 .progress-steps {\n      display: flex;\n      margin-bottom: 30px;\n      background-color: #ffffff;\n    }\n    #quartix-calculator-widget-2023 .progress-step {\n      flex: 1;\n      text-align: center;\n      position: relative;\n    }\n    #quartix-calculator-widget-2023 .progress-step:not(:last-child):after {\n      content: '';\n      position: absolute;\n      top: 14px;\n      left: 50%;\n      width: 100%;\n      height: 2px;\n      background-color: #e0e0e0;\n      z-index: 1;\n    }\n    #quartix-calculator-widget-2023 .step-circle {\n      width: 30px;\n      height: 30px;\n      border-radius: 50%;\n      background-color: #e0e0e0;\n      color: white;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin: 0 auto 8px;\n      font-weight: bold;\n      position: relative;\n      z-index: 2;\n    }\n    #quartix-calculator-widget-2023 .progress-step.active .step-circle {\n      background-color: #4EA863;\n    }\n    #quartix-calculator-widget-2023 .progress-step.completed .step-circle {\n      background-color: #4EA863;\n    }\n    #quartix-calculator-widget-2023 .step-label {\n      font-size: 14px;\n      font-weight: 600;\n      color: #666;\n      white-space: nowrap;\n    }\n    #quartix-calculator-widget-2023 .progress-step.active .step-label {\n      color: #000;\n    }\n    \/* Progress Fill *\/\n    #quartix-calculator-widget-2023 .progress-step:not(:last-child).completed:after {\n      background-color: #4EA863;\n    }\n    \/* Calculator Section *\/\n    #quartix-calculator-widget-2023 .calculator-section {\n      display: none;\n      animation: fadeIn 0.5s ease;\n      background-color: #ffffff;\n    }\n    #quartix-calculator-widget-2023 .calculator-section.active {\n      display: block;\n      background-color: #ffffff;\n      padding: 20px;\n      border-radius: 8px;\n    }\n    \/* Calculator Cards *\/\n    #quartix-calculator-widget-2023 .calculator-card {\n      display: none;\n      background: #f9f9f9;\n      border-radius: 10px;\n      padding: 20px;\n      margin-bottom: 20px;\n      animation: fadeIn 0.5s ease;\n    }\n    #quartix-calculator-widget-2023 .calculator-card.active {\n      display: block;\n    }\n    @keyframes fadeIn {\n      from { opacity: 0; }\n      to { opacity: 1; }\n    }\n    \/* Contact Form *\/\n    #quartix-calculator-widget-2023 .contact-form {\n      width: 100%;\n      background-color: #f9f9f9;\n      padding: 20px;\n      border-radius: 8px;\n    }\n    #quartix-calculator-widget-2023 .form-row {\n      display: flex;\n      gap: 60px;\n      margin-bottom: 20px;\n      background-color: #f9f9f9;\n    }\n    #quartix-calculator-widget-2023 .form-col {\n      flex: 1;\n      background-color: #f9f9f9;\n    }\n    \/* Country Code Selector *\/\n    #quartix-calculator-widget-2023 .country-code-selector {\n      width: 120px;\n      position: relative;\n    }\n    #quartix-calculator-widget-2023 .country-code-dropdown {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 10px;\n      border: 2px solid #e0e0e0;\n      border-radius: 6px;\n      cursor: pointer;\n      background-color: white;\n    }\n    #quartix-calculator-widget-2023 .country-flag {\n      width: 24px;\n      height: 16px;\n      object-fit: cover;\n    }\n    #quartix-calculator-widget-2023 .country-code-options {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      width: 100%;\n      background: white;\n      border: 2px solid #e0e0e0;\n      border-radius: 6px;\n      z-index: 10;\n      display: none;\n      box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n    }\n    #quartix-calculator-widget-2023 .country-code-option {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 10px;\n      cursor: pointer;\n    }\n    #quartix-calculator-widget-2023 .country-code-option:hover {\n      background-color: #f5f5f5;\n    }\n    #quartix-calculator-widget-2023 .phone-input-container {\n      display: flex;\n      gap: 10px;\n    }\n    \/* Buttons *\/\n    #quartix-calculator-widget-2023 .button-group {\n      display: flex;\n      justify-content: space-between;\n      margin-top: 20px;\n    }\n    #quartix-calculator-widget-2023 .button {\n      height: 56px;\n      padding: 0 24px;\n      border: none;\n      border-radius: 6px;\n      font-size: 16px;\n      font-weight: 400;\n      cursor: pointer;\n      font-family: 'Inter', sans-serif;\n      transition: all 0.2s ease;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    #quartix-calculator-widget-2023 .button-prev {\n      background-color: #e0e0e0;\n      color: #444;\n      border: 1px solid #ccc;\n    }\n    #quartix-calculator-widget-2023 .button-prev:hover {\n      background-color: #d0d0d0;\n    }\n    #quartix-calculator-widget-2023 .button-next,\n    #quartix-calculator-widget-2023 .button-submit,\n    #quartix-calculator-widget-2023 .button-reset {\n      background-color: #4EA863;\n      color: white;\n    }\n    #quartix-calculator-widget-2023 .button-next:hover,\n    #quartix-calculator-widget-2023 .button-submit:hover,\n    #quartix-calculator-widget-2023 .button-reset:hover {\n      background-color: #3d8a4f;\n    }\n    #quartix-calculator-widget-2023 .button-reset {\n      background-color: #e74c3c;\n    }\n    #quartix-calculator-widget-2023 .button-reset:hover {\n      background-color: #c0392b;\n    }\n    \/* Tooltip *\/\n    #quartix-calculator-widget-2023 .section-header {\n      display: flex;\n      align-items: center;\n      margin-bottom: 10px;\n    }\n    #quartix-calculator-widget-2023 .section-header h3 {\n      margin: 0;\n      margin-right: 8px;\n    }\n    #quartix-calculator-widget-2023 .tooltip {\n      position: relative;\n      display: inline-flex;\n      color: #999;\n      cursor: help;\n    }\n    #quartix-calculator-widget-2023 .tooltip:hover {\n      color: #4EA863;\n    }\n    #quartix-calculator-widget-2023 .tooltip::after {\n      content: attr(data-tooltip);\n      position: absolute;\n      bottom: 125%;\n      left: 50%;\n      transform: translateX(-50%);\n      background: #333;\n      color: white;\n      padding: 8px 12px;\n      border-radius: 4px;\n      font-size: 14px;\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity 0.2s ease;\n      z-index: 10;\n      width: 200px;\n      white-space: normal;\n      text-align: center;\n    }\n    #quartix-calculator-widget-2023 .tooltip:hover::after {\n      opacity: 1;\n    }\n    \/* Slider with Value *\/\n    #quartix-calculator-widget-2023 .slider-with-value {\n      display: flex;\n      align-items: center;\n      gap: 15px;\n      margin-bottom: 15px;\n    }\n    #quartix-calculator-widget-2023 .slider-container {\n      flex: 3;\n      position: relative;\n    }\n    #quartix-calculator-widget-2023 .slider-value {\n      flex: 1;\n      max-width: 80px;\n      text-align: center;\n    }\n    #quartix-calculator-widget-2023 input[type=\"range\"] {\n      -webkit-appearance: none;\n      width: 100%;\n      height: 6px;\n      background: #d0eddc;\n      border-radius: 3px;\n      outline: none;\n      cursor: pointer;\n    }\n    #quartix-calculator-widget-2023 input[type=\"range\"]::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      height: 18px;\n      width: 18px;\n      background: #4EA863;\n      border-radius: 50%;\n      cursor: pointer;\n      border: 2px solid white;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n      transition: transform 0.15s ease;\n    }\n    #quartix-calculator-widget-2023 input[type=\"range\"]::-webkit-slider-thumb:hover {\n      transform: scale(1.15);\n    }\n    #quartix-calculator-widget-2023 input[type=\"range\"]::-moz-range-thumb {\n      height: 18px;\n      width: 18px;\n      background: #4EA863;\n      border-radius: 50%;\n      cursor: pointer;\n      border: 2px solid white;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n      transition: transform 0.15s ease;\n    }\n    #quartix-calculator-widget-2023 input[type=\"range\"]::-moz-range-track {\n      background: #d0eddc;\n      height: 6px;\n      border-radius: 3px;\n    }\n    \/* Info Note - Redesigned to be more neutral *\/\n    #quartix-calculator-widget-2023 .info-note {\n      background-color: #f5f5f5;\n      border: 1px solid #e0e0e0;\n      padding: 12px 15px;\n      margin-top: 15px;\n      font-size: 14px;\n      color: #666;\n      border-radius: 4px;\n    }\n    #quartix-calculator-widget-2023 .info-note strong {\n      display: block;\n      margin-bottom: 4px;\n      color: #333;\n    }\n    \/* Results Display *\/\n    #quartix-calculator-widget-2023 .results-section {\n      padding: 20px;\n    }\n    #quartix-calculator-widget-2023 .results-card {\n      background: #f9f9f9;\n      border-radius: 10px;\n      padding: 25px;\n      margin-bottom: 20px;\n      text-align: center;\n    }\n    #quartix-calculator-widget-2023 .results-timestamp {\n      font-size: 14px;\n      color: #777;\n      margin-bottom: 15px;\n    }\n    #quartix-calculator-widget-2023 .total-savings {\n      font-size: 36px;\n      font-weight: 700;\n      color: #4EA863;\n      margin: 20px 0;\n      font-family: 'Inter', sans-serif;\n    }\n    #quartix-calculator-widget-2023 .savings-period {\n      display: flex;\n      gap: 20px;\n      justify-content: center;\n      margin-bottom: 20px;\n    }\n    #quartix-calculator-widget-2023 .period-item {\n      text-align: center;\n    }\n    #quartix-calculator-widget-2023 .period-value {\n      font-size: 24px;\n      font-weight: 600;\n      color: #4EA863;\n      font-family: 'Inter', sans-serif;\n    }\n    #quartix-calculator-widget-2023 .period-label {\n      font-size: 14px;\n      color: #666;\n    }\n    #quartix-calculator-widget-2023 .savings-breakdown {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      gap: 20px;\n      margin-top: 30px;\n      margin-bottom: 30px;\n    }\n    #quartix-calculator-widget-2023 .savings-item {\n      background: white;\n      padding: 15px;\n      border-radius: 8px;\n      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);\n    }\n    #quartix-calculator-widget-2023 .savings-item h4 {\n      margin: 0 0 10px 0;\n      font-size: 16px;\n    }\n    #quartix-calculator-widget-2023 .savings-amount {\n      font-size: 24px;\n      font-weight: 700;\n      color: #1F2121;\n      font-family: 'Inter', sans-serif;\n    }\n    #quartix-calculator-widget-2023 .savings-explanation {\n      font-size: 13px;\n      color: #666;\n      margin-top: 8px;\n      line-height: 1.4;\n    }\n    \/* Share Results *\/\n    #quartix-calculator-widget-2023 .share-results {\n      display: flex;\n      justify-content: center;\n      gap: 20px;\n      margin-top: 25px;\n      margin-bottom: 25px;\n      flex-wrap: wrap;\n    }\n    #quartix-calculator-widget-2023 .share-button {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 10px;\n      padding: 12px 20px;\n      border-radius: 6px;\n      font-size: 16px;\n      font-weight: 400;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      background-color: #fff;\n      color: #333;\n      border: 1px solid #e0e0e0;\n    }\n    #quartix-calculator-widget-2023 .share-button:hover {\n      background-color: #f5f5f5;\n    }\n    #quartix-calculator-widget-2023 .share-button svg {\n      width: 20px;\n      height: 20px;\n    }\n    #quartix-calculator-widget-2023 .copy-link {\n      background-color: #9C27B0;\n      color: white;\n    }\n    #quartix-calculator-widget-2023 .copy-link:hover {\n      background-color: #7B1FA2;\n    }\n    \/* Link copied notification *\/\n    #quartix-calculator-widget-2023 .link-copied-notification {\n      position: fixed;\n      top: 20px;\n      left: 50%;\n      transform: translateX(-50%);\n      background-color: #333;\n      color: white;\n      padding: 10px 20px;\n      border-radius: 4px;\n      font-size: 14px;\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity 0.3s ease;\n      z-index: 1000;\n    }\n    #quartix-calculator-widget-2023 .link-copied-notification.show {\n      opacity: 1;\n    }\n    \/* Two columns layout for calculator questions *\/\n    #quartix-calculator-widget-2023 .question-row {\n      display: flex;\n      gap: 60px;\n      margin-bottom: 20px;\n    }\n    #quartix-calculator-widget-2023 .question-col {\n      flex: 1;\n    }\n    \/* Custom checkbox styling *\/\n    #quartix-calculator-widget-2023 input[type=\"checkbox\"] {\n      -webkit-appearance: none;\n      appearance: none;\n      width: 22px;\n      height: 22px;\n      border: 2px solid #d0d0d0;\n      border-radius: 5px;\n      background-color: white;\n      cursor: pointer;\n      position: relative;\n      transition: all 0.3s ease;\n      flex-shrink: 0;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n    }\n    \n    #quartix-calculator-widget-2023 input[type=\"checkbox\"]:hover {\n      border-color: #4EA863;\n      box-shadow: 0 2px 5px rgba(78,168,99,0.2);\n      transform: scale(1.05);\n    }\n    \n    #quartix-calculator-widget-2023 input[type=\"checkbox\"]:checked {\n      background-color: #4EA863;\n      border-color: #4EA863;\n      box-shadow: 0 2px 5px rgba(78,168,99,0.3);\n    }\n    \n    #quartix-calculator-widget-2023 input[type=\"checkbox\"]:checked::after {\n      content: '';\n      position: absolute;\n      left: 7px;\n      top: 4px;\n      width: 5px;\n      height: 10px;\n      border: solid white;\n      border-width: 0 2.5px 2.5px 0;\n      transform: rotate(45deg);\n    }\n    \n    \/* Checkbox group - Updated styling *\/\n    #quartix-calculator-widget-2023 .checkbox-group {\n      margin-bottom: 25px;\n    }\n    #quartix-calculator-widget-2023 .checkbox-item {\n      margin-bottom: 18px;\n      padding: 16px;\n      background-color: #ffffff;\n      border: 1px solid #e5e5e5;\n      border-radius: 8px;\n      transition: all 0.2s ease;\n    }\n    #quartix-calculator-widget-2023 .checkbox-item:hover {\n      border-color: #d0eddc;\n      background-color: #fafafa;\n      box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n    }\n    #quartix-calculator-widget-2023 .checkbox-item label {\n      display: flex;\n      align-items: flex-start;\n      gap: 12px;\n      margin-bottom: 0;\n      background-color: transparent;\n      font-weight: 500;\n      cursor: pointer;\n      color: #333;\n    }\n    #quartix-calculator-widget-2023 .checkbox-description {\n      font-size: 13px;\n      color: #666;\n      margin-top: 8px;\n      margin-left: 34px;\n      line-height: 1.5;\n    }\n    #quartix-calculator-widget-2023 .pto-instruction {\n      display: none;\n      background-color: #fef8e8;\n      border: 1px solid #f5e1a6;\n      padding: 12px 14px;\n      margin-top: 10px;\n      margin-left: 34px;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #8b6914;\n      line-height: 1.5;\n    }\n    #quartix-calculator-widget-2023 .pto-instruction.show {\n      display: block;\n    }\n    \/* Calculation breakdown *\/\n    #quartix-calculator-widget-2023 .calculation-note {\n      font-size: 13px;\n      color: #666;\n      margin-top: 10px;\n      font-style: italic;\n    }\n    \/* Responsive Design *\/\n    @media (max-width: 768px) {\n      #quartix-calculator-widget-2023 .form-row,\n      #quartix-calculator-widget-2023 .question-row {\n        flex-direction: column;\n        gap: 15px;\n      }\n      #quartix-calculator-widget-2023 .business-type-selector,\n      #quartix-calculator-widget-2023 .calculation-type-selector {\n        flex-direction: column;\n      }\n      #quartix-calculator-widget-2023 .button-group {\n        flex-direction: column;\n        gap: 10px;\n      }\n      #quartix-calculator-widget-2023 .button {\n        width: 100%;\n      }\n      #quartix-calculator-widget-2023 .progress-steps {\n        overflow-x: auto;\n      }\n      #quartix-calculator-widget-2023 .step-label {\n        font-size: 12px;\n      }\n      #quartix-calculator-widget-2023 .savings-period {\n        flex-direction: column;\n        gap: 10px;\n      }\n      #quartix-calculator-widget-2023 .checkbox-group {\n        flex-direction: column;\n        gap: 15px;\n      }\n    }\n    \/* Completion time indicator *\/\n    #quartix-calculator-widget-2023 .completion-time {\n      display: flex;\n      align-items: center;\n      margin-bottom: 20px;\n      color: #666;\n      font-size: 14px;\n    }\n    \n    #quartix-calculator-widget-2023 .completion-time svg {\n      margin-right: 8px;\n      color: #4EA863;\n    }\n    \n    #quartix-calculator-widget-2023 .personal-greeting {\n      margin: 15px 0;\n      font-size: 18px;\n    }\n    \n    #quartix-calculator-widget-2023 .roi-section {\n      margin-top: 40px;\n      background-color: #f8f8f8;\n      padding: 20px;\n      border-radius: 8px;\n    }\n    \n    #quartix-calculator-widget-2023 .roi-section h3 {\n      text-align: center;\n      margin-bottom: 20px;\n      color: #333;\n    }\n    \n    #quartix-calculator-widget-2023 .roi-details {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 15px;\n      margin-bottom: 25px;\n    }\n    \n    @media (max-width: 768px) {\n      #quartix-calculator-widget-2023 .roi-details {\n        grid-template-columns: 1fr;\n      }\n    }\n    \n    #quartix-calculator-widget-2023 .roi-item {\n      background-color: white;\n      padding: 15px;\n      border-radius: 6px;\n      box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n    }\n    \n    #quartix-calculator-widget-2023 .roi-item.highlight {\n      background-color: #edf7f1;\n      border: 1px solid #4EA863;\n    }\n    \n    #quartix-calculator-widget-2023 .roi-label {\n      font-weight: 600;\n      margin-bottom: 5px;\n      color: #666;\n    }\n    \n    #quartix-calculator-widget-2023 .roi-value {\n      font-size: 18px;\n      font-weight: 700;\n      color: #333;\n    }\n    \n    #quartix-calculator-widget-2023 .roi-item.highlight .roi-value {\n      color: #4EA863;\n      font-size: 22px;\n    }\n    \n    #quartix-calculator-widget-2023 .roi-payback {\n      text-align: center;\n      margin-top: 20px;\n      font-size: 16px;\n    }\n    \n    #quartix-calculator-widget-2023 .roi-payback span {\n      font-weight: 700;\n      color: #4EA863;\n    }\n\n    #quartix-calculator-widget-2023 .quartix-logo {\n      display: block;\n      margin: 0 auto 20px;\n      height: 45px;\n    }\n    \n    \/* Secondary progress bar for calculator section *\/\n    #quartix-calculator-widget-2023 .calculator-progress {\n      display: none;\n      margin-bottom: 25px;\n      background-color: #f5f5f5;\n      padding: 20px;\n      border-radius: 8px;\n    }\n    \n    #quartix-calculator-widget-2023 .calculator-progress.active {\n      display: block;\n    }\n    \n    #quartix-calculator-widget-2023 .calculator-progress-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 12px;\n    }\n    \n    #quartix-calculator-widget-2023 .calculator-progress-title {\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n    }\n    \n    #quartix-calculator-widget-2023 .calculator-progress-percentage {\n      font-size: 14px;\n      font-weight: 700;\n      color: #4EA863;\n    }\n    \n    #quartix-calculator-widget-2023 .calculator-progress-bar {\n      width: 100%;\n      height: 8px;\n      background-color: #e0e0e0;\n      border-radius: 4px;\n      overflow: hidden;\n      position: relative;\n    }\n    \n    #quartix-calculator-widget-2023 .calculator-progress-fill {\n      height: 100%;\n      background-color: #4EA863;\n      border-radius: 4px;\n      transition: width 0.3s ease;\n      position: relative;\n    }\n    \n    #quartix-calculator-widget-2023 .calculator-progress-fill::after {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      background: linear-gradient(\n        45deg,\n        rgba(255, 255, 255, 0.15) 25%,\n        transparent 25%,\n        transparent 50%,\n        rgba(255, 255, 255, 0.15) 50%,\n        rgba(255, 255, 255, 0.15) 75%,\n        transparent 75%,\n        transparent\n      );\n      background-size: 15px 15px;\n      animation: move 1s linear infinite;\n      opacity: 0.5;\n    }\n    \n    @keyframes move {\n      0% {\n        background-position: 0 0;\n      }\n      100% {\n        background-position: 15px 15px;\n      }\n    }\n    \/* Cost display styles *\/\n    #quartix-calculator-widget-2023 .private-mileage-cost,\n    #quartix-calculator-widget-2023 .reactive-work-cost,\n    #quartix-calculator-widget-2023 .billing-disputes-cost,\n    #quartix-calculator-widget-2023 .time-on-site-cost,\n    #quartix-calculator-widget-2023 .idle-time-cost,\n    #quartix-calculator-widget-2023 .standing-time-cost,\n    #quartix-calculator-widget-2023 .extra-jobs-cost {\n      font-size: 18px;\n      margin-top: 20px;\n      padding: 15px;\n      background-color: #edf7f1;\n      border-radius: 6px;\n      text-align: center;\n    }\n  <\/style>\n  \n  <!-- Progress Steps -->\n  <div class=\"progress-steps\" id=\"progress-container\">\n    <div class=\"progress-step active\" data-step=\"1\">\n      <div class=\"step-circle\">1<\/div>\n      <div class=\"step-label\">Business Type<\/div>\n    <\/div>\n    <div class=\"progress-step\" data-step=\"2\">\n      <div class=\"step-circle\">2<\/div>\n      <div class=\"step-label\">Calculate Savings<\/div>\n    <\/div>\n    <div class=\"progress-step\" data-step=\"3\">\n      <div class=\"step-circle\">3<\/div>\n      <div class=\"step-label\">Your Details<\/div>\n    <\/div>\n    <div class=\"progress-step\" data-step=\"4\">\n      <div class=\"step-circle\">4<\/div>\n      <div class=\"step-label\">Your Results<\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Business Type Selection Section - Now first step -->\n  <div class=\"calculator-section active\" id=\"section-0\">\n    <div class=\"contact-form\">\n      <div class=\"form-group\">\n        <h3>What type of business do you operate?<\/h3>\n        \n        <div class=\"disclaimer-box\">\n          <strong>Disclaimer:<\/strong> The savings calculated are indicative estimates based on industry averages. Actual savings may vary depending on your specific circumstances, driving patterns, and operational factors. Quartix does not guarantee that you will achieve the exact savings shown.\n        <\/div>\n        \n        <div class=\"completion-time\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n            <polyline points=\"12 6 12 12 16 14\"><\/polyline>\n          <\/svg>\n          Approximate completion time: 5 minutes\n        <\/div>\n        \n        <div class=\"business-type-selector\">\n          <div class=\"business-type-option active\" data-type=\"service\" onclick=\"QCalc.selectBusinessType(event, 'service')\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"><\/path>\n            <\/svg>\n            <h4>Service\/Site-Based Business<\/h4>\n            <p>Field service, construction, maintenance, installation, etc.<\/p>\n          <\/div>\n          <div class=\"business-type-option\" data-type=\"transport\" onclick=\"QCalc.selectBusinessType(event, 'transport')\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4\"><\/path>\n            <\/svg>\n            <h4>Transport Business<\/h4>\n            <p>Logistics, delivery, trucking, freight, etc.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n      \n      <div class=\"form-row\">\n        <div class=\"form-col\">\n          <div class=\"form-group\">\n            <label for=\"totalVehicles\">Total Number of Vehicles *<\/label>\n            <input type=\"number\" id=\"totalVehicles\" min=\"1\" value=\"5\" required>\n            <div class=\"error-message\" id=\"totalVehicles-error\">Please enter the number of vehicles<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"form-col\">\n          <div class=\"form-group\">\n            <label for=\"totalEmployees\">Total Number of Employees Using Commercial Vehicles *<\/label>\n            <input type=\"number\" id=\"totalEmployees\" min=\"1\" value=\"5\" required>\n            <div class=\"error-message\" id=\"totalEmployees-error\">Please enter the number of employees<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      \n      <div class=\"button-group\">\n        <div><\/div> <!-- Empty div to maintain space-between alignment -->\n        <button class=\"button button-next\" id=\"next-to-calculator\" onclick=\"QCalc.goToCalculator(event)\">Next<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Calculator Inputs Section -->\n  <div class=\"calculator-section\" id=\"section-2\">\n    <!-- Calculator Progress Bar -->\n    <div class=\"calculator-progress\" id=\"calculator-progress\">\n      <div class=\"calculator-progress-header\">\n        <div class=\"calculator-progress-title\">Calculate Savings Progress<\/div>\n        <div class=\"calculator-progress-percentage\" id=\"calculator-percentage\">0%<\/div>\n      <\/div>\n      <div class=\"calculator-progress-bar\">\n        <div class=\"calculator-progress-fill\" id=\"calculator-progress-fill\" style=\"width: 0%\"><\/div>\n      <\/div>\n    <\/div>\n    \n    <!-- Service Business Calculator -->\n    <div id=\"service-calculator\">\n      <!-- Private Mileage (moved to first for service) -->\n      <div class=\"calculator-card active\" id=\"private-mileage-card\">\n        <div class=\"section-header\">\n          <h3>Private Mileage Savings<\/h3>\n          <div class=\"tooltip\" data-tooltip=\"Reducing private mileage saves fuel costs and prevents potential HMRC issues related to benefit in kind\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"><\/path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"><\/line>\n            <\/svg>\n          <\/div>\n        <\/div>\n        \n        <p>One of the most noticeable differences you can expect by installing Quartix tracking will be a significant decrease in private out-of-hours mileage. Before Quartix tracking was installed our customers typically observed an average of 50 miles per vehicle per week in private mileage alone.<\/p>\n        \n        <div class=\"question-row\">\n          <div class=\"question-col\">\n            <div class=\"form-group\">\n              <label for=\"vehiclesUsedPrivately\">Out of the vehicles you specified, how many are used privately?<\/label>\n              <div class=\"slider-with-value\">\n                <div class=\"slider-container\">\n                  <input type=\"range\" id=\"vehiclesUsedPrivatelyRange\" min=\"0\" max=\"5\" value=\"2\">\n                <\/div>\n                <input type=\"number\" id=\"vehiclesUsedPrivately\" class=\"slider-value\" min=\"0\" max=\"5\" value=\"2\">\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"question-col\">\n            <div class=\"form-group\">\n              <label for=\"averagePrivateMilesPerWeek\">Average private miles per week, per vehicle<\/label>\n              <div class=\"slider-with-value\">\n                <div class=\"slider-container\">\n                  <input type=\"range\" id=\"averagePrivateMilesPerWeekRange\" min=\"0\" max=\"500\" value=\"50\">\n                <\/div>\n                <input type=\"number\" id=\"averagePrivateMilesPerWeek\" class=\"slider-value\" min=\"0\" value=\"50\">\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <div class=\"question-row\">\n          <div class=\"question-col\">\n            <div class=\"form-group\">\n              <label for=\"averageMPG\">Average fuel economy (MPG)<\/label>\n              <div class=\"slider-with-value\">\n                <div class=\"slider-container\">\n                  <input type=\"range\" id=\"averageMPGRange\" min=\"15\" max=\"60\" value=\"38\">\n                <\/div>\n                <input type=\"number\" id=\"averageMPG\" class=\"slider-value\" min=\"15\" value=\"38\">\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"question-col\">\n            <div class=\"form-group\">\n              <label for=\"fuelCostPerLitre\">Fuel cost per litre<\/label>\n              <div class=\"currency-input-wrapper\">\n                <span class=\"currency-symbol\">\u00a3<\/span>\n                <input type=\"number\" id=\"fuelCostPerLitre\" class=\"currency-input\" min=\"1\" max=\"3\" step=\"0.01\" value=\"1.43\">\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <div class=\"private-mileage-cost\">\n          <strong>Cost of private mileage fuel per year:<\/strong>\n          <span id=\"privateMileageCost\">\u00a30.00<\/span>\n        <\/div>\n        \n        <div class=\"calculation-note\">\n          Based on: <span id=\"privateMileageCalc\"><\/span>\n        <\/div>\n        \n        <div class=\"info-note\">\n          <strong>Additional Benefits:<\/strong>\n          Reduced private mileage may also contribute to maintenance savings through reduced wear and tear on your vehicles. While not included in the calculation above, this can provide further cost benefits to your fleet operations.\n        <\/div>\n        \n        <div class=\"button-group\">\n          <button class=\"button button-prev\" id=\"full-back-to-contact\" onclick=\"QCalc.goToStep(1)\">Previous<\/button>\n          <button class=\"button button-next next-card\" data-next=\"time-on-site-card\" onclick=\"QCalc.nextCard(event, 'service')\">Next<\/button>\n        <\/div>\n      <\/div>\n      \n      <!-- Time Accountability (second for service) -->\n      <div class=\"calculator-card\" id=\"time-on-site-card\">\n        <div class=\"section-header\">\n          <h3>Time Accountability Savings<\/h3>\n          <div class=\"tooltip\" data-tooltip=\"Tracking ensures your employees maximize productive time and reduces lost minutes, increasing overall productivity\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"><\/path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"><\/line>\n            <\/svg>\n          <\/div>\n        <\/div>\n        \n        <p>When employees arrive late to a job, leave early, or take unauthorized breaks, the lost minutes per day quickly accumulate. With Quartix vehicle tracking, you can improve accountability and reduce these lost minutes, converting them into productive time. This helps avoid additional headcount costs, ensures jobs are completed on time, and prevents potential penalties.<\/p>\n        \n        <div class=\"question-row\">\n          <div class=\"question-col\">\n            <div class=\"form-group\">\n              <label for=\"minutesLostPerDay\">Minutes lost per day per employee<\/label>\n              <div class=\"slider-with-value\">\n                <div class=\"slider-container\">\n                  <input type=\"range\" id=\"minutesLostPerDayRange\" min=\"5\" max=\"120\" value=\"30\">\n                <\/div>\n                <input type=\"number\" id=\"minutesLostPerDay\" class=\"slider-value\" min=\"5\" value=\"30\">\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"question-col\">\n            <div class=\"form-group\">\n              <label for=\"employeeHourlyRate\">Average employee hourly rate<\/label>\n              <div class=\"currency-input-wrapper\">\n                <span class=\"currency-symbol\">\u00a3<\/span>\n                <input type=\"number\" id=\"employeeHourlyRate\" class=\"currency-input\" min=\"10\" value=\"15\">\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <div class=\"form-group\">\n          <label for=\"workingDaysPerWeek\">Working days per week<\/label>\n          <div class=\"slider-with-value\">\n            <div class=\"slider-container\">\n              <input type=\"range\" id=\"workingDaysPerWeekRange\" min=\"1\" max=\"7\" value=\"5\">\n            <\/div>\n            <input type=\"number\" id=\"workingDaysPerWeek\" class=\"slider-value\" min=\"1\" max=\"7\" value=\"5\">\n          <\/div>\n        <\/div>\n        \n        <div class=\"time-on-site-cost\">\n          <strong>Productivity cost lost per year:<\/strong>\n          <span id=\"timeOnSiteCost\">\u00a30.00<\/span>\n        <\/div>\n        \n        <div class=\"calculation-note\">\n          Based on: <span id=\"timeOnSiteCalc\"><\/span>\n        <\/div>\n        \n        <div class=\"button-group\">\n          <button class=\"button button-prev prev-card\" data-prev=\"private-mileage-card\" onclick=\"QCalc.prevCard(event, 'service')\">Previous<\/button>\n          <button class=\"button button-next next-card\" data-next=\"service-idle-time-card\" onclick=\"QCalc.nextCard(event, 'service')\">Next<\/button>\n        <\/div>\n      <\/div>\n      \n      <!-- Idle Time (new for service) -->\n      <div class=\"calculator-card\" id=\"service-idle-time-card\">\n        <div class=\"section-header\">\n          <h3>Idle Time Reduction<\/h3>\n          <div class=\"tooltip\" data-tooltip=\"Reducing vehicle idle time saves fuel and increases productivity\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"><\/path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"><\/line>\n            <\/svg>\n          <\/div>\n        <\/div>\n        \n        <p>Vehicles with engines running while stationary waste fuel, create unnecessary emissions, and represent unproductive time. Quartix tracking helps identify and reduce these instances.<\/p>\n        \n        <div class=\"checkbox-group\">\n          <div class=\"checkbox-item\">\n            <label>\n              <input type=\"checkbox\" id=\"serviceNoStartStop\" onchange=\"QCalc.toggleServiceStartStop(event)\">\n              <span>My fleet vehicles do NOT have start-stop technology<\/span>\n            <\/label>\n            <div class=\"checkbox-description\">\n              Start-stop technology automatically turns off the engine when the vehicle is stationary, reducing fuel consumption during idle time. Most modern vehicles (2015+) have this feature.\n            <\/div>\n          <\/div>\n          \n          <div class=\"checkbox-item\">\n            <label>\n              <input type=\"checkbox\" id=\"serviceUsesPTO\" onchange=\"QCalc.toggleServicePTO(event)\">\n              <span>My fleet uses PTO (Power Take-Off) systems<\/span>\n            <\/label>\n            <div class=\"checkbox-description\">\n              PTO systems power auxiliary equipment while the vehicle is stationary. Examples include cement mixers, bed lifts, flatbed tilt walls, or refrigeration units.\n            <\/div>\n            <div class=\"pto-instruction\" id=\"servicePTOInstruction\">\n              Please ensure that minutes spent in PTO mode are NOT included in the daily idling time you enter below. Tracking data will display PTO events separately, but this calculator only estimates fuel used during true idle (stationary with engine running, not working).\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <div class=\"form-group\">\n          <label for=\"serviceMinutesIdlePerDay\">Minutes idle per day per vehicle<\/label>\n          <div class=\"slider-with-value\">\n            <div class=\"slider-container\">\n              <input type=\"range\" id=\"serviceMinutesIdlePerDayRange\" min=\"0\" max=\"120\" value=\"20\">\n            <\/div>\n            <input type=\"number\" id=\"serviceMinutesIdlePerDay\" class=\"slider-value\" min=\"0\" value=\"20\">\n          <\/div>\n        <\/div>\n        \n        <div class=\"idle-time-cost\">\n          <strong>Cost of idle time per year:<\/strong>\n          <span id=\"serviceIdleTimeCost\">\u00a30.00<\/span>\n        <\/div>\n        \n        <div class=\"calculation-note\">\n          Based on: <span id=\"serviceIdleTimeCalc\"><\/span>\n        <\/div>\n        \n        <div class=\"button-group\">\n          <button class=\"button button-prev prev-card\" data-prev=\"time-on-site-card\" onclick=\"QCalc.prevCard(event, 'service')\">Previous<\/button>\n          <button class=\"button button-next next-card\" data-next=\"reactive-work-card\" onclick=\"QCalc.nextCard(event, 'service')\">Next<\/button>\n        <\/div>\n      <\/div>\n      \n      <!-- Reactive Work -->\n      <div class=\"calculator-card\" id=\"reactive-work-card\">\n        <div class=\"section-header\">\n          <h3>Reactive Work Opportunities<\/h3>\n          <div class=\"tooltip\" data-tooltip=\"Vehicle tracking helps you identify the nearest engineer to a job site, improving response times and customer satisfaction\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"><\/path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"><\/line>\n            <\/svg>\n          <\/div>\n        <\/div>\n        \n        <p>Running your fleet without a vehicle tracking system in place can lead you to be blind to where your vehicles are out on the road. When trying to allocate drivers to a job it can become unnecessarily hard to get hold of your drivers, and you may miss out on jobs as a result.<\/p>\n        \n        <div class=\"question-row\">\n          <div class=\"question-col\">\n            <div class=\"form-group\">\n              <label for=\"missedJobsPerWeek\">How many jobs do you miss out on per week?<\/label>\n              <div class=\"slider-with-value\">\n                <div class=\"slider-container\">\n                  <input type=\"range\" id=\"missedJobsPerWeekRange\" min=\"0\" max=\"50\" value=\"3\">\n                <\/div>\n                <input type=\"number\" id=\"missedJobsPerWeek\" class=\"slider-value\" min=\"0\" value=\"3\">\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"question-col\">\n            <div class=\"form-group\">\n              <label for=\"averageJobPrice\">What would be the average price of a standalone job?<\/label>\n              <div class=\"currency-input-wrapper\">\n                <span class=\"currency-symbol\">\u00a3<\/span>\n                <input type=\"number\" id=\"averageJobPrice\" class=\"currency-input\" min=\"50\" value=\"150\">\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <div class=\"reactive-work-cost\">\n          <strong>Cost of missed jobs per year:<\/strong>\n          <span id=\"reactiveWorkCost\">\u00a30.00<\/span>\n        <\/div>\n        \n        <div class=\"calculation-note\">\n          Based on: <span id=\"reactiveWorkCalc\"><\/span>\n        <\/div>\n        \n        <div class=\"button-group\">\n          <button class=\"button button-prev prev-card\" data-prev=\"service-idle-time-card\" onclick=\"QCalc.prevCard(event, 'service')\">Previous<\/button>\n          <button class=\"button button-next next-card\" data-next=\"billing-disputes-card\" onclick=\"QCalc.nextCard(event, 'service')\">Next<\/button>\n        <\/div>\n      <\/div>\n      \n      <!-- Billing Disputes -->\n      <div class=\"calculator-card\" id=\"billing-disputes-card\">\n        <div class=\"section-header\">\n          <h3>Billing Dispute Prevention<\/h3>\n          <div class=\"tooltip\" data-tooltip=\"Vehicle tracking provides evidence of time spent on-site to resolve billing disputes with customers\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"><\/path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"><\/line>\n            <\/svg>\n          <\/div>\n        <\/div>\n        \n        <p>Proving your driver or staff member attended a job you have billed for can sometimes lead to disputes. With Quartix tracking&#8217;s reports you are backed up by being able to prove the arrival and finish times accurately. Our customers typically receive an average of one billing query per week.<\/p>\n        \n        <div class=\"question-row\">\n          <div class=\"question-col\">\n            <div class=\"form-group\">\n              <label for=\"disputesPerMonth\">How many disputes do you get per month?<\/label>\n              <div class=\"slider-with-value\">\n                <div class=\"slider-container\">\n                  <input type=\"range\" id=\"disputesPerMonthRange\" min=\"0\" max=\"20\" value=\"2\">\n                <\/div>\n                <input type=\"number\" id=\"disputesPerMonth\" class=\"slider-value\" min=\"0\" value=\"2\">\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"question-col\">\n            <div class=\"form-group\">\n              <label for=\"averageDisputeCost\">What would each dispute cost you?<\/label>\n              <div class=\"currency-input-wrapper\">\n                <span class=\"currency-symbol\">\u00a3<\/span>\n                <input type=\"number\" id=\"averageDisputeCost\" class=\"currency-input\" min=\"50\" value=\"100\">\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <div class=\"billing-disputes-cost\">\n          <strong>Cost of disputes per year:<\/strong>\n          <span id=\"billingDisputesCost\">\u00a30.00<\/span>\n        <\/div>\n        \n        <div class=\"calculation-note\">\n          Based on: <span id=\"billingDisputesCalc\"><\/span>\n        <\/div>\n        \n        <div class=\"button-group\">\n          <button class=\"button button-prev prev-card\" data-prev=\"reactive-work-card\" onclick=\"QCalc.prevCard(event, 'service')\">Previous<\/button>\n          <button class=\"button button-next\" id=\"service-calculate-results\" onclick=\"QCalc.goToContactForm(event)\">Calculate Savings<\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n    \n    <!-- Transport Business Calculator -->\n    <div id=\"transport-calculator\" style=\"display: none;\">\n      <!-- Private Mileage (first for transport) -->\n      <div class=\"calculator-card active\" id=\"transport-private-mileage-card\">\n        <div class=\"section-header\">\n          <h3>Private Mileage Savings<\/h3>\n          <div class=\"tooltip\" data-tooltip=\"Reducing private mileage saves fuel costs and prevents potential HMRC issues related to benefit in kind\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"><\/path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"><\/line>\n            <\/svg>\n          <\/div>\n        <\/div>\n        \n        <p>One of the most noticeable differences you can expect by installing Quartix tracking will be a significant decrease in private out-of-hours mileage. Before Quartix tracking was installed our customers typically observed an average of 50 miles per vehicle per week in private mileage alone.<\/p>\n        \n        <div class=\"question-row\">\n          <div class=\"question-col\">\n            <div class=\"form-group\">\n              <label for=\"transportVehiclesUsedPrivately\">Out of the vehicles you specified, how many are used privately?<\/label>\n              <div class=\"slider-with-value\">\n                <div class=\"slider-container\">\n                  <input type=\"range\" id=\"transportVehiclesUsedPrivatelyRange\" min=\"0\" max=\"5\" value=\"2\">\n                <\/div>\n                <input type=\"number\" id=\"transportVehiclesUsedPrivately\" class=\"slider-value\" min=\"0\" max=\"5\" value=\"2\">\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"question-col\">\n            <div class=\"form-group\">\n              <label for=\"transportAveragePrivateMilesPerWeek\">Average private miles per week, per vehicle<\/label>\n              <div class=\"slider-with-value\">\n                <div class=\"slider-container\">\n                  <input type=\"range\" id=\"transportAveragePrivateMilesPerWeekRange\" min=\"0\" max=\"500\" value=\"50\">\n                <\/div>\n                <input type=\"number\" id=\"transportAveragePrivateMilesPerWeek\" class=\"slider-value\" min=\"0\" value=\"50\">\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <div class=\"question-row\">\n          <div class=\"question-col\">\n            <div class=\"form-group\">\n              <label for=\"transportAverageMPG\">Average fuel economy (MPG)<\/label>\n              <div class=\"slider-with-value\">\n                <div class=\"slider-container\">\n                  <input type=\"range\" id=\"transportAverageMPGRange\" min=\"15\" max=\"60\" value=\"38\">\n                <\/div>\n                <input type=\"number\" id=\"transportAverageMPG\" class=\"slider-value\" min=\"15\" value=\"38\">\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"question-col\">\n            <div class=\"form-group\">\n              <label for=\"transportFuelCostPerLitre\">Fuel cost per litre<\/label>\n              <div class=\"currency-input-wrapper\">\n                <span class=\"currency-symbol\">\u00a3<\/span>\n                <input type=\"number\" id=\"transportFuelCostPerLitre\" class=\"currency-input\" min=\"1\" max=\"3\" step=\"0.01\" value=\"1.43\">\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <div class=\"private-mileage-cost\">\n          <strong>Cost of private mileage fuel per year:<\/strong>\n          <span id=\"transportPrivateMileageCost\">\u00a30.00<\/span>\n        <\/div>\n        \n        <div class=\"calculation-note\">\n          Based on: <span id=\"transportPrivateMileageCalc\"><\/span>\n        <\/div>\n        \n        <div class=\"info-note\">\n          <strong>Additional Benefits:<\/strong>\n          Reduced private mileage may also contribute to maintenance savings through reduced wear and tear on your vehicles. While not included in the calculation above, this can provide further cost benefits to your fleet operations.\n        <\/div>\n        \n        <div class=\"button-group\">\n          <button class=\"button button-prev\" id=\"transport-back-to-business\" onclick=\"QCalc.goToStep(1)\">Previous<\/button>\n          <button class=\"button button-next next-card\" data-next=\"standing-time-card\" onclick=\"QCalc.nextCard(event, 'transport')\">Next<\/button>\n        <\/div>\n      <\/div>\n      \n      <!-- Standing Time \/ Demurrage (second for transport) -->\n      <div class=\"calculator-card\" id=\"standing-time-card\">\n        <div class=\"section-header\">\n          <h3>Demurrage Recuperation<\/h3>\n          <div class=\"tooltip\" data-tooltip=\"Demurrage costs your business in terms of employee productivity and missed opportunities\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"><\/path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"><\/line>\n            <\/svg>\n          <\/div>\n        <\/div>\n        \n        <p>Demurrage (unnecessary waiting time) costs your business in terms of employee productivity and missed opportunities. Quartix tracking helps identify and this lost time, our reports can then be used to recuperate funds from depots as per their SLA.<\/p>\n        \n        <div class=\"question-row\">\n          <div class=\"question-col\">\n            <div class=\"form-group\">\n              <label for=\"minutesStandingPerDay\">Minutes per day of demurrage per vehicle<\/label>\n              <div class=\"slider-with-value\">\n                <div class=\"slider-container\">\n                  <input type=\"range\" id=\"minutesStandingPerDayRange\" min=\"0\" max=\"120\" value=\"30\">\n                <\/div>\n                <input type=\"number\" id=\"minutesStandingPerDay\" class=\"slider-value\" min=\"0\" value=\"30\">\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"question-col\">\n            <div class=\"form-group\">\n              <label for=\"averageRatePerHour\">What&#8217;s your average rate per hour?<\/label>\n              <div class=\"currency-input-wrapper\">\n                <span class=\"currency-symbol\">\u00a3<\/span>\n                <input type=\"number\" id=\"averageRatePerHour\" class=\"currency-input\" min=\"10\" value=\"20\">\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <div class=\"form-group\">\n          <label for=\"transportWorkingDaysPerWeek\">How many days per week do your vehicles operate?<\/label>\n          <div class=\"slider-with-value\">\n            <div class=\"slider-container\">\n              <input type=\"range\" id=\"transportWorkingDaysPerWeekRange\" min=\"1\" max=\"7\" value=\"5\">\n            <\/div>\n            <input type=\"number\" id=\"transportWorkingDaysPerWeek\" class=\"slider-value\" min=\"1\" max=\"7\" value=\"5\">\n          <\/div>\n        <\/div>\n        \n        <div class=\"standing-time-cost\">\n          <strong>Cost of demurrage per year:<\/strong>\n          <span id=\"standingTimeCost\">\u00a30.00<\/span>\n        <\/div>\n        \n        <div class=\"calculation-note\">\n          Based on: <span id=\"standingTimeCalc\"><\/span>\n        <\/div>\n        \n        <div class=\"button-group\">\n          <button class=\"button button-prev prev-card\" data-prev=\"transport-private-mileage-card\" onclick=\"QCalc.prevCard(event, 'transport')\">Previous<\/button>\n          <button class=\"button button-next next-card\" data-next=\"idle-time-card\" onclick=\"QCalc.nextCard(event, 'transport')\">Next<\/button>\n        <\/div>\n      <\/div>\n      \n      <!-- Idle Time (third for transport) -->\n      <div class=\"calculator-card\" id=\"idle-time-card\">\n        <div class=\"section-header\">\n          <h3>Idle Time Reduction<\/h3>\n          <div class=\"tooltip\" data-tooltip=\"Reducing vehicle idle time saves fuel and increases productivity\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"><\/path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"><\/line>\n            <\/svg>\n          <\/div>\n        <\/div>\n        \n        <p>Vehicles with engines running while stationary waste fuel, create unnecessary emissions, and represent unproductive time. Quartix tracking helps identify and reduce these instances.<\/p>\n        \n        <div class=\"checkbox-group\">\n          <div class=\"checkbox-item\">\n            <label>\n              <input type=\"checkbox\" id=\"noStartStop\" onchange=\"QCalc.toggleFuelCostQuestion(event)\">\n              <span>My fleet vehicles do NOT have start-stop technology<\/span>\n            <\/label>\n            <div class=\"checkbox-description\">\n              Start-stop technology automatically turns off the engine when the vehicle is stationary, reducing fuel consumption during idle time. Most modern vehicles (2015+) have this feature.\n            <\/div>\n          <\/div>\n          \n          <div class=\"checkbox-item\">\n            <label>\n              <input type=\"checkbox\" id=\"usesPTO\" onchange=\"QCalc.togglePTOStatus(event)\">\n              <span>My fleet uses PTO (Power Take-Off) systems<\/span>\n            <\/label>\n            <div class=\"checkbox-description\">\n              PTO systems power auxiliary equipment while the vehicle is stationary. Examples include cement mixers, bed lifts, flatbed tilt walls, or compressors.\n            <\/div>\n            <div class=\"pto-instruction\" id=\"transportPTOInstruction\">\n              Please ensure that minutes spent in PTO mode are NOT included in the daily idling time you enter below. Tracking data will display PTO events separately, but this calculator only estimates fuel used during true idle (stationary with engine running, not working).\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <div class=\"form-group\">\n          <label for=\"minutesIdlePerDay\">Minutes idle per day per vehicle<\/label>\n          <div class=\"slider-with-value\">\n            <div class=\"slider-container\">\n              <input type=\"range\" id=\"minutesIdlePerDayRange\" min=\"0\" max=\"120\" value=\"20\">\n            <\/div>\n            <input type=\"number\" id=\"minutesIdlePerDay\" class=\"slider-value\" min=\"0\" value=\"20\">\n          <\/div>\n        <\/div>\n        \n        <div class=\"idle-time-cost\">\n          <strong>Cost of idle time per year:<\/strong>\n          <span id=\"idleTimeCost\">\u00a30.00<\/span>\n        <\/div>\n        \n        <div class=\"calculation-note\">\n          Based on: <span id=\"idleTimeCalc\"><\/span>\n        <\/div>\n        \n        <div class=\"button-group\">\n          <button class=\"button button-prev prev-card\" data-prev=\"standing-time-card\" onclick=\"QCalc.prevCard(event, 'transport')\">Previous<\/button>\n          <button class=\"button button-next next-card\" data-next=\"extra-jobs-card\" onclick=\"QCalc.nextCard(event, 'transport')\">Next<\/button>\n        <\/div>\n      <\/div>\n      \n      <!-- Extra Jobs -->\n      <div class=\"calculator-card\" id=\"extra-jobs-card\">\n        <div class=\"section-header\">\n          <h3>Additional Job Opportunities<\/h3>\n          <div class=\"tooltip\" data-tooltip=\"Missing out on extra jobs due to inefficient drivers leads to lost revenue\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n              <path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"><\/path>\n              <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"><\/line>\n            <\/svg>\n          <\/div>\n        <\/div>\n        \n        <p>Missing out on extra jobs due to unproductive and inefficient drivers leads to losing hundreds, if not thousands of pounds. Quartix tracking helps you optimize routes and driver assignments.<\/p>\n        \n        <div class=\"question-row\">\n          <div class=\"question-col\">\n            <div class=\"form-group\">\n              <label for=\"potentialExtraJobsPerWeek\">How many extra jobs could you fit in per week?<\/label>\n              <div class=\"slider-with-value\">\n                <div class=\"slider-container\">\n                  <input type=\"range\" id=\"potentialExtraJobsPerWeekRange\" min=\"0\" max=\"20\" value=\"2\">\n                <\/div>\n                <input type=\"number\" id=\"potentialExtraJobsPerWeek\" class=\"slider-value\" min=\"0\" value=\"2\">\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"question-col\">\n            <div class=\"form-group\">\n              <label for=\"extraJobValue\">How much is an average job worth?<\/label>\n              <div class=\"currency-input-wrapper\">\n                <span class=\"currency-symbol\">\u00a3<\/span>\n                <input type=\"number\" id=\"extraJobValue\" class=\"currency-input\" min=\"50\" value=\"150\">\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <div class=\"extra-jobs-cost\">\n          <strong>Cost of missed jobs per year:<\/strong>\n          <span id=\"extraJobsCost\">\u00a30.00<\/span>\n        <\/div>\n        \n        <div class=\"calculation-note\">\n          Based on: <span id=\"extraJobsCalc\"><\/span>\n        <\/div>\n        \n        <div class=\"button-group\">\n          <button class=\"button button-prev prev-card\" data-prev=\"idle-time-card\" onclick=\"QCalc.prevCard(event, 'transport')\">Previous<\/button>\n          <button class=\"button button-next\" id=\"transport-calculate-results\" onclick=\"QCalc.goToContactForm(event)\">Calculate Savings<\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Contact form moved to before results section -->\n  <div class=\"calculator-section\" id=\"section-3\">\n    <div class=\"contact-form\">\n      <h3>Your Contact Information<\/h3>\n      <p>Please provide your details to receive your personalized savings report.<\/p>\n      \n      <div class=\"form-row\">\n        <div class=\"form-col\">\n          <div class=\"form-group\">\n            <label for=\"firstName\">First Name *<\/label>\n            <input type=\"text\" id=\"firstName\" required>\n            <div class=\"error-message\" id=\"firstName-error\">Please enter your first name<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"form-col\">\n          <div class=\"form-group\">\n            <label for=\"lastName\">Last Name *<\/label>\n            <input type=\"text\" id=\"lastName\" required>\n            <div class=\"error-message\" id=\"lastName-error\">Please enter your last name<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      \n      <div class=\"form-group\">\n        <label for=\"companyName\">Company Name *<\/label>\n        <input type=\"text\" id=\"companyName\" required>\n        <div class=\"error-message\" id=\"companyName-error\">Please enter your company name<\/div>\n      <\/div>\n      \n      <div class=\"form-row\">\n        <div class=\"form-col\">\n          <div class=\"form-group\">\n            <label for=\"email\">Business Email *<\/label>\n            <input type=\"email\" id=\"email\" required>\n            <div class=\"error-message\" id=\"email-error\">Please enter a valid email address<\/div>\n            <div class=\"email-note\">We need your email address to send you the results<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"form-col\">\n          <div class=\"form-group\">\n            <label for=\"phone\">Phone Number (Optional)<\/label>\n            <div class=\"phone-input-container\">\n              <!-- Fixed UK country code -->\n              <div class=\"country-code-selector\">\n                <div class=\"country-code-dropdown\" id=\"country-code-dropdown\">\n                  <img decoding=\"async\" src=\"https:\/\/flagcdn.com\/w40\/gb.png\" alt=\"UK Flag\" class=\"country-flag\" id=\"selected-flag\">\n                  <span id=\"selected-code\">+44<\/span>\n                <\/div>\n                <div class=\"country-code-options\" id=\"country-code-options\">\n                  <div class=\"country-code-option\" data-code=\"+44\" data-flag=\"gb\" onclick=\"QCalc.selectCountryCode(event, '+44', 'gb')\">\n                    <img decoding=\"async\" src=\"https:\/\/flagcdn.com\/w40\/gb.png\" alt=\"UK Flag\" class=\"country-flag\">\n                    <span>+44 (UK)<\/span>\n                  <\/div>\n                  <div class=\"country-code-option\" data-code=\"+1\" data-flag=\"us\" onclick=\"QCalc.selectCountryCode(event, '+1', 'us')\">\n                    <img decoding=\"async\" src=\"https:\/\/flagcdn.com\/w40\/us.png\" alt=\"US Flag\" class=\"country-flag\">\n                    <span>+1 (US)<\/span>\n                  <\/div>\n                  <div class=\"country-code-option\" data-code=\"+353\" data-flag=\"ie\" onclick=\"QCalc.selectCountryCode(event, '+353', 'ie')\">\n                    <img decoding=\"async\" src=\"https:\/\/flagcdn.com\/w40\/ie.png\" alt=\"Ireland Flag\" class=\"country-flag\">\n                    <span>+353 (Ireland)<\/span>\n                  <\/div>\n                  <div class=\"country-code-option\" data-code=\"+34\" data-flag=\"es\" onclick=\"QCalc.selectCountryCode(event, '+34', 'es')\">\n                    <img decoding=\"async\" src=\"https:\/\/flagcdn.com\/w40\/es.png\" alt=\"Spain Flag\" class=\"country-flag\">\n                    <span>+34 (Spain)<\/span>\n                  <\/div>\n                  <div class=\"country-code-option\" data-code=\"+39\" data-flag=\"it\" onclick=\"QCalc.selectCountryCode(event, '+39', 'it')\">\n                    <img decoding=\"async\" src=\"https:\/\/flagcdn.com\/w40\/it.png\" alt=\"Italy Flag\" class=\"country-flag\">\n                    <span>+39 (Italy)<\/span>\n                  <\/div>\n                  <div class=\"country-code-option\" data-code=\"+49\" data-flag=\"de\" onclick=\"QCalc.selectCountryCode(event, '+49', 'de')\">\n                    <img decoding=\"async\" src=\"https:\/\/flagcdn.com\/w40\/de.png\" alt=\"Germany Flag\" class=\"country-flag\">\n                    <span>+49 (Germany)<\/span>\n                  <\/div>\n                  <div class=\"country-code-option\" data-code=\"+48\" data-flag=\"pl\" onclick=\"QCalc.selectCountryCode(event, '+48', 'pl')\">\n                    <img decoding=\"async\" src=\"https:\/\/flagcdn.com\/w40\/pl.png\" alt=\"Poland Flag\" class=\"country-flag\">\n                    <span>+48 (Poland)<\/span>\n                  <\/div>\n                <\/div>\n                <input type=\"hidden\" id=\"countryCode\" value=\"+44\">\n                <input type=\"hidden\" id=\"currencySymbol\" value=\"\u00a3\">\n                <input type=\"hidden\" id=\"unformattedPhoneNumber\" value=\"\">\n              <\/div>\n              <input type=\"tel\" id=\"phone\" placeholder=\"7700 900000\" style=\"flex: 1;\">\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      \n      <div class=\"form-group\">\n        <label for=\"referralSource\">How did you hear about us? *<\/label>\n        <select id=\"referralSource\" required>\n          <option value=\"\">Please select&#8230;<\/option>\n          <option value=\"google\">Google Search<\/option>\n          <option value=\"bing\">Bing<\/option>\n          <option value=\"facebook\">Facebook<\/option>\n          <option value=\"linkedin\">LinkedIn<\/option>\n          <option value=\"twitter\">X (formerly Twitter)<\/option>\n          <option value=\"ai\">AI Search (ChatGPT, Perplexity, Mistral, Grok)<\/option>\n          <option value=\"word-of-mouth\">Word of Mouth<\/option>\n          <option value=\"tiktok\">TikTok<\/option>\n          <option value=\"youtube\">YouTube<\/option>\n          <option value=\"trade-show\">Trade Show \/ Exhibition<\/option>\n          <option value=\"magazine\">Magazine \/ Publication<\/option>\n          <option value=\"partner\">Partner Referral<\/option>\n          <option value=\"other\">Other<\/option>\n        <\/select>\n        <div class=\"error-message\" id=\"referralSource-error\">Please select how you heard about us<\/div>\n      <\/div>\n      \n      <div class=\"button-group\">\n        <button class=\"button button-prev\" id=\"back-to-calculator\" onclick=\"QCalc.goToStep(2)\">Back to Calculator<\/button>\n        <button class=\"button button-next\" id=\"submit-form\" onclick=\"QCalc.submitForm(event)\">View Results<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Results Section -->\n  <div class=\"calculator-section\" id=\"section-4\">\n    <div class=\"results-card\">\n      <img decoding=\"async\" src=\"https:\/\/www.quartix.com\/content\/uploads\/2019\/02\/quartix-logo-eur.svg\" alt=\"Quartix Logo\" class=\"quartix-logo\">\n      <h2>Your Potential Savings with Quartix<\/h2>\n      \n      <div class=\"results-timestamp\" id=\"resultsTimestamp\">\n        <!-- Will be dynamically updated with current date -->\n        Results calculated on [Current Date]\n      <\/div>\n      \n      <div class=\"personal-greeting\">\n        <p>Hello <span id=\"resultName\">there<\/span>, based on the information you provided for <span id=\"resultCompany\">your company<\/span>, here&#8217;s how much you could save with Quartix vehicle tracking:<\/p>\n      <\/div>\n      \n      <div class=\"total-savings\" id=\"totalSavings\">\u00a30.00<\/div>\n      <p>Total Annual Savings<\/p>\n      \n      <div class=\"savings-period\">\n        <div class=\"period-item\">\n          <div class=\"period-value\" id=\"weeklySavings\">\u00a30.00<\/div>\n          <div class=\"period-label\">Weekly Savings<\/div>\n        <\/div>\n        <div class=\"period-item\">\n          <div class=\"period-value\" id=\"dailySavings\">\u00a30.00<\/div>\n          <div class=\"period-label\">Daily Savings<\/div>\n        <\/div>\n      <\/div>\n      \n      <div class=\"roi-section\">\n        <h3>Return on Investment Analysis<\/h3>\n        <div class=\"roi-details\">\n          <div class=\"roi-item\">\n            <div class=\"roi-label\">Average cost per vehicle:<\/div>\n            <div class=\"roi-value\"><span id=\"costPerVehicle\">\u00a311.00<\/span> per month (plus VAT)<\/div>\n          <\/div>\n          <div class=\"roi-item\">\n            <div class=\"roi-label\">Total monthly cost for your fleet:<\/div>\n            <div class=\"roi-value\"><span id=\"totalMonthlyCost\">\u00a30.00<\/span> (plus VAT)<\/div>\n          <\/div>\n          <div class=\"roi-item\">\n            <div class=\"roi-label\">Monthly savings:<\/div>\n            <div class=\"roi-value\"><span id=\"monthlySavings\">\u00a30.00<\/span><\/div>\n          <\/div>\n          <div class=\"roi-item highlight\">\n            <div class=\"roi-label\">Return on Investment:<\/div>\n            <div class=\"roi-value\"><span id=\"roiValue\">0%<\/span><\/div>\n          <\/div>\n        <\/div>\n        <div class=\"roi-payback\">\n          <p>On average, our customers take up a 36-month contract. Based on your savings, the system would pay for itself within approximately <span id=\"paybackPeriod\">0<\/span> month of the full term.<\/p>\n        <\/div>\n      <\/div>\n      \n      <div class=\"savings-breakdown\" id=\"savingsBreakdown\">\n        <!-- This will be populated by JavaScript -->\n      <\/div>\n      \n      <div class=\"share-results\">\n        <button class=\"share-button copy-link\" id=\"copyResultsLink\" onclick=\"QCalc.copyResultsLink(event)\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"><\/path>\n            <path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"><\/path>\n          <\/svg>\n          Copy Results Link\n        <\/button>\n      <\/div>\n    <\/div>\n    \n    <div class=\"link-copied-notification\" id=\"linkCopiedNotification\">\n      Results link copied to clipboard!\n    <\/div>\n    \n    <div class=\"button-group\">\n      <button class=\"button button-prev\" id=\"back-to-contact-form\" onclick=\"QCalc.goToStep(3)\">Back to Form<\/button>\n      <button class=\"button button-reset\" id=\"reset-calculator\" onclick=\"QCalc.resetCalculator(event)\">Reset Calculator<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Hidden CF7 Form Container -->\n  <div id=\"hidden-cf7-forms\" style=\"display: none;\">\n    <!-- UK form only -->\n    <div id=\"uk-cf7-form\">\n      \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f119787-o1\" lang=\"en-GB\" dir=\"ltr\" data-wpcf7-id=\"119787\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/en-gb\/wp-json\/wp\/v2\/pages\/123167#wpcf7-f119787-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"119787\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_GB\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f119787-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7cf_hidden_group_fields\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_hidden_groups\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_visible_groups\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_repeaters\" value=\"[]\" \/><input type=\"hidden\" name=\"_wpcf7cf_steps\" value=\"{}\" \/><input type=\"hidden\" name=\"_wpcf7cf_options\" value=\"{&quot;form_id&quot;:119787,&quot;conditions&quot;:[],&quot;settings&quot;:{&quot;animation&quot;:&quot;yes&quot;,&quot;animation_intime&quot;:200,&quot;animation_outtime&quot;:200,&quot;conditions_ui&quot;:&quot;normal&quot;,&quot;notice_dismissed&quot;:false,&quot;notice_dismissed_update-cf7-6.0&quot;:true,&quot;notice_dismissed_update-cf7-6.0.1&quot;:true,&quot;notice_dismissed_update-cf7-6.0.2&quot;:true,&quot;notice_dismissed_rollback-cf7-6.0.5&quot;:true}}\" \/><input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/fieldset>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"first_name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"First Name\" value=\"\" type=\"text\" name=\"first_name\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"last_name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Last Name\" value=\"\" type=\"text\" name=\"last_name\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"company_name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Company Name\" value=\"\" type=\"text\" name=\"company_name\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Business Email\" value=\"\" type=\"email\" name=\"email\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"country_code\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" aria-invalid=\"false\" placeholder=\"Country Code\" value=\"\" type=\"text\" name=\"country_code\" \/><\/span>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"phone\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-text wpcf7-validates-as-tel\" aria-invalid=\"false\" placeholder=\"Phone Number\" value=\"\" type=\"tel\" name=\"phone\" \/><\/span>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"unformatted_phone_number\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"total_vehicles\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"total_employees\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"referral_source\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"business_type\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"total_annual_savings\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"monthly_savings\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"weekly_savings\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"daily_savings\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"monthly_cost\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"cost_per_vehicle\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"roi_percentage\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"payback_period_months\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"currency\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"calculation_date\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"private_mileage_savings\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"time_accountability_savings\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"idle_time_savings\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"reactive_work_savings\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"billing_disputes_savings\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"demurrage_savings\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"extra_jobs_savings\" \/>\n<input class=\"wpcf7-form-control wpcf7-hidden\" value=\"\" type=\"hidden\" name=\"result_parameters\" \/>\n<input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Send Results\" \/><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\n    <\/div>\n  <\/div>\n\n  <script nonce=\"\">\n    \/\/ Create a namespace for the calculator to avoid conflicts\n    var QCalc = (function() {\n      \/\/ Global variables\n      let businessType = 'service';\n      let currentServiceCard = 'private-mileage-card';\n      let currentTransportCard = 'transport-private-mileage-card';\n      let resultTimestamp = new Date();\n      let currencySymbol = '\u00a3';\n      let totalCardsInSection = {\n        service: 5,\n        transport: 4\n      };\n      let currentCardIndex = {\n        service: 0,\n        transport: 0\n      };\n      \n      \/\/ Countries that should remove leading zero\n      const countriesRemoveLeadingZero = ['+44', '+49', '+353'];\n      \n      let calculatorData = {\n        service: {\n          privateMileage: {\n            vehiclesUsedPrivately: 2,\n            averagePrivateMilesPerWeek: 50,\n            averageMPG: 38,\n            fuelCostPerLitre: 1.43\n          },\n          reactiveWork: {\n            missedJobsPerWeek: 3,\n            averageJobPrice: 150\n          },\n          billingDisputes: {\n            disputesPerMonth: 2,\n            averageDisputeCost: 100\n          },\n          timeOnSite: {\n            employeeHourlyRate: 15,\n            minutesLostPerDay: 30,\n            workingDaysPerWeek: 5\n          },\n          idleTime: {\n            minutesIdlePerDay: 20,\n            hasStartStop: true,\n            usesPTO: false\n          }\n        },\n        transport: {\n          privateMileage: {\n            vehiclesUsedPrivately: 2,\n            averagePrivateMilesPerWeek: 50,\n            averageMPG: 38,\n            fuelCostPerLitre: 1.43\n          },\n          idleTime: {\n            minutesIdlePerDay: 20,\n            hasStartStop: true,\n            usesPTO: false\n          },\n          standingTime: {\n            minutesStandingPerDay: 30,\n            averageRatePerHour: 20,\n            workingDaysPerWeek: 5\n          },\n          extraJobs: {\n            potentialExtraJobsPerWeek: 2,\n            extraJobValue: 150\n          }\n        },\n        common: {\n          totalVehicles: 5,\n          totalEmployees: 5\n        }\n      };\n      \n      \/\/ Initialize when document is loaded\n      document.addEventListener('DOMContentLoaded', initialize);\n      \n      function initialize() {\n        console.log('Quartix calculator initializing...');\n        \n        \/\/ Setup phone number formatting\n        setupPhoneNumberFormatting();\n        \n        \/\/ Setup country code selector\n        setupCountryCodeSelector();\n        \n        \/\/ Initialize slider values\n        updateAllSliders();\n        \n        \/\/ Calculate initial costs\n        calculateAllCosts();\n        \n        \/\/ Check if URL has result parameters\n        checkForResultsInURL();\n        \n        console.log('Calculator initialization complete');\n      }\n      \n      \/\/ Public methods (exposed to the outside)\n      return {\n        \/\/ Business type selection\n        selectBusinessType: function(e, type) {\n          e.preventDefault();\n          console.log('Business type selected:', type);\n          \n          \/\/ Update UI\n          document.querySelectorAll('#quartix-calculator-widget-2023 .business-type-option').forEach(opt => {\n            opt.classList.remove('active');\n          });\n          e.currentTarget.classList.add('active');\n          \n          \/\/ Update data\n          businessType = type;\n          \n          return false;\n        },\n        \n        \/\/ Select country code\n        selectCountryCode: function(e, code, flag) {\n          e.preventDefault();\n          e.stopPropagation();\n          \n          \/\/ Update display\n          document.getElementById('selected-code').textContent = code;\n          document.getElementById('selected-flag').src = `https:\/\/flagcdn.com\/w40\/${flag}.png`;\n          document.getElementById('countryCode').value = code;\n          \n          \/\/ Hide options\n          document.getElementById('country-code-options').style.display = 'none';\n          \n          \/\/ When country changes, re-format the phone number if needed\n          const phoneInput = document.getElementById('phone');\n          if (phoneInput && phoneInput.value) {\n            formatPhoneForCountry(phoneInput, code);\n          }\n          \n          return false;\n        },\n        \n        \/\/ Go to calculator step\n        goToCalculator: function(e) {\n          e.preventDefault();\n          console.log('Go to calculator clicked');\n          \n          if (validateInitialForm()) {\n            \/\/ Update common data from form inputs\n            calculatorData.common.totalVehicles = parseInt(document.getElementById('totalVehicles').value) || 5;\n            calculatorData.common.totalEmployees = parseInt(document.getElementById('totalEmployees').value) || 5;\n            \n            \/\/ Update the max value for vehiclesUsedPrivately slider based on totalVehicles\n            const totalVehicles = calculatorData.common.totalVehicles;\n            \n            \/\/ Service business private mileage\n            const vehiclesUsedPrivatelyRange = document.getElementById('vehiclesUsedPrivatelyRange');\n            const vehiclesUsedPrivately = document.getElementById('vehiclesUsedPrivately');\n            \n            if (vehiclesUsedPrivatelyRange && vehiclesUsedPrivately) {\n              vehiclesUsedPrivatelyRange.max = totalVehicles;\n              if (parseInt(vehiclesUsedPrivately.value) > totalVehicles) {\n                vehiclesUsedPrivately.value = totalVehicles;\n                vehiclesUsedPrivatelyRange.value = totalVehicles;\n                calculatorData.service.privateMileage.vehiclesUsedPrivately = totalVehicles;\n              }\n            }\n            \n            \/\/ Transport business private mileage\n            const transportVehiclesUsedPrivatelyRange = document.getElementById('transportVehiclesUsedPrivatelyRange');\n            const transportVehiclesUsedPrivately = document.getElementById('transportVehiclesUsedPrivately');\n            \n            if (transportVehiclesUsedPrivatelyRange && transportVehiclesUsedPrivately) {\n              transportVehiclesUsedPrivatelyRange.max = totalVehicles;\n              if (parseInt(transportVehiclesUsedPrivately.value) > totalVehicles) {\n                transportVehiclesUsedPrivately.value = totalVehicles;\n                transportVehiclesUsedPrivatelyRange.value = totalVehicles;\n                calculatorData.transport.privateMileage.vehiclesUsedPrivately = totalVehicles;\n              }\n            }\n            \n            goToStep(2);\n            \n            \/\/ Display appropriate calculator based on business type\n            if (businessType === 'service') {\n              document.getElementById('service-calculator').style.display = 'block';\n              document.getElementById('transport-calculator').style.display = 'none';\n              currentCardIndex.service = 0;\n              showCard('service', currentServiceCard);\n            } else {\n              document.getElementById('service-calculator').style.display = 'none';\n              document.getElementById('transport-calculator').style.display = 'block';\n              currentCardIndex.transport = 0;\n              showCard('transport', currentTransportCard);\n            }\n            \n            \/\/ Show and update calculator progress\n            const calcProgress = document.getElementById('calculator-progress');\n            if (calcProgress) {\n              calcProgress.classList.add('active');\n            }\n            updateMainProgressBar();\n            updateCalculatorProgress();\n          }\n          \n          return false;\n        },\n        \n        \/\/ Next card navigation\n        nextCard: function(e, businessType) {\n          e.preventDefault();\n          const nextCardId = e.currentTarget.getAttribute('data-next');\n          console.log('Next card:', nextCardId);\n          \n          currentCardIndex[businessType]++;\n          showCard(businessType, nextCardId);\n          updateMainProgressBar();\n          updateCalculatorProgress();\n          \n          return false;\n        },\n        \n        \/\/ Previous card navigation\n        prevCard: function(e, businessType) {\n          e.preventDefault();\n          const prevCardId = e.currentTarget.getAttribute('data-prev');\n          console.log('Previous card:', prevCardId);\n          \n          currentCardIndex[businessType]--;\n          showCard(businessType, prevCardId);\n          updateMainProgressBar();\n          updateCalculatorProgress();\n          \n          return false;\n        },\n        \n        \/\/ Go to contact form\n        goToContactForm: function(e) {\n          e.preventDefault();\n          console.log('Go to contact form clicked');\n          \n          \/\/ Check if URL contains \"mark-sales-demo\" or \"sales-demo\"\n          const urlParams = new URLSearchParams(window.location.search);\n          if (window.location.href.indexOf('mark-sales-demo') !== -1 || urlParams.has('sales-demo')) {\n            console.log('Sales demo detected - bypassing form');\n            \/\/ Skip form validation and go directly to results\n            calculateResults();\n            goToStep(4); \/\/ Go to results\n          } else {\n            resultTimestamp = new Date(); \/\/ Set timestamp\n            goToStep(3); \/\/ Go to contact form\n          }\n          \n          return false;\n        },\n        \n        \/\/ Submit form and show results\n        submitForm: function(e) {\n          e.preventDefault();\n          console.log('Submit form clicked');\n          \n          if (validateContactForm()) {\n            calculateResults();\n            goToStep(4); \/\/ Go to results\n            \n            \/\/ Check if sales-demo parameter is present - if so, skip CF7 submission\n            const urlParams = new URLSearchParams(window.location.search);\n            if (!urlParams.has('sales-demo')) {\n              \/\/ Only submit to CF7 if NOT a sales demo\n              setTimeout(transferDataToCF7, 500);\n            } else {\n              console.log('Sales demo mode - skipping CF7 submission');\n            }\n          }\n          \n          return false;\n        },\n        \n        \/\/ Go to a specific step directly\n        goToStep: function(step) {\n          console.log('Go to step:', step);\n          goToStep(step);\n        },\n        \n        \/\/ Copy results link\n        copyResultsLink: function(e) {\n          e.preventDefault();\n          console.log('Copy results link clicked');\n          \n          \/\/ Get current results from the displayed elements\n          const totalSavingsText = document.getElementById('totalSavings').textContent;\n          const totalSavings = parseFloat(totalSavingsText.replace(\/[^\\d.]\/g, '')) || 0;\n          const monthlySavings = Math.round(totalSavings \/ 12);\n          \n          \/\/ Get the displayed name and company from results page\n          const resultNameElement = document.getElementById('resultName');\n          const resultCompanyElement = document.getElementById('resultCompany');\n          const prospectName = resultNameElement ? resultNameElement.textContent : 'Customer';\n          const companyName = resultCompanyElement ? resultCompanyElement.textContent : 'Company';\n          \n          \/\/ Create simple query parameters\n          const queryParams = new URLSearchParams({\n            savings: totalSavings,\n            monthly: monthlySavings,\n            vehicles: calculatorData.common.totalVehicles,\n            type: businessType,\n            date: resultTimestamp.toISOString(),\n            company: companyName,\n            person: prospectName\n          });\n          \n          \/\/ Build the FULL URL with current page URL + parameters\n          const currentUrl = window.location.href.split('?')[0]; \/\/ Remove any existing query params\n          const fullUrl = currentUrl + '?' + queryParams.toString();\n          \n          console.log('Copying URL:', fullUrl);\n          \n          \/\/ Copy URL to clipboard\n          if (navigator.clipboard && navigator.clipboard.writeText) {\n            navigator.clipboard.writeText(fullUrl).then(function() {\n              console.log('URL copied successfully via clipboard API');\n              const notification = document.getElementById('linkCopiedNotification');\n              notification.classList.add('show');\n              \n              setTimeout(function() {\n                notification.classList.remove('show');\n              }, 3000);\n            }).catch(function(err) {\n              console.error('Failed to copy URL via clipboard API:', err);\n              fallbackCopyToClipboard(fullUrl);\n            });\n          } else {\n            fallbackCopyToClipboard(fullUrl);\n          }\n          \n          return false;\n        },\n        \n        \/\/ Reset calculator\n        resetCalculator: function(e) {\n          e.preventDefault();\n          console.log('Reset calculator clicked');\n          \n          resetCalculator();\n          goToStep(1);\n          \n          return false;\n        },\n        \n        \/\/ Toggle fuel cost question based on start-stop technology\n        toggleFuelCostQuestion: function(e) {\n          const checkbox = e.target;\n          \n          if (checkbox.checked) {\n            \/\/ No start-stop technology\n            calculatorData.transport.idleTime.hasStartStop = false;\n          } else {\n            \/\/ Has start-stop technology\n            calculatorData.transport.idleTime.hasStartStop = true;\n          }\n          \n          \/\/ Recalculate idle time cost\n          calculateSectionCost('idleTime');\n        },\n        \n        \/\/ Toggle PTO status\n        togglePTOStatus: function(e) {\n          const checkbox = e.target;\n          calculatorData.transport.idleTime.usesPTO = checkbox.checked;\n          \n          \/\/ Show\/hide PTO instruction\n          const ptoInstruction = document.getElementById('transportPTOInstruction');\n          if (ptoInstruction) {\n            if (checkbox.checked) {\n              ptoInstruction.classList.add('show');\n            } else {\n              ptoInstruction.classList.remove('show');\n            }\n          }\n          \n          \/\/ Note: PTO status no longer affects calculation\n        },\n        \n        \/\/ Toggle service start-stop\n        toggleServiceStartStop: function(e) {\n          const checkbox = e.target;\n          calculatorData.service.idleTime.hasStartStop = !checkbox.checked;\n          \n          \/\/ Recalculate idle time cost\n          calculateSectionCost('serviceIdleTime');\n        },\n        \n        \/\/ Toggle service PTO\n        toggleServicePTO: function(e) {\n          const checkbox = e.target;\n          calculatorData.service.idleTime.usesPTO = checkbox.checked;\n          \n          \/\/ Show\/hide PTO instruction\n          const ptoInstruction = document.getElementById('servicePTOInstruction');\n          if (ptoInstruction) {\n            if (checkbox.checked) {\n              ptoInstruction.classList.add('show');\n            } else {\n              ptoInstruction.classList.remove('show');\n            }\n          }\n          \n          \/\/ Recalculate idle time cost\n          calculateSectionCost('serviceIdleTime');\n        }\n      };\n      \n      \/\/ Private functions\n      \n      \/\/ Format phone for specific country\n      function formatPhoneForCountry(phoneInput, countryCode) {\n        const unformattedInput = document.getElementById('unformattedPhoneNumber');\n        \n        \/\/ Get the unformatted value or current value\n        let originalValue = unformattedInput.value || phoneInput.value;\n        \n        \/\/ If country should remove leading zero and the number starts with 0\n        if (countriesRemoveLeadingZero.includes(countryCode)) {\n          if (originalValue.startsWith('0')) {\n            phoneInput.value = originalValue.substring(1);\n          }\n        } else {\n          \/\/ For countries that keep the leading zero (like Italy), restore it\n          phoneInput.value = originalValue;\n        }\n      }\n      \n      \/\/ Update calculator section progress\n      function updateCalculatorProgress() {\n        const currentType = businessType;\n        const currentIndex = currentCardIndex[currentType];\n        const totalCards = totalCardsInSection[currentType];\n        \n        \/\/ Calculate percentage\n        const percentage = Math.round(((currentIndex + 1) \/ totalCards) * 100);\n        \n        \/\/ Update percentage display\n        const percentageElement = document.getElementById('calculator-percentage');\n        if (percentageElement) {\n          percentageElement.textContent = percentage + '%';\n        }\n        \n        \/\/ Update progress bar fill\n        const progressFill = document.getElementById('calculator-progress-fill');\n        if (progressFill) {\n          progressFill.style.width = percentage + '%';\n        }\n      }\n      \n      \/\/ Update main progress bar based on current position\n      function updateMainProgressBar() {\n        const progressSteps = document.querySelectorAll('#quartix-calculator-widget-2023 .progress-step');\n        \n        \/\/ Clear all progress states\n        progressSteps.forEach(step => {\n          step.classList.remove('active', 'completed');\n        });\n        \n        \/\/ Step 1 is always completed when we're past it\n        if (goToStep.currentStep > 1) {\n          progressSteps[0].classList.add('completed');\n        } else {\n          progressSteps[0].classList.add('active');\n        }\n        \n        \/\/ Handle step 2 (Calculate Savings)\n        if (goToStep.currentStep === 2) {\n          progressSteps[1].classList.add('active');\n          \/\/ Show calculator progress bar\n          const calcProgress = document.getElementById('calculator-progress');\n          if (calcProgress) {\n            calcProgress.classList.add('active');\n          }\n          updateCalculatorProgress();\n        } else if (goToStep.currentStep > 2) {\n          progressSteps[1].classList.add('completed');\n          \/\/ Hide calculator progress bar\n          const calcProgress = document.getElementById('calculator-progress');\n          if (calcProgress) {\n            calcProgress.classList.remove('active');\n          }\n        }\n        \n        \/\/ Steps 3 and 4\n        if (goToStep.currentStep === 3) {\n          progressSteps[2].classList.add('active');\n        } else if (goToStep.currentStep > 3) {\n          progressSteps[2].classList.add('completed');\n        }\n        \n        if (goToStep.currentStep === 4) {\n          progressSteps[3].classList.add('active');\n        }\n      }\n      \n      \/\/ Fallback copy to clipboard function\n      function fallbackCopyToClipboard(text) {\n        const textArea = document.createElement('textarea');\n        textArea.value = text;\n        textArea.style.position = 'fixed';\n        textArea.style.top = '0';\n        textArea.style.left = '0';\n        textArea.style.width = '2em';\n        textArea.style.height = '2em';\n        textArea.style.padding = '0';\n        textArea.style.border = 'none';\n        textArea.style.outline = 'none';\n        textArea.style.boxShadow = 'none';\n        textArea.style.background = 'transparent';\n        \n        document.body.appendChild(textArea);\n        textArea.focus();\n        textArea.select();\n        \n        try {\n          const successful = document.execCommand('copy');\n          console.log('Fallback copy ' + (successful ? 'successful' : 'failed'));\n          \n          const notification = document.getElementById('linkCopiedNotification');\n          notification.classList.add('show');\n          \n          setTimeout(function() {\n            notification.classList.remove('show');\n          }, 3000);\n        } catch (err) {\n          console.error('Fallback copy failed:', err);\n          \/\/ As last resort, show the URL to the user\n          prompt('Copy this link:', text);\n        }\n        \n        document.body.removeChild(textArea);\n      }\n      \n      \/\/ Check for results in URL\n      function checkForResultsInURL() {\n        const urlParams = new URLSearchParams(window.location.search);\n        \n        \/\/ Check for simple parameters first\n        if (urlParams.has('savings')) {\n          console.log('Found simple parameters in URL');\n          \n          \/\/ Reconstruct basic data from parameters\n          const savedData = {\n            totalSavings: parseFloat(urlParams.get('savings')) || 0,\n            monthlySavings: parseInt(urlParams.get('monthly')) || 0,\n            totalVehicles: parseInt(urlParams.get('vehicles')) || 5,\n            businessType: urlParams.get('type') || 'service',\n            calculationDate: urlParams.get('date') || new Date().toISOString(),\n            companyName: urlParams.get('company') || 'your company',\n            prospectName: urlParams.get('person') || 'there'\n          };\n          \n          \/\/ Update the results display\n          document.getElementById('totalSavings').textContent = currencySymbol + formatNumber(savedData.totalSavings.toFixed(2));\n          document.getElementById('weeklySavings').textContent = currencySymbol + formatNumber((savedData.totalSavings \/ 52).toFixed(2));\n          document.getElementById('dailySavings').textContent = currencySymbol + formatNumber((savedData.totalSavings \/ 365).toFixed(2));\n          document.getElementById('monthlySavings').textContent = currencySymbol + formatNumber(savedData.monthlySavings.toFixed(2));\n          \n          \/\/ Update greeting\n          document.getElementById('resultName').textContent = savedData.prospectName;\n          document.getElementById('resultCompany').textContent = savedData.companyName;\n          \n          \/\/ Calculate and display ROI\n          const costPerVehicle = 11;\n          const totalMonthlyCost = costPerVehicle * savedData.totalVehicles;\n          const roi = (savedData.monthlySavings \/ totalMonthlyCost) * 100;\n          const paybackPeriodMonths = Math.ceil(totalMonthlyCost \/ savedData.monthlySavings);\n          \n          \/\/ Update ROI display elements\n          document.getElementById('costPerVehicle').textContent = currencySymbol + formatNumber(costPerVehicle.toFixed(2));\n          document.getElementById('totalMonthlyCost').textContent = currencySymbol + formatNumber(totalMonthlyCost.toFixed(2));\n          document.getElementById('roiValue').textContent = Math.round(roi) + '%';\n          document.getElementById('paybackPeriod').textContent = paybackPeriodMonths.toString();\n          \n          \/\/ Calculate time since submission\n          const submissionDate = new Date(savedData.calculationDate);\n          const daysSince = Math.floor((new Date() - submissionDate) \/ (1000 * 60 * 60 * 24));\n          \n          \/\/ Update timestamp with \"what you could have saved\" message\n          const timestampElement = document.getElementById('resultsTimestamp');\n          if (timestampElement) {\n            if (daysSince > 0) {\n              const additionalSavings = (savedData.totalSavings \/ 365) * daysSince;\n              timestampElement.innerHTML = `Welcome back! Based on your calculation on ${submissionDate.toLocaleDateString('en-GB', {\n                day: 'numeric',\n                month: 'long',\n                year: 'numeric'\n              })}, you could have saved an additional <strong>${currencySymbol}${formatNumber(additionalSavings.toFixed(2))}<\/strong> by now with Quartix.`;\n            } else {\n              timestampElement.textContent = 'Results calculated on ' + submissionDate.toLocaleDateString('en-GB', {\n                day: 'numeric',\n                month: 'long',\n                year: 'numeric'\n              });\n            }\n          }\n          \n          \/\/ Hide \"Back to Form\" button when revisiting results\n          const backToFormButton = document.getElementById('back-to-contact-form');\n          if (backToFormButton) {\n            backToFormButton.style.display = 'none';\n          }\n          \n          \/\/ Add a simple savings breakdown for return visits\n          const savingsBreakdownElement = document.getElementById('savingsBreakdown');\n          if (savingsBreakdownElement) {\n            savingsBreakdownElement.innerHTML = `\n              <div class=\"savings-item\">\n                <h4>Total Savings Opportunity<\/h4>\n                <div class=\"savings-amount\">${currencySymbol}${formatNumber(savedData.totalSavings.toFixed(2))}<\/div>\n              <\/div>\n              <div class=\"savings-item\">\n                <h4>Fleet Size<\/h4>\n                <div class=\"savings-amount\">${savedData.totalVehicles} vehicles<\/div>\n              <\/div>\n              <div class=\"savings-item\">\n                <h4>Business Type<\/h4>\n                <div class=\"savings-amount\">${savedData.businessType === 'service' ? 'Service\/Site-Based' : 'Transport'}<\/div>\n              <\/div>\n            `;\n          }\n          \n          \/\/ Jump to results\n          setTimeout(function() {\n            goToStep(4);\n          }, 500);\n          \n          return true;\n        }\n      }\n      \n      \/\/ Setup country code selector\n      function setupCountryCodeSelector() {\n        const dropdown = document.getElementById('country-code-dropdown');\n        const options = document.getElementById('country-code-options');\n        \n        if (!dropdown || !options) return;\n        \n        \/\/ Toggle dropdown\n        dropdown.addEventListener('click', function(e) {\n          e.preventDefault();\n          e.stopPropagation();\n          options.style.display = options.style.display === 'block' ? 'none' : 'block';\n          return false;\n        });\n        \n        \/\/ Close dropdown when clicking outside\n        document.addEventListener('click', function(e) {\n          if (!dropdown.contains(e.target) && !options.contains(e.target)) {\n            options.style.display = 'none';\n          }\n        });\n      }\n      \n      \/\/ Setup phone number auto-formatting\n      function setupPhoneNumberFormatting() {\n        const phoneInput = document.getElementById('phone');\n        const unformattedPhoneInput = document.getElementById('unformattedPhoneNumber');\n        const countryCodeInput = document.getElementById('countryCode');\n        \n        if (!phoneInput) return;\n        \n        phoneInput.addEventListener('input', function() {\n          \/\/ Store the original value with leading zero\n          if (unformattedPhoneInput) {\n            unformattedPhoneInput.value = this.value;\n          }\n          \n          \/\/ Get current country code\n          const currentCountryCode = countryCodeInput ? countryCodeInput.value : '+44';\n          \n          \/\/ Only remove leading zero for specific countries\n          if (countriesRemoveLeadingZero.includes(currentCountryCode)) {\n            if (this.value.startsWith('0')) {\n              this.value = this.value.substring(1);\n            }\n          }\n        });\n      }\n      \n      \/\/ Update all sliders from calculator data\n      function updateAllSliders() {\n        console.log('Updating all sliders...');\n        \n        \/\/ Update all sliders from calculator data\n        const totalVehiclesInput = document.getElementById('totalVehicles');\n        const totalEmployeesInput = document.getElementById('totalEmployees');\n        \n        if (totalVehiclesInput) {\n          totalVehiclesInput.value = calculatorData.common.totalVehicles;\n          totalVehiclesInput.addEventListener('input', function() {\n            updateCalculatorData('totalVehicles');\n          });\n        }\n        if (totalEmployeesInput) {\n          totalEmployeesInput.value = calculatorData.common.totalEmployees;\n          totalEmployeesInput.addEventListener('input', function() {\n            updateCalculatorData('totalEmployees');\n          });\n        }\n        \n        \/\/ Service business sliders\n        updateSliderPair('vehiclesUsedPrivately', calculatorData.service.privateMileage.vehiclesUsedPrivately);\n        updateSliderPair('averagePrivateMilesPerWeek', calculatorData.service.privateMileage.averagePrivateMilesPerWeek);\n        updateSliderPair('averageMPG', calculatorData.service.privateMileage.averageMPG);\n        updateSliderPair('missedJobsPerWeek', calculatorData.service.reactiveWork.missedJobsPerWeek);\n        updateSliderPair('disputesPerMonth', calculatorData.service.billingDisputes.disputesPerMonth);\n        updateSliderPair('minutesLostPerDay', calculatorData.service.timeOnSite.minutesLostPerDay);\n        updateSliderPair('workingDaysPerWeek', calculatorData.service.timeOnSite.workingDaysPerWeek);\n        updateSliderPair('serviceMinutesIdlePerDay', calculatorData.service.idleTime.minutesIdlePerDay);\n        \n        \/\/ Transport business sliders\n        updateSliderPair('transportVehiclesUsedPrivately', calculatorData.transport.privateMileage.vehiclesUsedPrivately);\n        updateSliderPair('transportAveragePrivateMilesPerWeek', calculatorData.transport.privateMileage.averagePrivateMilesPerWeek);\n        updateSliderPair('transportAverageMPG', calculatorData.transport.privateMileage.averageMPG);\n        updateSliderPair('minutesIdlePerDay', calculatorData.transport.idleTime.minutesIdlePerDay);\n        updateSliderPair('minutesStandingPerDay', calculatorData.transport.standingTime.minutesStandingPerDay);\n        updateSliderPair('transportWorkingDaysPerWeek', calculatorData.transport.standingTime.workingDaysPerWeek);\n        updateSliderPair('potentialExtraJobsPerWeek', calculatorData.transport.extraJobs.potentialExtraJobsPerWeek);\n        \n        \/\/ Currency inputs (no sliders)\n        const currencyInputs = [\n          { id: 'employeeHourlyRate', value: calculatorData.service.timeOnSite.employeeHourlyRate },\n          { id: 'fuelCostPerLitre', value: calculatorData.service.privateMileage.fuelCostPerLitre },\n          { id: 'averageJobPrice', value: calculatorData.service.reactiveWork.averageJobPrice },\n          { id: 'averageDisputeCost', value: calculatorData.service.billingDisputes.averageDisputeCost },\n          { id: 'transportFuelCostPerLitre', value: calculatorData.transport.privateMileage.fuelCostPerLitre },\n          { id: 'averageRatePerHour', value: calculatorData.transport.standingTime.averageRatePerHour },\n          { id: 'extraJobValue', value: calculatorData.transport.extraJobs.extraJobValue }\n        ];\n        \n        currencyInputs.forEach(input => {\n          const element = document.getElementById(input.id);\n          if (element) {\n            element.value = input.value;\n            element.addEventListener('input', function() {\n              updateCalculatorData(input.id);\n            });\n          }\n        });\n      }\n      \n      \/\/ Update a slider pair with value\n      function updateSliderPair(fieldName, value) {\n        const rangeInput = document.getElementById(fieldName + 'Range');\n        const numberInput = document.getElementById(fieldName);\n        \n        if (rangeInput) rangeInput.value = value;\n        if (numberInput) numberInput.value = value;\n        \n        \/\/ Remove existing listeners to avoid duplicates\n        const newRangeInput = rangeInput ? rangeInput.cloneNode(true) : null;\n        const newNumberInput = numberInput ? numberInput.cloneNode(true) : null;\n        \n        if (rangeInput && newRangeInput) {\n          rangeInput.parentNode.replaceChild(newRangeInput, rangeInput);\n        }\n        if (numberInput && newNumberInput) {\n          numberInput.parentNode.replaceChild(newNumberInput, numberInput);\n        }\n        \n        \/\/ Setup change listeners on the new elements\n        const finalRangeInput = document.getElementById(fieldName + 'Range');\n        const finalNumberInput = document.getElementById(fieldName);\n        \n        if (finalRangeInput && finalNumberInput) {\n          finalRangeInput.addEventListener('input', function() {\n            finalNumberInput.value = this.value;\n            updateCalculatorData(fieldName);\n          });\n          \n          finalNumberInput.addEventListener('input', function() {\n            const value = parseFloat(this.value) || 0;\n            finalRangeInput.value = value;\n            updateCalculatorData(fieldName);\n          });\n        }\n      }\n      \n      \/\/ Update calculator data from input\n      function updateCalculatorData(fieldName) {\n        const input = document.getElementById(fieldName);\n        if (!input) return;\n        \n        const value = parseFloat(input.value) || 0;\n        \n        \/\/ Find where this field belongs\n        if (fieldName === 'vehiclesUsedPrivately' || fieldName === 'averagePrivateMilesPerWeek' || \n            fieldName === 'averageMPG' || fieldName === 'fuelCostPerLitre') {\n          calculatorData.service.privateMileage[fieldName] = value;\n          calculateSectionCost('privateMileage');\n        } else if (fieldName === 'missedJobsPerWeek' || fieldName === 'averageJobPrice') {\n          calculatorData.service.reactiveWork[fieldName] = value;\n          calculateSectionCost('reactiveWork');\n        } else if (fieldName === 'disputesPerMonth' || fieldName === 'averageDisputeCost') {\n          calculatorData.service.billingDisputes[fieldName] = value;\n          calculateSectionCost('billingDisputes');\n        } else if (fieldName === 'minutesLostPerDay' || fieldName === 'employeeHourlyRate' || fieldName === 'workingDaysPerWeek') {\n          calculatorData.service.timeOnSite[fieldName] = value;\n          calculateSectionCost('timeOnSite');\n          \/\/ Also recalculate service idle time since it uses working days and hourly rate from time on site\n          calculateSectionCost('serviceIdleTime');\n        } else if (fieldName === 'serviceMinutesIdlePerDay') {\n          calculatorData.service.idleTime['minutesIdlePerDay'] = value;\n          calculateSectionCost('serviceIdleTime');\n        } else if (fieldName === 'transportVehiclesUsedPrivately' || fieldName === 'transportAveragePrivateMilesPerWeek' || \n                   fieldName === 'transportAverageMPG' || fieldName === 'transportFuelCostPerLitre') {\n          \/\/ Remove 'transport' prefix and lowercase the first character of the remaining part\n          const cleanFieldName = fieldName.replace('transport', '');\n          const finalFieldName = cleanFieldName.charAt(0).toLowerCase() + cleanFieldName.slice(1);\n          calculatorData.transport.privateMileage[finalFieldName] = value;\n          calculateSectionCost('transportPrivateMileage');\n        } else if (fieldName === 'minutesIdlePerDay') {\n          calculatorData.transport.idleTime[fieldName] = value;\n          calculateSectionCost('idleTime');\n        } else if (fieldName === 'minutesStandingPerDay' || fieldName === 'averageRatePerHour' || fieldName === 'transportWorkingDaysPerWeek') {\n          if (fieldName === 'transportWorkingDaysPerWeek') {\n            calculatorData.transport.standingTime['workingDaysPerWeek'] = value;\n          } else {\n            calculatorData.transport.standingTime[fieldName] = value;\n          }\n          calculateSectionCost('standingTime');\n          \/\/ Also recalculate idle time since it uses working days from demurrage\n          calculateSectionCost('idleTime');\n        } else if (fieldName === 'potentialExtraJobsPerWeek' || fieldName === 'extraJobValue') {\n          calculatorData.transport.extraJobs[fieldName] = value;\n          calculateSectionCost('extraJobs');\n        } else if (fieldName === 'totalVehicles' || fieldName === 'totalEmployees') {\n          calculatorData.common[fieldName] = value;\n          \/\/ Recalculate all costs when vehicles or employees change\n          calculateAllCosts();\n        }\n      }\n      \n      \/\/ Calculate costs for all sections\n      function calculateAllCosts() {\n        console.log('Calculating all costs...');\n        \n        \/\/ Service business costs\n        calculateSectionCost('privateMileage');\n        calculateSectionCost('reactiveWork');\n        calculateSectionCost('billingDisputes');\n        calculateSectionCost('timeOnSite');\n        calculateSectionCost('serviceIdleTime');\n        \n        \/\/ Transport business costs\n        calculateSectionCost('transportPrivateMileage');\n        calculateSectionCost('idleTime');\n        calculateSectionCost('standingTime');\n        calculateSectionCost('extraJobs');\n      }\n      \n      \/\/ Calculate cost for a specific section\n      function calculateSectionCost(section) {\n        let cost = 0;\n        const LITRES_PER_GALLON = 4.54609;\n        \n        switch (section) {\n          case 'privateMileage':\n            const vehiclesUsedPrivately = calculatorData.service.privateMileage.vehiclesUsedPrivately;\n            const averagePrivateMilesPerWeek = calculatorData.service.privateMileage.averagePrivateMilesPerWeek;\n            const averageMPG = calculatorData.service.privateMileage.averageMPG;\n            const fuelCostPerLitre = calculatorData.service.privateMileage.fuelCostPerLitre;\n            \n            \/\/ Calculate fuel used per week in gallons\n            const gallonsPerWeek = (vehiclesUsedPrivately * averagePrivateMilesPerWeek) \/ averageMPG;\n            \/\/ Convert to litres\n            const litresPerWeek = gallonsPerWeek * LITRES_PER_GALLON;\n            \/\/ Calculate annual cost\n            cost = litresPerWeek * fuelCostPerLitre * 52;\n            \n            updateCostDisplay('privateMileageCost', cost);\n            updateCalculationNote('privateMileageCalc', \n              `${vehiclesUsedPrivately} vehicles \u00d7 ${averagePrivateMilesPerWeek} miles\/week \u00f7 ${averageMPG} MPG \u00d7 \u00a3${fuelCostPerLitre}\/litre \u00d7 52 weeks`);\n            break;\n            \n          case 'reactiveWork':\n            const missedJobsPerWeek = calculatorData.service.reactiveWork.missedJobsPerWeek;\n            const averageJobPrice = calculatorData.service.reactiveWork.averageJobPrice;\n            cost = missedJobsPerWeek * averageJobPrice * 52; \/\/ 52 weeks per year\n            updateCostDisplay('reactiveWorkCost', cost);\n            updateCalculationNote('reactiveWorkCalc', \n              `${missedJobsPerWeek} jobs\/week \u00d7 \u00a3${averageJobPrice}\/job \u00d7 52 weeks`);\n            break;\n            \n          case 'billingDisputes':\n            const disputesPerMonth = calculatorData.service.billingDisputes.disputesPerMonth;\n            const averageDisputeCost = calculatorData.service.billingDisputes.averageDisputeCost;\n            cost = disputesPerMonth * averageDisputeCost * 12; \/\/ 12 months per year\n            updateCostDisplay('billingDisputesCost', cost);\n            updateCalculationNote('billingDisputesCalc', \n              `${disputesPerMonth} disputes\/month \u00d7 \u00a3${averageDisputeCost}\/dispute \u00d7 12 months`);\n            break;\n            \n          case 'timeOnSite':\n            const minutesLostPerDay = calculatorData.service.timeOnSite.minutesLostPerDay;\n            const employeeHourlyRate = calculatorData.service.timeOnSite.employeeHourlyRate;\n            const workingDaysPerWeek = calculatorData.service.timeOnSite.workingDaysPerWeek;\n            const totalEmployees = calculatorData.common.totalEmployees;\n            cost = totalEmployees * (minutesLostPerDay \/ 60) * employeeHourlyRate * workingDaysPerWeek * 52;\n            updateCostDisplay('timeOnSiteCost', cost);\n            updateCalculationNote('timeOnSiteCalc', \n              `${totalEmployees} employees \u00d7 ${minutesLostPerDay} min\/day \u00f7 60 \u00d7 \u00a3${employeeHourlyRate}\/hour \u00d7 ${workingDaysPerWeek} days \u00d7 52 weeks`);\n            break;\n            \n          case 'serviceIdleTime':\n            const serviceMinutesIdlePerDay = calculatorData.service.idleTime.minutesIdlePerDay;\n            const serviceTotalVehicles = calculatorData.common.totalVehicles;\n            const serviceTotalEmployees = calculatorData.common.totalEmployees;\n            const serviceFuelCostPerLitre = calculatorData.service.privateMileage.fuelCostPerLitre;\n            const serviceHourlyRate = calculatorData.service.timeOnSite.employeeHourlyRate;\n            const serviceWorkingDays = calculatorData.service.timeOnSite.workingDaysPerWeek;\n            \n            \/\/ Calculate labour cost - based on EMPLOYEES not vehicles\n            const hoursLostPerDay = serviceMinutesIdlePerDay \/ 60;\n            const dailyLabourCost = hoursLostPerDay * serviceHourlyRate * serviceTotalEmployees;\n            const annualLabourCost = dailyLabourCost * serviceWorkingDays * 52;\n            \n            let fuelCost = 0;\n            let totalIdleCost = annualLabourCost;\n            \n            \/\/ Only calculate fuel cost if vehicles don't have start-stop technology\n            if (!calculatorData.service.idleTime.hasStartStop) {\n              \/\/ Fixed idle fuel consumption: 0.5 gallons per hour per vehicle\n              const IDLE_GALLONS_PER_HOUR = 0.5;\n              const hoursIdlePerDay = serviceMinutesIdlePerDay \/ 60;\n              const gallonsPerDay = hoursIdlePerDay * IDLE_GALLONS_PER_HOUR * serviceTotalVehicles;\n              const litresPerDay = gallonsPerDay * LITRES_PER_GALLON;\n              fuelCost = litresPerDay * serviceFuelCostPerLitre * serviceWorkingDays * 52;\n              totalIdleCost += fuelCost;\n              \n              updateCalculationNote('serviceIdleTimeCalc', \n                `Labour: ${serviceTotalEmployees} employees \u00d7 ${serviceMinutesIdlePerDay} min\/day \u00f7 60 \u00d7 \u00a3${serviceHourlyRate}\/hour \u00d7 ${serviceWorkingDays} days \u00d7 52 weeks. Fuel: ${serviceTotalVehicles} vehicles \u00d7 0.5 gal\/hour idle`);\n            } else {\n              updateCalculationNote('serviceIdleTimeCalc', \n                `${serviceTotalEmployees} employees \u00d7 ${serviceMinutesIdlePerDay} min\/day \u00f7 60 \u00d7 \u00a3${serviceHourlyRate}\/hour \u00d7 ${serviceWorkingDays} days \u00d7 52 weeks (no fuel - start-stop tech)`);\n            }\n            \n            cost = totalIdleCost;\n            updateCostDisplay('serviceIdleTimeCost', cost);\n            break;\n            \n          case 'transportPrivateMileage':\n            const transportVehiclesUsedPrivately = calculatorData.transport.privateMileage.vehiclesUsedPrivately;\n            const transportAveragePrivateMilesPerWeek = calculatorData.transport.privateMileage.averagePrivateMilesPerWeek;\n            const transportAverageMPG = calculatorData.transport.privateMileage.averageMPG;\n            const transportFuelCostPerLitre = calculatorData.transport.privateMileage.fuelCostPerLitre;\n            \n            \/\/ Calculate fuel used per week in gallons\n            const transportGallonsPerWeek = (transportVehiclesUsedPrivately * transportAveragePrivateMilesPerWeek) \/ transportAverageMPG;\n            \/\/ Convert to litres\n            const transportLitresPerWeek = transportGallonsPerWeek * LITRES_PER_GALLON;\n            \/\/ Calculate annual cost\n            cost = transportLitresPerWeek * transportFuelCostPerLitre * 52;\n            \n            updateCostDisplay('transportPrivateMileageCost', cost);\n            updateCalculationNote('transportPrivateMileageCalc', \n              `${transportVehiclesUsedPrivately} vehicles \u00d7 ${transportAveragePrivateMilesPerWeek} miles\/week \u00f7 ${transportAverageMPG} MPG \u00d7 \u00a3${transportFuelCostPerLitre}\/litre \u00d7 52 weeks`);\n            break;\n            \n          case 'idleTime':\n            const minutesIdlePerDay = calculatorData.transport.idleTime.minutesIdlePerDay;\n            const totalVehiclesIdle = calculatorData.common.totalVehicles;\n            const totalEmployeesIdle = calculatorData.common.totalEmployees;\n            const idleFuelCostPerLitre = calculatorData.transport.privateMileage.fuelCostPerLitre;\n            const transportHourlyRate = calculatorData.transport.standingTime.averageRatePerHour;\n            const transportWorkingDays = calculatorData.transport.standingTime.workingDaysPerWeek;\n            \n            \/\/ Calculate labour cost - based on EMPLOYEES not vehicles\n            const transportHoursLostPerDay = minutesIdlePerDay \/ 60;\n            const transportDailyLabourCost = transportHoursLostPerDay * transportHourlyRate * totalEmployeesIdle;\n            const transportAnnualLabourCost = transportDailyLabourCost * transportWorkingDays * 52;\n            \n            let transportFuelCost = 0;\n            let transportTotalIdleCost = transportAnnualLabourCost;\n            \n            \/\/ Only calculate fuel cost if vehicles don't have start-stop technology\n            if (!calculatorData.transport.idleTime.hasStartStop) {\n              \/\/ Fixed idle fuel consumption: 0.5 gallons per hour per vehicle\n              const IDLE_GALLONS_PER_HOUR = 0.5;\n              const hoursIdlePerDay = minutesIdlePerDay \/ 60;\n              const gallonsPerDay = hoursIdlePerDay * IDLE_GALLONS_PER_HOUR * totalVehiclesIdle;\n              const litresPerDay = gallonsPerDay * LITRES_PER_GALLON;\n              transportFuelCost = litresPerDay * idleFuelCostPerLitre * transportWorkingDays * 52;\n              transportTotalIdleCost += transportFuelCost;\n              \n              updateCalculationNote('idleTimeCalc', \n                `Labour: ${totalEmployeesIdle} employees \u00d7 ${minutesIdlePerDay} min\/day \u00f7 60 \u00d7 \u00a3${transportHourlyRate}\/hour \u00d7 ${transportWorkingDays} days \u00d7 52 weeks. Fuel: ${totalVehiclesIdle} vehicles \u00d7 0.5 gal\/hour idle`);\n            } else {\n              updateCalculationNote('idleTimeCalc', \n                `${totalEmployeesIdle} employees \u00d7 ${minutesIdlePerDay} min\/day \u00f7 60 \u00d7 \u00a3${transportHourlyRate}\/hour \u00d7 ${transportWorkingDays} days \u00d7 52 weeks (no fuel - start-stop tech)`);\n            }\n            \n            cost = transportTotalIdleCost;\n            updateCostDisplay('idleTimeCost', cost);\n            break;\n            \n          case 'standingTime':\n            const minutesStandingPerDay = calculatorData.transport.standingTime.minutesStandingPerDay;\n            const averageRatePerHour = calculatorData.transport.standingTime.averageRatePerHour;\n            const standingTotalVehicles = calculatorData.common.totalVehicles;\n            const standingWorkingDays = calculatorData.transport.standingTime.workingDaysPerWeek;\n            cost = (minutesStandingPerDay \/ 60) * averageRatePerHour * standingTotalVehicles * standingWorkingDays * 52;\n            updateCostDisplay('standingTimeCost', cost);\n            updateCalculationNote('standingTimeCalc', \n              `${standingTotalVehicles} vehicles \u00d7 ${minutesStandingPerDay} min\/day \u00f7 60 \u00d7 \u00a3${averageRatePerHour}\/hour \u00d7 ${standingWorkingDays} days \u00d7 52 weeks`);\n            break;\n            \n          case 'extraJobs':\n            const potentialExtraJobsPerWeek = calculatorData.transport.extraJobs.potentialExtraJobsPerWeek;\n            const extraJobValue = calculatorData.transport.extraJobs.extraJobValue;\n            cost = potentialExtraJobsPerWeek * extraJobValue * 52;\n            updateCostDisplay('extraJobsCost', cost);\n            updateCalculationNote('extraJobsCalc', \n              `${potentialExtraJobsPerWeek} jobs\/week \u00d7 \u00a3${extraJobValue}\/job \u00d7 52 weeks`);\n            break;\n        }\n        \n        return cost;\n      }\n      \n      \/\/ Update calculation note\n      function updateCalculationNote(elementId, text) {\n        const element = document.getElementById(elementId);\n        if (element) {\n          element.textContent = text;\n        }\n      }\n      \n      \/\/ Update cost display with currency symbol and thousands separators\n      function updateCostDisplay(elementId, cost) {\n        const element = document.getElementById(elementId);\n        if (element) {\n          element.textContent = currencySymbol + formatNumber(cost.toFixed(2));\n        }\n      }\n      \n      \/\/ Format number with thousands separators\n      function formatNumber(num) {\n        return num.toString().replace(\/\\B(?=(\\d{3})+(?!\\d))\/g, \",\");\n      }\n      \n      \/\/ Validate business type form\n      function validateInitialForm() {\n        let isValid = true;\n        \n        \/\/ Validate total vehicles\n        const totalVehiclesInput = document.getElementById('totalVehicles');\n        if (!totalVehiclesInput.value || parseInt(totalVehiclesInput.value) < 1) {\n          showError(totalVehiclesInput, 'totalVehicles-error');\n          isValid = false;\n        } else {\n          hideError(totalVehiclesInput, 'totalVehicles-error');\n          calculatorData.common.totalVehicles = parseInt(totalVehiclesInput.value);\n        }\n        \n        \/\/ Validate total employees\n        const totalEmployeesInput = document.getElementById('totalEmployees');\n        if (!totalEmployeesInput.value || parseInt(totalEmployeesInput.value) < 1) {\n          showError(totalEmployeesInput, 'totalEmployees-error');\n          isValid = false;\n        } else {\n          hideError(totalEmployeesInput, 'totalEmployees-error');\n          calculatorData.common.totalEmployees = parseInt(totalEmployeesInput.value);\n        }\n        \n        return isValid;\n      }\n      \n      \/\/ Validate contact form\n      function validateContactForm() {\n        let isValid = true;\n        \n        \/\/ Basic validation for required fields\n        const firstNameInput = document.getElementById('firstName');\n        const lastNameInput = document.getElementById('lastName');\n        const companyNameInput = document.getElementById('companyName');\n        const emailInput = document.getElementById('email');\n        const referralSourceInput = document.getElementById('referralSource');\n        \n        \/\/ First Name\n        if (!firstNameInput.value.trim()) {\n          showError(firstNameInput, 'firstName-error');\n          isValid = false;\n        } else {\n          hideError(firstNameInput, 'firstName-error');\n        }\n        \n        \/\/ Last Name\n        if (!lastNameInput.value.trim()) {\n          showError(lastNameInput, 'lastName-error');\n          isValid = false;\n        } else {\n          hideError(lastNameInput, 'lastName-error');\n        }\n        \n        \/\/ Company Name\n        if (!companyNameInput.value.trim()) {\n          showError(companyNameInput, 'companyName-error');\n          isValid = false;\n        } else {\n          hideError(companyNameInput, 'companyName-error');\n        }\n        \n        \/\/ Email\n        if (!validateEmail(emailInput.value)) {\n          showError(emailInput, 'email-error');\n          isValid = false;\n        } else {\n          hideError(emailInput, 'email-error');\n        }\n        \n        \/\/ Referral Source\n        if (!referralSourceInput.value) {\n          showError(referralSourceInput, 'referralSource-error');\n          isValid = false;\n        } else {\n          hideError(referralSourceInput, 'referralSource-error');\n        }\n        \n        return isValid;\n      }\n      \n      \/\/ Validate email format\n      function validateEmail(email) {\n        const re = \/^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$\/;\n        return re.test(String(email).toLowerCase());\n      }\n      \n      \/\/ Show error message\n      function showError(inputElement, errorElementId) {\n        inputElement.classList.add('error');\n        const errorElement = document.getElementById(errorElementId);\n        if (errorElement) {\n          errorElement.style.display = 'block';\n        }\n      }\n      \n      \/\/ Hide error message\n      function hideError(inputElement, errorElementId) {\n        inputElement.classList.remove('error');\n        const errorElement = document.getElementById(errorElementId);\n        if (errorElement) {\n          errorElement.style.display = 'none';\n        }\n      }\n      \n      \/\/ Go to a specific step\n      function goToStep(stepNumber) {\n        goToStep.currentStep = stepNumber;\n        \n        \/\/ Update steps\n        document.querySelectorAll('#quartix-calculator-widget-2023 .progress-step').forEach((step, index) => {\n          if (index + 1 === stepNumber) {\n            step.classList.add('active');\n          } else {\n            step.classList.remove('active');\n          }\n        });\n        \n        \/\/ Show the right section\n        document.querySelectorAll('#quartix-calculator-widget-2023 .calculator-section').forEach((section, index) => {\n          if (index + 1 === stepNumber) {\n            section.classList.add('active');\n          } else {\n            section.classList.remove('active');\n          }\n        });\n        \n        \/\/ Update progress bar\n        updateMainProgressBar();\n      }\n      goToStep.currentStep = 1;\n      \n      \/\/ Show a specific card\n      function showCard(businessType, cardId) {\n        const cards = document.querySelectorAll('#quartix-calculator-widget-2023 .calculator-card');\n        cards.forEach(card => {\n          card.classList.remove('active');\n        });\n        document.getElementById(cardId).classList.add('active');\n        \n        \/\/ Update current card tracker\n        if (businessType === 'service') {\n          currentServiceCard = cardId;\n        } else {\n          currentTransportCard = cardId;\n        }\n        \n        \/\/ Update calculator progress\n        updateCalculatorProgress();\n        \n        \/\/ Always recalculate costs for the current card to ensure latest values are used\n        switch(cardId) {\n          case 'private-mileage-card':\n            calculateSectionCost('privateMileage');\n            break;\n          case 'time-on-site-card':\n            calculateSectionCost('timeOnSite');\n            break;\n          case 'service-idle-time-card':\n            calculateSectionCost('serviceIdleTime');\n            break;\n          case 'reactive-work-card':\n            calculateSectionCost('reactiveWork');\n            break;\n          case 'billing-disputes-card':\n            calculateSectionCost('billingDisputes');\n            break;\n          case 'transport-private-mileage-card':\n            calculateSectionCost('transportPrivateMileage');\n            break;\n          case 'standing-time-card':\n            calculateSectionCost('standingTime');\n            break;\n          case 'idle-time-card':\n            calculateSectionCost('idleTime');\n            break;\n          case 'extra-jobs-card':\n            calculateSectionCost('extraJobs');\n            break;\n        }\n      }\n      \n      \/\/ Calculate final results\n      function calculateResults() {\n        let totalSavings = 0;\n        const savingsBreakdown = {};\n        const LITRES_PER_GALLON = 4.54609;\n        \n        \/\/ Update timestamp display\n        const timestampElement = document.getElementById('resultsTimestamp');\n        if (timestampElement) {\n          timestampElement.textContent = 'Results calculated on ' + resultTimestamp.toLocaleDateString('en-GB', {\n            day: 'numeric',\n            month: 'long',\n            year: 'numeric'\n          });\n        }\n        \n        \/\/ Update personalized greeting\n        const nameElement = document.getElementById('resultName');\n        const companyElement = document.getElementById('resultCompany');\n        \n        if (nameElement && document.getElementById('firstName')) {\n          nameElement.textContent = document.getElementById('firstName').value || 'there';\n        }\n        \n        if (companyElement && document.getElementById('companyName')) {\n          companyElement.textContent = document.getElementById('companyName').value || 'your company';\n        }\n        \n        if (businessType === 'service') {\n          \/\/ Calculate service business savings\n          savingsBreakdown.privateMileage = calculateSectionCost('privateMileage');\n          savingsBreakdown.reactiveWork = calculateSectionCost('reactiveWork');\n          savingsBreakdown.billingDisputes = calculateSectionCost('billingDisputes');\n          savingsBreakdown.timeOnSite = calculateSectionCost('timeOnSite');\n          savingsBreakdown.idleTime = calculateSectionCost('serviceIdleTime');\n          \n          totalSavings = savingsBreakdown.privateMileage + savingsBreakdown.reactiveWork + \n                         savingsBreakdown.billingDisputes + savingsBreakdown.timeOnSite + \n                         savingsBreakdown.idleTime;\n        } else {\n          \/\/ Calculate transport business savings\n          savingsBreakdown.privateMileage = calculateSectionCost('transportPrivateMileage');\n          savingsBreakdown.idleTime = calculateSectionCost('idleTime');\n          savingsBreakdown.standingTime = calculateSectionCost('standingTime');\n          savingsBreakdown.extraJobs = calculateSectionCost('extraJobs');\n          \n          totalSavings = savingsBreakdown.privateMileage + savingsBreakdown.idleTime + \n                         savingsBreakdown.standingTime + savingsBreakdown.extraJobs;\n        }\n        \n        \/\/ Update total savings display\n        const totalSavingsElement = document.getElementById('totalSavings');\n        if (totalSavingsElement) {\n          totalSavingsElement.textContent = currencySymbol + formatNumber(totalSavings.toFixed(2));\n        }\n        \n        \/\/ Calculate and update weekly and daily savings\n        const weeklySavings = totalSavings \/ 52;\n        const dailySavings = totalSavings \/ 365;\n        const monthlySavings = totalSavings \/ 12;\n        \n        const weeklySavingsElement = document.getElementById('weeklySavings');\n        if (weeklySavingsElement) {\n          weeklySavingsElement.textContent = currencySymbol + formatNumber(weeklySavings.toFixed(2));\n        }\n        \n        const dailySavingsElement = document.getElementById('dailySavings');\n        if (dailySavingsElement) {\n          dailySavingsElement.textContent = currencySymbol + formatNumber(dailySavings.toFixed(2));\n        }\n        \n        \/\/ ROI Calculations\n        const costPerVehicle = 11; \/\/ \u00a311 per vehicle per month\n        const totalVehicles = calculatorData.common.totalVehicles;\n        const totalMonthlyCost = costPerVehicle * totalVehicles;\n        const roi = (monthlySavings \/ totalMonthlyCost) * 100;\n        const paybackPeriodMonths = Math.ceil(totalMonthlyCost \/ monthlySavings);\n        \n        \/\/ Update ROI Elements\n        const costPerVehicleElement = document.getElementById('costPerVehicle');\n        if (costPerVehicleElement) {\n          costPerVehicleElement.textContent = currencySymbol + formatNumber(costPerVehicle.toFixed(2));\n        }\n        \n        const totalMonthlyCostElement = document.getElementById('totalMonthlyCost');\n        if (totalMonthlyCostElement) {\n          totalMonthlyCostElement.textContent = currencySymbol + formatNumber(totalMonthlyCost.toFixed(2));\n        }\n        \n        const monthlySavingsElement = document.getElementById('monthlySavings');\n        if (monthlySavingsElement) {\n          monthlySavingsElement.textContent = currencySymbol + formatNumber(monthlySavings.toFixed(2));\n        }\n        \n        const roiValueElement = document.getElementById('roiValue');\n        if (roiValueElement) {\n          roiValueElement.textContent = Math.round(roi) + '%';\n        }\n        \n        const paybackPeriodElement = document.getElementById('paybackPeriod');\n        if (paybackPeriodElement) {\n          paybackPeriodElement.textContent = paybackPeriodMonths.toString();\n        }\n        \n        \/\/ Update savings breakdown with explanations\n        const savingsBreakdownElement = document.getElementById('savingsBreakdown');\n        if (savingsBreakdownElement) {\n          savingsBreakdownElement.innerHTML = '';\n          \n          \/\/ Add breakdown items based on business type\n          if (businessType === 'service') {\n            addSavingsBreakdownItem(savingsBreakdownElement, 'Private Mileage', savingsBreakdown.privateMileage,\n              `Fuel savings from reducing private vehicle use, calculated at ${calculatorData.service.privateMileage.averageMPG} MPG`);\n            addSavingsBreakdownItem(savingsBreakdownElement, 'Time Accountability', savingsBreakdown.timeOnSite,\n              `Based on ${calculatorData.service.timeOnSite.minutesLostPerDay} minutes lost per employee per day across ${calculatorData.common.totalEmployees} employees`);\n            addSavingsBreakdownItem(savingsBreakdownElement, 'Idle Time', savingsBreakdown.idleTime,\n              `Based on ${calculatorData.common.totalEmployees} employees' lost productivity and fuel costs from ${calculatorData.common.totalVehicles} vehicles idling`);\n            addSavingsBreakdownItem(savingsBreakdownElement, 'Reactive Work', savingsBreakdown.reactiveWork,\n              `Revenue from ${calculatorData.service.reactiveWork.missedJobsPerWeek} additional jobs per week through better fleet visibility`);\n            addSavingsBreakdownItem(savingsBreakdownElement, 'Billing Disputes', savingsBreakdown.billingDisputes,\n              `Avoided losses from ${calculatorData.service.billingDisputes.disputesPerMonth} disputes per month with tracking evidence`);\n          } else {\n            addSavingsBreakdownItem(savingsBreakdownElement, 'Private Mileage', savingsBreakdown.privateMileage,\n              `Fuel savings from reducing private vehicle use, calculated at ${calculatorData.transport.privateMileage.averageMPG} MPG`);\n            addSavingsBreakdownItem(savingsBreakdownElement, 'Demurrage Reduction', savingsBreakdown.standingTime,\n              `Savings from reducing ${calculatorData.transport.standingTime.minutesStandingPerDay} minutes of demurrage per vehicle per day`);\n            addSavingsBreakdownItem(savingsBreakdownElement, 'Idle Time', savingsBreakdown.idleTime,\n              `Based on ${calculatorData.common.totalEmployees} employees' lost productivity and fuel costs from ${calculatorData.common.totalVehicles} vehicles idling`);\n            addSavingsBreakdownItem(savingsBreakdownElement, 'Extra Jobs', savingsBreakdown.extraJobs,\n              `Revenue from ${calculatorData.transport.extraJobs.potentialExtraJobsPerWeek} additional jobs per week through optimized routing`);\n          }\n        }\n      }\n      \n      \/\/ Add a savings breakdown item with explanation\n      function addSavingsBreakdownItem(container, title, amount, explanation) {\n        const itemElement = document.createElement('div');\n        itemElement.className = 'savings-item';\n        \n        const titleElement = document.createElement('h4');\n        titleElement.textContent = title;\n        \n        const amountElement = document.createElement('div');\n        amountElement.className = 'savings-amount';\n        amountElement.textContent = currencySymbol + formatNumber(amount.toFixed(2));\n        \n        const explanationElement = document.createElement('div');\n        explanationElement.className = 'savings-explanation';\n        explanationElement.textContent = explanation;\n        \n        itemElement.appendChild(titleElement);\n        itemElement.appendChild(amountElement);\n        itemElement.appendChild(explanationElement);\n        container.appendChild(itemElement);\n      }\n      \n      \/\/ Transfer data to CF7 form\n      function transferDataToCF7() {\n        console.log('Transferring data to CF7...');\n        \n        \/\/ Calculate totals and breakdown\n        let totalSavings = 0;\n        let monthlySavings = 0;\n        let savingsBreakdown = {};\n        \n        if (businessType === 'service') {\n          savingsBreakdown.privateMileage = calculateSectionCost('privateMileage');\n          savingsBreakdown.reactiveWork = calculateSectionCost('reactiveWork');\n          savingsBreakdown.billingDisputes = calculateSectionCost('billingDisputes');\n          savingsBreakdown.timeOnSite = calculateSectionCost('timeOnSite');\n          savingsBreakdown.idleTime = calculateSectionCost('serviceIdleTime');\n          \n          totalSavings = savingsBreakdown.privateMileage + savingsBreakdown.reactiveWork + \n                         savingsBreakdown.billingDisputes + savingsBreakdown.timeOnSite + \n                         savingsBreakdown.idleTime;\n        } else {\n          savingsBreakdown.privateMileage = calculateSectionCost('transportPrivateMileage');\n          savingsBreakdown.idleTime = calculateSectionCost('idleTime');\n          savingsBreakdown.standingTime = calculateSectionCost('standingTime');\n          savingsBreakdown.extraJobs = calculateSectionCost('extraJobs');\n          \n          totalSavings = savingsBreakdown.privateMileage + savingsBreakdown.idleTime + \n                         savingsBreakdown.standingTime + savingsBreakdown.extraJobs;\n        }\n        \n        monthlySavings = totalSavings \/ 12;\n        \n        \/\/ Calculate ROI values\n        const costPerVehicle = 11; \/\/ \u00a311 per vehicle per month\n        const totalVehicles = calculatorData.common.totalVehicles;\n        const totalMonthlyCost = costPerVehicle * totalVehicles;\n        const roi = (monthlySavings \/ totalMonthlyCost) * 100;\n        const paybackPeriodMonths = Math.ceil(totalMonthlyCost \/ monthlySavings);\n        \n        \/\/ Get form data - Using Pardot-compatible names\n        const formData = {\n          'first_name': document.getElementById('firstName').value,\n          'last_name': document.getElementById('lastName').value,\n          'company_name': document.getElementById('companyName').value,\n          'email': document.getElementById('email').value,\n          'country_code': document.getElementById('countryCode').value,\n          'phone': document.getElementById('phone').value,\n          'unformatted_phone_number': document.getElementById('unformattedPhoneNumber').value,\n          'referral_source': document.getElementById('referralSource').options[document.getElementById('referralSource').selectedIndex].text,\n          'business_type': businessType === 'service' ? 'Service\/Site-Based' : 'Transport',\n          'total_vehicles': calculatorData.common.totalVehicles.toString(),\n          'total_employees': calculatorData.common.totalEmployees.toString(),\n          'total_annual_savings': totalSavings.toFixed(2),\n          'monthly_savings': monthlySavings.toFixed(2),\n          'weekly_savings': (totalSavings \/ 52).toFixed(2),\n          'daily_savings': (totalSavings \/ 365).toFixed(2),\n          'monthly_cost': totalMonthlyCost.toFixed(2),\n          'cost_per_vehicle': costPerVehicle.toFixed(2),\n          'roi_percentage': Math.round(roi).toString(),\n          'payback_period_months': paybackPeriodMonths.toString(),\n          'currency': currencySymbol,\n          'calculation_date': resultTimestamp.toISOString()\n        };\n        \n        \/\/ Add individual savings breakdown fields\n        if (businessType === 'service') {\n          formData['private_mileage_savings'] = savingsBreakdown.privateMileage.toFixed(2);\n          formData['time_accountability_savings'] = savingsBreakdown.timeOnSite.toFixed(2);\n          formData['idle_time_savings'] = savingsBreakdown.idleTime.toFixed(2);\n          formData['reactive_work_savings'] = savingsBreakdown.reactiveWork.toFixed(2);\n          formData['billing_disputes_savings'] = savingsBreakdown.billingDisputes.toFixed(2);\n        } else {\n          formData['private_mileage_savings'] = savingsBreakdown.privateMileage.toFixed(2);\n          formData['demurrage_savings'] = savingsBreakdown.standingTime.toFixed(2);\n          formData['idle_time_savings'] = savingsBreakdown.idleTime.toFixed(2);\n          formData['extra_jobs_savings'] = savingsBreakdown.extraJobs.toFixed(2);\n        }\n        \n        \/\/ Generate simple query parameters for the URL (WITH question mark)\n        const queryParams = new URLSearchParams({\n          savings: Math.round(totalSavings),\n          monthly: Math.round(monthlySavings),\n          vehicles: calculatorData.common.totalVehicles,\n          type: businessType,\n          date: resultTimestamp.toISOString(),\n          company: formData['company_name'],\n          person: formData['first_name']\n        });\n        \n        \/\/ Store data in window object for CF7 integration\n        window.quartixCalculatorData = {\n          formData: formData,\n          queryParams: '?' + queryParams.toString()  \/\/ Include the question mark\n        };\n        \n        console.log('Calculator data stored for CF7 integration:', window.quartixCalculatorData);\n        \n        \/\/ Find and populate the CF7 form\n        const cf7Forms = document.querySelectorAll('.wpcf7 form');\n        cf7Forms.forEach(form => {\n          \/\/ Populate all fields\n          Object.keys(formData).forEach(fieldName => {\n            const field = form.querySelector(`[name=\"${fieldName}\"]`);\n            if (field) {\n              field.value = formData[fieldName];\n            } else {\n              \/\/ Create hidden field if it doesn't exist\n              const hiddenField = document.createElement('input');\n              hiddenField.type = 'hidden';\n              hiddenField.name = fieldName;\n              hiddenField.value = formData[fieldName];\n              form.appendChild(hiddenField);\n            }\n          });\n          \n          \/\/ Add result parameters as a hidden field (with question mark)\n          let resultParamsField = form.querySelector('[name=\"result_parameters\"]');\n          if (!resultParamsField) {\n            resultParamsField = document.createElement('input');\n            resultParamsField.type = 'hidden';\n            resultParamsField.name = 'result_parameters';\n            form.appendChild(resultParamsField);\n          }\n          resultParamsField.value = '?' + queryParams.toString();\n        });\n        \n        \/\/ Fire custom event for external integrations\n        const event = new CustomEvent('quartixCalculatorComplete', {\n          detail: {\n            formData: formData,\n            queryParams: '?' + queryParams.toString()\n          }\n        });\n        document.dispatchEvent(event);\n        \n        \/\/ Try to submit CF7 form via AJAX if wpcf7 is available\n        setTimeout(function() {\n          const cf7Form = document.querySelector('.wpcf7 form');\n          if (cf7Form && typeof wpcf7 !== 'undefined') {\n            console.log('Submitting CF7 form via AJAX');\n            wpcf7.submit(cf7Form);\n          }\n        }, 100);\n      }\n      \n      \/\/ Reset calculator\n      function resetCalculator() {\n        \/\/ Reset business type\n        businessType = 'service';\n        document.querySelectorAll('#quartix-calculator-widget-2023 .business-type-option').forEach(option => {\n          if (option.getAttribute('data-type') === 'service') {\n            option.classList.add('active');\n          } else {\n            option.classList.remove('active');\n          }\n        });\n        \n        \/\/ Reset form inputs\n        document.getElementById('firstName').value = '';\n        document.getElementById('lastName').value = '';\n        document.getElementById('companyName').value = '';\n        document.getElementById('email').value = '';\n        document.getElementById('phone').value = '';\n        document.getElementById('unformattedPhoneNumber').value = '';\n        \n        document.getElementById('totalVehicles').value = '5';\n        document.getElementById('totalEmployees').value = '5';\n        document.getElementById('referralSource').value = '';\n        \n        \/\/ Reset calculator data to defaults\n        calculatorData = {\n          service: {\n            privateMileage: {\n              vehiclesUsedPrivately: 2,\n              averagePrivateMilesPerWeek: 50,\n              averageMPG: 38,\n              fuelCostPerLitre: 1.43\n            },\n            reactiveWork: {\n              missedJobsPerWeek: 3,\n              averageJobPrice: 150\n            },\n            billingDisputes: {\n              disputesPerMonth: 2,\n              averageDisputeCost: 100\n            },\n            timeOnSite: {\n              employeeHourlyRate: 15,\n              minutesLostPerDay: 30,\n              workingDaysPerWeek: 5\n            },\n            idleTime: {\n              minutesIdlePerDay: 20,\n              hasStartStop: true,\n              usesPTO: false\n            }\n          },\n          transport: {\n            privateMileage: {\n              vehiclesUsedPrivately: 2,\n              averagePrivateMilesPerWeek: 50,\n              averageMPG: 38,\n              fuelCostPerLitre: 1.43\n            },\n            idleTime: {\n              minutesIdlePerDay: 20,\n              hasStartStop: true,\n              usesPTO: false\n            },\n            standingTime: {\n              minutesStandingPerDay: 30,\n              averageRatePerHour: 20,\n              workingDaysPerWeek: 5\n            },\n            extraJobs: {\n              potentialExtraJobsPerWeek: 2,\n              extraJobValue: 150\n            }\n          },\n          common: {\n            totalVehicles: 5,\n            totalEmployees: 5\n          }\n        };\n        \n        \/\/ Reset card states\n        currentServiceCard = 'private-mileage-card';\n        currentTransportCard = 'transport-private-mileage-card';\n        currentCardIndex.service = 0;\n        currentCardIndex.transport = 0;\n        \n        \/\/ Update sliders and costs\n        updateAllSliders();\n        calculateAllCosts();\n        \n        \/\/ Hide all error messages\n        document.querySelectorAll('#quartix-calculator-widget-2023 .error-message').forEach(element => {\n          element.style.display = 'none';\n        });\n        \n        \/\/ Remove error classes\n        document.querySelectorAll('#quartix-calculator-widget-2023 input.error').forEach(input => {\n          input.classList.remove('error');\n        });\n        \n        \/\/ Reset checkboxes\n        const startStopCheckbox = document.getElementById('noStartStop');\n        if (startStopCheckbox) {\n          startStopCheckbox.checked = false;\n        }\n        \n        const ptoCheckbox = document.getElementById('usesPTO');\n        if (ptoCheckbox) {\n          ptoCheckbox.checked = false;\n        }\n        \n        const serviceStartStopCheckbox = document.getElementById('serviceNoStartStop');\n        if (serviceStartStopCheckbox) {\n          serviceStartStopCheckbox.checked = false;\n        }\n        \n        const servicePTOCheckbox = document.getElementById('serviceUsesPTO');\n        if (servicePTOCheckbox) {\n          servicePTOCheckbox.checked = false;\n        }\n        \n        \/\/ Hide PTO instructions\n        const transportPTOInstruction = document.getElementById('transportPTOInstruction');\n        if (transportPTOInstruction) {\n          transportPTOInstruction.classList.remove('show');\n        }\n        \n        const servicePTOInstruction = document.getElementById('servicePTOInstruction');\n        if (servicePTOInstruction) {\n          servicePTOInstruction.classList.remove('show');\n        }\n        \n        \/\/ Reset step\n        goToStep.currentStep = 1;\n      }\n      \n    })();\n  <\/script>\n<\/div>\n<!-- End: Quartix Partner Earnings Calculator Widget -->\n<\/div>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>See How Much You CanSave with Quartix Answer a few quick questions to estimate your potential savings with Quartix vehicle tracking, from fuel and private mileage to time accountability and route optimisation. 1 Business Type 2 Calculate Savings 3 Your Details 4 Your Results What type of business do you operate? Disclaimer: The savings calculated [&hellip;]<\/p>\n","protected":false},"author":219,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/landing-pagebuilder.php","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"topic":[],"qtx_campaign":[],"class_list":["post-123167","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Calculate Fleet Tracking ROI | Quartix Vehicle Tracking Savings Tool - UK<\/title>\n<meta name=\"description\" content=\"Discover how much your business could save with Quartix vehicle tracking. Use our free ROI calculator to estimate potential savings in fuel, time, and productivity.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.quartix.com\/en-gb\/return-on-investment-calculator\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ROI Calculator\" \/>\n<meta property=\"og:description\" content=\"Discover how much your business could save with Quartix vehicle tracking. Use our free ROI calculator to estimate potential savings in fuel, time, and productivity.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.quartix.com\/en-gb\/return-on-investment-calculator\/\" \/>\n<meta property=\"og:site_name\" content=\"Quartix\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Quartix-USA-374426386097401\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-04T20:06:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/flagcdn.com\/w40\/gb.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@QuartixUSA\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Calculate Fleet Tracking ROI | Quartix Vehicle Tracking Savings Tool - UK","description":"Discover how much your business could save with Quartix vehicle tracking. Use our free ROI calculator to estimate potential savings in fuel, time, and productivity.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.quartix.com\/en-gb\/return-on-investment-calculator\/","og_locale":"en_GB","og_type":"article","og_title":"ROI Calculator","og_description":"Discover how much your business could save with Quartix vehicle tracking. Use our free ROI calculator to estimate potential savings in fuel, time, and productivity.","og_url":"https:\/\/www.quartix.com\/en-gb\/return-on-investment-calculator\/","og_site_name":"Quartix","article_publisher":"https:\/\/www.facebook.com\/Quartix-USA-374426386097401\/","article_modified_time":"2026-02-04T20:06:11+00:00","og_image":[{"url":"https:\/\/flagcdn.com\/w40\/gb.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@QuartixUSA","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.quartix.com\/en-gb\/return-on-investment-calculator\/","url":"https:\/\/www.quartix.com\/en-gb\/return-on-investment-calculator\/","name":"Calculate Fleet Tracking ROI | Quartix Vehicle Tracking Savings Tool","isPartOf":{"@id":"https:\/\/www.quartix.com\/en-gb\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.quartix.com\/en-gb\/return-on-investment-calculator\/#primaryimage"},"image":{"@id":"https:\/\/www.quartix.com\/en-gb\/return-on-investment-calculator\/#primaryimage"},"thumbnailUrl":"https:\/\/flagcdn.com\/w40\/gb.png","datePublished":"2025-06-06T02:12:11+00:00","dateModified":"2026-02-04T20:06:11+00:00","description":"Discover how much your business could save with Quartix vehicle tracking. Use our free ROI calculator to estimate potential savings in fuel, time, and productivity.","breadcrumb":{"@id":"https:\/\/www.quartix.com\/en-gb\/return-on-investment-calculator\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.quartix.com\/en-gb\/return-on-investment-calculator\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.quartix.com\/en-gb\/return-on-investment-calculator\/#primaryimage","url":"https:\/\/flagcdn.com\/w40\/gb.png","contentUrl":"https:\/\/flagcdn.com\/w40\/gb.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.quartix.com\/en-gb\/return-on-investment-calculator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.quartix.com\/en-gb\/quartix-real-time-vehicle-tracking-2\/"},{"@type":"ListItem","position":2,"name":"ROI Calculator"}]},{"@type":"WebSite","@id":"https:\/\/www.quartix.com\/en-gb\/#website","url":"https:\/\/www.quartix.com\/en-gb\/","name":"Quartix","description":"Real-time vehicle tracking","publisher":{"@id":"https:\/\/www.quartix.com\/en-gb\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.quartix.com\/en-gb\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/www.quartix.com\/en-gb\/#organization","name":"Quartix","url":"https:\/\/www.quartix.com\/en-gb\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.quartix.com\/en-gb\/#\/schema\/logo\/image\/","url":"https:\/\/www.quartix.com\/content\/uploads\/2019\/02\/quartix-logo-eur.svg","contentUrl":"https:\/\/www.quartix.com\/content\/uploads\/2019\/02\/quartix-logo-eur.svg","width":1,"height":1,"caption":"Quartix"},"image":{"@id":"https:\/\/www.quartix.com\/en-gb\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Quartix-USA-374426386097401\/","https:\/\/x.com\/QuartixUSA","https:\/\/www.linkedin.com\/company\/5346733\/","https:\/\/www.youtube.com\/channel\/UCzS-_GMfHF4kWiCheyIRrAQ"]}]}},"_links":{"self":[{"href":"https:\/\/www.quartix.com\/en-gb\/wp-json\/wp\/v2\/pages\/123167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quartix.com\/en-gb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.quartix.com\/en-gb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.quartix.com\/en-gb\/wp-json\/wp\/v2\/users\/219"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quartix.com\/en-gb\/wp-json\/wp\/v2\/comments?post=123167"}],"version-history":[{"count":11,"href":"https:\/\/www.quartix.com\/en-gb\/wp-json\/wp\/v2\/pages\/123167\/revisions"}],"predecessor-version":[{"id":128784,"href":"https:\/\/www.quartix.com\/en-gb\/wp-json\/wp\/v2\/pages\/123167\/revisions\/128784"}],"wp:attachment":[{"href":"https:\/\/www.quartix.com\/en-gb\/wp-json\/wp\/v2\/media?parent=123167"}],"wp:term":[{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.quartix.com\/en-gb\/wp-json\/wp\/v2\/topic?post=123167"},{"taxonomy":"qtx_campaign","embeddable":true,"href":"https:\/\/www.quartix.com\/en-gb\/wp-json\/wp\/v2\/qtx_campaign?post=123167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}