OpenAI GPT 6 Luna – Government

via Azure · Generated

  • AIMAC Debt 3.53
  • Cost $0.006
  • Total Violations 5
  • HTML Size 38 KB
  • Em Dashes 5

Screenshot

View OpenAI GPT 6 Luna Government page View Live Page

Accessibility Issues Found

5 Serious

  • color-contrast serious 5 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <span class="eyebrow">Your city. Your services.</span>

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#123641">
  <meta name="description" content="Find city services, track permits, explore public records, and help shape the future of Alderhaven.">
  <title>City of Alderhaven — Local government, made clear</title>
  <link rel="preconnect" href="https://picsum.photos">
  <link rel="preconnect" href="https://placehold.co">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <style>
    :root {
      --ink: #19343b;
      --muted: #5c7073;
      --deep: #123641;
      --deepest: #0b2931;
      --teal: #147c78;
      --mint: #d9eeea;
      --coral: #e77959;
      --paper: #fbfaf7;
      --white: #fff;
      --line: #dce5e1;
      --gold: #e5bd70;
      --shadow: 0 18px 50px rgba(18, 54, 65, .09);
      --radius: 18px;
      --sans: "DM Sans", sans-serif;
      --display: "Manrope", sans-serif;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.65; }
    a { color: inherit; }
    button, input { font: inherit; }
    img { max-width: 100%; display: block; }
    :focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }
    .skip-link { position: absolute; z-index: 20; top: -60px; left: 16px; padding: 10px 14px; background: white; color: var(--deep); }
    .skip-link:focus { top: 12px; }
    .container { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
    .eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--teal); font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
    .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--coral); }
    h1, h2, h3 { font-family: var(--display); line-height: 1.16; letter-spacing: -.035em; }
    h1 { max-width: 720px; margin: 20px 0; font-size: clamp(2.8rem, 6vw, 5.35rem); font-weight: 700; }
    h2 { margin: 12px 0 18px; font-size: clamp(2rem, 4vw, 3.15rem); }
    h3 { margin: 0 0 10px; font-size: 1.25rem; }
    p { margin: 0 0 16px; }
    .topline { padding: 8px 0; color: #e9f0ea; background: var(--deepest); font-size: .78rem; }
    .topline .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
    .topline a { color: #fff; text-decoration: none; }
    .topline a:hover { text-decoration: underline; }
    .status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #8fd6ad; }
    header { position: relative; z-index: 5; background: var(--paper); }
    .header-main { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 19px 0; }
    .brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
    .brand img { width: 54px; height: 54px; border-radius: 13px; }
    .brand-name { display: block; color: var(--deep); font: 800 1.08rem var(--display); letter-spacing: -.04em; }
    .brand-tagline { display: block; margin-top: 2px; color: var(--muted); font-size: .72rem; letter-spacing: .01em; }
    .header-actions { display: flex; align-items: center; gap: 20px; }
    .search-link { color: var(--deep); text-decoration: none; font-weight: 600; font-size: .9rem; }
    .search-link:hover { color: var(--teal); }
    .button { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 6px; background: var(--teal); color: #fff; text-decoration: none; font-weight: 700; transition: transform .2s, background .2s; cursor: pointer; }
    .button:hover { transform: translateY(-2px); background: #0e6965; }
    .button-light { border-color: #b9d6d0; color: var(--deep); background: transparent; }
    .button-light:hover { color: var(--deep); background: #edf5f2; }
    .button svg, .text-link svg { width: 17px; height: 17px; }
    .nav-wrap { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .primary-nav { display: flex; align-items: center; gap: clamp(20px, 3.6vw, 48px); min-height: 54px; }
    .primary-nav a { color: #3e565b; font-size: .86rem; font-weight: 600; text-decoration: none; }
    .primary-nav a:hover { color: var(--teal); }
    .menu-toggle { display: none; border: 0; background: none; color: var(--deep); font-weight: 700; cursor: pointer; }
    .hero { position: relative; overflow: hidden; background: #e9f1ed; }
    .hero::before { content: ""; position: absolute; top: -180px; right: -140px; width: 580px; height: 580px; border: 1px solid rgba(20,124,120,.12); border-radius: 50%; box-shadow: 0 0 0 55px rgba(20,124,120,.035), 0 0 0 110px rgba(20,124,120,.025); }
    .hero-grid { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; gap: 64px; align-items: center; min-height: 570px; padding: 62px 0; }
    .hero-copy > p { max-width: 570px; color: #50676b; font-size: 1.09rem; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 31px; }
    .hero-note { display: flex; align-items: center; gap: 10px; color: #53686a; font-size: .84rem; }
    .hero-note svg { flex: 0 0 19px; width: 19px; color: var(--teal); }
    .hero-visual { position: relative; }
    .hero-visual img { width: 100%; height: 405px; object-fit: cover; border-radius: 46% 46% 8px 8px; box-shadow: var(--shadow); }
    .photo-caption { position: absolute; right: -18px; bottom: 24px; max-width: 230px; padding: 15px 18px; border-radius: 8px; background: white; box-shadow: var(--shadow); font-size: .8rem; }
    .photo-caption strong { display: block; margin-bottom: 3px; color: var(--deep); }
    .quick-links { position: relative; margin-top: -1px; padding: 23px 0; background: var(--deep); color: #fff; }
    .quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
    .quick-link { display: flex; align-items: center; gap: 14px; padding: 8px 24px; color: white; text-decoration: none; border-right: 1px solid rgba(255,255,255,.18); }
    .quick-link:first-child { padding-left: 0; }
    .quick-link:last-child { border-right: 0; }
    .quick-link:hover .quick-icon { background: var(--coral); }
    .quick-icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.13); transition: background .2s; }
    .quick-icon svg { width: 20px; height: 20px; }
    .quick-link strong { display: block; font-size: .88rem; }
    .quick-link span:last-child { color: #c3d5d2; font-size: .72rem; }
    section { scroll-margin-top: 30px; }
    .section-pad { padding: 100px 0; }
    .section-heading { max-width: 680px; margin-bottom: 40px; }
    .section-heading > p { color: var(--muted); font-size: 1.02rem; }
    .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .service-card { padding: 27px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: box-shadow .2s, transform .2s; }
    .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
    .service-icon { display: grid; width: 46px; height: 46px; margin-bottom: 20px; place-items: center; border-radius: 12px; color: var(--teal); background: #e4f1ed; }
    .service-icon svg { width: 23px; height: 23px; }
    .service-card p { color: var(--muted); font-size: .9rem; }
    .text-link { display: inline-flex; align-items: center; gap: 7px; color: var(--teal); font-size: .86rem; font-weight: 700; text-decoration: none; }
    .text-link:hover { text-decoration: underline; }
    .feature-band { padding: 94px 0; color: #edf5ef; background: var(--deep); }
    .feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
    .feature-band .eyebrow { color: #a6d6cd; }
    .feature-band h2 { max-width: 510px; }
    .feature-band p { color: #c1d2cf; }
    .feature-band .feature-image { position: relative; }
    .feature-image img { width: 100%; height: 405px; object-fit: cover; border-radius: 8px 80px 8px 8px; }
    .image-tag { position: absolute; right: 20px; bottom: -18px; padding: 12px 17px; border-radius: 5px; color: var(--deep); background: var(--gold); font-size: .78rem; font-weight: 700; }
    .feature-list { display: grid; gap: 16px; margin: 28px 0; padding: 0; list-style: none; }
    .feature-list li { display: flex; gap: 12px; color: #e3ece8; font-size: .91rem; }
    .feature-list svg { flex: 0 0 19px; width: 19px; color: #8fd3c4; }
    .feature-band .button { background: var(--coral); }
    .feature-band .button:hover { background: #d56648; }
    .tracker-section { background: #f1f4ef; }
    .tracker-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 74px; align-items: center; }
    .tracker-copy p { color: var(--muted); }
    .tracker-box { padding: 30px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow); }
    .tracker-box h3 { margin-bottom: 6px; }
    .tracker-box > p { color: var(--muted); font-size: .86rem; }
    .tracker-form { display: flex; gap: 10px; margin-top: 22px; }
    .tracker-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
    .tracker-form input { min-width: 0; flex: 1; height: 48px; padding: 0 14px; border: 1px solid #cbd9d4; border-radius: 6px; color: var(--ink); background: #fff; }
    .form-hint { margin: 11px 0 0; color: #718083; font-size: .75rem; }
    .tracker-result { display: none; margin-top: 18px; padding: 16px; border-left: 3px solid var(--teal); border-radius: 4px; background: #edf6f2; font-size: .87rem; }
    .tracker-result.visible { display: block; }
    .tracker-result strong { display: block; color: var(--deep); }
    .timeline { display: flex; gap: 0; margin-top: 15px; color: #50676b; font-size: .73rem; }
    .timeline span { flex: 1; padding-top: 13px; border-top: 2px solid #b5d9cc; }
    .timeline span:last-child { border-color: #d7e2dc; }
    .records-section { padding: 94px 0; }
    .records-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 58px; align-items: center; }
    .records-layout img { width: 100%; height: 350px; object-fit: cover; border-radius: 12px; }
    .records-copy p { color: var(--muted); }
    .records-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 24px 0 28px; padding: 0; list-style: none; }
    .records-list li { color: #425b5f; font-size: .87rem; }
    .records-list li::before { content: "↗"; margin-right: 8px; color: var(--teal); font-weight: 700; }
    .community { padding: 88px 0; background: #efe9dd; }
    .community-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
    .community-card { padding: 28px; border-radius: 10px; background: #fff; box-shadow: 0 10px 34px rgba(42,55,46,.07); }
    .community-card .date { display: inline-block; margin-bottom: 16px; padding: 5px 10px; border-radius: 3px; color: #7b5631; background: #f7ebd4; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
    .community-card p { color: var(--muted); font-size: .9rem; }
    .community-copy p { color: #5d6965; }
    .faq-section { padding: 98px 0; }
    .faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 70px; }
    .faq-intro p { color: var(--muted); }
    .faq-item { border-bottom: 1px solid var(--line); }
    .faq-item summary { position: relative; padding: 19px 36px 19px 0; color: var(--deep); font-family: var(--display); font-weight: 700; list-style: none; cursor: pointer; }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after { content: "+"; position: absolute; right: 3px; top: 14px; color: var(--teal); font: 500 1.6rem var(--sans); }
    .faq-item[open] summary::after { content: "−"; }
    .faq-answer { max-width: 680px; padding: 0 0 19px; color: var(--muted); font-size: .9rem; }
    .cta-strip { padding: 35px 0; background: var(--mint); }
    .cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
    .cta-inner h2 { margin: 0 0 5px; font-size: 1.65rem; }
    .cta-inner p { margin: 0; color: #50676b; font-size: .9rem; }
    footer { color: #d1e0dc; background: var(--deepest); }
    .footer-main { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 50px; padding: 60px 0 48px; }
    .footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; color: white; font: 800 1rem var(--display); }
    .footer-brand img { width: 39px; height: 39px; border-radius: 9px; }
    .footer-about p { max-width: 300px; color: #a9bfba; font-size: .82rem; }
    .footer-col h3 { margin-bottom: 17px; color: white; font: 700 .8rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }
    .footer-col a { display: block; width: fit-content; margin: 9px 0; color: #b7cbc6; font-size: .82rem; text-decoration: none; }
    .footer-col a:hover { color: white; text-decoration: underline; }
    .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.14); color: #91aaa5; font-size: .73rem; }
    .socials { display: flex; gap: 17px; }
    .socials a { color: #c7d9d4; text-decoration: none; }
    .socials a:hover { color: white; }
    @media (max-width: 900px) {
      .hero-grid { gap: 35px; }
      .hero-visual img { height: 350px; }
      .quick-link { padding-inline: 13px; }
      .feature-grid, .tracker-grid { gap: 42px; }
      .footer-main { gap: 28px; grid-template-columns: 1.3fr 1fr 1fr; }
      .footer-about { grid-column: 1 / -1; }
    }
    @media (max-width: 700px) {
      .container { width: min(100% - 36px, 540px); }
      .topline .container { justify-content: center; text-align: center; }
      .topline .topline-extra { display: none; }
      .header-main { padding: 14px 0; }
      .brand img { width: 46px; height: 46px; }
      .brand-tagline { font-size: .66rem; }
      .header-actions { gap: 12px; }
      .header-actions .button { min-height: 40px; padding: 0 12px; font-size: .78rem; }
      .search-link { display: none; }
      .menu-toggle { display: inline-flex; padding: 8px 0 8px 10px; }
      .nav-wrap { display: none; }
      .nav-wrap.open { display: block; }
      .primary-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 7px 0; }
      .primary-nav a { padding: 11px 4px; border-bottom: 1px solid var(--line); }
      .hero-grid { grid-template-columns: 1fr; gap: 32px; padding: 55px 0 44px; }
      h1 { font-size: clamp(2.7rem, 13vw, 4rem); }
      .hero-copy > p { font-size: 1rem; }
      .hero-visual { max-width: 510px; }
      .hero-visual img { height: 300px; border-radius: 42% 42% 7px 7px; }
      .photo-caption { right: 8px; bottom: 13px; }
      .quick-grid { grid-template-columns: 1fr 1fr; row-gap: 14px; }
      .quick-link { padding: 7px 10px; border-right: 0; }
      .quick-link:first-child { padding-left: 10px; }
      .section-pad { padding: 70px 0; }
      .services-grid { grid-template-columns: 1fr; }
      .service-card { padding: 23px; }
      .feature-band { padding: 70px 0; }
      .feature-grid, .tracker-grid, .records-layout, .community-grid, .faq-layout { grid-template-columns: 1fr; gap: 36px; }
      .feature-image img { height: 300px; }
      .tracker-box { padding: 23px; }
      .records-layout img { height: 270px; }
      .records-section, .faq-section { padding: 70px 0; }
      .community { padding: 68px 0; }
      .cta-inner { align-items: flex-start; flex-direction: column; }
      .footer-main { grid-template-columns: 1fr 1fr; padding: 45px 0 35px; }
      .footer-about { grid-column: 1 / -1; }
      .footer-bottom { flex-direction: column; }
    }
    @media (max-width: 430px) {
      .brand-tagline { max-width: 150px; }
      .hero-actions .button { width: 100%; }
      .tracker-form { flex-direction: column; }
      .tracker-form .button { width: 100%; }
      .records-list { grid-template-columns: 1fr; }
      .footer-main { gap: 27px 18px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
    }
  </style>
</head>
<body>
  <a class="skip-link" href="#main">Skip to main content</a>

  <div class="topline">
    <div class="container">
      <span><span class="status-dot" aria-hidden="true"></span>City offices are open today, 8:30 a.m.–5 p.m.</span>
      <a class="topline-extra" href="#safety">Emergency information <span aria-hidden="true">↗</span></a>
    </div>
  </div>

  <header>
    <div class="container header-main">
      <a class="brand" href="#home" aria-label="City of Alderhaven home">
        <img src="https://placehold.co/96x96/123641/FFFFFF?text=AH&font=montserrat" alt="Alderhaven city mark">
        <span>
          <span class="brand-name">City of Alderhaven</span>
          <span class="brand-tagline">Local government, made clear.</span>
        </span>
      </a>
      <div class="header-actions">
        <a class="search-link" href="#services">Find a service <span aria-hidden="true">⌕</span></a>
        <a class="button" href="#contact">Contact the city <span aria-hidden="true">→</span></a>
        <button class="menu-toggle" type="button" aria-expanded="false" aria-controls="primary-nav">Menu</button>
      </div>
    </div>
    <div class="nav-wrap" id="primary-nav">
      <nav class="container primary-nav" aria-label="Primary navigation">
        <a href="#services">City services</a>
        <a href="#planning">Planning &amp; zoning</a>
        <a href="#safety">Public safety</a>
        <a href="#records">Public records</a>
        <a href="#permits">Permits</a>
        <a href="#community">Community</a>
        <a href="#faqs">FAQs</a>
      </nav>
    </div>
  </header>

  <main id="main">
    <section class="hero" id="home" aria-labelledby="hero-title">
      <div class="container hero-grid">
        <div class="hero-copy">
          <span class="eyebrow">Your city. Your services.</span>
          <h1 id="hero-title">Alderhaven works better when we work together.</h1>
          <p>From applying for a permit to finding your next community meeting, get the clear answers and city services you need—without the runaround.</p>
          <div class="hero-actions">
            <a class="button" href="#services">Explore city services <span aria-hidden="true">→</span></a>
            <a class="button button-light" href="#community">Get involved</a>
          </div>
          <div class="hero-note">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M12 22s8-4 8-11V5l-8-3-8 3v6c0 7 8 11 8 11Z"/><path d="m9 12 2 2 4-4"/></svg>
            <span>Official information, built around the people who call Alderhaven home.</span>
          </div>
        </div>
        <div class="hero-visual">
          <img src="https://picsum.photos/900/760?grayscale" alt="Tree-lined civic center and welcoming public plaza in a coastal city" fetchpriority="high">
          <div class="photo-caption"><strong>One city, many ways to take part.</strong>Find a service, share your voice, and help shape what comes next.</div>
        </div>
      </div>
    </section>

    <div class="quick-links" aria-label="Popular services">
      <div class="container quick-grid">
        <a class="quick-link" href="#permits">
          <span class="quick-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v6h5M10 13h6M10 17h6"/></svg></span>
          <span><strong>Apply for a permit</strong><span>Start or manage an application</span></span>
        </a>
        <a class="quick-link" href="#records">
          <span class="quick-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m16 16 5 5M8 11h6M11 8v6"/></svg></span>
          <span><strong>Request public records</strong><span>Find reports and documents</span></span>
        </a>
        <a class="quick-link" href="#safety">
          <span class="quick-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path d="M12 22s8-4 8-11V5l-8-3-8 3v6c0 7 8 11 8 11Z"/><path d="M12 8v5M12 17h.01"/></svg></span>
          <span><strong>Get help &amp; report an issue</strong><span>Connect with the right team</span></span>
        </a>
        <a class="quick-link" href="#community">
          <span class="quick-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 10h18M8 14h3M8 17h7"/></svg></span>
          <span><strong>See the city calendar</strong><span>Meetings, events, and hearings</span></span>
        </a>
      </div>
    </div>

    <section class="section-pad" id="services" aria-labelledby="services-title">
      <div class="container">
        <div class="section-heading">
          <span class="eyebrow">Here to help</span>
          <h2 id="services-title">City services, made simpler.</h2>
          <p>Whether you are settling into Alderhaven or have lived here for years, our departments are here to make everyday tasks easier. Find the right place to begin, understand what you will need, and connect with a city team when you have questions.</p>
        </div>
        <div class="services-grid">
          <article class="service-card">
            <span class="service-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path d="M4 21V8l8-5 8 5v13M2 21h20M9 21v-7h6v7M8 10h.01M16 10h.01"/></svg></span>
            <h3>Living in Alderhaven</h3>
            <p>Get help with utility accounts, waste and recycling schedules, neighborhood services, and the practical details of making a home in our city.</p>
            <a class="text-link" href="#contact">Explore resident services <span aria-hidden="true">→</span></a>
          </article>
          <article class="service-card">
            <span class="service-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path d="M3 21h18M5 21V8l7-5 7 5v13M9 21v-6h6v6M8 10h.01M16 10h.01"/></svg></span>
            <h3>Building &amp; business</h3>
            <p>Find licensing guidance, inspection requirements, and permit information for a home improvement, a new business, or a larger development project.</p>
            <a class="text-link" href="#permits">Browse permits &amp; licenses <span aria-hidden="true">→</span></a>
          </article>
          <article class="service-card">
            <span class="service-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path d="M4 20V9l8-5 8 5v11M2 20h20M9 20v-6h6v6M8 10h.01M16 10h.01"/></svg></span>
            <h3>City hall &amp; council</h3>
            <p>Meet your elected representatives, review council agendas, learn how decisions are made, and take part in public meetings and hearings.</p>
            <a class="text-link" href="#community">Attend a public meeting <span aria-hidden="true">→</span></a>
          </article>
        </div>
      </div>
    </section>

    <section class="feature-band" id="planning" aria-labelledby="planning-title">
      <div class="container feature-grid">
        <div>
          <span class="eyebrow">Planning for tomorrow</span>
          <h2 id="planning-title">A thoughtful plan for a growing Alderhaven.</h2>
          <p>Our Planning &amp; Zoning team helps guide how neighborhoods evolve—balancing housing, local businesses, public spaces, and the character that makes Alderhaven feel like home. Residents and property owners can explore land-use plans, review active applications, and understand what comes next.</p>
          <p>When a proposal requires a zoning variance or a change to an adopted plan, the city provides notice and an opportunity to be heard. Public hearing dates, staff reports, and ways to submit a comment are published before a decision is made.</p>
          <ul class="feature-list">
            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m5 12 4 4L19 6"/></svg><span>Review current zoning maps and neighborhood plans.</span></li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m5 12 4 4L19 6"/></svg><span>Follow applications, notices, and upcoming public hearings.</span></li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m5 12 4 4L19 6"/></svg><span>Speak with a planner before you submit a proposal.</span></li>
          </ul>
          <a class="button" href="#contact">Contact Planning &amp; Zoning <span aria-hidden="true">→</span></a>
        </div>
        <div class="feature-image">
          <img src="https://picsum.photos/900/700?blur=1" alt="A walkable neighborhood with homes, mature trees, and a community street" loading="lazy">
          <span class="image-tag">Planning with the community</span>
        </div>
      </div>
    </section>

    <section class="section-pad tracker-section" id="permits" aria-labelledby="permits-title">
      <div class="container tracker-grid">
        <div class="tracker-copy">
          <span class="eyebrow">Permits &amp; applications</span>
          <h2 id="permits-title">Know where your permit stands.</h2>
          <p>Track a submitted building permit or inspection request using the reference number from your confirmation email. The tracker shows a sample status experience for this demonstration; for official application records, contact the Permit Center.</p>
          <p>Planning a project? Our team can help you understand application requirements, review timelines, and inspection steps before work begins.</p>
          <a class="text-link" href="#contact">Contact the Permit Center <span aria-hidden="true">→</span></a>
        </div>
        <div class="tracker-box">
          <h3>Permit status checker</h3>
          <p>Enter a sample reference number to see how status updates appear.</p>
          <form class="tracker-form" id="permit-form">
            <label for="permit-id">Permit reference number</label>
            <input id="permit-id" name="permit-id" type="text" placeholder="For example: AH-2025-0142" autocomplete="off" required>
            <button class="button" type="submit">Check status <span aria-hidden="true">→</span></button>
          </form>
          <p class="form-hint">Demo references: AH-2025-0142 or AH-2025-0198. Do not enter personal information.</p>
          <div class="tracker-result" id="tracker-result" role="status" aria-live="polite"></div>
        </div>
      </div>
    </section>

    <section class="records-section" id="records" aria-labelledby="records-title">
      <div class="container records-layout">
        <img src="https://picsum.photos/900/650?grayscale&blur=1" alt="Public documents and city records being reviewed at a desk" loading="lazy">
        <div class="records-copy">
          <span class="eyebrow">Open by design</span>
          <h2 id="records-title">Public records belong to the public.</h2>
          <p>Alderhaven is committed to transparency and responsible access to government information. Request records online or learn where to find commonly requested materials, including meeting minutes, city contracts, annual reports, and public notices.</p>
          <p>Our Records Office will acknowledge a request and work with you to clarify its scope if needed. Some records may be exempt from disclosure under applicable law; when information must be withheld or redacted, the city will explain the basis for that decision.</p>
          <ul class="records-list">
            <li>Council agendas &amp; minutes</li>
            <li>Budgets &amp; financial reports</li>
            <li>Permits &amp; public notices</li>
            <li>Policies &amp; city ordinances</li>
          </ul>
          <a class="button" href="#contact">Request public records <span aria-hidden="true">→</span></a>
        </div>
      </div>
    </section>

    <section class="feature-band" id="safety" aria-labelledby="safety-title">
      <div class="container feature-grid">
        <div class="feature-image">
          <img src="https://picsum.photos/900/700?grayscale" alt="A neighborhood park and public street in daylight" loading="lazy">
          <span class="image-tag">Prepared. Connected. Safer.</span>
        </div>
        <div>
          <span class="eyebrow">Public safety &amp; service requests</span>
          <h2 id="safety-title">A safer city starts with looking out for one another.</h2>
          <p>Our Police, Fire &amp; Rescue, and Public Works teams work together to support safe neighborhoods and reliable infrastructure. Find preparedness information, non-emergency contacts, and guidance for reporting a concern so your request reaches the right department.</p>
          <p>For an immediate threat to life or property, call 911. For non-emergency service requests—such as a streetlight outage, a damaged sign, or a neighborhood concern—use the appropriate city contact and include the location and details that will help our staff respond.</p>
          <ul class="feature-list">
            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m5 12 4 4L19 6"/></svg><span>Find emergency preparedness and severe-weather resources.</span></li>
            <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m5 12 4 4L19 6"/></svg><span>Report a non-emergency neighborhood or infrastructure issue.</span></li>
          </ul>
          <a class="button" href="#contact">File a service complaint <span aria-hidden="true">→</span></a>
        </div>
      </div>
    </section>

    <section class="community" id="community" aria-labelledby="community-title">
      <div class="container community-grid">
        <div class="community-copy">
          <span class="eyebrow">Your voice matters</span>
          <h2 id="community-title">Good decisions start with good conversations.</h2>
          <p>City council meetings, advisory boards, and public hearings are open to Alderhaven residents. Whether you have a question about a neighborhood proposal or an idea for a citywide improvement, there is a place to share your perspective.</p>
          <p>Review upcoming agendas before you attend, learn how to submit written comments, or sign up for meeting updates. We aim to make participation accessible, welcoming, and useful for everyone.</p>
          <a class="text-link" href="#contact">See all meetings &amp; events <span aria-hidden="true">→</span></a>
        </div>
        <article class="community-card">
          <span class="date">Community notice · City Hall</span>
          <h3>Downtown streetscape plan: public hearing</h3>
          <p>Join the Planning Commission for a presentation and public comment on proposed improvements to the downtown pedestrian corridor. The meeting includes time for questions and written comments.</p>
          <p><strong>Wednesday, June 18</strong><br>6:00 p.m. · Alderhaven City Hall, Council Chambers</p>
          <a class="text-link" href="#contact">View agenda &amp; meeting details <span aria-hidden="true">→</span></a>
        </article>
      </div>
    </section>

    <section class="faq-section" id="faqs" aria-labelledby="faq-title">
      <div class="container faq-layout">
        <div class="faq-intro">
          <span class="eyebrow">Quick answers</span>
          <h2 id="faq-title">Frequently asked questions.</h2>
          <p>Can’t find what you need? Our service desk can point you in the right direction.</p>
          <a class="text-link" href="#contact">Ask the city a question <span aria-hidden="true">→</span></a>
        </div>
        <div>
          <details class="faq-item">
            <summary>How do I apply for a building permit?</summary>
            <div class="faq-answer">Start with the Permits section to identify the application type and required documents for your project. Many residential projects need a site plan and construction details. If you are unsure what applies, contact the Permit Center before submitting so staff can help you avoid delays.</div>
          </details>
          <details class="faq-item">
            <summary>How can I speak at a public hearing?</summary>
            <div class="faq-answer">Check the published agenda for the hearing time, location, and instructions for in-person or remote participation. You may usually provide comments during the public comment period or submit written comments to the clerk before the stated deadline. Follow the meeting notice for the specific procedure.</div>
          </details>
          <details class="faq-item">
            <summary>How long does a public records request take?</summary>
            <div class="faq-answer">Response time depends on the scope and format of the records requested. The Records Office will acknowledge your request and provide an update if research, review, or redaction will take additional time. A focused date range or description can help staff locate records more efficiently.</div>
          </details>
          <details class="faq-item">
            <summary>Where do I report a missed collection or street issue?</summary>
            <div class="faq-answer">Use the Contact the City options below to reach Public Works. Include the address or nearest intersection, what happened, and when you noticed the issue. For an emergency or immediate danger, call 911 rather than submitting an online service request.</div>
          </details>
        </div>
      </div>
    </section>

    <section class="cta-strip" id="contact" aria-labelledby="contact-title">
      <div class="container cta-inner">
        <div>
          <h2 id="contact-title">Not sure where to start?</h2>
          <p>Our Alderhaven Service Desk is ready to connect you with the right department.</p>
        </div>
        <a class="button" href="mailto:hello@alderhaven.gov">Contact the city <span aria-hidden="true">→</span></a>
      </div>
    </section>
  </main>

  <footer>
    <div class="container footer-main">
      <div class="footer-about">
        <div class="footer-brand">
          <img src="https://placehold.co/96x96/FFFFFF/123641?text=AH&font=montserrat" alt="" loading="lazy">
          <span>City of Alderhaven</span>
        </div>
        <p>Clear information. Thoughtful service. A city that works for everyone.</p>
        <p>100 Harbor Square, Alderhaven, OR 97000<br>Monday–Friday, 8:30 a.m.–5 p.m.</p>
      </div>
      <div class="footer-col">
        <h3>City services</h3>
        <a href="#services">Resident services</a>
        <a href="#permits">Permits &amp; licenses</a>
        <a href="#planning">Planning &amp; zoning</a>
        <a href="#safety">Public safety</a>
      </div>
      <div class="footer-col">
        <h3>Government</h3>
        <a href="#community">City council</a>
        <a href="#records">Public records</a>
        <a href="#community">Meetings &amp; hearings</a>
        <a href="#faqs">FAQs</a>
      </div>
      <div class="footer-col">
        <h3>Get in touch</h3>
        <a href="tel:+15035550184">(503) 555-0184</a>
        <a href="mailto:hello@alderhaven.gov">hello@alderhaven.gov</a>
        <a href="#safety">Report a concern</a>
        <a href="#contact">Department directory</a>
      </div>
    </div>
    <div class="container footer-bottom">
      <span>© <span id="current-year">2025</span> City of Alderhaven. All rights reserved.</span>
      <div class="socials" aria-label="Social media and policies">
        <a href="#community">Facebook</a>
        <a href="#community">Instagram</a>
        <a href="#community">YouTube</a>
        <a href="#contact">Privacy</a>
        <a href="#contact">Terms</a>
        <a href="#contact">Accessibility</a>
      </div>
    </div>
  </footer>

  <script>
    const menuButton = document.querySelector(".menu-toggle");
    const navWrap = document.querySelector(".nav-wrap");

    menuButton.addEventListener("click", () => {
      const isOpen = menuButton.getAttribute("aria-expanded") === "true";
      menuButton.setAttribute("aria-expanded", String(!isOpen));
      navWrap.classList.toggle("open", !isOpen);
    });

    navWrap.querySelectorAll("a").forEach((link) => {
      link.addEventListener("click", () => {
        menuButton.setAttribute("aria-expanded", "false");
        navWrap.classList.remove("open");
      });
    });

    document.getElementById("current-year").textContent = new Date().getFullYear();

    const permitForm = document.getElementById("permit-form");
    const permitInput = document.getElementById("permit-id");
    const result = document.getElementById("tracker-result");

    permitForm.addEventListener("submit", (event) => {
      event.preventDefault();
      const reference = permitInput.value.trim().toUpperCase();
      const sampleStatuses = {
        "AH-2025-0142": {
          stage: "Under review",
          description: "Your sample application has been received and is under review by Permit Services.",
          step: "Application received · Staff review · Decision"
        },
        "AH-2025-0198": {
          stage: "Inspection scheduled",
          description: "Your sample inspection request is scheduled. A city representative will confirm the appointment details.",
          step: "Application received · Review complete · Inspection scheduled"
        }
      };
      const match = sampleStatuses[reference];

      result.classList.add("visible");
      if (match) {
        result.innerHTML = "<strong>" + match.stage + "</strong><span>" + match.description + "</span><div class=\"timeline\" aria-label=\"" + match.step + "\"><span>Received</span><span>In progress</span><span>Next step</span></div>";
      } else {
        result.innerHTML = "<strong>Reference not found in this demo</strong><span>Try AH-2025-0142 or AH-2025-0198. For a real application update, contact the Permit Center.</span>";
      }
    });
  </script>
</body>
</html>
View Axe Report (JSON)
{
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.2"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
    "windowWidth": 1280,
    "windowHeight": 720,
    "orientationAngle": 0,
    "orientationType": "landscape-primary"
  },
  "timestamp": "2026-11-12T09:57:02.422Z",
  "url": "https://benchmark.aimac.invalid/cba3503aadda6f19f32338e800697d1e17631d933993ae04d02209e04d800064.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "select-name",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "server-side-image-map",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag211",
        "section508",
        "section508.22.f",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure that server-side image maps are not used",
      "help": "Server-side image maps must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
      "nodes": []
    },
    {
      "id": "svg-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
      "help": "<svg> elements with an img role must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "td-headers-attr",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
      "help": "Table cells that use the headers attribute must only refer to cells in the same table",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "th-has-data-cells",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
      "help": "Table headers in a data table must refer to data cells",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
      "nodes": []
    },
    {
      "id": "valid-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2aa",
        "wcag312",
        "TTv5",
        "TT11.b",
        "EN-301-549",
        "EN-9.3.1.2",
        "ACT"
      ],
      "description": "Ensure lang attributes have valid values",
      "help": "lang attribute must have a valid value",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
      "nodes": []
    },
    {
      "id": "video-caption",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag122",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT17.a",
        "EN-301-549",
        "EN-9.1.2.2"
      ],
      "description": "Ensure <video> elements have captions",
      "help": "<video> elements must have captions",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
      "nodes": []
    },
    {
      "id": "no-autoplay-audio",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag142",
        "TTv5",
        "TT2.a",
        "EN-301-549",
        "EN-9.1.4.2",
        "ACT"
      ],
      "description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
      "help": "<video> or <audio> elements must not play automatically",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
      "nodes": []
    }
  ],
  "passes": [
    {
      "id": "aria-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-allowed-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attributes are used correctly for the defined role"
            }
          ],
          "none": [
            {
              "id": "aria-unsupported-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute is supported"
            }
          ],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#home\" aria-label=\"City of Alderhaven home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-conditional-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#home\" aria-label=\"City of Alderhaven home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body>",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "focusable-modal-open",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements while a modal is open"
            },
            {
              "id": "focusable-disabled",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            },
            {
              "id": "focusable-not-tabbable",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<span class=\"status-dot\" aria-hidden=\"true\"></span>",
          "target": [
            ".status-dot"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#home\" aria-label=\"City of Alderhaven home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr-value",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all ARIA attributes have valid values",
      "help": "ARIA attributes must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-valid-attr-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute values are valid"
            },
            {
              "id": "aria-errormessage",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
            },
            {
              "id": "aria-level",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-level values are valid"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#home\" aria-label=\"City of Alderhaven home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-valid-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute name is valid"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#home\" aria-label=\"City of Alderhaven home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "autocomplete-valid",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "the autocomplete attribute is correctly formatted"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<input id=\"permit-id\" name=\"permit-id\" type=\"text\" placeholder=\"For example: AH-2025-0142\" autocomplete=\"off\" required=\"\">",
          "target": [
            "#permit-id"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"button\" type=\"submit\">Check status <span aria-hidden=\"true\">\u2192</span></button>",
          "target": [
            "button[type=\"submit\"]"
          ]
        }
      ]
    },
    {
      "id": "bypass",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag241",
        "section508",
        "section508.22.o",
        "TTv5",
        "TT9.a",
        "EN-301-549",
        "EN-9.2.4.1"
      ],
      "description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
      "help": "Page must have means to bypass repeated blocks",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "internal-link-present",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Valid skip link found"
            },
            {
              "id": "header-present",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<h1 id=\"hero-title\">Alderhaven works better when we work together.</h1>",
                  "target": [
                    "#hero-title"
                  ]
                },
                {
                  "html": "<h2 id=\"services-title\">City services, made simpler.</h2>",
                  "target": [
                    "#services-title"
                  ]
                },
                {
                  "html": "<h3>Living in Alderhaven</h3>",
                  "target": [
                    ".service-card:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Building &amp; business</h3>",
                  "target": [
                    ".service-card:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>City hall &amp; council</h3>",
                  "target": [
                    ".service-card:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"planning-title\">A thoughtful plan for a growing Alderhaven.</h2>",
                  "target": [
                    "#planning-title"
                  ]
                },
                {
                  "html": "<h2 id=\"permits-title\">Know where your permit stands.</h2>",
                  "target": [
                    "#permits-title"
                  ]
                },
                {
                  "html": "<h3>Permit status checker</h3>",
                  "target": [
                    ".tracker-box > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"records-title\">Public records belong to the public.</h2>",
                  "target": [
                    "#records-title"
                  ]
                },
                {
                  "html": "<h2 id=\"safety-title\">A safer city starts with looking out for one another.</h2>",
                  "target": [
                    "#safety-title"
                  ]
                },
                {
                  "html": "<h2 id=\"community-title\">Good decisions start with good conversations.</h2>",
                  "target": [
                    "#community-title"
                  ]
                },
                {
                  "html": "<h3>Downtown streetscape plan: public hearing</h3>",
                  "target": [
                    ".community-card > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"faq-title\">Frequently asked questions.</h2>",
                  "target": [
                    "#faq-title"
                  ]
                },
                {
                  "html": "<h2 id=\"contact-title\">Not sure where to start?</h2>",
                  "target": [
                    "#contact-title"
                  ]
                },
                {
                  "html": "<h3>City services</h3>",
                  "target": [
                    ".footer-col:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Government</h3>",
                  "target": [
                    ".footer-col:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Get in touch</h3>",
                  "target": [
                    ".footer-col:nth-child(4) > h3"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main id=\"main\">",
                  "target": [
                    "#main"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a landmark region"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e9f0ea",
                "bgColor": "#0b2931",
                "contrastRatio": 13.16,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 13.16"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<span><span class=\"status-dot\" aria-hidden=\"true\"></span>City offices are open today, 8:30 a.m.\u20135 p.m.</span>",
          "target": [
            ".topline > .container > span"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "duplicate-id-aria",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every id attribute value used in ARIA and in labels is unique",
      "help": "IDs used in ARIA and labels must be unique",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "duplicate-id-aria",
              "data": "primary-nav",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"nav-wrap\" id=\"primary-nav\">",
          "target": [
            "#primary-nav"
          ]
        }
      ]
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"permit-id\">Permit reference number</label>",
                  "target": [
                    "label"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input id=\"permit-id\" name=\"permit-id\" type=\"text\" placeholder=\"For example: AH-2025-0142\" autocomplete=\"off\" required=\"\">",
          "target": [
            "#permit-id"
          ]
        }
      ]
    },
    {
      "id": "html-has-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure every HTML document has a lang attribute",
      "help": "<html> element must have a lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "The <html> element has a lang attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "html-lang-valid",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure the lang attribute of the <html> element has a valid value",
      "help": "<html> element must have a valid value for the lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "valid-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Value of lang attribute is included in the list of valid languages"
            }
          ],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "TT7.b",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <img> elements have alternative text or a role of none or presentation",
      "help": "Images must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has an alt attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "alt-space-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a valid alt attribute value"
            }
          ],
          "impact": null,
          "html": "<img src=\"https://placehold.co/96x96/123641/FFFFFF?text=AH&amp;font=montserrat\" alt=\"Alderhaven city mark\">",
          "target": [
            "img[alt=\"Alderhaven city mark\"]"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"permit-id\">Permit reference number</label>",
                  "target": [
                    "label"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            },
            {
              "id": "non-empty-placeholder",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a placeholder attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input id=\"permit-id\" name=\"permit-id\" type=\"text\" placeholder=\"For example: AH-2025-0142\" autocomplete=\"off\" required=\"\">",
          "target": [
            "#permit-id"
          ]
        }
      ]
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "link-in-text-block-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<article class=\"service-card\">",
                  "target": [
                    ".service-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"text-link\" href=\"#contact\">Explore resident services <span aria-hidden=\"true\">\u2192</span></a>",
          "target": [
            ".service-card:nth-child(1) > .text-link[href$=\"#contact\"]"
          ]
        }
      ]
    },
    {
      "id": "link-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is not in tab order or has accessible text"
            }
          ],
          "impact": null,
          "html": "<a class=\"skip-link\" href=\"#main\">Skip to main content</a>",
          "target": [
            ".skip-link"
          ]
        }
      ]
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "only-listitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List element only has direct children that are allowed inside <li> elements"
            }
          ],
          "impact": null,
          "html": "<ul class=\"feature-list\">",
          "target": [
            "div:nth-child(1) > .feature-list"
          ]
        }
      ]
    },
    {
      "id": "listitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <li> elements are used semantically",
      "help": "<li> elements must be contained in a <ul> or <ol>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "listitem",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List item has a <ul>, <ol> or role=\"list\" parent element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<li><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"m5 12 4 4L19 6\"></path></svg><span>Review current zoning maps and neighborhood plans.</span></li>",
          "target": [
            "div:nth-child(1) > .feature-list > li:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img src=\"https://placehold.co/96x96/123641/FFFFFF?text=AH&amp;font=montserrat\" alt=\"Alderhaven city mark\">",
          "target": [
            "img[alt=\"Alderhaven city mark\"]"
          ]
        }
      ]
    },
    {
      "id": "summary-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure summary elements have discernible text",
      "help": "Summary elements must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<summary>How do I apply for a building permit?</summary>",
          "target": [
            "details:nth-child(1) > summary"
          ]
        }
      ]
    },
    {
      "id": "target-size",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag22aa",
        "wcag258"
      ],
      "description": "Ensure touch targets have sufficient size and space",
      "help": "All touch targets must be 24px large, or leave sufficient space",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "minSize": 24,
                "width": 181.9,
                "height": 46.4
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (181.9px by 46.4px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"skip-link\" href=\"#main\">Skip to main content</a>",
          "target": [
            ".skip-link"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": {
                "role": null,
                "nodeName": "div",
                "messageKey": "noRoleSingular",
                "prohibited": [
                  "aria-label"
                ]
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute is not well supported on a div with no valid role attribute."
            }
          ],
          "impact": "serious",
          "html": "<div class=\"quick-links\" aria-label=\"Popular services\">",
          "target": [
            ".quick-links"
          ],
          "failureSummary": "Fix all of the following:\n  aria-label attribute is not well supported on a div with no valid role attribute."
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "messageKey": "nonBmp"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element content contains only non-text characters"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span aria-hidden=\"true\">\u2315</span>",
          "target": [
            ".search-link > span[aria-hidden=\"true\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element content contains only non-text characters"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#147c78",
                "bgColor": "#e9f1ed",
                "contrastRatio": 4.36,
                "fontSize": "9.1pt (12.16px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"hero\" id=\"home\" aria-labelledby=\"hero-title\">",
                  "target": [
                    "#home"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.36 (foreground color: #147c78, background color: #e9f1ed, font size: 9.1pt (12.16px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Your city. Your services.</span>",
          "target": [
            ".hero-copy > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.36 (foreground color: #147c78, background color: #e9f1ed, font size: 9.1pt (12.16px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#e77959",
                "contrastRatio": 2.88,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a class=\"button\" href=\"#contact\">Contact Planning &amp; Zoning <span aria-hidden=\"true\">\u2192</span></a>",
                  "target": [
                    "div:nth-child(1) > .button[href$=\"#contact\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.88 (foreground color: #ffffff, background color: #e77959, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"button\" href=\"#contact\">Contact Planning &amp; Zoning <span aria-hidden=\"true\">\u2192</span></a>",
          "target": [
            "div:nth-child(1) > .button[href$=\"#contact\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.88 (foreground color: #ffffff, background color: #e77959, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#e77959",
                "contrastRatio": 2.88,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a class=\"button\" href=\"#contact\">File a service complaint <span aria-hidden=\"true\">\u2192</span></a>",
                  "target": [
                    ".feature-grid.container > div:nth-child(2) > .button[href$=\"#contact\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.88 (foreground color: #ffffff, background color: #e77959, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"button\" href=\"#contact\">File a service complaint <span aria-hidden=\"true\">\u2192</span></a>",
          "target": [
            ".feature-grid.container > div:nth-child(2) > .button[href$=\"#contact\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.88 (foreground color: #ffffff, background color: #e77959, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#147c78",
                "bgColor": "#efe9dd",
                "contrastRatio": 4.15,
                "fontSize": "9.1pt (12.16px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"community\" id=\"community\" aria-labelledby=\"community-title\">",
                  "target": [
                    "#community"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.15 (foreground color: #147c78, background color: #efe9dd, font size: 9.1pt (12.16px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Your voice matters</span>",
          "target": [
            ".community-copy > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.15 (foreground color: #147c78, background color: #efe9dd, font size: 9.1pt (12.16px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#147c78",
                "bgColor": "#efe9dd",
                "contrastRatio": 4.15,
                "fontSize": "10.3pt (13.76px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"community\" id=\"community\" aria-labelledby=\"community-title\">",
                  "target": [
                    "#community"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.15 (foreground color: #147c78, background color: #efe9dd, font size: 10.3pt (13.76px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"text-link\" href=\"#contact\">See all meetings &amp; events <span aria-hidden=\"true\">\u2192</span></a>",
          "target": [
            ".community-copy > .text-link[href$=\"#contact\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.15 (foreground color: #147c78, background color: #efe9dd, font size: 10.3pt (13.76px), font weight: bold). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 6392
      },
      {
        "y": 576,
        "height": 6392
      },
      {
        "y": 1152,
        "height": 6392
      },
      {
        "y": 1728,
        "height": 6392
      },
      {
        "y": 2304,
        "height": 6392
      },
      {
        "y": 2880,
        "height": 6392
      },
      {
        "y": 3456,
        "height": 6392
      },
      {
        "y": 4032,
        "height": 6392
      },
      {
        "y": 4608,
        "height": 6392
      },
      {
        "y": 5184,
        "height": 6392
      },
      {
        "y": 5672,
        "height": 6392
      }
    ],
    "scans": 12,
    "max_states": 512,
    "settle_ms": 5000,
    "page_timeout_seconds": 150,
    "layout_stability": "consecutive 100ms size samples within one CSS pixel",
    "animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
    "interactive_states": "not exercised",
    "horizontal_scroll": "not exercised"
  }
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Government" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.

**Client & Category:**
- Industry: "Government"
- Description: Government agencies, official portals, public services, and regulatory resources.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Government" category.
2.  **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3.  **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.

**Content & Structure Requirements (Deliver a COMPLETE page):**
-   **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
-   **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "FAQs", "Public Records", "Permits".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Government" category. Consider themes similar to: "Government Services", "Planning & Zoning", "Public Safety".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "public hearing", "transparency", "zoning variance".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "File Complaint", "Check Status", "Contact Department".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Government" sector. Ideas similar but not limited to: "permit tracker".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "budget reports", "community events", "recent ordinances".
-   **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
-   **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.