{"id":469,"date":"2026-06-20T23:18:47","date_gmt":"2026-06-20T23:18:47","guid":{"rendered":"https:\/\/rpmwes.com\/blog\/?page_id=469"},"modified":"2026-07-01T01:10:03","modified_gmt":"2026-07-01T01:10:03","slug":"water-equity-quiz","status":"publish","type":"page","link":"https:\/\/rpmwes.com\/blog\/water-equity-quiz\/","title":{"rendered":"Water Equity Quiz"},"content":{"rendered":"\n<style>@media (max-width:781px){#rpm-quiz-frame{margin-left:-24px !important;margin-right:-24px !important;width:calc(100% + 48px) !important;}}<\/style>\n<iframe id=\"rpm-quiz-frame\" title=\"Water Equity Quiz\" scrolling=\"no\" style=\"width:100%;border:0;display:block;overflow:hidden;min-height:600px\" srcdoc=\"&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;base target=&quot;_parent&quot;&gt;&lt;link rel=&quot;preconnect&quot; href=&quot;https:\/\/fonts.googleapis.com&quot;&gt;&lt;link rel=&quot;preconnect&quot; href=&quot;https:\/\/fonts.gstatic.com&quot; crossorigin&gt;&lt;link href=&quot;https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600;700&amp;family=Playfair+Display:wght@600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;&lt;style&gt;\/**\n * Water Equity IQ Quiz Styles\n * Mobile-first responsive design with CSS custom properties\n * Branded for RPM Water Equity Solutions\n *\/\n\n\/* ========================================\n   CSS Custom Properties (Theme Variables)\n   ======================================== *\/\n:root {\n  \/* Primary colors - RPM Brand *\/\n  --primary: #0a1628;\n  --primary-dark: #060d17;\n  --primary-light: #1a2d4a;\n\n  \/* Secondary and accent *\/\n  --secondary: #60a5fa;\n  --accent: #3b82f6;\n\n  \/* Backgrounds *\/\n  --bg: #ffffff;\n  --bg-alt: #f8fafc;\n  --bg-muted: #f1f5f9;\n  --bg-dark: #0a1628;\n\n  \/* Text colors *\/\n  --text: #1e293b;\n  --text-muted: #64748b;\n  --text-light: #94a3b8;\n  --text-on-dark: #ffffff;\n\n  \/* Feedback colors *\/\n  --success: #059669;\n  --warning: #d97706;\n  --error: #dc2626;\n  --info: #2563eb;\n\n  \/* Tier colors *\/\n  --tier-high: #dc2626;\n  --tier-moderate: #d97706;\n  --tier-low: #059669;\n\n  \/* Spacing and sizing *\/\n  --radius-sm: 0.375rem;\n  --radius: 0.5rem;\n  --radius-lg: 0.75rem;\n  --radius-xl: 1rem;\n  --radius-full: 50px;\n\n  \/* Shadows *\/\n  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 \/ 0.05);\n  --shadow: 0 1px 3px 0 rgb(0 0 0 \/ 0.1), 0 1px 2px -1px rgb(0 0 0 \/ 0.1);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 \/ 0.1), 0 2px 4px -2px rgb(0 0 0 \/ 0.1);\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 \/ 0.1), 0 4px 6px -4px rgb(0 0 0 \/ 0.1);\n  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 \/ 0.1), 0 8px 10px -6px rgb(0 0 0 \/ 0.1);\n\n  \/* Typography *\/\n  --font: &#x27;DM Sans&#x27;, system-ui, -apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, Roboto, sans-serif;\n  --font-heading: &#x27;Playfair Display&#x27;, Georgia, &#x27;Times New Roman&#x27;, serif;\n  --font-mono: ui-monospace, SFMono-Regular, &#x27;SF Mono&#x27;, Menlo, Monaco, Consolas, monospace;\n\n  \/* Transitions *\/\n  --transition-fast: 150ms ease;\n  --transition: 200ms ease;\n  --transition-slow: 300ms ease;\n}\n\n\/* ========================================\n   Reset and Base Styles\n   ======================================== *\/\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n}\n\nhtml {\n  font-size: 16px;\n  -webkit-text-size-adjust: 100%;\n  scroll-behavior: smooth;\n}\n\nbody {\n  font-family: var(--font);\n  font-size: 1rem;\n  line-height: 1.6;\n  color: var(--text);\n  background-color: var(--bg);\n  min-height: 100vh;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\nimg, svg {\n  display: block;\n  max-width: 100%;\n}\n\nbutton, input, select, textarea {\n  font: inherit;\n  color: inherit;\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}\n\n\/* ========================================\n   Container\n   ======================================== *\/\n.container {\n  width: 100%;\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 0 1.5rem;\n}\n\n@media (min-width: 768px) {\n  .container {\n    padding: 0 2rem;\n  }\n}\n\n\/* ========================================\n   Site Header\n   ======================================== *\/\n.site-header {\n  background: var(--bg);\n  border-bottom: 1px solid var(--bg-muted);\n  position: sticky;\n  top: 0;\n  z-index: 100;\n}\n\n.header-container {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 1rem 1.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n@media (min-width: 768px) {\n  .header-container {\n    padding: 1rem 2rem;\n  }\n}\n\n.logo-link {\n  display: flex;\n  align-items: center;\n}\n\n.site-logo {\n  height: 40px;\n  width: auto;\n}\n\n@media (min-width: 768px) {\n  .site-logo {\n    height: 50px;\n  }\n}\n\n.header-nav {\n  display: none;\n  align-items: center;\n  gap: 2rem;\n}\n\n@media (min-width: 768px) {\n  .header-nav {\n    display: flex;\n  }\n}\n\n.header-nav.open {\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  background: var(--bg);\n  padding: 1.5rem;\n  border-bottom: 1px solid var(--bg-muted);\n  box-shadow: var(--shadow-md);\n}\n\n.nav-link {\n  font-size: 0.9375rem;\n  font-weight: 500;\n  color: var(--text-muted);\n  transition: color var(--transition);\n}\n\n.nav-link:hover {\n  color: var(--primary);\n}\n\n.nav-cta {\n  padding: 0.625rem 1.25rem;\n  background: var(--primary);\n  color: var(--text-on-dark);\n  border-radius: var(--radius-full);\n  transition: all var(--transition);\n}\n\n.nav-cta:hover {\n  background: var(--primary-light);\n  color: var(--text-on-dark);\n}\n\n\/* Mobile menu button *\/\n.mobile-menu-btn {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  padding: 0.5rem;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n\n@media (min-width: 768px) {\n  .mobile-menu-btn {\n    display: none;\n  }\n}\n\n.mobile-menu-btn span {\n  display: block;\n  width: 24px;\n  height: 2px;\n  background: var(--primary);\n  transition: all var(--transition);\n}\n\n.mobile-menu-btn[aria-expanded=&quot;true&quot;] span:nth-child(1) {\n  transform: translateY(7px) rotate(45deg);\n}\n\n.mobile-menu-btn[aria-expanded=&quot;true&quot;] span:nth-child(2) {\n  opacity: 0;\n}\n\n.mobile-menu-btn[aria-expanded=&quot;true&quot;] span:nth-child(3) {\n  transform: translateY(-7px) rotate(-45deg);\n}\n\n\/* ========================================\n   Landing Page - Hero Section\n   ======================================== *\/\n.landing-page {\n  display: block;\n}\n\n.hero-section {\n  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);\n  color: var(--text-on-dark);\n  padding: 4rem 0;\n  text-align: center;\n}\n\n@media (min-width: 768px) {\n  .hero-section {\n    padding: 6rem 0;\n  }\n}\n\n.hero-content {\n  max-width: 700px;\n  margin: 0 auto;\n}\n\n.hero-title {\n  font-family: var(--font-heading);\n  font-size: 2.25rem;\n  font-weight: 700;\n  line-height: 1.2;\n  margin-bottom: 1rem;\n}\n\n@media (min-width: 768px) {\n  .hero-title {\n    font-size: 3rem;\n  }\n}\n\n@media (min-width: 1024px) {\n  .hero-title {\n    font-size: 3.5rem;\n  }\n}\n\n.hero-subtitle {\n  font-size: 1.125rem;\n  opacity: 0.9;\n  margin-bottom: 2rem;\n  line-height: 1.6;\n}\n\n@media (min-width: 768px) {\n  .hero-subtitle {\n    font-size: 1.25rem;\n  }\n}\n\n.hero-cta {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1rem;\n}\n\n.hero-disclaimer {\n  font-size: 0.875rem;\n  opacity: 0.7;\n}\n\n\/* ========================================\n   Landing Page - Content Sections\n   ======================================== *\/\n.content-section {\n  padding: 4rem 0;\n}\n\n@media (min-width: 768px) {\n  .content-section {\n    padding: 5rem 0;\n  }\n}\n\n.content-section.alt-bg {\n  background: var(--bg-alt);\n}\n\n.section-title {\n  font-family: var(--font-heading);\n  font-size: 1.75rem;\n  font-weight: 600;\n  color: var(--primary);\n  text-align: center;\n  margin-bottom: 2.5rem;\n}\n\n@media (min-width: 768px) {\n  .section-title {\n    font-size: 2.25rem;\n    margin-bottom: 3rem;\n  }\n}\n\n\/* Value list *\/\n.value-list {\n  list-style: none;\n  max-width: 600px;\n  margin: 0 auto;\n}\n\n.value-list li {\n  display: flex;\n  align-items: flex-start;\n  gap: 1rem;\n  margin-bottom: 1.25rem;\n  font-size: 1rem;\n  color: var(--text);\n}\n\n@media (min-width: 768px) {\n  .value-list li {\n    font-size: 1.0625rem;\n  }\n}\n\n.value-icon {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  color: var(--success);\n  margin-top: 0.125rem;\n}\n\n\/* Steps grid *\/\n.steps-grid {\n  display: grid;\n  gap: 1.5rem;\n}\n\n@media (min-width: 768px) {\n  .steps-grid {\n    grid-template-columns: repeat(3, 1fr);\n    gap: 2rem;\n  }\n}\n\n.step-card {\n  background: var(--bg);\n  padding: 2rem;\n  border-radius: var(--radius-xl);\n  text-align: center;\n  box-shadow: var(--shadow);\n}\n\n.step-number {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  background: var(--secondary);\n  color: var(--primary);\n  font-size: 1.25rem;\n  font-weight: 700;\n  border-radius: 50%;\n  margin-bottom: 1rem;\n}\n\n.step-title {\n  font-size: 1.125rem;\n  font-weight: 600;\n  color: var(--primary);\n  margin-bottom: 0.5rem;\n}\n\n.step-description {\n  font-size: 0.9375rem;\n  color: var(--text-muted);\n  line-height: 1.5;\n}\n\n\/* Audience grid *\/\n.audience-grid {\n  display: grid;\n  gap: 2rem;\n}\n\n@media (min-width: 640px) {\n  .audience-grid {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 3rem;\n  }\n}\n\n.audience-column {\n  text-align: center;\n}\n\n@media (min-width: 640px) {\n  .audience-column {\n    text-align: left;\n  }\n}\n\n.audience-heading {\n  font-family: var(--font-heading);\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: var(--primary);\n  margin-bottom: 1rem;\n}\n\n.audience-list {\n  list-style: none;\n}\n\n.audience-list li {\n  position: relative;\n  padding-left: 1.5rem;\n  margin-bottom: 0.625rem;\n  color: var(--text-muted);\n  font-size: 0.9375rem;\n}\n\n.audience-list li::before {\n  content: &#x27;&#x27;;\n  position: absolute;\n  left: 0;\n  top: 0.625rem;\n  width: 6px;\n  height: 6px;\n  background: var(--secondary);\n  border-radius: 50%;\n}\n\n\/* Trust section *\/\n.trust-section {\n  background: var(--bg-alt);\n  padding: 3rem 0;\n  border-top: 1px solid var(--bg-muted);\n  border-bottom: 1px solid var(--bg-muted);\n}\n\n@media (min-width: 768px) {\n  .trust-section {\n    padding: 4rem 0;\n  }\n}\n\n.trust-grid {\n  display: grid;\n  gap: 2rem;\n  margin-bottom: 2rem;\n}\n\n@media (min-width: 768px) {\n  .trust-grid {\n    grid-template-columns: repeat(3, 1fr);\n    text-align: center;\n  }\n}\n\n.trust-item {\n  text-align: center;\n}\n\n.trust-stat {\n  display: block;\n  font-family: var(--font-heading);\n  font-size: 2.5rem;\n  font-weight: 700;\n  color: var(--primary);\n  line-height: 1;\n  margin-bottom: 0.5rem;\n}\n\n@media (min-width: 768px) {\n  .trust-stat {\n    font-size: 3rem;\n  }\n}\n\n.trust-label {\n  font-size: 0.9375rem;\n  color: var(--text-muted);\n  line-height: 1.4;\n}\n\n.trust-statement {\n  text-align: center;\n  font-size: 0.9375rem;\n  color: var(--text-muted);\n  max-width: 600px;\n  margin: 0 auto;\n  line-height: 1.6;\n}\n\n\/* CTA Section *\/\n.cta-section {\n  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);\n  color: var(--text-on-dark);\n  padding: 4rem 0;\n  text-align: center;\n}\n\n@media (min-width: 768px) {\n  .cta-section {\n    padding: 5rem 0;\n  }\n}\n\n.cta-title {\n  font-family: var(--font-heading);\n  font-size: 1.75rem;\n  font-weight: 600;\n  margin-bottom: 0.75rem;\n}\n\n@media (min-width: 768px) {\n  .cta-title {\n    font-size: 2.25rem;\n  }\n}\n\n.cta-subtitle {\n  font-size: 1.0625rem;\n  opacity: 0.9;\n  margin-bottom: 2rem;\n}\n\n\/* ========================================\n   Site Footer\n   ======================================== *\/\n.site-footer {\n  background: var(--primary);\n  color: var(--text-on-dark);\n  padding: 2rem 0;\n}\n\n.footer-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1rem;\n  text-align: center;\n}\n\n@media (min-width: 640px) {\n  .footer-content {\n    flex-direction: row;\n    justify-content: space-between;\n  }\n}\n\n.footer-copyright {\n  font-size: 0.875rem;\n  opacity: 0.8;\n}\n\n.footer-nav {\n  display: flex;\n  gap: 1.5rem;\n}\n\n.footer-nav a {\n  font-size: 0.875rem;\n  opacity: 0.8;\n  transition: opacity var(--transition);\n}\n\n.footer-nav a:hover {\n  opacity: 1;\n}\n\n\/* ========================================\n   Buttons\n   ======================================== *\/\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 0.875rem 1.75rem;\n  font-size: 1rem;\n  font-weight: 600;\n  text-decoration: none;\n  border: none;\n  border-radius: var(--radius-full);\n  cursor: pointer;\n  transition: all var(--transition);\n  white-space: nowrap;\n}\n\n.btn:focus-visible {\n  outline: 2px solid var(--secondary);\n  outline-offset: 2px;\n}\n\n.btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.btn-primary {\n  background: linear-gradient(135deg, var(--secondary) 0%, var(--accent) 100%);\n  color: var(--primary);\n}\n\n.btn-primary:hover:not(:disabled) {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 20px -4px rgba(96, 165, 250, 0.4);\n}\n\n.btn-primary:active:not(:disabled) {\n  transform: translateY(0);\n}\n\n\/* White button variant for dark backgrounds *\/\n.hero-section .btn-primary,\n.cta-section .btn-primary {\n  background: var(--bg);\n  color: var(--primary);\n}\n\n.hero-section .btn-primary:hover:not(:disabled),\n.cta-section .btn-primary:hover:not(:disabled) {\n  background: var(--bg-alt);\n  box-shadow: 0 8px 20px -4px rgba(255, 255, 255, 0.3);\n}\n\n.btn-secondary {\n  background: var(--bg-muted);\n  color: var(--text);\n}\n\n.btn-secondary:hover:not(:disabled) {\n  background: #e2e8f0;\n}\n\n.btn-outline {\n  background: transparent;\n  color: var(--primary);\n  border: 2px solid var(--primary);\n}\n\n.btn-outline:hover:not(:disabled) {\n  background: var(--primary);\n  color: var(--text-on-dark);\n}\n\n.btn-lg {\n  padding: 1rem 2.5rem;\n  font-size: 1.125rem;\n}\n\n\/* On phones, allow long button labels to wrap instead of overflowing the viewport *\/\n@media (max-width: 480px) {\n  .btn {\n    white-space: normal;\n    max-width: 100%;\n  }\n  .btn-lg {\n    padding: 0.875rem 1.5rem;\n    font-size: 1.0625rem;\n  }\n}\n\n.btn-block {\n  width: 100%;\n}\n\n.btn-group {\n  display: flex;\n  gap: 1rem;\n  flex-wrap: wrap;\n}\n\n\/* ========================================\n   Quiz Container and Card\n   ======================================== *\/\n.quiz-wrapper {\n  padding: 2rem 0 4rem;\n  min-height: calc(100vh - 200px);\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n}\n\n.quiz-container {\n  width: 100%;\n  max-width: 42rem;\n  margin: 0 auto;\n  padding: 0 1rem;\n}\n\n@media (min-width: 640px) {\n  .quiz-container {\n    padding: 0 2rem;\n  }\n}\n\n.quiz-card {\n  background: var(--bg);\n  border-radius: var(--radius-xl);\n  box-shadow: var(--shadow-xl);\n  padding: 1.5rem;\n  display: flex;\n  flex-direction: column;\n}\n\n@media (min-width: 640px) {\n  .quiz-card {\n    padding: 2.5rem;\n  }\n}\n\n\/* Screen management *\/\n.screen {\n  display: none;\n  flex-direction: column;\n  flex: 1;\n  animation: fadeIn var(--transition-slow) ease;\n}\n\n.screen.active {\n  display: flex;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n\/* ========================================\n   Typography\n   ======================================== *\/\n.brand-name {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: var(--primary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin-bottom: 0.5rem;\n}\n\n.quiz-title {\n  font-family: var(--font-heading);\n  font-size: 1.75rem;\n  font-weight: 700;\n  color: var(--text);\n  line-height: 1.2;\n  margin-bottom: 0.75rem;\n}\n\n@media (min-width: 640px) {\n  .quiz-title {\n    font-size: 2.25rem;\n  }\n}\n\n.quiz-subtitle {\n  font-size: 1rem;\n  color: var(--text-muted);\n  margin-bottom: 2rem;\n}\n\n@media (min-width: 640px) {\n  .quiz-subtitle {\n    font-size: 1.125rem;\n  }\n}\n\n\/* ========================================\n   Progress Bar\n   ======================================== *\/\n.progress-container {\n  margin-bottom: 2rem;\n}\n\n.progress-text {\n  display: flex;\n  justify-content: space-between;\n  font-size: 0.875rem;\n  color: var(--text-muted);\n  margin-bottom: 0.5rem;\n}\n\n.progress-bar {\n  height: 0.5rem;\n  background: var(--bg-muted);\n  border-radius: 9999px;\n  overflow: hidden;\n}\n\n.progress-fill {\n  height: 100%;\n  background: linear-gradient(90deg, var(--secondary), var(--accent));\n  border-radius: 9999px;\n  transition: width var(--transition-slow) ease;\n}\n\n\/* ========================================\n   Question Styles\n   ======================================== *\/\n.question-container {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n.question-text {\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: var(--text);\n  margin-bottom: 1.5rem;\n  line-height: 1.4;\n}\n\n@media (min-width: 640px) {\n  .question-text {\n    font-size: 1.375rem;\n  }\n}\n\n.options-list {\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  margin-bottom: 1.5rem;\n}\n\n.option-btn {\n  width: 100%;\n  padding: 1rem 1.25rem;\n  text-align: left;\n  background: var(--bg);\n  border: 2px solid var(--bg-muted);\n  border-radius: var(--radius-lg);\n  cursor: pointer;\n  transition: all var(--transition);\n  font-size: 1rem;\n  line-height: 1.4;\n}\n\n.option-btn:hover:not(:disabled) {\n  border-color: var(--secondary);\n  background: rgba(96, 165, 250, 0.05);\n}\n\n.option-btn:focus-visible {\n  outline: 2px solid var(--secondary);\n  outline-offset: 2px;\n}\n\n.option-btn.selected {\n  border-color: var(--secondary);\n  background: rgba(96, 165, 250, 0.1);\n}\n\n.option-btn.correct {\n  border-color: var(--success);\n  background: #d1fae5;\n}\n\n.option-btn.incorrect {\n  border-color: var(--error);\n  background: #fee2e2;\n}\n\n.option-btn:disabled {\n  cursor: default;\n}\n\n\/* Explanation box *\/\n.explanation-box {\n  padding: 1rem 1.25rem;\n  background: rgba(96, 165, 250, 0.08);\n  border-left: 4px solid var(--secondary);\n  border-radius: 0 var(--radius) var(--radius) 0;\n  margin-bottom: 1.5rem;\n  animation: fadeIn var(--transition) ease;\n}\n\n.explanation-label {\n  font-weight: 600;\n  font-size: 0.875rem;\n  margin-bottom: 0.25rem;\n}\n\n.explanation-label.correct {\n  color: var(--success);\n}\n\n.explanation-label.incorrect {\n  color: var(--error);\n}\n\n.explanation-label.fact {\n  color: var(--accent);\n}\n\n.explanation-text {\n  font-size: 0.9375rem;\n  color: var(--text-muted);\n  line-height: 1.5;\n}\n\n\/* Question navigation *\/\n.question-nav {\n  display: flex;\n  justify-content: space-between;\n  gap: 1rem;\n  margin-top: auto;\n  padding-top: 1rem;\n}\n\n.question-nav .btn {\n  flex: 1;\n}\n\n@media (min-width: 640px) {\n  .question-nav .btn {\n    flex: none;\n  }\n}\n\n\/* ========================================\n   Lead Form Styles\n   ======================================== *\/\n.lead-form-header {\n  text-align: center;\n  margin-bottom: 1.5rem;\n}\n\n.lead-form-title {\n  font-family: var(--font-heading);\n  font-size: 1.5rem;\n  font-weight: 700;\n  color: var(--primary);\n  margin-bottom: 0.5rem;\n}\n\n@media (min-width: 640px) {\n  .lead-form-title {\n    font-size: 1.75rem;\n  }\n}\n\n.lead-form-subtitle {\n  color: var(--text-muted);\n  font-size: 1rem;\n}\n\n.lead-form-content {\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n}\n\n.lead-form-main {\n  flex: 1;\n}\n\n\/* Promise Section *\/\n.lead-form-promise {\n  margin-top: 1.5rem;\n  padding-top: 1.5rem;\n  border-top: 1px solid var(--bg-muted);\n}\n\n.promise-title {\n  font-size: 0.9375rem;\n  font-weight: 600;\n  color: var(--text);\n  margin-bottom: 0.75rem;\n}\n\n.promise-list {\n  list-style: none;\n  margin: 0 0 1rem 0;\n  padding: 0;\n}\n\n.promise-list li {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.625rem;\n  margin-bottom: 0.5rem;\n  font-size: 0.875rem;\n  color: var(--text-muted);\n}\n\n.promise-icon {\n  width: 18px;\n  height: 18px;\n  min-width: 18px;\n  color: var(--success);\n  margin-top: 0.125rem;\n}\n\n.promise-note {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  padding: 0.875rem;\n  background: var(--bg-alt);\n  border-radius: var(--radius);\n  border-left: 3px solid var(--secondary);\n}\n\n.promise-note-icon {\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  color: var(--secondary);\n  margin-top: 0.125rem;\n}\n\n.promise-note p {\n  font-size: 0.8125rem;\n  color: var(--text-muted);\n  line-height: 1.5;\n  margin: 0;\n}\n\n.promise-note strong {\n  color: var(--text);\n}\n\n\/* Testimonials *\/\n.lead-form-social-proof {\n  padding-top: 1.5rem;\n  border-top: 1px solid var(--bg-muted);\n}\n\n.testimonials-title {\n  font-size: 0.9375rem;\n  font-weight: 600;\n  color: var(--text);\n  margin-bottom: 1rem;\n  text-align: center;\n}\n\n.testimonial-card {\n  background: var(--bg-alt);\n  border-radius: var(--radius-lg);\n  padding: 1.25rem;\n  margin-bottom: 1rem;\n}\n\n.testimonial-card:last-child {\n  margin-bottom: 0;\n}\n\n.testimonial-quote {\n  font-size: 0.9375rem;\n  font-style: italic;\n  color: var(--text);\n  line-height: 1.6;\n  margin: 0 0 0.75rem 0;\n  position: relative;\n  padding-left: 1rem;\n  border-left: 3px solid var(--secondary);\n}\n\n.testimonial-author {\n  display: flex;\n  flex-direction: column;\n  padding-left: 1rem;\n}\n\n.author-name {\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--text);\n}\n\n.author-role {\n  font-size: 0.8125rem;\n  color: var(--text-muted);\n}\n\n.form-group {\n  margin-bottom: 1.25rem;\n}\n\n.form-label {\n  display: block;\n  font-size: 0.875rem;\n  font-weight: 500;\n  margin-bottom: 0.375rem;\n  color: var(--text);\n}\n\n.form-label .required {\n  color: var(--error);\n  margin-left: 0.125rem;\n}\n\n.form-input,\n.form-select {\n  width: 100%;\n  padding: 0.75rem 1rem;\n  font-size: 1rem;\n  border: 2px solid var(--bg-muted);\n  border-radius: var(--radius);\n  background: var(--bg);\n  transition: border-color var(--transition), box-shadow var(--transition);\n}\n\n.form-input:focus,\n.form-select:focus {\n  outline: none;\n  border-color: var(--secondary);\n  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);\n}\n\n.form-input.error,\n.form-select.error {\n  border-color: var(--error);\n}\n\n.form-input.error:focus,\n.form-select.error:focus {\n  box-shadow: 0 0 0 3px rgb(220 38 38 \/ 0.1);\n}\n\n.form-error {\n  font-size: 0.8125rem;\n  color: var(--error);\n  margin-top: 0.375rem;\n  display: none;\n}\n\n.form-error.visible {\n  display: block;\n}\n\n.form-select {\n  appearance: none;\n  background-image: url(&quot;data:image\/svg+xml,%3Csvg xmlns=&#x27;http:\/\/www.w3.org\/2000\/svg&#x27; width=&#x27;20&#x27; height=&#x27;20&#x27; viewBox=&#x27;0 0 24 24&#x27; fill=&#x27;none&#x27; stroke=&#x27;%2364748b&#x27; stroke-width=&#x27;2&#x27;%3E%3Cpath d=&#x27;M6 9l6 6 6-6&#x27;\/%3E%3C\/svg%3E&quot;);\n  background-repeat: no-repeat;\n  background-position: right 0.75rem center;\n  padding-right: 2.5rem;\n}\n\n\/* Checkbox *\/\n.form-checkbox-group {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  margin: 1.5rem 0;\n}\n\n.form-checkbox {\n  width: 1.25rem;\n  height: 1.25rem;\n  margin-top: 0.125rem;\n  accent-color: var(--secondary);\n  flex-shrink: 0;\n}\n\n.form-checkbox-label {\n  font-size: 0.9375rem;\n  color: var(--text-muted);\n  line-height: 1.4;\n}\n\n.form-privacy-statement {\n  font-size: 0.8125rem;\n  color: var(--text-muted);\n  text-align: center;\n  margin: 1rem 0;\n  line-height: 1.5;\n}\n\n\/* Form row for side-by-side fields *\/\n.form-row {\n  display: grid;\n  gap: 1rem;\n}\n\n@media (min-width: 480px) {\n  .form-row {\n    grid-template-columns: 1fr 1fr;\n  }\n}\n\n\/* ========================================\n   Results Screen\n   ======================================== *\/\n.results-header {\n  text-align: center;\n  margin-bottom: 2rem;\n}\n\n.score-display {\n  margin-bottom: 1.5rem;\n}\n\n.score-circle {\n  width: 140px;\n  height: 140px;\n  margin: 0 auto;\n  position: relative;\n}\n\n.score-circle svg {\n  transform: rotate(-90deg);\n  width: 100%;\n  height: 100%;\n}\n\n.score-circle .bg {\n  fill: none;\n  stroke: var(--bg-muted);\n  stroke-width: 8;\n}\n\n.score-circle .progress {\n  fill: none;\n  stroke-width: 8;\n  stroke-linecap: round;\n  transition: stroke-dashoffset 1s ease-out;\n}\n\n.score-value {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  font-family: var(--font-heading);\n  font-size: 2rem;\n  font-weight: 700;\n  color: var(--primary);\n}\n\n.tier-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 1rem;\n  border-radius: 9999px;\n  font-weight: 600;\n  font-size: 1rem;\n  margin-bottom: 1rem;\n}\n\n.tier-badge.high {\n  background: #fef2f2;\n  color: var(--tier-high);\n}\n\n.tier-badge.moderate {\n  background: #fef3c7;\n  color: var(--tier-moderate);\n}\n\n.tier-badge.low {\n  background: #d1fae5;\n  color: var(--tier-low);\n}\n\n.tier-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n.tier-description {\n  font-size: 1.125rem;\n  font-weight: 500;\n  color: var(--text);\n  margin-bottom: 1rem;\n  line-height: 1.6;\n}\n\n.tier-cta {\n  font-size: 1.0625rem;\n  font-weight: 500;\n  color: var(--text);\n  margin-bottom: 2rem;\n}\n\n\/* Results breakdown *\/\n.results-breakdown {\n  background: var(--bg-alt);\n  border-radius: var(--radius-lg);\n  padding: 1.5rem;\n  margin-bottom: 2rem;\n}\n\n.breakdown-title {\n  font-size: 1.125rem;\n  font-weight: 600;\n  margin-bottom: 1rem;\n}\n\n.breakdown-stat {\n  display: flex;\n  justify-content: space-between;\n  padding: 0.5rem 0;\n  border-bottom: 1px solid var(--bg-muted);\n}\n\n.breakdown-stat:last-child {\n  border-bottom: none;\n}\n\n.breakdown-label {\n  color: var(--text-muted);\n}\n\n.breakdown-value {\n  font-weight: 600;\n}\n\n.breakdown-value.correct {\n  color: var(--success);\n}\n\n\/* Tier details list *\/\n.tier-details {\n  list-style: none;\n  padding: 0;\n  margin: 0 0 1.5rem 0;\n  text-align: left;\n}\n\n.tier-details li {\n  position: relative;\n  padding-left: 1.5rem;\n  margin-bottom: 0.5rem;\n  font-size: 0.9375rem;\n  color: var(--text-muted);\n  line-height: 1.5;\n}\n\n.tier-details li::before {\n  content: &#x27;&#x27;;\n  position: absolute;\n  left: 0;\n  top: 0.5rem;\n  width: 0.5rem;\n  height: 0.5rem;\n  background: var(--secondary);\n  border-radius: 50%;\n}\n\n\/* Results actions *\/\n.results-actions {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n@media (min-width: 480px) {\n  .results-actions {\n    flex-direction: row;\n    justify-content: center;\n  }\n}\n\n\/* ========================================\n   Loading and Error States\n   ======================================== *\/\n.loading-spinner {\n  display: inline-block;\n  width: 1.25rem;\n  height: 1.25rem;\n  border: 2px solid rgba(10, 22, 40, 0.3);\n  border-top-color: var(--primary);\n  border-radius: 50%;\n  animation: spin 0.8s linear infinite;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.error-message {\n  padding: 1rem;\n  background: #fef2f2;\n  border: 1px solid #fecaca;\n  border-radius: var(--radius);\n  color: var(--error);\n  font-size: 0.9375rem;\n  margin-bottom: 1rem;\n  display: none;\n}\n\n.error-message.visible {\n  display: block;\n}\n\n.mailto-fallback {\n  text-align: center;\n  padding: 1rem;\n  background: var(--bg-alt);\n  border-radius: var(--radius);\n  margin-top: 1rem;\n  display: none;\n}\n\n.mailto-fallback.visible {\n  display: block;\n}\n\n.mailto-fallback a {\n  color: var(--accent);\n  font-weight: 500;\n}\n\n\/* ========================================\n   Intro Screen Specifics\n   ======================================== *\/\n.intro-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  text-align: center;\n}\n\n.intro-icon {\n  width: 80px;\n  height: 80px;\n  margin: 0 auto 1.5rem;\n  color: var(--secondary);\n}\n\n.intro-features {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  margin: 2rem 0;\n  text-align: left;\n}\n\n.intro-feature {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  font-size: 0.9375rem;\n  color: var(--text-muted);\n}\n\n.intro-feature-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n  color: var(--accent);\n  flex-shrink: 0;\n}\n\n\/* ========================================\n   Multi-Select Questions\n   ======================================== *\/\n.multi-select-hint {\n  display: block;\n  font-size: 0.875rem;\n  font-weight: 400;\n  color: var(--text-muted);\n  margin-top: 0.25rem;\n}\n\n\/* Checkbox indicator for multi-select options *\/\n.checkbox-indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.25rem;\n  height: 1.25rem;\n  min-width: 1.25rem;\n  border: 2px solid var(--bg-muted);\n  border-radius: var(--radius-sm);\n  margin-right: 0.75rem;\n  transition: all var(--transition);\n  background: var(--bg);\n}\n\n.checkbox-indicator::after {\n  content: &#x27;&#x27;;\n  width: 0.5rem;\n  height: 0.5rem;\n  background: transparent;\n  border-radius: 2px;\n  transition: background var(--transition);\n}\n\n.option-btn.selected .checkbox-indicator {\n  border-color: var(--secondary);\n  background: var(--secondary);\n}\n\n.option-btn.selected .checkbox-indicator::after {\n  background: white;\n}\n\n.option-btn:hover:not(:disabled) .checkbox-indicator {\n  border-color: var(--secondary);\n}\n\n\/* ========================================\n   Utility Classes\n   ======================================== *\/\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.text-center {\n  text-align: center;\n}\n\n.mt-auto {\n  margin-top: auto;\n}\n\n\/* Focus visible for better keyboard navigation *\/\n:focus-visible {\n  outline: 2px solid var(--secondary);\n  outline-offset: 2px;\n}\n\n\/* Skip link for accessibility *\/\n.skip-link {\n  position: absolute;\n  top: -100%;\n  left: 0;\n  background: var(--primary);\n  color: var(--text-on-dark);\n  padding: 0.5rem 1rem;\n  z-index: 1000;\n  transition: top var(--transition);\n}\n\n.skip-link:focus {\n  top: 0;\n}\n&lt;\/style&gt;&lt;\/head&gt;&lt;body&gt;&lt;main id=&quot;main-content&quot;&gt;\n    &lt;!-- Landing Page --&gt;\n    &lt;div id=&quot;landing-page&quot; class=&quot;landing-page&quot;&gt;\n\n      &lt;!-- Hero Section --&gt;\n      &lt;section class=&quot;hero-section&quot;&gt;\n        &lt;div class=&quot;container&quot;&gt;\n          &lt;div class=&quot;hero-content&quot;&gt;\n            &lt;h1 class=&quot;hero-title&quot;&gt;What Is Your Water Equity IQ?&lt;\/h1&gt;\n            &lt;p class=&quot;hero-subtitle&quot;&gt;Most facilities overpay for sewer. This 60-second assessment shows whether you could recover costs through sewer and evaporation credits.&lt;\/p&gt;\n            &lt;div class=&quot;hero-cta&quot;&gt;\n              &lt;button id=&quot;hero-start-btn&quot; class=&quot;btn btn-primary btn-lg&quot;&gt;Start the Free Assessment&lt;\/button&gt;\n              &lt;p class=&quot;hero-disclaimer&quot;&gt;No obligation. Instant results.&lt;\/p&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/section&gt;\n\n      &lt;!-- What You&#x27;ll Learn Section --&gt;\n      &lt;section id=&quot;what-youll-learn&quot; class=&quot;content-section&quot;&gt;\n        &lt;div class=&quot;container&quot;&gt;\n          &lt;h2 class=&quot;section-title&quot;&gt;What You&#x27;ll Learn in Under a Minute&lt;\/h2&gt;\n          &lt;ul class=&quot;value-list&quot;&gt;\n            &lt;li&gt;\n              &lt;svg class=&quot;value-icon&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; aria-hidden=&quot;true&quot;&gt;\n                &lt;path d=&quot;M22 11.08V12a10 10 0 1 1-5.93-9.14&quot;\/&gt;\n                &lt;polyline points=&quot;22 4 12 14.01 9 11.01&quot;\/&gt;\n              &lt;\/svg&gt;\n              &lt;span&gt;Whether your facility may qualify for sewer or evaporation credits&lt;\/span&gt;\n            &lt;\/li&gt;\n            &lt;li&gt;\n              &lt;svg class=&quot;value-icon&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; aria-hidden=&quot;true&quot;&gt;\n                &lt;path d=&quot;M22 11.08V12a10 10 0 1 1-5.93-9.14&quot;\/&gt;\n                &lt;polyline points=&quot;22 4 12 14.01 9 11.01&quot;\/&gt;\n              &lt;\/svg&gt;\n              &lt;span&gt;If you&#x27;re likely paying sewer fees on water that never reaches the sewer&lt;\/span&gt;\n            &lt;\/li&gt;\n            &lt;li&gt;\n              &lt;svg class=&quot;value-icon&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; aria-hidden=&quot;true&quot;&gt;\n                &lt;path d=&quot;M22 11.08V12a10 10 0 1 1-5.93-9.14&quot;\/&gt;\n                &lt;polyline points=&quot;22 4 12 14.01 9 11.01&quot;\/&gt;\n              &lt;\/svg&gt;\n              &lt;span&gt;Where monitoring and documentation could reduce future bills&lt;\/span&gt;\n            &lt;\/li&gt;\n            &lt;li&gt;\n              &lt;svg class=&quot;value-icon&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; aria-hidden=&quot;true&quot;&gt;\n                &lt;path d=&quot;M22 11.08V12a10 10 0 1 1-5.93-9.14&quot;\/&gt;\n                &lt;polyline points=&quot;22 4 12 14.01 9 11.01&quot;\/&gt;\n              &lt;\/svg&gt;\n              &lt;span&gt;Whether a free review with RPM is worth your time&lt;\/span&gt;\n            &lt;\/li&gt;\n          &lt;\/ul&gt;\n        &lt;\/div&gt;\n      &lt;\/section&gt;\n\n      &lt;!-- How It Works Section --&gt;\n      &lt;section id=&quot;how-it-works&quot; class=&quot;content-section alt-bg&quot;&gt;\n        &lt;div class=&quot;container&quot;&gt;\n          &lt;h2 class=&quot;section-title&quot;&gt;How the Assessment Works&lt;\/h2&gt;\n          &lt;div class=&quot;steps-grid&quot;&gt;\n            &lt;div class=&quot;step-card&quot;&gt;\n              &lt;div class=&quot;step-number&quot;&gt;1&lt;\/div&gt;\n              &lt;h3 class=&quot;step-title&quot;&gt;Answer 8 Quick Questions&lt;\/h3&gt;\n              &lt;p class=&quot;step-description&quot;&gt;About your facility type, water systems, and current billing situation.&lt;\/p&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;step-card&quot;&gt;\n              &lt;div class=&quot;step-number&quot;&gt;2&lt;\/div&gt;\n              &lt;h3 class=&quot;step-title&quot;&gt;Get Your Opportunity Score&lt;\/h3&gt;\n              &lt;p class=&quot;step-description&quot;&gt;See your instant Water Equity score and opportunity level.&lt;\/p&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;step-card&quot;&gt;\n              &lt;div class=&quot;step-number&quot;&gt;3&lt;\/div&gt;\n              &lt;h3 class=&quot;step-title&quot;&gt;Review Your Options&lt;\/h3&gt;\n              &lt;p class=&quot;step-description&quot;&gt;Learn if a no-cost RPM review could unlock savings for your facility.&lt;\/p&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/section&gt;\n\n      &lt;!-- Who It&#x27;s For Section --&gt;\n      &lt;section class=&quot;content-section&quot;&gt;\n        &lt;div class=&quot;container&quot;&gt;\n          &lt;h2 class=&quot;section-title&quot;&gt;Who This Assessment Is Designed For&lt;\/h2&gt;\n          &lt;div class=&quot;audience-grid&quot;&gt;\n            &lt;div class=&quot;audience-column&quot;&gt;\n              &lt;h3 class=&quot;audience-heading&quot;&gt;Roles&lt;\/h3&gt;\n              &lt;ul class=&quot;audience-list&quot;&gt;\n                &lt;li&gt;Facility managers&lt;\/li&gt;\n                &lt;li&gt;Operations and plant managers&lt;\/li&gt;\n                &lt;li&gt;CFOs and finance leaders&lt;\/li&gt;\n                &lt;li&gt;Sustainability and ESG teams&lt;\/li&gt;\n                &lt;li&gt;Property and asset managers&lt;\/li&gt;\n              &lt;\/ul&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;audience-column&quot;&gt;\n              &lt;h3 class=&quot;audience-heading&quot;&gt;Industries&lt;\/h3&gt;\n              &lt;ul class=&quot;audience-list&quot;&gt;\n                &lt;li&gt;Education and campuses&lt;\/li&gt;\n                &lt;li&gt;Hospitality and hotels&lt;\/li&gt;\n                &lt;li&gt;Commercial real estate&lt;\/li&gt;\n                &lt;li&gt;Industrial and manufacturing&lt;\/li&gt;\n                &lt;li&gt;Retail portfolios&lt;\/li&gt;\n                &lt;li&gt;Airports and large facilities&lt;\/li&gt;\n              &lt;\/ul&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/section&gt;\n\n      &lt;!-- Trust Signals Section --&gt;\n      &lt;section class=&quot;trust-section&quot;&gt;\n        &lt;div class=&quot;container&quot;&gt;\n          &lt;div class=&quot;trust-grid&quot;&gt;\n            &lt;div class=&quot;trust-item&quot;&gt;\n              &lt;span class=&quot;trust-stat&quot;&gt;Recover&lt;\/span&gt;\n              &lt;span class=&quot;trust-label&quot;&gt;Sewer charges paid on water that never reaches the sewer&lt;\/span&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;trust-item&quot;&gt;\n              &lt;span class=&quot;trust-stat&quot;&gt;Monitor&lt;\/span&gt;\n              &lt;span class=&quot;trust-label&quot;&gt;Utility-grade metering and documentation&lt;\/span&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;trust-item&quot;&gt;\n              &lt;span class=&quot;trust-stat&quot;&gt;Nationwide&lt;\/span&gt;\n              &lt;span class=&quot;trust-label&quot;&gt;Commercial and institutional facilities across the U.S.&lt;\/span&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;p class=&quot;trust-statement&quot;&gt;RPM works with commercial and institutional facilities nationwide, providing utility-grade monitoring and documentation.&lt;\/p&gt;\n        &lt;\/div&gt;\n      &lt;\/section&gt;\n\n      &lt;!-- Final CTA Section --&gt;\n      &lt;section id=&quot;start-assessment&quot; class=&quot;cta-section&quot;&gt;\n        &lt;div class=&quot;container&quot;&gt;\n          &lt;h2 class=&quot;cta-title&quot;&gt;Ready to See Your Water Equity Opportunity?&lt;\/h2&gt;\n          &lt;p class=&quot;cta-subtitle&quot;&gt;Answer 8 questions. Get instant results. No commitment required.&lt;\/p&gt;\n          &lt;button id=&quot;begin-assessment-btn&quot; class=&quot;btn btn-primary btn-lg&quot;&gt;Start the Water Equity Assessment&lt;\/button&gt;\n        &lt;\/div&gt;\n      &lt;\/section&gt;\n\n    &lt;\/div&gt;\n\n    &lt;!-- Quiz Container (hidden until started) --&gt;\n    &lt;div id=&quot;quiz-wrapper&quot; class=&quot;quiz-wrapper&quot; style=&quot;display: none;&quot;&gt;\n      &lt;div class=&quot;quiz-container&quot;&gt;\n        &lt;div class=&quot;quiz-card&quot;&gt;\n\n          &lt;!-- Quiz Screen --&gt;\n          &lt;section id=&quot;quiz-screen&quot; class=&quot;screen active&quot; aria-labelledby=&quot;question-text&quot;&gt;\n            &lt;div class=&quot;progress-container&quot;&gt;\n              &lt;div class=&quot;progress-text&quot;&gt;\n                &lt;span id=&quot;progress-text&quot;&gt;Question 1 of 8&lt;\/span&gt;\n                &lt;span id=&quot;score-label&quot; class=&quot;sr-only&quot;&gt;Score&lt;\/span&gt;\n              &lt;\/div&gt;\n              &lt;div class=&quot;progress-bar&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;12&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot;&gt;\n                &lt;div id=&quot;progress-fill&quot; class=&quot;progress-fill&quot; style=&quot;width: 12.5%&quot;&gt;&lt;\/div&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n\n            &lt;div class=&quot;question-container&quot;&gt;\n              &lt;h2 id=&quot;question-text&quot; class=&quot;question-text&quot;&gt;&lt;\/h2&gt;\n\n              &lt;ul id=&quot;options-list&quot; class=&quot;options-list&quot; role=&quot;listbox&quot; aria-label=&quot;Answer options&quot;&gt;\n                &lt;!-- Options rendered dynamically --&gt;\n              &lt;\/ul&gt;\n\n              &lt;div id=&quot;explanation-box&quot; class=&quot;explanation-box&quot; style=&quot;display: none;&quot;&gt;\n                &lt;p id=&quot;explanation-label&quot; class=&quot;explanation-label&quot;&gt;&lt;\/p&gt;\n                &lt;p id=&quot;explanation-text&quot; class=&quot;explanation-text&quot;&gt;&lt;\/p&gt;\n              &lt;\/div&gt;\n\n              &lt;nav class=&quot;question-nav&quot; aria-label=&quot;Question navigation&quot;&gt;\n                &lt;button id=&quot;prev-btn&quot; class=&quot;btn btn-secondary&quot; style=&quot;display: none;&quot;&gt;\n                  Previous\n                &lt;\/button&gt;\n                &lt;button id=&quot;next-btn&quot; class=&quot;btn btn-primary&quot; disabled&gt;\n                  Next\n                &lt;\/button&gt;\n              &lt;\/nav&gt;\n            &lt;\/div&gt;\n          &lt;\/section&gt;\n\n          &lt;!-- Lead Form Screen --&gt;\n          &lt;section id=&quot;lead-form-screen&quot; class=&quot;screen&quot; aria-labelledby=&quot;form-title&quot;&gt;\n            &lt;div class=&quot;lead-form-header&quot;&gt;\n              &lt;h2 id=&quot;form-title&quot; class=&quot;lead-form-title&quot;&gt;Your Results Are Ready&lt;\/h2&gt;\n              &lt;p class=&quot;lead-form-subtitle&quot;&gt;Enter your details to see your personalized Opportunity Score and recommendations.&lt;\/p&gt;\n            &lt;\/div&gt;\n\n            &lt;div class=&quot;lead-form-content&quot;&gt;\n              &lt;div class=&quot;lead-form-main&quot;&gt;\n                &lt;form id=&quot;lead-form&quot; novalidate&gt;\n                  &lt;div id=&quot;form-fields&quot;&gt;\n                    &lt;!-- Form fields rendered dynamically --&gt;\n                  &lt;\/div&gt;\n\n                  &lt;p id=&quot;consent-label&quot; class=&quot;form-privacy-statement&quot;&gt;&lt;\/p&gt;\n\n                  &lt;div id=&quot;form-error&quot; class=&quot;error-message&quot;&gt;&lt;\/div&gt;\n                  &lt;div id=&quot;mailto-fallback&quot; class=&quot;mailto-fallback&quot;&gt;&lt;\/div&gt;\n\n                  &lt;button id=&quot;submit-btn&quot; type=&quot;submit&quot; class=&quot;btn btn-primary btn-lg btn-block&quot;&gt;\n                    &lt;span class=&quot;loading-spinner&quot; style=&quot;display: none;&quot;&gt;&lt;\/span&gt;\n                    &lt;span&gt;See My Results&lt;\/span&gt;\n                  &lt;\/button&gt;\n                &lt;\/form&gt;\n\n                &lt;!-- What You&#x27;ll Get --&gt;\n                &lt;div class=&quot;lead-form-promise&quot;&gt;\n                  &lt;h3 class=&quot;promise-title&quot;&gt;What you&#x27;ll receive:&lt;\/h3&gt;\n                  &lt;ul class=&quot;promise-list&quot;&gt;\n                    &lt;li&gt;\n                      &lt;svg class=&quot;promise-icon&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; aria-hidden=&quot;true&quot;&gt;\n                        &lt;path d=&quot;M22 11.08V12a10 10 0 1 1-5.93-9.14&quot;\/&gt;&lt;polyline points=&quot;22 4 12 14.01 9 11.01&quot;\/&gt;\n                      &lt;\/svg&gt;\n                      &lt;span&gt;Your personalized Opportunity Score&lt;\/span&gt;\n                    &lt;\/li&gt;\n                    &lt;li&gt;\n                      &lt;svg class=&quot;promise-icon&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; aria-hidden=&quot;true&quot;&gt;\n                        &lt;path d=&quot;M22 11.08V12a10 10 0 1 1-5.93-9.14&quot;\/&gt;&lt;polyline points=&quot;22 4 12 14.01 9 11.01&quot;\/&gt;\n                      &lt;\/svg&gt;\n                      &lt;span&gt;Specific recommendations for your facility type&lt;\/span&gt;\n                    &lt;\/li&gt;\n                    &lt;li&gt;\n                      &lt;svg class=&quot;promise-icon&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; aria-hidden=&quot;true&quot;&gt;\n                        &lt;path d=&quot;M22 11.08V12a10 10 0 1 1-5.93-9.14&quot;\/&gt;&lt;polyline points=&quot;22 4 12 14.01 9 11.01&quot;\/&gt;\n                      &lt;\/svg&gt;\n                      &lt;span&gt;A no-cost review of your recent water &amp;amp; sewer bills&lt;\/span&gt;\n                    &lt;\/li&gt;\n                  &lt;\/ul&gt;\n                  &lt;div class=&quot;promise-note&quot;&gt;\n                    &lt;svg class=&quot;promise-note-icon&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; aria-hidden=&quot;true&quot;&gt;\n                      &lt;rect x=&quot;3&quot; y=&quot;11&quot; width=&quot;18&quot; height=&quot;11&quot; rx=&quot;2&quot; ry=&quot;2&quot;\/&gt;&lt;path d=&quot;M7 11V7a5 5 0 0 1 10 0v4&quot;\/&gt;\n                    &lt;\/svg&gt;\n                    &lt;p&gt;&lt;strong&gt;No spam, ever.&lt;\/strong&gt; We&#x27;ll only contact you about your assessment results. Your information is never sold or shared with third parties.&lt;\/p&gt;\n                  &lt;\/div&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n\n              &lt;!-- Testimonials --&gt;\n              &lt;div class=&quot;lead-form-social-proof&quot;&gt;\n                &lt;h3 class=&quot;testimonials-title&quot;&gt;Why facilities work with RPM&lt;\/h3&gt;\n                &lt;div class=&quot;testimonial-card&quot;&gt;\n                  &lt;blockquote class=&quot;testimonial-quote&quot;&gt;\n                    Facilities with cooling towers, irrigation, or process water are often billed for sewer service on water that never reaches the sewer. A documented review identifies whether credits apply to your site.\n                  &lt;\/blockquote&gt;\n                  &lt;div class=&quot;testimonial-author&quot;&gt;\n                    &lt;span class=&quot;author-name&quot;&gt;RPM Water Equity Solutions&lt;\/span&gt;\n                    &lt;span class=&quot;author-role&quot;&gt;Utility-grade monitoring &amp;amp; sewer-credit documentation&lt;\/span&gt;\n                  &lt;\/div&gt;\n                &lt;\/div&gt;\n                &lt;div class=&quot;testimonial-card&quot;&gt;\n                  &lt;blockquote class=&quot;testimonial-quote&quot;&gt;\n                    The assessment is complimentary and takes only a few minutes. If credits apply, we handle the metering, documentation, and utility process for you.\n                  &lt;\/blockquote&gt;\n                  &lt;div class=&quot;testimonial-author&quot;&gt;\n                    &lt;span class=&quot;author-name&quot;&gt;No-cost facility review&lt;\/span&gt;\n                    &lt;span class=&quot;author-role&quot;&gt;No obligation&lt;\/span&gt;\n                  &lt;\/div&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/section&gt;\n\n          &lt;!-- Results Screen --&gt;\n          &lt;section id=&quot;results-screen&quot; class=&quot;screen&quot; aria-labelledby=&quot;results-title&quot;&gt;\n            &lt;div class=&quot;results-header&quot;&gt;\n              &lt;h2 id=&quot;results-title&quot; class=&quot;sr-only&quot;&gt;Your Results&lt;\/h2&gt;\n\n              &lt;div class=&quot;score-display&quot;&gt;\n                &lt;div class=&quot;score-circle&quot;&gt;\n                  &lt;svg viewBox=&quot;0 0 120 120&quot; aria-hidden=&quot;true&quot;&gt;\n                    &lt;circle class=&quot;bg&quot; cx=&quot;60&quot; cy=&quot;60&quot; r=&quot;54&quot;\/&gt;\n                    &lt;circle id=&quot;score-progress&quot; class=&quot;progress&quot; cx=&quot;60&quot; cy=&quot;60&quot; r=&quot;54&quot;\/&gt;\n                  &lt;\/svg&gt;\n                  &lt;span id=&quot;score-value&quot; class=&quot;score-value&quot;&gt;0&lt;\/span&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n\n              &lt;div id=&quot;tier-badge&quot; class=&quot;tier-badge&quot;&gt;\n                &lt;span id=&quot;tier-icon&quot; class=&quot;tier-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;\/span&gt;\n                &lt;span id=&quot;tier-name&quot;&gt;&lt;\/span&gt;\n              &lt;\/div&gt;\n\n              &lt;p id=&quot;tier-description&quot; class=&quot;tier-description&quot;&gt;&lt;\/p&gt;\n\n              &lt;ul id=&quot;tier-details&quot; class=&quot;tier-details&quot;&gt;\n                &lt;!-- Populated dynamically --&gt;\n              &lt;\/ul&gt;\n\n              &lt;p id=&quot;tier-cta&quot; class=&quot;tier-cta&quot;&gt;&lt;\/p&gt;\n            &lt;\/div&gt;\n\n            &lt;div class=&quot;results-breakdown&quot; style=&quot;display: none;&quot;&gt;\n              &lt;h3 class=&quot;breakdown-title&quot;&gt;Quiz Summary&lt;\/h3&gt;\n              &lt;div class=&quot;breakdown-stat&quot;&gt;\n                &lt;span class=&quot;breakdown-label&quot;&gt;Correct Answers&lt;\/span&gt;\n                &lt;span class=&quot;breakdown-value correct&quot;&gt;&lt;span id=&quot;correct-count&quot;&gt;0&lt;\/span&gt; \/ &lt;span id=&quot;total-questions&quot;&gt;8&lt;\/span&gt;&lt;\/span&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n\n            &lt;div class=&quot;results-actions&quot;&gt;\n              &lt;button id=&quot;retake-btn&quot; class=&quot;btn btn-outline&quot;&gt;\n                Retake Assessment\n              &lt;\/button&gt;\n              &lt;a id=&quot;contact-btn&quot; href=&quot;#&quot; class=&quot;btn btn-primary&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;\n                Schedule Assessment\n              &lt;\/a&gt;\n            &lt;\/div&gt;\n\n            &lt;p style=&quot;text-align: center; margin-top: 1.5rem; font-size: 0.9375rem; color: var(--text-muted);&quot;&gt;\n              Want the dollar figure?\n              &lt;a href=&quot;https:\/\/rpmwes.com\/blog\/water-savings-calculator\/&quot;&gt;Run the Water Savings Calculator \u2192&lt;\/a&gt;\n            &lt;\/p&gt;\n          &lt;\/section&gt;\n\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/main&gt;&lt;script&gt;\/**\n * Water Equity IQ Quiz Configuration\n * Lead-qualification quiz for RPM Water Equity Solutions\n * Identifies facilities that may benefit from sewer\/evaporation credits\n *\/\n\nconst QUIZ_CONFIG = {\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ BRAND &amp; DISPLAY SETTINGS\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  brand: {\n    name: &quot;RPM Water Equity Solutions&quot;,\n    quizTitle: &quot;What Is Your Water Equity IQ?&quot;,\n    quizSubtitle: &quot;Find out in 60 seconds if your facility is overpaying for sewer.&quot;,\n    logoSvg: null\n  },\n\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ WEBHOOK &amp; SUBMISSION SETTINGS\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  submission: {\n    \/\/ Lead capture via Web3Forms \u2014 emails each submission to RPM (mark@masonworld.com).\n    \/\/ The access key is a public submit token (safe in client-side code), not a secret.\n    webhookUrl: &quot;https:\/\/api.web3forms.com\/submit&quot;,\n    web3formsKey: &quot;9f370fcb-d2f0-4803-b30a-1a6babc9a181&quot;,\n    mailtoAddress: &quot;mark@masonworld.com&quot;,\n    tracking: {\n      campaignId: &quot;water-equity-iq-quiz&quot;,\n      source: &quot;website&quot;,\n      medium: &quot;quiz&quot;\n    },\n    maxRetries: 2,\n    retryDelayMs: 1000\n  },\n\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ QUIZ QUESTIONS\n  \/\/ multiSelect: true allows multiple answers\n  \/\/ explanation: educational micro-reward shown after answering\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  questions: [\n    {\n      id: &quot;q1&quot;,\n      question: &quot;What best describes your organization?&quot;,\n      multiSelect: false,\n      answers: [\n        { text: &quot;K-12 school district or university&quot;, value: &quot;education&quot; },\n        { text: &quot;Hotel, resort, or hospitality group&quot;, value: &quot;hospitality&quot; },\n        { text: &quot;Commercial office or mixed-use building&quot;, value: &quot;commercial&quot; },\n        { text: &quot;Industrial or manufacturing facility&quot;, value: &quot;industrial&quot; },\n        { text: &quot;Retail portfolio or big-box locations&quot;, value: &quot;retail&quot; },\n        { text: &quot;Airport or large campus&quot;, value: &quot;campus&quot; },\n        { text: &quot;Other&quot;, value: &quot;other&quot; }\n      ],\n      explanation: &quot;Facilities with significant water use\u2014especially those with cooling, irrigation, or process systems\u2014often pay sewer fees on water that never reaches the sewer.&quot;\n    },\n    {\n      id: &quot;q2&quot;,\n      question: &quot;Which of the following water-using systems do you operate?&quot;,\n      multiSelect: true,\n      minSelections: 1,\n      answers: [\n        { text: &quot;Cooling towers&quot;, value: &quot;cooling_towers&quot; },\n        { text: &quot;Evaporative condensers or chillers&quot;, value: &quot;evaporative&quot; },\n        { text: &quot;Large irrigation systems&quot;, value: &quot;irrigation&quot; },\n        { text: &quot;Industrial or process water systems&quot;, value: &quot;process&quot; },\n        { text: &quot;None of the above&quot;, value: &quot;none&quot; },\n        { text: &quot;Not sure&quot;, value: &quot;unsure&quot; }\n      ],\n      explanation: &quot;Cooling towers alone can evaporate 2-4% of circulated water per cycle. That evaporated water never enters the sewer\u2014but many facilities still pay sewer fees on it.&quot;\n    },\n    {\n      id: &quot;q3&quot;,\n      question: &quot;How are sewer charges currently calculated for your facility?&quot;,\n      multiSelect: false,\n      answers: [\n        { text: &quot;Based on total incoming water&quot;, value: &quot;total_water&quot; },\n        { text: &quot;Based on sub-metered discharge&quot;, value: &quot;submetered&quot; },\n        { text: &quot;Flat rate&quot;, value: &quot;flat&quot; },\n        { text: &quot;Not sure&quot;, value: &quot;unsure&quot; }\n      ],\n      explanation: &quot;Most utilities bill sewer based on 100% of incoming water\u2014even though 20-50% may evaporate or irrigate and never reach the sewer. This is the most common source of overbilling.&quot;\n    },\n    {\n      id: &quot;q4&quot;,\n      question: &quot;Do you actively sub-meter evaporative or non-sewer water uses?&quot;,\n      multiSelect: false,\n      answers: [\n        { text: &quot;Yes, with automated reporting&quot;, value: &quot;auto&quot; },\n        { text: &quot;Yes, manually&quot;, value: &quot;manual&quot; },\n        { text: &quot;No&quot;, value: &quot;no&quot; },\n        { text: &quot;Not sure&quot;, value: &quot;unsure&quot; }\n      ],\n      explanation: &quot;Sub-metering is often required to document sewer credits. Without it, utilities assume all water reaches the sewer\u2014even when it clearly doesn&#x27;t.&quot;\n    },\n    {\n      id: &quot;q5&quot;,\n      question: &quot;Have you experienced any of the following in the last 12 months?&quot;,\n      multiSelect: true,\n      minSelections: 0,\n      answers: [\n        { text: &quot;Unexpected spike in water or sewer bills&quot;, value: &quot;spike&quot; },\n        { text: &quot;Difficulty explaining utility charges internally&quot;, value: &quot;explaining&quot; },\n        { text: &quot;Delayed leak detection&quot;, value: &quot;leak&quot; },\n        { text: &quot;Capital budget constraints&quot;, value: &quot;budget&quot; },\n        { text: &quot;ESG or sustainability reporting pressure&quot;, value: &quot;esg&quot; },\n        { text: &quot;None of the above&quot;, value: &quot;none&quot; }\n      ],\n      explanation: &quot;Bill spikes often indicate leaks or metering issues. Continuous monitoring can catch problems early\u2014sometimes saving tens of thousands before a small leak becomes a major expense.&quot;\n    },\n    {\n      id: &quot;q6&quot;,\n      question: &quot;Roughly how much does your organization spend on water and sewer annually?&quot;,\n      multiSelect: false,\n      answers: [\n        { text: &quot;Under $50,000&quot;, value: &quot;under_50k&quot; },\n        { text: &quot;$50,000\u2013$150,000&quot;, value: &quot;50k_150k&quot; },\n        { text: &quot;$150,000\u2013$500,000&quot;, value: &quot;150k_500k&quot; },\n        { text: &quot;$500,000+&quot;, value: &quot;500k_plus&quot; },\n        { text: &quot;Not sure&quot;, value: &quot;unsure&quot; }\n      ],\n      explanation: &quot;Higher utility spend typically means higher potential for recoverable credits. Facilities spending $150K+ often recover 20-40% of sewer charges through proper documentation.&quot;\n    },\n    {\n      id: &quot;q7&quot;,\n      question: &quot;How confident are you that you are only paying sewer fees for water that actually reaches the sewer?&quot;,\n      multiSelect: false,\n      answers: [\n        { text: &quot;Very confident&quot;, value: &quot;very&quot; },\n        { text: &quot;Somewhat confident&quot;, value: &quot;somewhat&quot; },\n        { text: &quot;Not confident&quot;, value: &quot;not&quot; },\n        { text: &quot;Never evaluated this&quot;, value: &quot;never&quot; }\n      ],\n      explanation: &quot;Most facility managers inherit billing arrangements and assume they&#x27;re correct. In our experience, roughly 70% of facilities with evaporative systems are overpaying.&quot;\n    },\n    {\n      id: &quot;q8&quot;,\n      question: &quot;Would you like a complimentary review to quantify potential savings?&quot;,\n      multiSelect: false,\n      answers: [\n        { text: &quot;Yes, I want to see what we&#x27;re missing&quot;, value: &quot;yes&quot; },\n        { text: &quot;Maybe later&quot;, value: &quot;maybe&quot; },\n        { text: &quot;Just browsing&quot;, value: &quot;browsing&quot; }\n      ],\n      explanation: &quot;A quick bill review can identify whether credits apply to your facility\u2014with no obligation. Many organizations discover savings they didn&#x27;t know existed.&quot;\n    }\n  ],\n\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ SCORING TIERS\n  \/\/ Opportunity Score 0-100 based on likelihood of recoverable sewer credits\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  tiers: {\n    high: {\n      minScore: 65,\n      title: &quot;High Opportunity&quot;,\n      icon: &quot;alert&quot;,\n      summary: &quot;You&#x27;re likely overpaying for water and sewer.&quot;,\n      details: [\n        &quot;Strong indicators for recoverable sewer or evaporation credits&quot;,\n        &quot;Facilities like yours often reduce sewer charges by 20\u201340%&quot;,\n        &quot;Monitoring helps document credits and catch costly leaks early&quot;\n      ],\n      cta: {\n        headline: &quot;You&#x27;re Likely Leaving Money on the Table&quot;,\n        text: &quot;Based on your answers, your facility likely qualifies for sewer credits. RPM can analyze your last few months of water and sewer bills, confirm exactly what you qualify for, and set up a fully managed solution \u2014 we handle the whole process for you.&quot;,\n        buttonText: &quot;Have RPM Analyze My Bills&quot;,\n        buttonUrl: &quot;https:\/\/rpmwes.com\/#contact&quot;\n      }\n    },\n    moderate: {\n      minScore: 35,\n      title: &quot;Moderate Opportunity&quot;,\n      icon: &quot;search&quot;,\n      summary: &quot;You may have hidden water savings.&quot;,\n      details: [\n        &quot;Monitoring and bill review often uncover quick wins&quot;,\n        &quot;Some sites qualify for credits depending on local utility rules&quot;\n      ],\n      cta: {\n        headline: &quot;Worth a Closer Look&quot;,\n        text: &quot;Your answers suggest recoverable savings. RPM can review your recent water and sewer bills, confirm whether credits apply, and set up a fully managed solution for you.&quot;,\n        buttonText: &quot;Have RPM Analyze My Bills&quot;,\n        buttonUrl: &quot;https:\/\/rpmwes.com\/#contact&quot;\n      }\n    },\n    low: {\n      minScore: 0,\n      title: &quot;Low Opportunity&quot;,\n      icon: &quot;check&quot;,\n      summary: &quot;You&#x27;re doing many things right.&quot;,\n      details: [\n        &quot;Fewer immediate credit indicators based on your answers&quot;,\n        &quot;A quick review can confirm nothing is being missed&quot;\n      ],\n      cta: {\n        headline: &quot;Make Sure Nothing&#x27;s Slipping Through&quot;,\n        text: &quot;Even well-managed facilities can miss recoverable credits. RPM can review your recent water bills at no cost to confirm you&#x27;re not leaving money on the table.&quot;,\n        buttonText: &quot;Get a Free Bill Review&quot;,\n        buttonUrl: &quot;https:\/\/rpmwes.com\/#contact&quot;\n      }\n    }\n  },\n\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ LEAD CAPTURE FORM CONFIGURATION\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  leadForm: {\n    headline: &quot;See Your Results&quot;,\n    subheadline: &quot;Enter your details to view your Opportunity Score and personalized recommendations.&quot;,\n    privacyText: &quot;We respect your privacy and will never share your information with third parties.&quot;,\n\n    fields: [\n      {\n        name: &quot;firstName&quot;,\n        label: &quot;First Name&quot;,\n        type: &quot;text&quot;,\n        required: true,\n        placeholder: &quot;Enter your first name&quot;,\n        autocomplete: &quot;given-name&quot;\n      },\n      {\n        name: &quot;lastName&quot;,\n        label: &quot;Last Name&quot;,\n        type: &quot;text&quot;,\n        required: true,\n        placeholder: &quot;Enter your last name&quot;,\n        autocomplete: &quot;family-name&quot;\n      },\n      {\n        name: &quot;email&quot;,\n        label: &quot;Email Address&quot;,\n        type: &quot;email&quot;,\n        required: true,\n        placeholder: &quot;you@organization.com&quot;,\n        autocomplete: &quot;email&quot;\n      },\n      {\n        name: &quot;organization&quot;,\n        label: &quot;Organization&quot;,\n        type: &quot;text&quot;,\n        required: true,\n        placeholder: &quot;Your company or facility name&quot;,\n        autocomplete: &quot;organization&quot;\n      },\n      {\n        name: &quot;role&quot;,\n        label: &quot;Your Role&quot;,\n        type: &quot;select&quot;,\n        required: true,\n        options: [\n          { value: &quot;&quot;, label: &quot;Select your role...&quot; },\n          { value: &quot;facilities&quot;, label: &quot;Facilities \/ Operations&quot; },\n          { value: &quot;finance&quot;, label: &quot;Finance \/ Accounting&quot; },\n          { value: &quot;executive&quot;, label: &quot;Executive \/ C-Suite&quot; },\n          { value: &quot;sustainability&quot;, label: &quot;Sustainability \/ ESG&quot; },\n          { value: &quot;engineering&quot;, label: &quot;Engineering&quot; },\n          { value: &quot;procurement&quot;, label: &quot;Procurement&quot; },\n          { value: &quot;other&quot;, label: &quot;Other&quot; }\n        ]\n      },\n      {\n        name: &quot;phone&quot;,\n        label: &quot;Phone (Optional)&quot;,\n        type: &quot;tel&quot;,\n        required: false,\n        placeholder: &quot;(555) 123-4567&quot;,\n        autocomplete: &quot;tel&quot;\n      }\n    ]\n  },\n\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  \/\/ UI TEXT &amp; LABELS\n  \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n  ui: {\n    startButton: &quot;Start the Quiz&quot;,\n    nextButton: &quot;Next&quot;,\n    submitButton: &quot;See My Results&quot;,\n    retakeButton: &quot;Retake Quiz&quot;,\n    shareButton: &quot;Share Results&quot;,\n    progressLabel: &quot;Question {current} of {total}&quot;,\n    factLabel: &quot;Did you know?&quot;,\n    scoreLabel: &quot;Opportunity Score&quot;,\n    loadingText: &quot;Calculating your results...&quot;\n  }\n};\n\n\/\/ Freeze configuration to prevent accidental modifications\nObject.freeze(QUIZ_CONFIG);\nObject.freeze(QUIZ_CONFIG.brand);\nObject.freeze(QUIZ_CONFIG.submission);\nObject.freeze(QUIZ_CONFIG.tiers);\nObject.freeze(QUIZ_CONFIG.leadForm);\nObject.freeze(QUIZ_CONFIG.ui);\nQUIZ_CONFIG.questions.forEach(q =&gt; Object.freeze(q));\n&lt;\/script&gt;&lt;script&gt;\/**\n * Water Equity IQ Quiz Application\n * Lead-qualification quiz with opportunity scoring\n *\/\n\nclass QuizApp {\n  constructor() {\n    \/\/ Application state\n    this.state = {\n      currentScreen: &#x27;intro&#x27;,\n      currentQuestion: 0,\n      answers: [], \/\/ For single-select: index, for multi-select: array of indices\n      leadData: {},\n      submitted: false\n    };\n\n    \/\/ DOM element cache\n    this.elements = {};\n\n    \/\/ Bind methods\n    this.handleStartQuiz = this.handleStartQuiz.bind(this);\n    this.handleOptionSelect = this.handleOptionSelect.bind(this);\n    this.handleNextQuestion = this.handleNextQuestion.bind(this);\n    this.handlePrevQuestion = this.handlePrevQuestion.bind(this);\n    this.handleFormSubmit = this.handleFormSubmit.bind(this);\n    this.handleRetakeQuiz = this.handleRetakeQuiz.bind(this);\n\n    \/\/ Initialize on DOM ready\n    if (document.readyState === &#x27;loading&#x27;) {\n      document.addEventListener(&#x27;DOMContentLoaded&#x27;, () =&gt; this.init());\n    } else {\n      this.init();\n    }\n  }\n\n  \/**\n   * Initialize the application\n   *\/\n  init() {\n    this.cacheElements();\n    this.bindEvents();\n    this.restoreState();\n    this.render();\n  }\n\n  \/**\n   * Cache DOM elements for performance\n   *\/\n  cacheElements() {\n    this.elements = {\n      \/\/ Screens\n      introScreen: document.getElementById(&#x27;intro-screen&#x27;),\n      quizScreen: document.getElementById(&#x27;quiz-screen&#x27;),\n      leadFormScreen: document.getElementById(&#x27;lead-form-screen&#x27;),\n      resultsScreen: document.getElementById(&#x27;results-screen&#x27;),\n\n      \/\/ Intro\n      startBtn: document.getElementById(&#x27;start-btn&#x27;),\n\n      \/\/ Quiz\n      progressText: document.getElementById(&#x27;progress-text&#x27;),\n      progressFill: document.getElementById(&#x27;progress-fill&#x27;),\n      questionText: document.getElementById(&#x27;question-text&#x27;),\n      optionsList: document.getElementById(&#x27;options-list&#x27;),\n      explanationBox: document.getElementById(&#x27;explanation-box&#x27;),\n      explanationLabel: document.getElementById(&#x27;explanation-label&#x27;),\n      explanationText: document.getElementById(&#x27;explanation-text&#x27;),\n      prevBtn: document.getElementById(&#x27;prev-btn&#x27;),\n      nextBtn: document.getElementById(&#x27;next-btn&#x27;),\n\n      \/\/ Lead form\n      leadForm: document.getElementById(&#x27;lead-form&#x27;),\n      formFields: document.getElementById(&#x27;form-fields&#x27;),\n      consentLabel: document.getElementById(&#x27;consent-label&#x27;),\n      submitBtn: document.getElementById(&#x27;submit-btn&#x27;),\n      formError: document.getElementById(&#x27;form-error&#x27;),\n      mailtoFallback: document.getElementById(&#x27;mailto-fallback&#x27;),\n\n      \/\/ Results\n      scoreValue: document.getElementById(&#x27;score-value&#x27;),\n      scoreProgress: document.getElementById(&#x27;score-progress&#x27;),\n      tierBadge: document.getElementById(&#x27;tier-badge&#x27;),\n      tierIcon: document.getElementById(&#x27;tier-icon&#x27;),\n      tierName: document.getElementById(&#x27;tier-name&#x27;),\n      tierDescription: document.getElementById(&#x27;tier-description&#x27;),\n      tierCta: document.getElementById(&#x27;tier-cta&#x27;),\n      tierDetails: document.getElementById(&#x27;tier-details&#x27;),\n      correctCount: document.getElementById(&#x27;correct-count&#x27;),\n      totalQuestions: document.getElementById(&#x27;total-questions&#x27;),\n      retakeBtn: document.getElementById(&#x27;retake-btn&#x27;),\n      contactBtn: document.getElementById(&#x27;contact-btn&#x27;),\n\n      \/\/ Live region for announcements\n      liveRegion: document.getElementById(&#x27;live-region&#x27;)\n    };\n  }\n\n  \/**\n   * Bind event listeners\n   *\/\n  bindEvents() {\n    this.elements.startBtn?.addEventListener(&#x27;click&#x27;, this.handleStartQuiz);\n    this.elements.prevBtn?.addEventListener(&#x27;click&#x27;, this.handlePrevQuestion);\n    this.elements.nextBtn?.addEventListener(&#x27;click&#x27;, this.handleNextQuestion);\n    this.elements.leadForm?.addEventListener(&#x27;submit&#x27;, this.handleFormSubmit);\n    this.elements.retakeBtn?.addEventListener(&#x27;click&#x27;, this.handleRetakeQuiz);\n\n    this.elements.contactBtn?.addEventListener(&#x27;click&#x27;, (e) =&gt; {\n      const tier = this.getCurrentTier();\n      if (tier?.cta?.buttonUrl) {\n        window.open(tier.cta.buttonUrl, &#x27;_blank&#x27;);\n      }\n    });\n\n    this.elements.optionsList?.addEventListener(&#x27;keydown&#x27;, (e) =&gt; {\n      if (e.key === &#x27;Enter&#x27; || e.key === &#x27; &#x27;) {\n        e.preventDefault();\n        if (e.target.classList.contains(&#x27;option-btn&#x27;)) {\n          e.target.click();\n        }\n      }\n    });\n  }\n\n  \/**\n   * Restore state from localStorage\n   *\/\n  restoreState() {\n    try {\n      const savedState = localStorage.getItem(&#x27;quizState&#x27;);\n      if (savedState) {\n        const parsed = JSON.parse(savedState);\n        if (!parsed.submitted) {\n          this.state = { ...this.state, ...parsed };\n        }\n      }\n    } catch (e) {\n      console.warn(&#x27;Could not restore quiz state:&#x27;, e);\n    }\n  }\n\n  \/**\n   * Save state to localStorage\n   *\/\n  saveState() {\n    try {\n      localStorage.setItem(&#x27;quizState&#x27;, JSON.stringify(this.state));\n    } catch (e) {\n      console.warn(&#x27;Could not save quiz state:&#x27;, e);\n    }\n  }\n\n  \/**\n   * Announce message to screen readers\n   *\/\n  announce(message) {\n    if (this.elements.liveRegion) {\n      this.elements.liveRegion.textContent = message;\n    }\n  }\n\n  \/**\n   * Switch to a screen\n   *\/\n  showScreen(screenName) {\n    const screens = [&#x27;intro&#x27;, &#x27;quiz&#x27;, &#x27;leadForm&#x27;, &#x27;results&#x27;];\n    const screenElements = {\n      intro: this.elements.introScreen,\n      quiz: this.elements.quizScreen,\n      leadForm: this.elements.leadFormScreen,\n      results: this.elements.resultsScreen\n    };\n\n    screens.forEach(screen =&gt; {\n      const element = screenElements[screen];\n      if (element) {\n        element.classList.toggle(&#x27;active&#x27;, screen === screenName);\n      }\n    });\n\n    this.state.currentScreen = screenName;\n    this.saveState();\n\n    setTimeout(() =&gt; {\n      const activeScreen = screenElements[screenName];\n      if (activeScreen) {\n        const focusTarget = activeScreen.querySelector(&#x27;h1, h2, button, input&#x27;);\n        focusTarget?.focus();\n      }\n    }, 100);\n  }\n\n  \/**\n   * Render the current state\n   *\/\n  render() {\n    this.showScreen(this.state.currentScreen);\n\n    switch (this.state.currentScreen) {\n      case &#x27;quiz&#x27;:\n        this.renderQuestion();\n        break;\n      case &#x27;leadForm&#x27;:\n        this.renderLeadForm();\n        break;\n      case &#x27;results&#x27;:\n        this.renderResults();\n        break;\n    }\n  }\n\n  \/**\n   * Start the quiz\n   *\/\n  handleStartQuiz() {\n    this.state.currentQuestion = 0;\n    this.state.answers = [];\n    this.showScreen(&#x27;quiz&#x27;);\n    this.renderQuestion();\n    this.announce(&#x27;Quiz started. Question 1 of &#x27; + QUIZ_CONFIG.questions.length);\n  }\n\n  \/**\n   * Render current question\n   *\/\n  renderQuestion() {\n    const questionIndex = this.state.currentQuestion;\n    const question = QUIZ_CONFIG.questions[questionIndex];\n    const totalQuestions = QUIZ_CONFIG.questions.length;\n    const answer = this.state.answers[questionIndex];\n    const isMultiSelect = question.multiSelect === true;\n\n    \/\/ Update progress\n    const progressPercent = ((questionIndex + 1) \/ totalQuestions) * 100;\n    this.elements.progressText.textContent = QUIZ_CONFIG.ui.progressLabel\n      .replace(&#x27;{current}&#x27;, questionIndex + 1)\n      .replace(&#x27;{total}&#x27;, totalQuestions);\n    this.elements.progressFill.style.width = `${progressPercent}%`;\n\n    \/\/ Update question text\n    this.elements.questionText.textContent = question.question;\n\n    \/\/ Determine if answered\n    const hasAnswered = isMultiSelect\n      ? (Array.isArray(answer) &amp;&amp; answer.length &gt; 0) || (question.minSelections === 0 &amp;&amp; Array.isArray(answer))\n      : answer !== undefined;\n\n    \/\/ Render options\n    this.elements.optionsList.innerHTML = question.answers.map((option, index) =&gt; {\n      let classes = &#x27;option-btn&#x27;;\n\n      if (isMultiSelect) {\n        \/\/ Multi-select: check if this index is in the answer array\n        const selectedIndices = Array.isArray(answer) ? answer : [];\n        if (selectedIndices.includes(index)) {\n          classes += &#x27; selected&#x27;;\n        }\n      } else {\n        \/\/ Single-select: check if this is the selected answer\n        if (answer === index) {\n          classes += &#x27; selected&#x27;;\n        }\n      }\n\n      const ariaPressed = isMultiSelect\n        ? (Array.isArray(answer) &amp;&amp; answer.includes(index))\n        : (answer === index);\n\n      return `\n        &lt;li&gt;\n          &lt;button\n            type=&quot;button&quot;\n            class=&quot;${classes}&quot;\n            data-index=&quot;${index}&quot;\n            data-value=&quot;${option.value}&quot;\n            aria-pressed=&quot;${ariaPressed}&quot;\n          &gt;\n            ${isMultiSelect ? &#x27;&lt;span class=&quot;checkbox-indicator&quot;&gt;&lt;\/span&gt;&#x27; : &#x27;&#x27;}\n            ${option.text}\n          &lt;\/button&gt;\n        &lt;\/li&gt;\n      `;\n    }).join(&#x27;&#x27;);\n\n    \/\/ Add multi-select hint\n    if (isMultiSelect) {\n      const hint = question.minSelections === 0\n        ? &#x27;(Select all that apply)&#x27;\n        : &#x27;(Select at least one)&#x27;;\n      this.elements.questionText.innerHTML += `&lt;span class=&quot;multi-select-hint&quot;&gt;${hint}&lt;\/span&gt;`;\n    }\n\n    \/\/ Bind option click events\n    this.elements.optionsList.querySelectorAll(&#x27;.option-btn&#x27;).forEach(btn =&gt; {\n      btn.addEventListener(&#x27;click&#x27;, this.handleOptionSelect);\n    });\n\n    \/\/ Show explanation if answered (educational micro-reward)\n    if (hasAnswered &amp;&amp; question.explanation) {\n      this.elements.explanationBox.style.display = &#x27;block&#x27;;\n      this.elements.explanationLabel.textContent = QUIZ_CONFIG.ui.factLabel;\n      this.elements.explanationLabel.className = &#x27;explanation-label fact&#x27;;\n      this.elements.explanationText.textContent = question.explanation;\n    } else {\n      this.elements.explanationBox.style.display = &#x27;none&#x27;;\n    }\n\n    \/\/ Update navigation buttons\n    this.elements.prevBtn.style.display = questionIndex &gt; 0 ? &#x27;inline-flex&#x27; : &#x27;none&#x27;;\n\n    const isLastQuestion = questionIndex === totalQuestions - 1;\n    this.elements.nextBtn.textContent = isLastQuestion ? QUIZ_CONFIG.ui.submitButton : QUIZ_CONFIG.ui.nextButton;\n    this.elements.nextBtn.disabled = !hasAnswered;\n  }\n\n  \/**\n   * Handle option selection\n   *\/\n  handleOptionSelect(e) {\n    const btn = e.target.closest(&#x27;.option-btn&#x27;);\n    if (!btn) return;\n\n    const index = parseInt(btn.dataset.index, 10);\n    const questionIndex = this.state.currentQuestion;\n    const question = QUIZ_CONFIG.questions[questionIndex];\n    const isMultiSelect = question.multiSelect === true;\n\n    if (isMultiSelect) {\n      \/\/ Multi-select logic\n      let currentSelections = Array.isArray(this.state.answers[questionIndex])\n        ? [...this.state.answers[questionIndex]]\n        : [];\n\n      const selectedValue = question.answers[index].value;\n\n      \/\/ Handle &quot;None of the above&quot; \/ &quot;Not sure&quot; exclusivity\n      if (selectedValue === &#x27;none&#x27; || selectedValue === &#x27;unsure&#x27;) {\n        \/\/ If selecting none\/unsure, clear other selections\n        currentSelections = [index];\n      } else {\n        \/\/ If selecting something else, remove none\/unsure\n        currentSelections = currentSelections.filter(i =&gt; {\n          const val = question.answers[i].value;\n          return val !== &#x27;none&#x27; &amp;&amp; val !== &#x27;unsure&#x27;;\n        });\n\n        \/\/ Toggle the selection\n        if (currentSelections.includes(index)) {\n          currentSelections = currentSelections.filter(i =&gt; i !== index);\n        } else {\n          currentSelections.push(index);\n        }\n      }\n\n      this.state.answers[questionIndex] = currentSelections;\n    } else {\n      \/\/ Single-select logic\n      this.state.answers[questionIndex] = index;\n    }\n\n    this.saveState();\n    this.renderQuestion();\n  }\n\n  \/**\n   * Navigate to next question\n   *\/\n  handleNextQuestion() {\n    const totalQuestions = QUIZ_CONFIG.questions.length;\n\n    if (this.state.currentQuestion &lt; totalQuestions - 1) {\n      this.state.currentQuestion++;\n      this.saveState();\n      this.renderQuestion();\n      this.announce(`Question ${this.state.currentQuestion + 1} of ${totalQuestions}`);\n    } else {\n      this.showScreen(&#x27;leadForm&#x27;);\n      this.renderLeadForm();\n      this.announce(&#x27;Quiz complete. Please enter your information to see your results.&#x27;);\n    }\n  }\n\n  \/**\n   * Navigate to previous question\n   *\/\n  handlePrevQuestion() {\n    if (this.state.currentQuestion &gt; 0) {\n      this.state.currentQuestion--;\n      this.saveState();\n      this.renderQuestion();\n      this.announce(`Question ${this.state.currentQuestion + 1} of ${QUIZ_CONFIG.questions.length}`);\n    }\n  }\n\n  \/**\n   * Calculate Opportunity Score using weighted scoring model\n   * Returns score from 0-100\n   *\/\n  calculateOpportunityScore() {\n    let score = 0;\n    const answers = this.state.answers;\n\n    \/\/ Helper to get selected values for a question\n    const getValues = (qIndex) =&gt; {\n      const answer = answers[qIndex];\n      const question = QUIZ_CONFIG.questions[qIndex];\n      if (question.multiSelect) {\n        return Array.isArray(answer)\n          ? answer.map(i =&gt; question.answers[i]?.value)\n          : [];\n      } else {\n        return answer !== undefined ? [question.answers[answer]?.value] : [];\n      }\n    };\n\n    \/\/ Q2: Water-using systems \u2014 the core opportunity signal.\n    \/\/ Cooling towers \/ evaporative: +25 each (cap +40); irrigation\/process: +12 each.\n    \/\/ &quot;None of the above&quot; = genuinely low opportunity (systems component = 0).\n    \/\/ Uncertainty earns only a little (avoids &quot;I&#x27;m not sure&quot; inflating the score).\n    const q2Values = getValues(1);\n    let q2Score = 0;\n    if (q2Values.includes(&#x27;cooling_towers&#x27;)) q2Score += 25;\n    if (q2Values.includes(&#x27;evaporative&#x27;)) q2Score += 25;\n    q2Score = Math.min(q2Score, 40);\n    if (q2Values.includes(&#x27;irrigation&#x27;)) q2Score += 12;\n    if (q2Values.includes(&#x27;process&#x27;)) q2Score += 12;\n    if (q2Values.includes(&#x27;none&#x27;)) q2Score = 0;\n    else if (q2Values.includes(&#x27;unsure&#x27;) &amp;&amp; q2Score === 0) q2Score = 5;\n    score += q2Score;\n\n    \/\/ Q3: How sewer is billed. Billed on total incoming water is the strongest signal.\n    const q3Values = getValues(2);\n    if (q3Values.includes(&#x27;total_water&#x27;)) score += 18;\n    else if (q3Values.includes(&#x27;flat&#x27;)) score += 5;\n    else if (q3Values.includes(&#x27;unsure&#x27;)) score += 5;\n\n    \/\/ Q4: Sub-metering. No sub-metering = strong signal; uncertainty earns little.\n    const q4Values = getValues(3);\n    if (q4Values.includes(&#x27;no&#x27;)) score += 18;\n    else if (q4Values.includes(&#x27;manual&#x27;)) score += 8;\n    else if (q4Values.includes(&#x27;unsure&#x27;)) score += 5;\n\n    \/\/ Q5: Pain points (multi-select). Each: +5 (cap +20).\n    const q5Values = getValues(4);\n    const painPoints = q5Values.filter(v =&gt; v !== &#x27;none&#x27;);\n    score += Math.min(painPoints.length * 5, 20);\n\n    \/\/ Q6: Annual spend. Higher spend = more recoverable.\n    const q6Values = getValues(5);\n    if (q6Values.includes(&#x27;500k_plus&#x27;)) score += 18;\n    else if (q6Values.includes(&#x27;150k_500k&#x27;)) score += 14;\n    else if (q6Values.includes(&#x27;50k_150k&#x27;)) score += 9;\n    else if (q6Values.includes(&#x27;under_50k&#x27;)) score += 4;\n    else if (q6Values.includes(&#x27;unsure&#x27;)) score += 4;\n\n    \/\/ Q7: Confidence in billing accuracy. &quot;Not confident&quot; is a stronger buying signal\n    \/\/ than &quot;never evaluated&quot;; &quot;very confident&quot; earns nothing.\n    const q7Values = getValues(6);\n    if (q7Values.includes(&#x27;not&#x27;)) score += 14;\n    else if (q7Values.includes(&#x27;never&#x27;)) score += 10;\n    else if (q7Values.includes(&#x27;somewhat&#x27;)) score += 6;\n\n    \/\/ Q8: Interest in a review.\n    const q8Values = getValues(7);\n    if (q8Values.includes(&#x27;yes&#x27;)) score += 10;\n    else if (q8Values.includes(&#x27;maybe&#x27;)) score += 4;\n\n    \/\/ Clamp final score to 0-100\n    return Math.max(0, Math.min(100, score));\n  }\n\n  \/**\n   * Render lead form\n   *\/\n  renderLeadForm() {\n    const fields = QUIZ_CONFIG.leadForm.fields;\n    let html = &#x27;&#x27;;\n    let i = 0;\n\n    while (i &lt; fields.length) {\n      const field = fields[i];\n      const nextField = fields[i + 1];\n\n      const canPair = (\n        (field.type === &#x27;text&#x27; &amp;&amp; nextField?.type === &#x27;text&#x27;) &amp;&amp;\n        (field.name === &#x27;firstName&#x27; || field.name === &#x27;city&#x27;)\n      );\n\n      if (canPair) {\n        html += &#x27;&lt;div class=&quot;form-row&quot;&gt;&#x27;;\n        html += this.renderFormField(field);\n        html += this.renderFormField(nextField);\n        html += &#x27;&lt;\/div&gt;&#x27;;\n        i += 2;\n      } else {\n        html += this.renderFormField(field);\n        i++;\n      }\n    }\n\n    this.elements.formFields.innerHTML = html;\n    this.elements.consentLabel.textContent = QUIZ_CONFIG.leadForm.privacyText;\n    this.elements.submitBtn.querySelector(&#x27;span&#x27;).textContent = QUIZ_CONFIG.ui.submitButton;\n    this.elements.formError.classList.remove(&#x27;visible&#x27;);\n    this.elements.mailtoFallback.classList.remove(&#x27;visible&#x27;);\n  }\n\n  \/**\n   * Render a single form field\n   *\/\n  renderFormField(field) {\n    const required = field.required ? &#x27;&lt;span class=&quot;required&quot;&gt;*&lt;\/span&gt;&#x27; : &#x27;&#x27;;\n    const requiredAttr = field.required ? &#x27;required&#x27; : &#x27;&#x27;;\n    const autocomplete = field.autocomplete ? `autocomplete=&quot;${field.autocomplete}&quot;` : &#x27;&#x27;;\n\n    let input = &#x27;&#x27;;\n\n    if (field.type === &#x27;select&#x27;) {\n      const options = field.options.map(opt =&gt;\n        `&lt;option value=&quot;${opt.value}&quot;&gt;${opt.label}&lt;\/option&gt;`\n      ).join(&#x27;&#x27;);\n      input = `\n        &lt;select id=&quot;${field.name}&quot; name=&quot;${field.name}&quot; class=&quot;form-select&quot; ${requiredAttr}&gt;\n          ${options}\n        &lt;\/select&gt;\n      `;\n    } else {\n      input = `\n        &lt;input\n          type=&quot;${field.type}&quot;\n          id=&quot;${field.name}&quot;\n          name=&quot;${field.name}&quot;\n          class=&quot;form-input&quot;\n          placeholder=&quot;${field.placeholder || &#x27;&#x27;}&quot;\n          ${requiredAttr}\n          ${autocomplete}\n        &gt;\n      `;\n    }\n\n    return `\n      &lt;div class=&quot;form-group&quot;&gt;\n        &lt;label for=&quot;${field.name}&quot; class=&quot;form-label&quot;&gt;${field.label}${required}&lt;\/label&gt;\n        ${input}\n        &lt;div class=&quot;form-error&quot; id=&quot;${field.name}-error&quot;&gt;&lt;\/div&gt;\n      &lt;\/div&gt;\n    `;\n  }\n\n  \/**\n   * Validate form\n   *\/\n  validateForm() {\n    let isValid = true;\n    const formData = {};\n\n    QUIZ_CONFIG.leadForm.fields.forEach(field =&gt; {\n      const input = document.getElementById(field.name);\n      const error = document.getElementById(`${field.name}-error`);\n      const value = input?.value?.trim() || &#x27;&#x27;;\n\n      formData[field.name] = value;\n\n      input?.classList.remove(&#x27;error&#x27;);\n      error?.classList.remove(&#x27;visible&#x27;);\n\n      if (field.required &amp;&amp; !value) {\n        isValid = false;\n        input?.classList.add(&#x27;error&#x27;);\n        if (error) {\n          error.textContent = `${field.label} is required`;\n          error.classList.add(&#x27;visible&#x27;);\n        }\n        return;\n      }\n\n      if (field.type === &#x27;email&#x27; &amp;&amp; value) {\n        const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n        if (!emailRegex.test(value)) {\n          isValid = false;\n          input?.classList.add(&#x27;error&#x27;);\n          if (error) {\n            error.textContent = &#x27;Please enter a valid email address&#x27;;\n            error.classList.add(&#x27;visible&#x27;);\n          }\n        }\n      }\n    });\n\n    return { isValid, formData };\n  }\n\n  \/**\n   * Handle form submission\n   *\/\n  async handleFormSubmit(e) {\n    e.preventDefault();\n\n    const { isValid, formData } = this.validateForm();\n    if (!isValid) return;\n\n    \/\/ Calculate opportunity score\n    const opportunityScore = this.calculateOpportunityScore();\n    const tier = this.getTier(opportunityScore);\n\n    \/\/ Build answer summary for lead data\n    const answerSummary = this.state.answers.map((answer, i) =&gt; {\n      const question = QUIZ_CONFIG.questions[i];\n      if (question.multiSelect &amp;&amp; Array.isArray(answer)) {\n        return answer.map(idx =&gt; question.answers[idx]?.value);\n      } else if (answer !== undefined) {\n        return question.answers[answer]?.value;\n      }\n      return null;\n    });\n\n    \/\/ Build lead data\n    this.state.leadData = {\n      ...formData,\n      opportunityScore,\n      tier: tier.title,\n      tierId: this.getTierId(opportunityScore),\n      answers: answerSummary,\n      rawAnswers: this.state.answers,\n      completedAt: new Date().toISOString(),\n      ...QUIZ_CONFIG.submission.tracking\n    };\n\n    this.setSubmitLoading(true);\n\n    const webhookSuccess = await this.submitToWebhook();\n\n    this.setSubmitLoading(false);\n\n    if (!webhookSuccess &amp;&amp; QUIZ_CONFIG.submission.mailtoAddress) {\n      this.showMailtoFallback();\n    }\n\n    this.saveLeadData();\n\n    this.state.submitted = true;\n    this.saveState();\n    this.showScreen(&#x27;results&#x27;);\n    this.renderResults();\n    this.announce(`Your Opportunity Score is ${opportunityScore}. ${tier.title}.`);\n  }\n\n  \/**\n   * Set submit button loading state\n   *\/\n  setSubmitLoading(loading) {\n    const btn = this.elements.submitBtn;\n    const spinner = btn.querySelector(&#x27;.loading-spinner&#x27;);\n    const text = btn.querySelector(&#x27;span&#x27;);\n\n    btn.disabled = loading;\n    spinner.style.display = loading ? &#x27;inline-block&#x27; : &#x27;none&#x27;;\n    text.textContent = loading ? QUIZ_CONFIG.ui.loadingText : QUIZ_CONFIG.ui.submitButton;\n  }\n\n  \/**\n   * Submit to webhook\n   *\/\n  async submitToWebhook() {\n    const webhookUrl = QUIZ_CONFIG.submission.webhookUrl;\n    if (!webhookUrl) return false;\n\n    const maxRetries = QUIZ_CONFIG.submission.maxRetries || 2;\n    const retryDelay = QUIZ_CONFIG.submission.retryDelayMs || 1000;\n\n    \/\/ Build the request body. For Web3Forms, include the access key and a\n    \/\/ flattened, email-friendly version of the lead data.\n    const lead = this.state.leadData;\n    let body;\n    if (QUIZ_CONFIG.submission.web3formsKey) {\n      body = JSON.stringify({\n        access_key: QUIZ_CONFIG.submission.web3formsKey,\n        subject: &#x27;New Water Quiz lead: &#x27; + (lead.firstName || &#x27;&#x27;) + &#x27; &#x27; + (lead.lastName || &#x27;&#x27;) +\n                 &#x27; (&#x27; + (lead.organization || &#x27;n\/a&#x27;) + &#x27;)&#x27;,\n        from_name: &#x27;RPM Water Equity Quiz&#x27;,\n        first_name: lead.firstName || &#x27;&#x27;,\n        last_name: lead.lastName || &#x27;&#x27;,\n        email: lead.email || &#x27;&#x27;,\n        organization: lead.organization || &#x27;&#x27;,\n        role: lead.role || &#x27;&#x27;,\n        phone: lead.phone || &#x27;&#x27;,\n        opportunity_score: lead.opportunityScore,\n        tier: lead.tier || &#x27;&#x27;,\n        answers: Array.isArray(lead.answers)\n          ? lead.answers.map(a =&gt; Array.isArray(a) ? a.join(&#x27;+&#x27;) : a).join(&#x27; | &#x27;)\n          : &#x27;&#x27;,\n        completed_at: lead.completedAt || &#x27;&#x27;,\n        campaign: lead.campaignId || &#x27;&#x27;\n      });\n    } else {\n      body = JSON.stringify(lead);\n    }\n\n    for (let attempt = 0; attempt &lt;= maxRetries; attempt++) {\n      try {\n        const response = await fetch(webhookUrl, {\n          method: &#x27;POST&#x27;,\n          headers: { &#x27;Content-Type&#x27;: &#x27;application\/json&#x27;, &#x27;Accept&#x27;: &#x27;application\/json&#x27; },\n          body: body\n        });\n\n        if (response.ok) return true;\n      } catch (error) {\n        console.warn(`Webhook attempt ${attempt + 1} failed:`, error);\n      }\n\n      if (attempt &lt; maxRetries) {\n        await new Promise(resolve =&gt; setTimeout(resolve, retryDelay));\n      }\n    }\n\n    return false;\n  }\n\n  \/**\n   * Show mailto fallback\n   *\/\n  showMailtoFallback() {\n    const email = QUIZ_CONFIG.submission.mailtoAddress;\n    if (!email) return;\n\n    const subject = encodeURIComponent(&#x27;Water Equity Quiz Lead&#x27;);\n    const body = encodeURIComponent(\n      `New quiz submission:\\n\\n` +\n      `Name: ${this.state.leadData.firstName} ${this.state.leadData.lastName}\\n` +\n      `Email: ${this.state.leadData.email}\\n` +\n      `Organization: ${this.state.leadData.organization || &#x27;N\/A&#x27;}\\n` +\n      `Role: ${this.state.leadData.role || &#x27;N\/A&#x27;}\\n` +\n      `Opportunity Score: ${this.state.leadData.opportunityScore} (${this.state.leadData.tier})\\n` +\n      `Completed: ${this.state.leadData.completedAt}`\n    );\n\n    const mailtoLink = `mailto:${email}?subject=${subject}&amp;body=${body}`;\n\n    this.elements.mailtoFallback.innerHTML = `\n      &lt;p&gt;Unable to submit automatically. Please &lt;a href=&quot;${mailtoLink}&quot;&gt;click here to send your results via email&lt;\/a&gt;.&lt;\/p&gt;\n    `;\n    this.elements.mailtoFallback.classList.add(&#x27;visible&#x27;);\n  }\n\n  \/**\n   * Save lead data to localStorage\n   *\/\n  saveLeadData() {\n    try {\n      const leads = JSON.parse(localStorage.getItem(&#x27;quizLeads&#x27;) || &#x27;[]&#x27;);\n      leads.push(this.state.leadData);\n      localStorage.setItem(&#x27;quizLeads&#x27;, JSON.stringify(leads));\n    } catch (e) {\n      console.warn(&#x27;Could not save lead data:&#x27;, e);\n    }\n  }\n\n  \/**\n   * Get tier ID based on opportunity score\n   *\/\n  getTierId(score) {\n    const { tiers } = QUIZ_CONFIG;\n    if (score &gt;= tiers.high.minScore) return &#x27;high&#x27;;\n    if (score &gt;= tiers.moderate.minScore) return &#x27;moderate&#x27;;\n    return &#x27;low&#x27;;\n  }\n\n  \/**\n   * Get tier object based on opportunity score\n   *\/\n  getTier(score) {\n    const tierId = this.getTierId(score);\n    return QUIZ_CONFIG.tiers[tierId];\n  }\n\n  \/**\n   * Get current tier based on calculated score\n   *\/\n  getCurrentTier() {\n    const score = this.calculateOpportunityScore();\n    return this.getTier(score);\n  }\n\n  \/**\n   * Render results screen\n   *\/\n  renderResults() {\n    const opportunityScore = this.calculateOpportunityScore();\n    const tier = this.getTier(opportunityScore);\n    const tierId = this.getTierId(opportunityScore);\n\n    \/\/ Tier colors\n    const tierColors = {\n      high: &#x27;#dc2626&#x27;,    \/\/ Red - high opportunity (urgent)\n      moderate: &#x27;#d97706&#x27;, \/\/ Amber - moderate opportunity\n      low: &#x27;#059669&#x27;       \/\/ Green - doing well\n    };\n    const tierColor = tierColors[tierId];\n\n    \/\/ Update score display\n    this.elements.scoreValue.textContent = opportunityScore;\n    this.elements.scoreValue.style.color = tierColor;\n\n    \/\/ Animate score circle\n    const circumference = 2 * Math.PI * 54;\n    const offset = circumference - (opportunityScore \/ 100) * circumference;\n    this.elements.scoreProgress.style.stroke = tierColor;\n    this.elements.scoreProgress.style.strokeDasharray = circumference;\n    this.elements.scoreProgress.style.strokeDashoffset = circumference;\n\n    setTimeout(() =&gt; {\n      this.elements.scoreProgress.style.strokeDashoffset = offset;\n    }, 100);\n\n    \/\/ Update tier badge\n    this.elements.tierBadge.className = `tier-badge ${tierId}`;\n    this.elements.tierName.textContent = tier.title;\n    this.elements.tierIcon.innerHTML = this.getTierIcon(tier.icon);\n\n    \/\/ Update descriptions\n    this.elements.tierDescription.textContent = tier.summary;\n    this.elements.tierCta.textContent = tier.cta.headline;\n\n    \/\/ Update details list if element exists\n    if (this.elements.tierDetails) {\n      this.elements.tierDetails.innerHTML = tier.details\n        .map(detail =&gt; `&lt;li&gt;${detail}&lt;\/li&gt;`)\n        .join(&#x27;&#x27;);\n    }\n\n    \/\/ Update contact button\n    if (this.elements.contactBtn) {\n      this.elements.contactBtn.textContent = tier.cta.buttonText;\n      this.elements.contactBtn.href = tier.cta.buttonUrl || &#x27;#&#x27;;\n    }\n\n    \/\/ Hide the &quot;correct count&quot; section since this isn&#x27;t a knowledge quiz\n    const breakdownSection = document.querySelector(&#x27;.results-breakdown&#x27;);\n    if (breakdownSection) {\n      breakdownSection.style.display = &#x27;none&#x27;;\n    }\n  }\n\n  \/**\n   * Get SVG icon for tier\n   *\/\n  getTierIcon(iconName) {\n    const icons = {\n      alert: `&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;\n        &lt;path d=&quot;M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z&quot;\/&gt;\n        &lt;line x1=&quot;12&quot; y1=&quot;9&quot; x2=&quot;12&quot; y2=&quot;13&quot;\/&gt;\n        &lt;line x1=&quot;12&quot; y1=&quot;17&quot; x2=&quot;12.01&quot; y2=&quot;17&quot;\/&gt;\n      &lt;\/svg&gt;`,\n      search: `&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;\n        &lt;circle cx=&quot;11&quot; cy=&quot;11&quot; r=&quot;8&quot;\/&gt;\n        &lt;path d=&quot;M21 21l-4.35-4.35&quot;\/&gt;\n      &lt;\/svg&gt;`,\n      check: `&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;\n        &lt;path d=&quot;M22 11.08V12a10 10 0 1 1-5.93-9.14&quot;\/&gt;\n        &lt;polyline points=&quot;22 4 12 14.01 9 11.01&quot;\/&gt;\n      &lt;\/svg&gt;`,\n      trophy: `&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;\n        &lt;path d=&quot;M6 9H4.5a2.5 2.5 0 0 1 0-5H6&quot;\/&gt;\n        &lt;path d=&quot;M18 9h1.5a2.5 2.5 0 0 0 0-5H18&quot;\/&gt;\n        &lt;path d=&quot;M4 22h16&quot;\/&gt;\n        &lt;path d=&quot;M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22&quot;\/&gt;\n        &lt;path d=&quot;M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22&quot;\/&gt;\n        &lt;path d=&quot;M18 2H6v7a6 6 0 0 0 12 0V2Z&quot;\/&gt;\n      &lt;\/svg&gt;`,\n      star: `&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;\n        &lt;polygon points=&quot;12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2&quot;\/&gt;\n      &lt;\/svg&gt;`,\n      seedling: `&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;\n        &lt;path d=&quot;M12 22V8&quot;\/&gt;\n        &lt;path d=&quot;M5 12H2a10 10 0 0 0 10-10v0a10 10 0 0 0 10 10h-3&quot;\/&gt;\n        &lt;path d=&quot;M12 8a6 6 0 0 0 6-6&quot;\/&gt;\n        &lt;path d=&quot;M12 8a6 6 0 0 1-6-6&quot;\/&gt;\n      &lt;\/svg&gt;`\n    };\n    return icons[iconName] || icons.search;\n  }\n\n  \/**\n   * Handle retake quiz\n   *\/\n  handleRetakeQuiz() {\n    this.state = {\n      currentScreen: &#x27;intro&#x27;,\n      currentQuestion: 0,\n      answers: [],\n      leadData: {},\n      submitted: false\n    };\n\n    localStorage.removeItem(&#x27;quizState&#x27;);\n\n    this.showScreen(&#x27;intro&#x27;);\n    this.announce(&#x27;Quiz reset. Press Start Quiz to begin again.&#x27;);\n  }\n}\n\n\/\/ Initialize the application\nconst app = new QuizApp();\n&lt;\/script&gt;&lt;script&gt;\n    \/\/ Landing page interaction\n    document.addEventListener(&#x27;DOMContentLoaded&#x27;, function() {\n      const beginBtn = document.getElementById(&#x27;begin-assessment-btn&#x27;);\n      const landingPage = document.getElementById(&#x27;landing-page&#x27;);\n      const quizWrapper = document.getElementById(&#x27;quiz-wrapper&#x27;);\n      const startBtn = document.getElementById(&#x27;start-btn&#x27;);\n\n      \/\/ Mobile menu toggle\n      const mobileMenuBtn = document.querySelector(&#x27;.mobile-menu-btn&#x27;);\n      const headerNav = document.querySelector(&#x27;.header-nav&#x27;);\n\n      if (mobileMenuBtn &amp;&amp; headerNav) {\n        mobileMenuBtn.addEventListener(&#x27;click&#x27;, function() {\n          const isExpanded = this.getAttribute(&#x27;aria-expanded&#x27;) === &#x27;true&#x27;;\n          this.setAttribute(&#x27;aria-expanded&#x27;, !isExpanded);\n          headerNav.classList.toggle(&#x27;open&#x27;);\n        });\n      }\n\n      \/\/ Smooth scroll for anchor links\n      document.querySelectorAll(&#x27;a[href^=&quot;#&quot;]&#x27;).forEach(anchor =&gt; {\n        anchor.addEventListener(&#x27;click&#x27;, function(e) {\n          const targetId = this.getAttribute(&#x27;href&#x27;);\n          if (targetId === &#x27;#start-assessment&#x27;) {\n            e.preventDefault();\n            document.getElementById(&#x27;start-assessment&#x27;).scrollIntoView({ behavior: &#x27;smooth&#x27; });\n          } else if (targetId.startsWith(&#x27;#&#x27;)) {\n            e.preventDefault();\n            const target = document.querySelector(targetId);\n            if (target) {\n              target.scrollIntoView({ behavior: &#x27;smooth&#x27; });\n            }\n          }\n        });\n      });\n\n      \/\/ Function to start the assessment\n      function startAssessment() {\n        landingPage.style.display = &#x27;none&#x27;;\n        quizWrapper.style.display = &#x27;block&#x27;;\n        window.scrollTo({ top: 0, behavior: &#x27;smooth&#x27; });\n        \/\/ Trigger the quiz start\n        if (typeof app !== &#x27;undefined&#x27; &amp;&amp; app.handleStartQuiz) {\n          app.handleStartQuiz();\n        }\n      }\n\n      \/\/ Begin assessment button (bottom CTA)\n      if (beginBtn) {\n        beginBtn.addEventListener(&#x27;click&#x27;, startAssessment);\n      }\n\n      \/\/ Hero start button\n      const heroStartBtn = document.getElementById(&#x27;hero-start-btn&#x27;);\n      if (heroStartBtn) {\n        heroStartBtn.addEventListener(&#x27;click&#x27;, startAssessment);\n      }\n    });\n  &lt;\/script&gt;&lt;\/body&gt;&lt;\/html&gt;\"><\/iframe>\n<script>(function(){var f=document.getElementById('rpm-quiz-frame');if(!f)return;function r(){try{var d=f.contentWindow.document;f.style.height=d.documentElement.scrollHeight+'px';}catch(e){}}f.addEventListener('load',function(){r();try{var d=f.contentWindow.document;if(window.ResizeObserver){new ResizeObserver(r).observe(d.documentElement);}d.addEventListener('click',function(){setTimeout(r,450);});}catch(e){}});window.addEventListener('resize',r);setTimeout(r,1200);})();<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-469","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rpmwes.com\/blog\/wp-json\/wp\/v2\/pages\/469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rpmwes.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rpmwes.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rpmwes.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/rpmwes.com\/blog\/wp-json\/wp\/v2\/comments?post=469"}],"version-history":[{"count":3,"href":"https:\/\/rpmwes.com\/blog\/wp-json\/wp\/v2\/pages\/469\/revisions"}],"predecessor-version":[{"id":474,"href":"https:\/\/rpmwes.com\/blog\/wp-json\/wp\/v2\/pages\/469\/revisions\/474"}],"wp:attachment":[{"href":"https:\/\/rpmwes.com\/blog\/wp-json\/wp\/v2\/media?parent=469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}