Site Navigation

<header class="c-site-header v1 | u-bt u-b-ui" role="banner">
    <div class="c-site-header__wrapper | o-wrapper">
        <a class="c-site-header__logo" href="#home" aria-label="Listers">
            <span class="c-logo">
                <svg class="c-logo__img" width="60" height="18" viewBox="0 0 185 56" aria-hidden="true">
                    <g class="c-logo__type" id="type_paths">
                        <path d="M0 23.231h5.653v27.124h16.914v5.167h-22.567v-32.291"></path>
                        <path d="M28.22 23.231h5.654v32.291h-5.654z"></path>
                        <path d="M39.755 50.817l3.401-4.059c3.079 2.676 6.159 4.198 10.158 4.198 3.493 0 5.699-1.615 5.699-4.059v-.093c0-2.306-1.287-3.552-7.262-4.936-6.848-1.661-10.709-3.691-10.709-9.641v-.092c0-5.536 4.596-9.365 10.985-9.365 4.688 0 8.411 1.43 11.674 4.059l-3.034 4.29c-2.895-2.168-5.791-3.322-8.733-3.322-3.309 0-5.24 1.707-5.24 3.829v.092c0 2.491 1.471 3.598 7.63 5.075 6.803 1.66 10.341 4.105 10.341 9.457v.092c0 6.043-4.734 9.641-11.491 9.641-4.918 0-9.56-1.707-13.421-5.167"></path>
                        <path d="M78.001 28.49h-10.204v-5.259h26.107v5.259h-10.204v27.032h-5.699v-27.032"></path>
                        <path d="M99.327 23.231h23.854v5.075h-18.201v8.396h16.133v5.075h-16.133v8.672h18.431v5.074h-24.084v-32.291"></path>
                        <path d="M129.569 23.231h14.341c4.045 0 7.216 1.2 9.284 3.229 1.7 1.753 2.666 4.152 2.666 6.966v.093c0 5.305-3.171 8.488-7.676 9.779l8.687 12.225h-6.665l-7.906-11.256h-7.078v11.256h-5.654v-32.291zm13.927 16.007c4.045 0 6.618-2.122 6.618-5.397v-.092c0-3.46-2.482-5.351-6.665-5.351h-8.227v10.841h8.273z"></path>
                        <path d="M160.088 50.817l3.401-4.059c3.08 2.676 6.159 4.198 10.158 4.198 3.493 0 5.699-1.615 5.699-4.059v-.093c0-2.306-1.286-3.552-7.262-4.936-6.848-1.661-10.709-3.691-10.709-9.641v-.092c0-5.536 4.596-9.365 10.985-9.365 4.688 0 8.411 1.43 11.674 4.059l-3.033 4.29c-2.896-2.168-5.791-3.322-8.733-3.322-3.309 0-5.24 1.707-5.24 3.829v.092c0 2.491 1.471 3.598 7.63 5.075 6.802 1.66 10.342 4.105 10.342 9.457v.092c0 6.043-4.734 9.641-11.491 9.641-4.918 0-9.56-1.707-13.421-5.167"></path>
                    </g>
                    <g class="c-logo__swoosh" id="swoosh">
                        <path d="M159 24.028c-9.933-13.657-40.214-8.746-49.653-7.636-25.232-22.557-56.296-4.543-82.347-1.835 30.766-7.17 51.259-23.836 81.689-7.837 2.728 1.436 6.811 3.652 6.811 3.652 9.439-1.113 40.474-3.428 43.5 13.657z"></path>
                    </g>
                </svg>
            </span>
        </a>
        <nav class="c-site-header__nav">
            <div class="c-site-header__nav-item">
                <!-- Opens Navigation Modal -->
                <button class="c-site-header__nav-btn c-site-nav__btn--navigation" type="button" onclick="window.modal_nav_ex.show()">
                    <svg class="c-icon c-icon--md" viewBox="0 0 16 16" aria-hidden="true">
                        <rect width="13.333" height="1.333" x="1.333" y="11.333" rx=".667"></rect>
                        <rect width="13.333" height="1.333" x="1.333" y="7.333" rx=".667"></rect>
                        <rect width="13.333" height="1.333" x="1.333" y="3.333" rx=".667"></rect>
                    </svg>
                    <span class="c-site-header__nav-btn-text">Menu</span>
                </button>
            </div>
            <div class="c-site-header__nav-item">
                <!-- Opens Brands Modal -->
                <button class="c-site-header__nav-btn c-site-nav__btn-brands" type="button" onclick="window.modal_brands_ex.show()">
                    <span class="c-site-header__nav-btn-text">Brands</span>
                </button>
            </div>
            <div class="c-site-header__nav-item">
                <!-- Opens Contact Modal -->
                <button class="c-site-header__nav-btn c-site-nav__btn-contact" type="button" onclick="window.modal_contact_ex.show()">
                    <span class="c-site-header__nav-btn-text">Contact</span>
                </button>
            </div>
            <div class="c-site-header__nav-item">
                <!-- Head to /favourites -->
                <a class="c-site-header__nav-btn c-site-nav__btn--favourites" href="#favourites">
                    <span class="c-site-nav__fav-count">4</span>
                    <span class="u-hidden-visually">Favourites</span>
                    <svg class="c-icon c-icon--md" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                        <path d="M14.2246157,6.64682641 C14.1586573,6.44280489 13.974792,6.30000116 13.7611254,6.28684463 L9.91780071,6.02598826 L8.48045979,2.69224393 C8.39865204,2.49986062 8.21008285,2.375 8.00134614,2.375 C7.79260943,2.375 7.60404025,2.49986062 7.5222325,2.69224393 L6.08489157,6.02598826 L2.24156691,6.28684463 C2.02749733,6.29890229 1.84268242,6.44116337 1.77591764,6.64527765 C1.70915286,6.84939194 1.774085,7.07363828 1.93951701,7.21027616 L4.82461438,9.62058896 L4.10594391,13.2256239 C4.0691001,13.4263998 4.15253195,13.6302583 4.31946195,13.7473366 C4.49326173,13.8619989 4.71851545,13.8619989 4.89231522,13.7473366 L8.01696941,11.8274338 L11.1416236,13.7473366 C11.3141176,13.8527473 11.5319069,13.8486887 11.7003682,13.7369241 C11.8688296,13.6251596 11.9575546,13.4258633 11.9279949,13.2256239 L11.1780779,9.62058896 L14.0631753,7.21027616 C14.2271851,7.07336384 14.2911725,6.85003894 14.2246157,6.64682641 Z"></path>
                    </svg>
                </a>
            </div>
        </nav>
    </div>
</header>

<dialog class="c-modal c-modal--sidebar c-modal--right | t-modal-navigation" id="modal_nav_ex">
    <button class="c-modal__overlay" type="button" onclick="window.modal_nav_ex.close(), window.modal_brands_ex.close(), window.modal_contact_ex.close()"></button>
    <div class="c-modal__wrapper">
        <div class="c-modal__body">
            <div class="c-modal__body-header | u-p">
                <span class="u-heading u-alt-heading u-size-sm u-lh-slim u-fw-400 u-mb-xs">Current:</span>
                <span class="u-heading u-delta">Listers.co.uk</span>
            </div>
            <div class="c-modal__body-content">
                <menu class="c-modal-site-nav | o-list-stacked">
                    <li class="c-modal-site-nav__item | o-list__item">
                        <a class="c-modal-site-nav__link | is-active" href="#home">Home</a>
                    </li>
                    <li class="c-modal-site-nav__item item--primary | o-list__item">
                        <a class="c-modal-site-nav__link" href="#search">Search Cars and Vans</a>
                        <ul class="c-modal-site-nav__sub-menu | o-list-stacked">
                            <li class="c-modal-site-nav__item item--sub">
                                <a class="c-modal-site-nav__link" href="#used">Used</a>
                            </li>
                            <li class="c-modal-site-nav__item item--sub">
                                <a class="c-modal-site-nav__link" href="#new">New</a>
                            </li>
                        </ul>
                    </li>
                    <li class="c-modal-site-nav__item item--primary | o-list__item">
                        <a class="c-modal-site-nav__link" href="#electric">Electric and Hyrbid</a>
                    </li>
                    <li class="c-modal-site-nav__item item--primary | o-list__item">
                        <a class="c-modal-site-nav__link" href="#finance">Finance</a>
                    </li>
                    <li class="c-modal-site-nav__item item--primary | o-list__item">
                        <a class="c-modal-site-nav__link" href="#offers">Offers</a>
                    </li>
                    <li class="c-modal-site-nav__item item--primary | o-list__item">
                        <a class="c-modal-site-nav__link" href="#servicing">Servicing</a>
                    </li>
                    <li class="c-modal-site-nav__item item--primary | o-list__item">
                        <a class="c-modal-site-nav__link" href="#motability">Motability</a>
                    </li>
                    <li class="c-modal-site-nav__item item--primary | o-list__item">
                        <a class="c-modal-site-nav__link" href="#leasing">Leasing</a>
                    </li>
                    <li class="c-modal-site-nav__item item--primary | o-list__item">
                        <a class="c-modal-site-nav__link" href="#fleet">Fleet and Company</a>
                    </li>
                    <li class="c-modal-site-nav__item item--primary | o-list__item">
                        <a class="c-modal-site-nav__link" href="#paint">Paint and Body</a>
                    </li>
                    <li class="c-modal-site-nav__item item--primary | o-list__item">
                        <a class="c-modal-site-nav__link" href="#sell">Sell your Car</a>
                    </li>
                    <li class="c-modal-site-nav__item item--secondary | o-list__item">
                        <a class="c-modal-site-nav__link" href="#careers">Careers</a>
                    </li>
                    <li class="c-modal-site-nav__item item--secondary | o-list__item">
                        <a class="c-modal-site-nav__link" href="#testimonials">Customer Reviews</a>
                    </li>
                    <li class="c-modal-site-nav__item item--secondary | o-list__item">
                        <a class="c-modal-site-nav__link" href="#reviews">Vehicle Reviews</a>
                    </li>
                    <li class="c-modal-site-nav__item item--secondary | o-list__item">
                        <a class="c-modal-site-nav__link" href="#news">News</a>
                    </li>
                    <li class="c-modal-site-nav__item item--secondary | o-list__item">
                        <a class="c-modal-site-nav__link" href="#events">Events</a>
                    </li>
                    <li class="c-modal-site-nav__item item--secondary | o-list__item">
                        <a class="c-modal-site-nav__link" href="#news">Awards</a>
                    </li>
                    <li class="c-modal-site-nav__item item--secondary | o-list__item">
                        <a class="c-modal-site-nav__link" href="#about">About</a>
                    </li>
                </menu>
            </div>
        </div>
        <div class="c-modal__bar">
            <ul class="c-modal__tabs c-modal__tabs--top | o-list-stacked">
                <li class="c-modal__tab-item | o-list__item">
                    <button class="c-modal__tab-close c-link-bare" type="button" onclick="window.modal_nav_ex.close(), window.modal_brands_ex.close(), window.modal_contact_ex.close()">
                        <span class="u-hidden">Close Menu</span>
                        <svg class="c-icon c-icon--md" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                            <path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
                        </svg>
                    </button>
                </li>
                <li class="c-modal__tab-item item--mobile | o-list__item">
                    <button class="c-modal__tab-link c-link-bare" type="button" onclick="window.modal_brands_ex.close(), window.modal_contact_ex.close()">
                        <span class="u-hidden">Menu</span>
                        <svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                            <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2 8h12m-12 5h8m-8-10h10"/>
                        </svg>
                    </button>
                </li>
                <li class="c-modal__tab-item item--mobile | o-list__item">
                    <button class="c-modal__tab-link c-link-bare" type="button" onclick="window.modal_brands_ex.show(), window.modal_contact_ex.close()">
                        <span class="u-hidden">Search Brands</span>
                        <svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                            <path d="M6.5002 2.75a.75.75 0 1 0 0-1.5v1.5Zm-4.204 3.0166.7293.175-.7293-.175Zm.6096-2.54-.7293-.175.7293.175ZM3.2685 6.25a.25.25 0 0 1-.25-.25h-1.5c0 .9665.7836 1.75 1.75 1.75v-1.5Zm-.25-.25a.2498.2498 0 0 1 .007-.0583l-1.4586-.3501A1.7496 1.7496 0 0 0 1.5186 6h1.5Zm.007-.0583.6096-2.54-1.4586-.3501-.6096 2.54 1.4586.35Zm.6096-2.54a.85.85 0 0 1 .8265-.6517v-1.5a2.35 2.35 0 0 0-2.2851 1.8016l1.4586.35Zm.8265-.6517h1.0386v-1.5H4.4616v1.5Zm1.0386 0h1v-1.5h-1v1.5Z"/>
                            <g fill="none">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7H3.6324a2 2 0 0 0-1.715.971L1 9.5V12c0 1.1046.8954 2 2 2h10c1.1046 0 2-.8954 2-2v-1"/>
                                <path stroke-linecap="round" stroke-width="1.5" d="M4 11h1M1 6h1m1 9h1m8 0h1m-2-4h1"/>
                                <path stroke-width="1.5" d="M11.6667 6.3334c1.4727 0 2.6667-1.194 2.6667-2.6667C14.3334 2.1939 13.1394 1 11.6667 1 10.1939 1 9 2.194 9 3.6667c0 1.4728 1.1939 2.6667 2.6667 2.6667Z"/>
                                <path stroke-linecap="round" stroke-width="1.5" d="m13.1035 5.9695 1.8966 2.3639"/>
                            </g>
                        </svg>
                    </button>
                </li>
                <li class="c-modal__tab-item item--mobile | o-list__item">
                    <button class="c-modal__tab-link c-link-bare" type="button" onclick="window.modal_contact_ex.show(), window.modal_brands_ex.close()">
                        <span class="u-hidden">Contact Us</span>
                        <svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                            <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.371 2H2.936C2.31 2 1.8 2.509 1.8 3.136 1.8 9.412 6.888 14.5 13.164 14.5c.627 0 1.136-.509 1.136-1.136v-2.435l-2.679-1.786-1.389 1.389a.775.775 0 0 1-.904.16 9.563 9.563 0 0 1-2.17-1.55 7.522 7.522 0 0 1-1.584-2.19c-.138-.294-.058-.632.171-.862l1.412-1.41L5.371 2Z"/>
                        </svg>
                    </button>
                </li>
                <li class="c-modal__tab-item item--mobile | o-list__item">
                    <a class="c-modal__tab-link c-link-bare" href="#favourites">
                        <span class="u-hidden">Favourites</span>
                        <svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                            <g fill="none" fill-rule="evenodd">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m14.307 7.185.943-.788-5.249-.355L7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985 2.735-1.688"/>
                                <path stroke-linecap="round" stroke-width="1.5" d="M12 8.498v6.001M9 11.5h6"/>
                            </g>
                        </svg>
                    </a>
                </li>
            </ul>
            <ul class="c-modal__tabs c-modal__tabs--btm | o-list-stacked">
                <li class="c-modal__tab-item | o-list__item">
                    <a class="c-modal__tab-link" href="#x">
                        <span class="u-hidden">Visit Listers on X</span>
                        <svg class="c-icon | u-tc-x" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                            <path d="M12.026 2h2.147l-4.69 5.36L15 14.655h-4.32L7.296 10.23l-3.871 4.424H1.276L6.293 8.92 1 2h4.43l3.058 4.044L12.026 2Zm-.754 11.37h1.19L4.783 3.217H3.507l7.765 10.153Z"></path>
                        </svg>
                    </a>
                </li>
                <li class="c-modal__tab-item | o-list__item">
                    <a class="c-modal__tab-link" href="#facebook">
                        <span class="u-hidden">Visit Listers on Facebook</span>
                        <svg class="c-icon | u-tc-facebook" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                            <path d="M11 5.375H8.375V4.237c0-.545.605-.612.88-.612H11V1H8.9C6.335 1 5.75 2.788 5.75 3.935v1.44H4V8h1.75v7h2.625V8h2.1L11 5.375Z"></path>
                        </svg>
                    </a>
                </li>
                <li class="c-modal__tab-item | o-list__item">
                    <a class="c-modal__tab-link" href="#youtube">
                        <span class="u-hidden">Visit Listers on Youtube</span>
                        <svg class="c-icon | u-tc-youtube" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                            <path fill-rule="nonzero" d="M8.01 13.2h-.016c-.05 0-5.008-.01-6.259-.349a1.998 1.998 0 0 1-1.41-1.41 21.178 21.178 0 0 1-.324-3.846 21.24 21.24 0 0 1 .333-3.85A2.05 2.05 0 0 1 1.745 2.32C2.962 2 7.784 2 7.988 2h.017c.05 0 5.022.01 6.26.35a2.002 2.002 0 0 1 1.408 1.409A20.17 20.17 0 0 1 16 7.62a21.237 21.237 0 0 1-.335 3.846 2.006 2.006 0 0 1-1.412 1.409c-1.215.322-6.037.325-6.242.325Zm-1.6-7.999-.004 4.796L10.573 7.6 6.411 5.201Z"></path>
                        </svg>
                    </a>
                </li>
                <li class="c-modal__tab-item | o-list__item">
                    <a class="c-modal__tab-link" href="#instagram">
                        <span class="u-hidden">Visit Listers on Instagram</span>
                        <svg class="c-icon | u-tc-instagram" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                            <path fill-rule="evenodd" d="M6.827 0h2.347l1.02.009c.419.007.695.019 1.106.038.852.038 1.434.174 1.943.372.526.204.972.478 1.417.923a3.9 3.9 0 0 1 .923 1.417c.176.452.302.962.355 1.668l.045.962c.009.286.014.598.017 1.086l-.002 3.31c-.006.678-.019.985-.043 1.515-.039.852-.174 1.434-.372 1.943a3.922 3.922 0 0 1-.923 1.417 3.921 3.921 0 0 1-1.417.923c-.453.176-.963.302-1.669.355l-.962.045A42 42 0 0 1 9.527 16l-3.31-.002a34.326 34.326 0 0 1-1.516-.043c-.851-.039-1.433-.174-1.942-.372a3.922 3.922 0 0 1-1.417-.923 3.922 3.922 0 0 1-.923-1.417c-.176-.453-.303-.963-.356-1.669L.047 11.3A39.53 39.53 0 0 1 0 9.174l.002-2.82C.008 5.576.021 5.266.047 4.7c.039-.85.173-1.432.372-1.94.204-.526.478-.973.923-1.417A3.923 3.923 0 0 1 2.759.419c.452-.176.962-.303 1.668-.356l.274-.016A40.1 40.1 0 0 1 6.827 0Zm-.283 1.443c-.88.005-1.18.017-1.777.044-.78.036-1.204.166-1.486.276a2.48 2.48 0 0 0-.92.598 2.48 2.48 0 0 0-.598.92l-.068.188c-.08.243-.157.577-.195 1.075l-.038.83c-.014.422-.02.873-.021 1.881l.002 2.203c.005.879.017 1.18.044 1.776.036.78.166 1.204.276 1.486.145.374.318.64.598.92.28.28.547.454.92.6l.188.066c.243.08.577.158 1.075.195l.83.039c.422.014.872.02 1.881.02l2.203-.001a35.73 35.73 0 0 0 1.776-.044c.78-.036 1.204-.166 1.486-.276a2.48 2.48 0 0 0 .92-.599c.28-.28.454-.546.6-.92l.066-.188c.08-.243.158-.576.195-1.074l.039-.83c.014-.422.02-.873.02-1.882l-.003-2.395a33.67 33.67 0 0 0-.042-1.584c-.036-.78-.166-1.204-.276-1.486a2.48 2.48 0 0 0-.599-.92 2.479 2.479 0 0 0-.92-.598l-.188-.068a4.474 4.474 0 0 0-1.074-.195l-.83-.038a41.39 41.39 0 0 0-1.17-.019H6.544ZM8 3.892a4.11 4.11 0 1 1 0 8.218 4.11 4.11 0 0 1 0-8.218Zm0 1.441a2.667 2.667 0 1 0 0 5.335 2.667 2.667 0 0 0 0-5.335Zm4.272-2.564a.96.96 0 1 1 0 1.92.96.96 0 0 1 0-1.92Z" clip-rule="evenodd"></path>
                        </svg>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</dialog>

<dialog class="c-modal c-modal--sidebar c-modal--right | t-modal-brands" id="modal_brands_ex">
    <button class="c-modal__overlay" type="button" onclick="window.modal_brands_ex.close()"></button>
    <div class="c-modal__wrapper">
        <div class="c-modal__body">
            <div class="c-modal__body-content | u-p">
                <ul class="o-list-bare | u-grid u-grid-cols-3 u-gap">
                    <li class="o-list__item">
                        <a class="c-card" href="#audi">
                            <div class="c-card__thumb">
                                <img class="c-card__thumb-img c-img | u-aspect" src="/assets/img/brands/audi.webp" alt="">
                                <span class="u-hidden">Audi</span>
                            </div>
                        </a>
                    </li><li class="o-list__item">
                        <a class="c-card" href="#audi">
                            <div class="c-card__thumb">
                                <img class="c-card__thumb-img c-img | u-aspect" src="/assets/img/brands/bmw.webp" alt="">
                                <span class="u-hidden">BMW</span>
                            </div>
                        </a>
                    </li><li class="o-list__item">
                        <a class="c-card" href="#audi">
                            <div class="c-card__thumb">
                                <img class="c-card__thumb-img c-img | u-aspect" src="/assets/img/brands/cupra.webp" alt="">
                                <span class="u-hidden">CUPRA</span>
                            </div>
                        </a>
                    </li><li class="o-list__item">
                        <a class="c-card" href="#audi">
                            <div class="c-card__thumb">
                                <img class="c-card__thumb-img c-img | u-aspect" src="/assets/img/brands/honda.webp" alt="">
                                <span class="u-hidden">Honda</span>
                            </div>
                        </a>
                    </li><li class="o-list__item">
                        <a class="c-card" href="#audi">
                            <div class="c-card__thumb">
                                <img class="c-card__thumb-img c-img | u-aspect" src="/assets/img/brands/jaguar.webp" alt="">
                                <span class="u-hidden">Jaguar</span>
                            </div>
                        </a>
                    </li><li class="o-list__item">
                        <a class="c-card" href="#audi">
                            <div class="c-card__thumb">
                                <img class="c-card__thumb-img c-img | u-aspect" src="/assets/img/brands/landrover.webp" alt="">
                                <span class="u-hidden">Land Rover</span>
                            </div>
                        </a>
                    </li><li class="o-list__item">
                        <a class="c-card" href="#audi">
                            <div class="c-card__thumb">
                                <img class="c-card__thumb-img c-img | u-aspect" src="/assets/img/brands/lexus.webp" alt="">
                                <span class="u-hidden">Lexus</span>
                            </div>
                        </a>
                    </li><li class="o-list__item">
                        <a class="c-card" href="#audi">
                            <div class="c-card__thumb">
                                <img class="c-card__thumb-img c-img | u-aspect" src="/assets/img/brands/mercedes-benz.webp" alt="">
                                <span class="u-hidden">Mercedes Benz</span>
                            </div>
                        </a>
                    </li><li class="o-list__item">
                        <a class="c-card" href="#audi">
                            <div class="c-card__thumb">
                                <img class="c-card__thumb-img c-img | u-aspect" src="/assets/img/brands/mercedes-benz-vans.webp" alt="">
                                <span class="u-hidden">Mercedes Benz Vans</span>
                            </div>
                        </a>
                    </li><li class="o-list__item">
                        <a class="c-card" href="#audi">
                            <div class="c-card__thumb">
                                <img class="c-card__thumb-img c-img | u-aspect" src="/assets/img/brands/mini.webp" alt="">
                                <span class="u-hidden">MINI</span>
                            </div>
                        </a>
                    </li><li class="o-list__item">
                        <a class="c-card" href="#audi">
                            <div class="c-card__thumb">
                                <img class="c-card__thumb-img c-img | u-aspect" src="/assets/img/brands/omoda.webp" alt="">
                                <span class="u-hidden">OMODA</span>
                            </div>
                        </a>
                    </li><li class="o-list__item">
                        <a class="c-card" href="#audi">
                            <div class="c-card__thumb">
                                <img class="c-card__thumb-img c-img | u-aspect" src="/assets/img/brands/porsche.webp" alt="">
                                <span class="u-hidden">Porsche</span>
                            </div>
                        </a>
                    </li><li class="o-list__item">
                        <a class="c-card" href="#audi">
                            <div class="c-card__thumb">
                                <img class="c-card__thumb-img c-img | u-aspect" src="/assets/img/brands/seat.webp" alt="">
                                <span class="u-hidden">SEAT</span>
                            </div>
                        </a>
                    </li><li class="o-list__item">
                        <a class="c-card" href="#audi">
                            <div class="c-card__thumb">
                                <img class="c-card__thumb-img c-img | u-aspect" src="/assets/img/brands/skoda.webp" alt="">
                                <span class="u-hidden">Škoda</span>
                            </div>
                        </a>
                    </li><li class="o-list__item">
                        <a class="c-card" href="#audi">
                            <div class="c-card__thumb">
                                <img class="c-card__thumb-img c-img | u-aspect" src="/assets/img/brands/smart.webp" alt="">
                                <span class="u-hidden">smart</span>
                            </div>
                        </a>
                    </li><li class="o-list__item">
                        <a class="c-card" href="#audi">
                            <div class="c-card__thumb">
                                <img class="c-card__thumb-img c-img | u-aspect" src="/assets/img/brands/toyota.webp" alt="">
                                <span class="u-hidden">Toyota</span>
                            </div>
                        </a>
                    </li><li class="o-list__item">
                        <a class="c-card" href="#audi">
                            <div class="c-card__thumb">
                                <img class="c-card__thumb-img c-img | u-aspect" src="/assets/img/brands/volkswagen.webp" alt="">
                                <span class="u-hidden">Volkswagen</span>
                            </div>
                        </a>
                    </li><li class="o-list__item">
                        <a class="c-card" href="#audi">
                            <div class="c-card__thumb">
                                <img class="c-card__thumb-img c-img | u-aspect" src="/assets/img/brands/volkswagen-commercials.webp" alt="">
                                <span class="u-hidden">Volkswagen Commercials</span>
                            </div>
                        </a>
                    </li><li class="o-list__item">
                        <a class="c-card" href="#audi">
                            <div class="c-card__thumb">
                                <img class="c-card__thumb-img c-img | u-aspect" src="/assets/img/brands/volvo.webp" alt="">
                                <span class="u-hidden">Volvo</span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="c-modal__bar">
            <ul class="c-modal__tabs c-modal__tabs--top | o-list-stacked">
                <li class="c-modal__tab-item | o-list__item">
                    <button class="c-modal__tab-close c-link-bare" type="button" onclick="window.modal_brands_ex.close()">
                        <span class="u-hidden">Close Brands</span>
                        <svg class="c-icon c-icon--md" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                            <path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
                        </svg>
                    </button>
                </li>
            </ul>
        </div>
    </div>
</dialog>

<dialog class="c-modal c-modal--drawer c-modal--top | t-modal-contact" id="modal_contact_ex">
    <button class="c-modal__overlay" type="button" onclick="window.modal_contact_ex.close()"></button>
    <div class="c-modal__body">
        <div class="c-modal__body-close">
            <button class="c-btn c-btn--clear" type="button" onclick="window.modal_contact_ex.close()">
                <span class="u-hidden">Close Dialog</span>
                <svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
                    <path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
                </svg>
            </button>
        </div>
        <div class="c-modal__body-content | o-flow | u-pb-0">
            <section class="o-section">
                <div class="o-focus o-focus--lg o-focus--center o-flow">
                    <p class="u-heading u-gamma">Need to get in touch? Give us a call.</p>
                    <p>Our helpful customer advisors are available to answer questions and give you the advice and information you need.</p>
                    <label class="c-label">
                        <span class="c-label__text | u-hidden">Select preferred dealership:</span>
                        <select class="c-input c-input--select">
                            <option selected disabled>Select preferred dealership</option>
                            <optgroup label="Listers Audi">
                                <option value="Loc:9723bac1-8ec0-45b5-b07e-0d8a2c5dfc56">Birmingham Audi</option>
                                <option value="Loc:e25777bc-3461-4839-82b6-19e276f012e8">Coventry Audi</option>
                                <option value="Loc:b866145b-92a9-457d-a112-290ff5fb9f43">Stratford Audi</option>
                                <option value="Loc:86f758f0-20b8-4c10-ac43-692ec4fb6404">Worcester Audi</option>
                            </optgroup>
                        </select>
                    </label>
                </div>
            </section>
            <div class="u-bt u-b-ui u-fs-sm u-nmx u-nmx-lg-@bp2 u-p">
                <div class="o-focus o-focus--lg o-focus--center">
                    <p>For all other enquiries please contact us from the <a>contact us</a> section.</p>
                </div>
            </div>
        </div>        
    </div>
</dialog>