<!-- ===========================================================================
Velocity Processing, LLC
================================================================================
Created by THE SCIENTIST on November 21, 2025
File name: INDEX.PHP
The purpose of this file is to control the menu page of the Velocity website.
================================================================================
Modified by THE SCIENTIST on December 9, 2025 @ 1:21 PM
Added font awesome icons and mobile responsive settings. Normalized code for
class names using the vp- naming convention. Updated the floating audio player.
================================================================================
Modified by THE SCIENTIST on December 30, 2025
Added labels under each of the two icon buttons in all 6 panels.
================================================================================
Modified on February 11, 2026
Added 4-panel "Why Partner with Velocity" section at the top of the page.
Compact variant of existing panel style with small upper-left icon, no buttons.
================================================================================
Modified by Claude on September 17, 2026
FEATURE: Time-of-day greeting in the welcome bar.
 - "Good morning" 5:00 AM to 11:59:59 AM
 - "Good afternoon" 12:00 PM to 4:59:59 PM
 - "Good evening" all other hours
 - Includes a commented-out date override for testing, same pattern as
   /voice/inbound.php.
FEATURE: Holiday closure pill below the welcome bar.
 - Uses the same 15 Velocity closure days as /voice/inbound.php.
 - Renders only on a holiday; hidden every other day.
FIXED: .vp-hero2-pillar heading selector targeted h3 but the markup uses h2,
       so the three pillar headings were rendering unstyled.
FIXED: Merchant statement CTA used a relative path; now absolute.
FIXED: Two "there/their" typos in client testimonials.
ADDED: prefers-reduced-motion support for the reviews marquee.
ADDED: aria-hidden on the duplicated marquee cards so screen readers read the
       eight reviews once rather than sixteen.
REMOVED: Unused .vp-panel--icon-bottom and .vp-icon-row rules.
================================================================================
Modified on October 9, 2026
Welcome bar: on screens 900px and narrower the greeting splits into two
centered lines ("Good morning." on line 1, "Welcome to Velocity" on line 2).
Desktop layout unchanged.
================================================================================
Modified on October 30, 2026
VISUAL MAKEOVER to match the Executive / Operations portals:
 - Soft Velocity-orange, peach and cream palette; all black/dark surfaces
   removed (secondary audio buttons, ghost CTA, video overlay, audio player).
 - Larger type, icons, panels and buttons throughout.
 - Structured sticky left side panel: page navigation with scroll highlight,
   Get Started CTAs, and a click-to-call support line. On tablet and phone the
   panel moves above the content as a compact bar.
 - Welcome greeting and holiday pill restyled as a soft banner.
 - Reviews marquee restyled with soft fade edges.
UNCHANGED: PHP greeting + holiday logic, every link, audio file, video URL,
the eight reviews, the marquee clone script, and both player scripts.
================================================================================
Modified on November 2, 2026
REMOVED: the left side panel (page navigation, Get Started buttons and the
click-to-call line) along with its styles and scroll-highlight script. The
page is now a single full-width column on every screen size. The hero
still carries both Get Started buttons.
================================================================================
Modified on November 4, 2026
FIXED: on desktop and tablet the icon circle in each of the six feature
       panels hung below the peach band (the band was 46% of the panel's
       height, so on shorter panels the circle crossed the color line). The
       band now ends just below the circle at every width above 640px.
       Phones are unchanged. Same fix as the Traditional Processing page.
UNCHANGED: all copy, links, audio, video, reviews and scripts.
================================================================================
All rights reserved!
============================================================================ -->

<!DOCTYPE html>
<html lang="en">
  <!-- ===========================================================================
Velocity Processing, LLC
Created by Jeff Davidson on November 21, 2025
Last Modified on November 26, 2025 @ 8:48 PM
Modified on November 2, 2026
MOBILE / TABLET MENU MAKEOVER to match the new soft Velocity palette:
 - Slide-out drawer is now cream-to-peach with dark labels, orange icons in
   soft peach tiles, peach dividers and a rounded edge (was solid orange
   with white text).
 - An open submenu shows as a white rounded card; links get a peach hover.
 - The white mobile bar stays light while the menu is open (it used to turn
   solid orange); the hamburger X stays orange.
 - A soft warm wash dims the page behind the open drawer.
FIXED: the drawer started at a guessed 64px from the top, so it covered the
       white mobile bar and its hamburger (no way to close it by tapping the
       X). The drawer now starts below the bar; header.php measures the bar
       and sets --vp-drawer-top.
FIXED: between 901px and 992px wide (small tablets / laptops) there was no
       menu at all: the drawer and hamburger switched on at 992px but the
       white bar holding the hamburger only appeared at 900px. The white bar
       and its buttons now appear at 992px too.
FIXED: on laptop-width screens the right-most menu's dropdown ran past the
       edge of the screen (sideways page scroll, menu cut off). Dropdowns
       marked .vp-drop-right by header.php now open right-aligned.
FIXED: on small phones (360-400px) the six mobile-bar buttons didn't fit
       beside the hamburger, so every page scrolled sideways; they now fit.
FIXED: two typos ("800ms.ease-out", "150ms.ease") made browsers drop the
       whole .vp-hero-box animation and the .vp-device-cta transition.
Modified on November 4, 2026
DESKTOP ONLY: the six orange-bar buttons (Call, Zoom, Apply, Support, Upload,
Message) now use the white outline pill from the homepage "Merchant Statement
Analytics" button - soft cream tint, orange border, orange icon and
uppercase label; on hover the pill turns soft peach like the homepage panels. Applies at 993px and wider only; phone / tablet buttons are unchanged.
UNCHANGED: desktop nav bar, the orange logo bar, and every other rule in
this file.
File name: HEAD.PHP
The purpose of this file is to control the CSS and styles of the website.
============================================================================ -->

<head>
  <meta charset="UTF-8">
  <title>Velocity Processing</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Favicon Package -->
  <link rel="icon" type="image/x-icon" href="/images/favicon/favicon.ico">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="48x48" href="/images/favicon/favicon-48x48.png">
  <link rel="icon" type="image/png" sizes="64x64" href="/images/favicon/favicon-64x64.png">
  <link rel="apple-touch-icon" href="/images/favicon/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="192x192" href="/images/favicon/android-chrome-192x192.png">
  <link rel="icon" type="image/png" sizes="512x512" href="/images/favicon/android-chrome-512x512.png">
  <meta name="theme-color" content="#ff6600">

  <!-- Font Awesome for menu & phone/icons -->
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
    integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
  />

  <style>
    :root {
      --vp-orange: #ff6600;
      --vp-charcoal: #2b3038;
      --vp-black: #111111;
      --vp-light: #ffffff;
      --vp-soft-border: #e5e5e5;
      --vp-shadow-subtle: 0 10px 30px rgba(0, 0, 0, 0.08);
      --vp-shadow-card: 0 16px 40px rgba(0, 0, 0, 0.22);
      --vp-transition-fast: 180ms ease-out;
      --vp-transition-med: 230ms ease-out;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        "Avenir Next", "Avenir", "Segoe UI", sans-serif;
      background: #f7f7f7;
      color: var(--vp-black);
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    .vp-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }
    
    /* Logo slide-in animation */
.vp-logo img {
  opacity: 0;
  transform: translateX(-260px); /* start fully off-screen */
  animation: vpLogoSlideIn 1.0s ease-out forwards;
}

@keyframes vpLogoSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-2600px);
  }
  100% {
    opacity: 1;
    transform: translateX(-120px); /* resting spot: more negative = further left */
  }
}

    /* ============================================================
       ORANGE BAR – ACTION BUTTONS (CALL • ZOOM • SCHEDULE • MESSAGE)
       ============================================================ */

    .vp-header-actions {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .vp-header-cta {
      background: transparent;
      color: #ffffff;
      padding: 6px 12px;
      border-radius: 10px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.1;
      min-width: 60px;
      cursor: pointer;
      border: none;
      text-decoration: none;
      transition: transform 0.15s ease, background 0.15s ease;
    }

    .vp-header-cta:hover {
      background: #ff7a24;
      transform: translateY(-2px);
    }

    /* Controls the font size and color of the 5 CTA buttons (Call, Zoom, Apply, Schedule, Message) */
    .vp-header-cta-icon i {
      font-size: 20px;
      color: #ffffff;
    }

    /* MOBILE: hide orange-bar buttons on small screens (we'll show mobile versions in white bar) */
    @media (max-width: 992px) {
      .vp-header-actions {
        display: none;
      }
    }

    /* DESKTOP ONLY (993px and wider): orange-bar buttons use the same
       outline pill as the homepage "Merchant Statement Analytics" button:
       soft cream tint, orange border, orange icon and uppercase label;
       hover turns the pill soft peach like the homepage panels.
       Scoped to .vp-header-actions, so the mobile / tablet white-bar buttons
       (.vp-mobile-actions) are not affected. */
    @media (min-width: 993px) {
      .vp-header-actions {
        gap: 8px;
      }

      .vp-header-actions .vp-header-cta {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-width: 0;
        padding: 9px 13px;
        border-radius: 999px;
        background: #fff5ee;
        color: #ff6600;
        border: 2px solid #ff6600;
        box-shadow: 0 10px 24px rgba(150, 50, 0, 0.18);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        line-height: 1;
        white-space: nowrap;
        transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
      }

      .vp-header-actions .vp-header-cta-icon {
        display: inline-flex;
        align-items: center;
      }

      .vp-header-actions .vp-header-cta-icon i {
        font-size: 15px;
        color: #ff6600;
        transition: color 0.18s ease;
      }

      /* Hover: soft peach like the homepage panels; text and icon stay orange */
      .vp-header-actions .vp-header-cta:hover,
      .vp-header-actions .vp-header-cta:focus-visible {
        background: linear-gradient(135deg, #ffeadb, #ffd8bd);
        color: #ff6600;
        border-color: #ff6600;
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(150, 50, 0, 0.26);
      }

      .vp-header-actions .vp-header-cta:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 3px;
      }
    }

    /* Small desktops (993-1139px): tighter pills so all six fit */
    @media (min-width: 993px) and (max-width: 1139px) {
      .vp-header-actions {
        gap: 5px;
      }

      .vp-header-actions .vp-header-cta {
        gap: 5px;
        padding: 8px 9px;
        font-size: 11px;
        letter-spacing: 0.03em;
      }

      .vp-header-actions .vp-header-cta-icon i {
        font-size: 13px;
      }
    }

    /* Wider desktops: larger pills with the homepage letter spacing */
    @media (min-width: 1280px) {
      .vp-header-actions {
        gap: 10px;
      }

      .vp-header-actions .vp-header-cta {
        gap: 9px;
        padding: 11px 18px;
        font-size: 13px;
        letter-spacing: 0.12em;
      }

      .vp-header-actions .vp-header-cta-icon i {
        font-size: 17px;
      }
    }

    @media (min-width: 1600px) {
      .vp-header-actions {
        gap: 14px;
      }

      .vp-header-actions .vp-header-cta {
        gap: 10px;
        padding: 12px 22px;
        font-size: 14px;
        letter-spacing: 0.14em;
      }

      .vp-header-actions .vp-header-cta-icon i {
        font-size: 18px;
      }
    }

    /* STICKY HEADER WRAPPER */
    .vp-site-header {
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    /* =========================
       TOP ORANGE BAR
       ========================= */
    .vp-top-bar {
      background: linear-gradient(135deg, #ff6600, #ff6600, #ffbc8a);
      color: var(--vp-light);
      padding: 16px 0;
    }

    .vp-header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: nowrap;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .vp-logo img {
      display: block;
      height: auto;
      max-height: 44px;
      width: auto;
    }

    .vp-phone-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 28px;
      font-weight: 600;
      color: #ffffff;
      transition: opacity var(--vp-transition-fast), transform var(--vp-transition-fast);
      white-space: nowrap;
    }

    .vp-phone-link i {
      font-size: 20px;
      color: #ffffff;
    }

    .vp-phone-link:hover {
      opacity: 0.9;
      transform: translateY(-1px);
    }

    /* =========================
       MOBILE TOP LAYOUT
       ========================= */

    /* White bar under the orange header (hidden by default, shown on mobile) */
    .vp-mobile-bar {
      display: none;
      background: #ffffff;
      border-bottom: 1px solid var(--vp-soft-border);
    }

    .vp-mobile-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 8px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    /* Desktop / default */
    .vp-phone-mobile {
      display: none;
    }

    /* Container for the four small CTAs in the white mobile bar */
    .vp-mobile-actions {
      display: none; /* only show on mobile via media query */
      align-items: center;
      gap: 8px;
    }

    /* Mobile layout tweaks (992px matches the drawer breakpoint below) */
    @media (max-width: 992px) {
      /* Center logo in orange bar and hide desktop phone there */
      .vp-header-inner {
        justify-content: center;
      }

      .vp-phone-desktop {
        display: none;
      }

      /* Show white bar on mobile */
      .vp-mobile-bar {
        display: block;
      }

      /* Hide the old phone number in the white bar */
      .vp-phone-mobile {
        display: none;
      }

      /* Hamburger visible on mobile */
      .vp-menu-toggle {
        display: flex;
      }

      /* Mobile actions: 4 buttons side-by-side on the right */
      .vp-mobile-inner {
        justify-content: space-between;
      }

      .vp-mobile-actions {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
      }

      .vp-mobile-actions .vp-header-cta {
        padding: 4px 8px;
        min-width: auto;
      }

     /* Controls the font size of the 5 icons next to the hamburger menu on mobile devices. */
      .vp-mobile-actions .vp-header-cta-icon i {
        font-size: 16px;
      }

      .vp-mobile-actions .vp-header-cta-label {
        font-size: 10px;
        line-height: 1.1;
      }
    }

    /* =========================
       FLOATING BUTTONS
       ========================= */
    .vp-float-btn {
      position: fixed;
      right: 24px;
      width: 58px;
      height: 58px;
      background: var(--vp-orange);
      color: #ffffff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      cursor: pointer;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
      z-index: 2000;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .vp-float-btn i {
      font-size: 26px;
      color: #ffffff;
    }

    .vp-float-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
    }

    /* =========================
       FLOATING BUTTONS POSITIONS
       ========================= */
    .vp-float-phone {
      bottom: 252px;
    }

    .vp-float-message {
      bottom: 24px;
    }

    .vp-float-video {
      bottom: 100px;
    }

    .vp-float-calendar {
      bottom: 176px;
    }

    /* HAMBURGER TOGGLE – default hidden, shown via media queries */
    .vp-menu-toggle {
      display: none;
      border: 1px solid rgba(255, 255, 255, 0.8);
      background: transparent;
      border-radius: 999px;
      width: 40px;
      height: 40px;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
    }

    .vp-menu-toggle span {
      display: block;
      width: 24px;             /* previously 18px */
      height: 3px;             /* previously 2px */
      background: #ffffff;
      border-radius: 99px;
      position: relative;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .vp-menu-toggle span::before,
    .vp-menu-toggle span::after {
      content: "";
      position: absolute;
      width: 24px;
      height: 3px;
      background: #ffffff;
      left: 0;
      transition: transform 0.2s ease, top 0.2s ease, bottom 0.2s ease;
    }

    .vp-menu-toggle span::before { top: -6px; }
    .vp-menu-toggle span::after { bottom: -6px; }

    body.vp-nav-open .vp-menu-toggle span {
      background: transparent;
    }
    body.vp-nav-open .vp-menu-toggle span::before {
      top: 0;
      transform: rotate(45deg);
    }
    body.vp-nav-open .vp-menu-toggle span::after {
      bottom: 0;
      transform: rotate(-45deg);
    }

    /* =========================
       WHITE NAV BAR
       ========================= */
    .vp-nav-bar {
      background: #ffffff;
      border-bottom: 1px solid var(--vp-soft-border);
      box-shadow: var(--vp-shadow-subtle);
      position: relative;
      z-index: 50;
    }

    .vp-nav-bar .vp-container {
      max-width: 100%;
      margin: 0;
      padding: 0 10px;
    }

    .vp-nav-inner {
      display: flex;
      align-items: center;
      padding: 10px 0;
    }

    .vp-nav-list {
      display: flex;
      align-items: center;
      width: 100%;
      gap: 5px;
      list-style: none;
      margin: 0;
      padding: 0;
      flex-wrap: wrap;
    }

    .vp-nav-spacer {
      flex: 0.5;
    }

    .vp-nav-item {
      position: relative;
    }

    .vp-nav-button {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     padding: 20px 20px;
     font-size: 20px;
     font-weight: 700;  /* was 800 */
     text-transform: uppercase;
     letter-spacing: 0.17em;
     background: transparent;
     border: none;
     cursor: pointer;
     color: var(--vp-black);
     border-radius: 999px;
     transition: all var(--vp-transition-fast);
     white-space: nowrap;
     }

    .vp-nav-button i {
      font-size: 20px;
      opacity: 0.95;
    }

    .vp-nav-button:hover {
      color: var(--vp-orange);
      background: rgba(0,0,0,0.05);
      transform: translateY(-1px);
    }

    .vp-chevron {
      font-size: 22px;
      opacity: 0.8;
      transition: transform var(--vp-transition-med);
    }

    .vp-nav-item.is-open .vp-chevron {
      transform: rotate(180deg);
    }

    /* DESKTOP DROPDOWNS */
    .vp-nav-dropdown {
      position: absolute;
      left: 0;
      top: 100%;
      background: #ffffff;
      border-radius: 14px;
      border: 1px solid var(--vp-soft-border);
      box-shadow: 0 16px 40px rgba(0,0,0,0.12);
      overflow-y: auto;
      max-height: 0;
      opacity: 0;
      pointer-events: none;
      transition: max-height 260ms ease, opacity 220ms ease;
    }

    .vp-nav-item.is-open .vp-nav-dropdown {
      max-height: 700px;
      opacity: 1;
      pointer-events: auto;
    }

    .vp-nav-dropdown a {
      display: flex;
      align-items: center;
      padding: 11px 20px;
      font-size: 20px;
      font-weight: 600;
      color: var(--vp-charcoal);
      transition: background 180ms ease, color 180ms ease;
      white-space: nowrap;
    }

    .vp-nav-dropdown a i {
      flex: 0 0 26px;
      text-align: center;
      margin-right: 10px;
      font-size: 20px;
      color: var(--vp-orange);
      transition: color 180ms ease;
    }

    .vp-nav-dropdown a:hover {
      background: var(--vp-orange);
      color: #ffffff;
    }

    .vp-nav-dropdown a:hover i {
      color: #ffffff;
    }

    /* Desktop: a dropdown that would run past the right edge opens
       right-aligned (header.php adds .vp-drop-right when needed). */
    @media (min-width: 993px) {
      .vp-nav-item.vp-drop-right .vp-nav-dropdown {
        left: auto;
        right: 0;
      }
    }

    /* =========================
       HERO SECTION
       ========================= */
    .vp-hero {
      position: relative;
      width: 100%;
      min-height: 55vh;
      background-image: url("/images/homepage/vp_website_background.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      overflow: hidden;
    }

    /* PARALLAX EFFECT – desktop only */
    .vp-hero-parallax {
      background-attachment: fixed;
      background-position: center top;
    }

    @media (max-width: 900px) {
      .vp-hero-parallax {
        background-attachment: scroll;
      }
    }

    .vp-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        120deg,
        rgba(0, 0, 0, 0.35) 0%,
        rgba(0, 0, 0, 0.15) 35%,
        rgba(255, 102, 0, 0.25) 70%,
        rgba(0, 0, 0, 0.35) 100%
      );
      pointer-events: none;
      z-index: 0;
    }

    .vp-hero-inner {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 20px;
      display: flex;
      justify-content: flex-start;
      position: relative;
      z-index: 1;
    }

    .vp-hero-box {
      background: rgba(255, 102, 0, 0.9);
      color: #ffffff;
      padding: 32px 40px;
      border-radius: 28px;
      box-shadow: 0 22px 55px rgba(0, 0, 0, 0.45);
      text-transform: uppercase;
      font-weight: 600;
      line-height: 1.25;
      margin-top: 50px;
      letter-spacing: 0.05em;
      font-size: 45px;
      max-width: 800px;
      animation:
        vp-hero-appear 800ms ease-out 150ms both,
        vp-float 2600ms ease-in-out 1s infinite alternate;
    }

    @keyframes vp-hero-appear {
      from {
        opacity: 0;
        transform: translateY(14px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes vp-float {
      from { transform: translateY(0); }
      to   { transform: translateY(-10px); }
    }

    /* =========================
       DEVICE CARDS SECTION
       ========================= */
    .vp-devices-section {
      background: #ffffff;
      padding: 50px 0 60px;
    }

    .vp-devices-inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 10px;
    }

    .vp-device-row,
    .vp-devices-row {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: space-between;
    }

    .vp-device-card {
      flex: 0 0 calc(25% - 15px);
      max-width: calc(25% - 15px);
      min-width: 240px;
      aspect-ratio: 1 / 1.8;

      background: rgba(255, 255, 255, 0.96);
      border-radius: 22px;
      border: 3px solid var(--vp-orange);

      padding: 22px 22px 24px;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);

      display: flex;
      flex-direction: column;

      transition:
        transform 180ms ease,
        box-shadow 200ms ease;
    }

    .vp-device-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    }

    .vp-device-icon {
      font-size: 48px;
      color: var(--vp-orange);
      margin-bottom: 12px;
    }

    .vp-device-title {
      font-size: 40px;
      font-weight: 600;
      margin-bottom: 6px;
      color: var(--vp-black);
    }

    .vp-device-text {
      font-size: 28px;
      line-height: 1.5;
      color: #444444;
      margin-bottom: 16px;
    }

    .vp-device-cta {
      margin-top: auto;
      align-self: center;

      display: inline-flex;
      align-items: center;
      gap: 6px;

      padding: 8px 18px;
      border-radius: 999px;

      background: #ffffff;
      color: var(--vp-orange);
      border: 2px solid var(--vp-orange);

      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.16em;

      box-shadow: none;

      transition:
        background 150ms ease,
        color 150ms ease,
        transform 150ms ease,
        box-shadow 150ms ease;
    }

    .vp-device-cta i {
      font-size: 13px;
    }

    .vp-device-cta:hover {
      background: var(--vp-orange);
      color: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    }

    /* =========================
       VIDEO SECTION
       ========================= */
    .vp-video-section {
      background: #f7f7f7;
      padding: 50px 0 70px;
    }

    .vp-video-inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 10px;
    }

    .vp-video-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: space-between;
    }

    .vp-video-card {
      flex: 0 0 calc(50% - 10px);
      max-width: calc(50% - 10px);
      min-width: 260px;

      background: #ffffff;
      border-radius: 22px;
      border: 3px solid var(--vp-orange);
      padding: 22px 22px 24px;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);

      display: flex;
      flex-direction: column;
    }

    .vp-video-icon {
      font-size: 48px;
      color: var(--vp-orange);
      margin-bottom: 12px;
    }

    .vp-video-title {
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        "Avenir Next", "Avenir", "Segoe UI", sans-serif;
      font-size: 40px;
      font-weight: 600;
      color: var(--vp-black);
      margin-bottom: 6px;
    }

    .vp-video-text {
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        "Avenir Next", "Avenir", "Segoe UI", sans-serif;
      font-size: 28px;
      line-height: 1.5;
      color: #444444;
      margin-bottom: 16px;
    }

    .vp-video-wrapper {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
      border-radius: 14px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    }

    .vp-video-wrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
      border-radius: 14px;
    }

    @media (max-width: 900px) {
      .vp-video-card {
        flex: 0 0 100%;
        max-width: 100%;
      }
    }

    /* =========================
       COMPARISON TABLE SECTION
       ========================= */
    .vp-table-section {
      background: #f7f7f7;
      padding: 50px 0 80px;
    }

    .vp-table-inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 10px;
    }

    .vp-table-title {
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        "Avenir Next", "Avenir", "Segoe UI", sans-serif;
      font-size: 40px;
      font-weight: 600;
      line-height: 1.25;
      color: var(--vp-black);
      margin-bottom: 18px;
      letter-spacing: 0.02em;
    }

    .vp-table-card {
      background: var(--vp-light);
      border-radius: 22px;
      border: 3px solid var(--vp-orange);
      box-shadow: var(--vp-shadow-card);
      padding: 22px 22px 26px;
      overflow-x: auto;
    }

    .vp-compare-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 18px;
      min-width: 600px;
    }

    .vp-compare-table thead th {
      padding: 14px 16px;
      text-align: center;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      font-size: 18px;
      background: var(--vp-orange);
      color: #ffffff;
      border-bottom: 1px solid var(--vp-soft-border);
      white-space: nowrap;
    }

    .vp-compare-table thead th:first-child {
      text-align: left;
    }

    .vp-compare-table tbody tr:nth-child(odd) {
      background-color: #ffffff;
    }

    .vp-compare-table tbody tr:nth-child(even) {
      background-color: #f9fafb;
    }

    .vp-compare-table tbody tr {
      transition:
        background var(--vp-transition-fast),
        transform var(--vp-transition-fast),
        box-shadow var(--vp-transition-fast),
        outline var(--vp-transition-fast);
    }

    .vp-compare-table tbody tr:hover {
      background-color: #ffffff;
      transform: translateY(-1px);
      outline: 2px solid var(--vp-orange);
      outline-offset: -2px;
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    }

    .vp-compare-table td {
      padding: 14px 16px;
      text-align: center;
      vertical-align: middle;
    }

    .vp-compare-table td:first-child {
      text-align: left;
      font-weight: 600;
      font-size: 20px;
    }

    .vp-check {
      color: var(--vp-orange);
      font-size: 26px;
    }

    .vp-xmark {
      color: #d1d5db;
      font-size: 26px;
    }

    .vp-compare-table tbody tr:hover .vp-check {
      transform: scale(1.08);
    }

    .vp-check,
    .vp-xmark {
      transition: transform var(--vp-transition-fast);
    }

    @media (max-width: 768px) {
      .vp-table-title {
        font-size: 24px;
      }

      .vp-table-card {
        padding: 16px;
        border-radius: 18px;
      }

      .vp-compare-table td:first-child {
        font-size: 18px;
      }

      .vp-compare-table {
        font-size: 16px;
        min-width: 500px;
      }
    }

    /* =========================
       COOKIE POPUP (BOTTOM RIGHT)
       ========================= */
    .vp-cookie-toast {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 1100;

      max-width: 380px;
      background: #ffffff;
      color: var(--vp-black);
      border-radius: 20px;
      border: 3px solid var(--vp-orange);
      box-shadow: var(--vp-shadow-card);

      padding: 18px 20px 16px;
      display: none;
    }

    .vp-cookie-toast.is-visible {
      display: block;
    }

    .vp-cookie-title {
      font-weight: 700;
      font-size: 18px;
      margin-bottom: 6px;
    }

    .vp-cookie-text {
      font-size: 14px;
      line-height: 1.5;
      margin-bottom: 12px;
    }

    .vp-cookie-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    .vp-cookie-btn {
      border-radius: 999px;
      padding: 6px 16px;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      cursor: pointer;
      border: 2px solid var(--vp-orange);
      transition:
        background var(--vp-transition-fast),
        color var(--vp-transition-fast),
        transform var(--vp-transition-fast),
        box-shadow var(--vp-transition-fast);
    }

    .vp-cookie-btn--secondary {
      background: #ffffff;
      color: var(--vp-orange);
    }

    .vp-cookie-btn--primary {
      background: var(--vp-orange);
      color: #ffffff;
    }

    .vp-cookie-btn--secondary:hover {
      background: rgba(255, 102, 0, 0.06);
      transform: translateY(-1px);
    }

    .vp-cookie-btn--primary:hover {
      background: #ff7a24;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
      transform: translateY(-1px);
    }

    @media (max-width: 600px) {
      .vp-cookie-toast {
        left: 12px;
        right: 12px;
        bottom: 16px;
        max-width: none;
      }

      .vp-cookie-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
      }
    }

    @media (max-width: 400px) {
      .vp-phone-link {
        font-size: 16px;
      }

      .vp-hero-box {
        font-size: 18px;
        padding: 18px 16px;
        border-radius: 22px;
      }
    }

    main {
      padding: 40px 20px;
    }

    /* =========================================
       HOME PAGE MOBILE LAYOUT TUNING
       ========================================= */

    /* Tablet / small laptop */
    @media (max-width: 900px) {
      .vp-hero {
        min-height: 60vh;
        background-position: center top;
      }

      .vp-hero-inner {
        padding: 24px 16px 32px;
        justify-content: center;
      }

      .vp-hero-box {
        margin-top: 0;
        font-size: 26px;
        padding: 20px 18px;
        max-width: 100%;
      }
    }

    /* Phones */
    @media (max-width: 640px) {
      /* HERO */
      .vp-hero {
        min-height: 55vh;
      }

      .vp-hero-inner {
        padding: 20px 12px 28px;
      }

      .vp-hero-box {
        font-size: 22px;
        line-height: 1.3;
        padding: 18px 16px;
        border-radius: 22px;
      }

      /* DEVICE CARDS – 1 per row */
      .vp-device-row,
      .vp-devices-row {
        gap: 16px;
      }

      .vp-device-card {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 0;
        aspect-ratio: auto;
        padding: 18px 16px 20px;
      }

      .vp-device-icon {
        font-size: 32px;
        margin-bottom: 8px;
      }

      .vp-device-title {
        font-size: 24px;
        margin-bottom: 4px;
      }

      .vp-device-text {
        font-size: 16px;
        margin-bottom: 12px;
      }

      .vp-device-cta {
        font-size: 11px;
        letter-spacing: 0.12em;
        padding: 7px 14px;
      }

      /* VIDEO CARDS – stacked */
      .vp-video-card {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 18px 16px 20px;
      }

      .vp-video-title {
        font-size: 24px;
      }

      .vp-video-text {
        font-size: 16px;
      }

        /* COMPARISON TABLE – mobile edge-to-edge */
  .vp-table-section {
    padding-left: 0;
    padding-right: 0;
  }

  .vp-table-inner {
    padding: 0;
  }

  .vp-table-title {
    font-size: 22px;
  }

  .vp-table-card {
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .vp-compare-table {
    font-size: 14px;
    min-width: 0;
    width: 100%;
    border-collapse: separate;  /* added */
    border-spacing: 0;          /* added */
  }

  .vp-compare-table td:first-child {
    font-size: 16px;
  }

  .vp-compare-table thead th,
  .vp-compare-table td {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Rounded top corners for header row on mobile */
  .vp-compare-table thead th:first-child {
    border-top-left-radius: 16px;
  }

  .vp-compare-table thead th:last-child {
    border-top-right-radius: 16px;
  }
    }

    /* =========================================
       MOBILE NAV – SLIDING DRAWER (ALL PAGES)
       ========================================= */
    @media (max-width: 992px) {

      /* Show hamburger on small screens */
      .vp-menu-toggle {
        display: flex !important;
      }

      /* Top bar: logo centered on orange bar (phone handled in mobile bar) */
      .vp-header-inner {
        justify-content: center;
        gap: 12px;
      }

      .vp-phone-link {
        font-size: 20px;
      }

      /* Base nav bar on mobile */
      .vp-nav-bar {
        background: transparent;
        border-bottom: none;
        box-shadow: none;
      }

      /* SLIDING DRAWER NAV LIST
         Starts just below the white mobile bar. header.php measures the bar
         and sets --vp-drawer-top; 140px is the fallback. */
      .vp-nav-list {
        position: fixed;
        top: var(--vp-drawer-top, 140px);
        left: 0;
        bottom: 0;
        width: 94%;
        max-width: 440px;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: nowrap;
        gap: 0;

        padding: 18px 20px 40px;
        background:
          radial-gradient(420px 260px at 100% 0%, rgba(255, 188, 138, 0.28), transparent 70%),
          linear-gradient(180deg, #fffaf6 0%, #fff1e6 100%);
        border-right: 2px solid #ffbc8a;
        border-radius: 0 28px 0 0;
        box-shadow: 18px 0 48px rgba(255, 102, 0, 0.16);

        transform: translateX(-100%);       /* hidden off-screen to the left */
        opacity: 0;
        pointer-events: none;

        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;

        z-index: 999;
        list-style: none;

        transition: transform 260ms ease, opacity 220ms ease;
      }

      /* When nav is open, slide drawer in */
      body.vp-nav-open .vp-nav-list {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
      }

      /* Soft warm wash over the page behind the drawer (taps pass through) */
      .vp-nav-bar::before {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: var(--vp-drawer-top, 140px);
        background: rgba(74, 52, 38, 0.22);
        opacity: 0;
        pointer-events: none;
        transition: opacity 220ms ease;
      }

      body.vp-nav-open .vp-nav-bar::before {
        opacity: 1;
      }

      .vp-nav-item {
        width: 100%;
        border-bottom: 1.5px solid #f3dccb;
      }

      .vp-nav-item:last-child {
        border-bottom: none;
      }

      .vp-nav-spacer {
        display: none;
      }

      /* MAIN MENU ROW (icon tile + label + chevron) */
      .vp-nav-button {
        width: 100%;
        display: flex;
        align-items: center;

        padding: 14px 0;
        border-radius: 0;
        border: none;

        background: transparent;
        font-size: 18px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: #2d2a28;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }

      .vp-nav-button,
      .vp-nav-button:hover,
      .vp-nav-button:focus {
        color: #2d2a28;
        background: transparent;
        transform: none;
      }

      .vp-nav-button:focus-visible {
        outline: 3px solid #ffbc8a;
        outline-offset: 2px;
        border-radius: 14px;
      }

      /* Open menu item: orange label */
      .vp-nav-item.is-open .vp-nav-button {
        color: #ff6600;
        text-shadow: none;
      }

      /* MAIN ICON – soft peach tile, aligns all labels */
      .vp-nav-button > i {
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        margin-right: 14px;
        border-radius: 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        opacity: 1;
        color: #ff6600;
        background: #fff;
        border: 1.5px solid #ffd2b0;
        box-shadow: 0 6px 14px rgba(255, 102, 0, 0.10);
        transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
      }

      .vp-nav-item.is-open .vp-nav-button > i,
      .vp-nav-button:hover > i {
        background: linear-gradient(135deg, #ff6600, #ff6600 40%, #ffbc8a);
        border-color: transparent;
        color: #ffffff;
      }

      /* Chevron on the right */
      .vp-chevron {
        margin-left: auto;
        padding-right: 6px;
        font-size: 18px;
        color: #ff6600;
        opacity: 0.9;
        transition: transform var(--vp-transition-med);
      }

      .vp-nav-item.is-open .vp-chevron {
        transform: rotate(180deg);
      }

      /* SUBMENUS – white rounded card inside the drawer */
      .vp-nav-dropdown {
        position: static;
        max-height: 0;
        opacity: 0;
        pointer-events: none;

        width: 100%;
        background: transparent;
        overflow: hidden;

        border: none;
        border-radius: 18px;
        box-shadow: none;

        transition: max-height 220ms ease, opacity 200ms ease, margin 220ms ease, padding 220ms ease;
      }

      .vp-nav-item.is-open .vp-nav-dropdown {
        max-height: 900px;
        opacity: 1;
        pointer-events: auto;

        margin: 2px 0 16px;
        padding: 6px;
        background: #ffffff;
        border: 1.5px solid #ffd2b0;
        box-shadow: 0 12px 28px rgba(255, 102, 0, 0.10);
      }

      /* SUBMENU ROWS */
      .vp-nav-dropdown a {
        display: flex;
        align-items: center;

        padding: 11px 12px;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        white-space: normal;

        color: #4a4440;
        background: transparent;
        border: none;              /* no separator lines between submenu items */
      }

      .vp-nav-dropdown a i {
        flex: 0 0 26px;
        width: 26px;
        text-align: center;
        margin-right: 12px;
        font-size: 17px;
        color: #ff6600;
      }

      .vp-nav-dropdown a:hover,
      .vp-nav-dropdown a:focus-visible {
        background: #fff1e6;
        color: #2d2a28;
        outline: none;
      }

      .vp-nav-dropdown a:hover i,
      .vp-nav-dropdown a:focus-visible i {
        color: #ff6600;
      }

      /* MOBILE ONLY — Bold the HOME label */
      .vp-nav-item--home .vp-nav-button {
        font-weight: 900 !important;
      }

      /* While menu is open, lock background scroll */
      body.vp-nav-open {
        overflow: hidden;
      }

      /* White mobile bar sits above the drawer and its wash, and turns a
         soft cream (not orange) while the menu is open */
      .vp-mobile-bar {
        position: relative;
        z-index: 60;
      }

      body.vp-nav-open .vp-mobile-bar {
        background: #fffaf6;
        border-bottom: 1px solid #f3dccb;
      }

      .vp-menu-toggle {
        border: 1.5px solid #ffd2b0;
        background: #ffffff;
      }

      body.vp-nav-open .vp-menu-toggle {
        background: #fff1e6;
        border-color: #ffbc8a;
      }
    }

    @media (max-width: 992px) and (prefers-reduced-motion: reduce) {
      .vp-nav-list,
      .vp-nav-bar::before,
      .vp-nav-dropdown {
        transition: none;
      }
    }

    /* Fix colors in the white mobile bar so hamburger & phone stay orange by default */
    .vp-mobile-bar .vp-phone-link,
    .vp-mobile-bar .vp-phone-link i {
      color: var(--vp-orange);
    }

    .vp-mobile-bar .vp-menu-toggle span,
    .vp-mobile-bar .vp-menu-toggle span::before,
    .vp-mobile-bar .vp-menu-toggle span::after {
      background: var(--vp-orange);
    }

    /* MOBILE COLORS FOR THE 4 BUTTONS IN THE WHITE BAR */
    @media (max-width: 992px) {
      .vp-mobile-actions .vp-header-cta {
        background: #ffffff;
        color: #ff6600;
      }

      .vp-mobile-actions .vp-header-cta-icon i {
        color: #ff6600;
      }

      .vp-mobile-actions .vp-header-cta-label {
        color: #ff6600;
      }
    }

    /* Small phones (360-400px wide): the six mobile-bar buttons plus the
       hamburger were about 20px too wide, so every page scrolled sideways.
       Tighten their spacing so they fit. */
    @media (max-width: 400px) {
      .vp-mobile-inner { padding: 8px 10px; gap: 6px; }
      .vp-mobile-actions { gap: 0; }
      .vp-mobile-actions .vp-header-cta { padding: 4px 5px; }
      .vp-mobile-actions .vp-header-cta-label { font-size: 9.5px; }
    }

    /* FORCE HAMBURGER LINES ORANGE ON MOBILE BAR (base override) */
    .vp-mobile-bar .vp-menu-toggle span,
    .vp-mobile-bar .vp-menu-toggle span::before,
    .vp-mobile-bar .vp-menu-toggle span::after {
      background: #ff6600 !important;
    }

    /* Open: middle line hides so the two remaining lines form an orange X */
    body.vp-nav-open .vp-mobile-bar .vp-menu-toggle span {
      background: transparent !important;
    }

  </style>
</head><body>

<!-- ===========================================================================
Velocity Processing, LLC
Created by Jeff Davidson on November 21, 2025
File name: HEADER.PHP
The purpose of this file is to control the menu structure at the top of
every page.
Modified on September 14, 2026.
Added PCI Manager link in LOGIN menu.
Added Dynamic DBA page to the RESOURCES menu.
Modified on November 2, 2026.
Added a small script at the bottom that measures the header (orange logo bar
+ white mobile bar) and sets --vp-drawer-top, so the mobile slide-out menu
starts just below the hamburger instead of covering it. Colors for the menu
live in head.php. Menu links and structure unchanged.
FIXED: on laptop-width screens (about 1100-1500px) the dropdown of the menu
item at the right end of the row ran past the edge of the screen, so every
page scrolled sideways a little and the open menu was cut off. A second small
script now opens those dropdowns right-aligned (class vp-drop-right).
============================================================================ -->


<div class="vp-site-header">

  <!-- =========================
       TOP ORANGE BAR
       ========================= -->
  <header class="vp-top-bar">
    <div class="vp-container vp-header-inner">
      <!-- Logo (click = Home) -->
      <a href="/" class="vp-logo">
        <img src="/logos/vp_logo_white.png" alt="Velocity Processing Logo">
      </a>

      <!-- SIX ACTION BUTTONS (Call, Zoom, Apply, Support, Upload, Message) -->
      <div class="vp-header-actions">
        <!-- 1) Call -->
        <a href="tel:3059177000" class="vp-header-cta">
          <span class="vp-header-cta-icon">
            <i class="fa-solid fa-phone"></i>
          </span>
          <span class="vp-header-cta-label">Call</span>
        </a>

        <!-- 2) Zoom -->
        <a
          href="https://zoom.vproc.com"
          target="_blank"
          rel="noopener noreferrer"
          class="vp-header-cta"
        >
          <span class="vp-header-cta-icon">
            <i class="fa-solid fa-video"></i>
          </span>
          <span class="vp-header-cta-label">Zoom</span>
        </a>

        <!-- 3) Apply -->
        <a href="/apply/application-instructions.php" class="vp-header-cta">
          <span class="vp-header-cta-icon">
            <i class="fa-solid fa-user-plus"></i>
          </span>
          <span class="vp-header-cta-label">Apply</span>
        </a>
        
        <!-- 4) Support -->
        <a href="/support/ticket-new.php" class="vp-header-cta">
          <span class="vp-header-cta-icon">
            <i class="fa-solid fa-screwdriver-wrench"></i>
          </span>
          <span class="vp-header-cta-label">Support</span>
        </a>
        
        <!-- 5) Upload -->
        <a href="/support/file-upload-login.php" class="vp-header-cta">
          <span class="vp-header-cta-icon">
            <i class="fa-solid fa-cloud-arrow-up"></i>
          </span>
          <span class="vp-header-cta-label">Upload</span>
        </a>

        <!-- 6) Message -->
        <a href="/support/send-us-a-message.php" class="vp-header-cta">
          <span class="vp-header-cta-icon">
            <i class="fa-solid fa-envelopes-bulk"></i>
          </span>
          <span class="vp-header-cta-label">Message</span>
        </a>
      </div>
    </div>
  </header>

  <!-- =========================
       MOBILE WHITE BAR
       (shown only on small screens via CSS)
       ========================= -->
  <div class="vp-mobile-bar">
    <div class="vp-mobile-inner">
      <!-- Hamburger (mobile) -->
      <button class="vp-menu-toggle" type="button" aria-label="Toggle navigation">
        <span></span>
      </button>

      <!-- MOBILE ACTION BUTTONS (right side of white bar) -->
      <div class="vp-mobile-actions">
        <!-- 1) Call Us -->
        <a href="tel:3059177000" class="vp-header-cta vp-header-cta--mobile">
          <span class="vp-header-cta-icon">
            <i class="fa-solid fa-phone"></i>
          </span>
          <span class="vp-header-cta-label">Call</span>
        </a>

        <!-- 2) Zoom -->
        <a
          href="https://zoom.vproc.com"
          target="_blank"
          rel="noopener noreferrer"
          class="vp-header-cta vp-header-cta--mobile"
        >
          <span class="vp-header-cta-icon">
            <i class="fa-solid fa-video"></i>
          </span>
          <span class="vp-header-cta-label">Zoom</span>
        </a>
        
        <!-- 3) Apply -->
        <a href="/apply/application-instructions.php" class="vp-header-cta vp-header-cta--mobile">
          <span class="vp-header-cta-icon">
            <i class="fa-solid fa-user-plus"></i>
          </span>
          <span class="vp-header-cta-label">Apply</span>
        </a>

        <!-- 4) Ticket -->
        <a href="/support/ticket-new.php" class="vp-header-cta vp-header-cta--mobile">
          <span class="vp-header-cta-icon">
            <i class="fa-solid fa-screwdriver-wrench"></i>
          </span>
          <span class="vp-header-cta-label">Ticket</span>
        </a>
        
        <!-- 5) Upload -->
        <a href="/support/file-upload-login.php" class="vp-header-cta vp-header-cta--mobile">
          <span class="vp-header-cta-icon">
            <i class="fa-solid fa-cloud-arrow-up"></i>
          </span>
          <span class="vp-header-cta-label">Upload</span>
        </a>

        <!-- 6) Message -->
        <a href="/support/send-us-a-message.php" class="vp-header-cta vp-header-cta--mobile">
          <span class="vp-header-cta-icon">
            <i class="fa-solid fa-envelopes-bulk"></i>
          </span>
          <span class="vp-header-cta-label">Message</span>
        </a>
      </div>
    </div>
  </div>

  <!-- =========================
       WHITE NAV BAR
       ========================= -->
  <div class="vp-nav-bar">
    <div class="vp-container">
      <div class="vp-nav-inner">
        <ul class="vp-nav-list">

          <!-- HOME (simple link, no dropdown) -->
          <li class="vp-nav-item vp-nav-item--home">
            <!-- Root-relative so it always points to /index.php -->
              <a href="/index.php" class="vp-nav-button">
                <i class="fa-solid fa-house"></i>
                HOME
                <span class="vp-chevron"></span>
              </a>
          </li>

          <!-- SOLUTIONS with submenu + icons -->
          <li class="vp-nav-item">
            <button class="vp-nav-button" type="button" data-menu="solutions">
              <i class="fa-solid fa-list-check"></i>
              SOLUTIONS
              <span class="vp-chevron">
                    <i class="fa-solid fa-chevron-down"></i>
              </span>
            </button>
            <ul class="vp-nav-dropdown">
              <!-- Root-relative internal page -->
              <li>
                <a href="/solutions/card-acceptance-options.php">
                  <i class="fa-solid fa-arrow-right-arrow-left"></i>
                  CARD ACCEPTANCE OPTIONS
                </a>
              </li>
              <li>
                <a href="/solutions/traditional-processing.php">
                  <i class="fa-regular fa-credit-card"></i>
                  TRADITIONAL PROCESSING
                </a>
              </li>
              <li>
                <a href="/solutions/surcharging-by-state.php">
                  <i class="fa-solid fa-flag-usa"></i>
                  SURCHARGING BY STATE
                </a>
              </li>
              <li>
                <a href="/solutions/custom-software.php">
                  <i class="fa-solid fa-laptop-code"></i>
                  CUSTOM SOFTWARE
                </a>
              </li>
              <li>
                <a href="/solutions/payment-devices.php">
                  <i class="fa-regular fa-hard-drive"></i>
                  PAYMENT DEVICES
                </a>
              </li>
              <li>
                <a href="/solutions/elavon-payment-gateway.php">
                  <i class="fa-solid fa-cart-shopping"></i>
                  ELAVON PAYMENT GATEWAY
                </a>
              </li>
              <li>
                <a href="/solutions/dynamic-dba.php">
                  <i class="fa-solid fa-list"></i>
                  DYNAMIC DBA
                </a>
              </li>
              <li>
                <a href="/solutions/comprehensive-analytics.php">
                  <i class="fa-solid fa-chart-line"></i>
                  COMPREHENSIVE ANALYTICS
                </a>
              </li>
              <li>
                <a href="/solutions/reduced-expenses.php">
                  <i class="fa-solid fa-arrow-down-wide-short"></i>
                  REDUCED EXPENSES
                </a>
              </li>
              <li>
                <a href="/solutions/next-day-funding.php">
                  <i class="fa-regular fa-calendar-days"></i>
                  NEXT DAY FUNDING
                </a>
              </li>
            </ul>
          </li>

          <!-- APPLY with submenu + icons -->
          <li class="vp-nav-item">
            <button class="vp-nav-button" type="button" data-menu="apply">
              <i class="fa-solid fa-user-plus"></i>
              APPLY
              <span class="vp-chevron">
                    <i class="fa-solid fa-chevron-down"></i>
              </span>
            </button>
            <ul class="vp-nav-dropdown">
              <li>
                <a href="/apply/application-instructions.php">
                  <i class="fa-solid fa-list-ol"></i>
                  APPLICATION INSTRUCTIONS
                </a>
              </li>
              <li>
                <a href="/apply/secure-application.php">
                  <i class="fa-regular fa-file-lines"></i>
                  SECURE APPLICATION
                </a>
              </li>
              <li>
                <a href="/apply/corporate-financials.php">
                  <i class="fa-solid fa-receipt"></i>
                  CORPORATE FINANCIALS
                </a>
              </li>
              <li>
                <a href="/apply/merchant-statements.php">
                  <i class="fa-solid fa-file-lines"></i>
                  MERCHANT STATEMENTS
                </a>
              </li>
              <li>
                <a href="/apply/underwriting-process.php">
                  <i class="fa-solid fa-bars-progress"></i>
                  UNDERWRITING PROCESS
                </a>
              </li>
            </ul>
          </li>

          <!-- RESOURCES with submenu + icons -->
          <li class="vp-nav-item">
            <button class="vp-nav-button" type="button" data-menu="resources">
              <i class="fa-solid fa-toolbox"></i>
              RESOURCES
              <span class="vp-chevron">
                    <i class="fa-solid fa-chevron-down"></i>
              </span>
            </button>
            <ul class="vp-nav-dropdown">
              <li>
                <a href="/resources/converge-gateway.php">
                  <i class="fa-solid fa-laptop-code"></i>
                  CONVERGE GATEWAY
                </a>
              </li>
              <li>
                <a href="/resources/converge-demo.php">
                  <i class="fa-solid fa-chalkboard-user"></i>
                  CONVERGE DEMO
                </a>
              </li>
              <li>
                <a href="/resources/payments-insider.php">
                  <i class="fa-solid fa-chart-pie"></i>
                  PAYMENTS INSIDER
                </a>
              </li>
              <li>
                <a href="/resources/mids-tids.php">
                  <i class="fa-regular fa-object-ungroup"></i>
                  MERCHANT ID vs TERMINAL ID
                </a>
              </li>
              <li>
                <a href="/resources/bin-lookup-login.php">
                  <i class="fa-solid fa-magnifying-glass"></i>
                  BIN LOOKUP
                </a>
              </li>
              <li>
                <a href="/resources/amex-optblue.php">
                  <i class="fa-brands fa-cc-amex"></i>
                  AMEX OPTBLUE
                </a>
              </li>
              <li>
                <a href="/resources/website-requirements.php">
                  <i class="fa-solid fa-check-to-slot"></i>
                  WEBSITE REQUIREMENTS
                </a>
              </li>
              <li>
                <a href="/resources/create-equipment-request.php">
                  <i class="fa-solid fa-calculator"></i>
                  EQUIPMENT REQUEST
                </a>
              </li>
              <li>
                <a href="/resources/transaction-fee-impact.php">
                  <i class="fa-solid fa-up-right-and-down-left-from-center"></i>
                  TRANSACTION FEE IMPACT
                </a>
              </li>
              <li>
                <a href="/resources/surcharge-reconciliation.php">
                  <i class="fa-solid fa-plus"></i>
                  SURCHARGE RECONCILIATION
                </a>
              </li>
              <li>
                <a href="/resources/create-ach.php">
                  <i class="fa-solid fa-building-columns"></i>
                  ACH AUTHORIZATION
                </a>
              </li>
              <li>
                <a href="/resources/mutual-nda.php">
                  <i class="fa-solid fa-handshake"></i>
                  NON-DISCLOSURE AGREEMENT
                </a>
              </li>
              <li>
                <a href="https://whatismyipaddress.com" target="_blank" rel="noopener noreferrer">
                  <i class="fa-solid fa-wifi"></i>
                  FIND MY IP ADDRESS
                </a>
              </li>
            </ul>
          </li>

          <!-- ABOUT with submenu + icons -->
          <li class="vp-nav-item">
            <button class="vp-nav-button" type="button" data-menu="about-us">
              <i class="fa-solid fa-circle-info"></i>
              ABOUT
              <span class="vp-chevron">
                    <i class="fa-solid fa-chevron-down"></i>
              </span>
            </button>
            <ul class="vp-nav-dropdown">
              <li>
                <a href="/about/executive-bios.php">
                  <i class="fa-solid fa-user-tie"></i>
                  EXECUTIVE BIOS
                </a>
              </li>
              <li>
                <a href="/about/company-values.php">
                  <i class="fa-solid fa-bullseye"></i>
                  COMPANY VALUES
                </a>
              </li>
              <li>
                <a href="/about/processing-platform.php">
                  <i class="fa-solid fa-layer-group"></i>
                  PROCESSING PLATFORM
                </a>
              </li>
              <!-- <li>
                <a href="/about/velocity-story.php">
                  <i class="fa-solid fa-timeline"></i>
                  THE VELOCITY STORY
                </a>
              </li> -->
            </ul>
          </li>

          <!-- SUPPORT with submenu + icons -->
          <li class="vp-nav-item">
            <button class="vp-nav-button" type="button" data-menu="support">
              <i class="fa-solid fa-screwdriver-wrench"></i>
              SUPPORT
              <span class="vp-chevron">
                    <i class="fa-solid fa-chevron-down"></i>
              </span>
            </button>
            <ul class="vp-nav-dropdown">
              <li>
                <a href="/support/ticket-new.php">
                  <i class="fa-solid fa-ticket"></i>
                  SUPPORT TICKET
                </a>
              </li>
              <li>
                <a href="https://zoom.vproc.com" target="_blank" rel="noopener noreferrer">
                  <i class="fa-solid fa-video"></i>
                  JOIN ZOOM MEETING
                </a>
              </li>
              <li>
                <a href="/support/file-upload-login.php">
                  <i class="fa-solid fa-cloud-arrow-up"></i>
                  FILE UPLOAD
                </a>
              </li>
              <li>
                <a href="/pci/pci-compliance.php">
                  <i class="fa-solid fa-shield-halved"></i>
                  PCI COMPLIANCE
                </a>
              </li>
              <li>
                <a href="/support/deposits.php">
                  <i class="fa-solid fa-circle-dollar-to-slot"></i>
                  DEPOSITS
                </a>
              </li>
              <li>
                <a href="/support/refunds.php">
                  <i class="fa-solid fa-angles-left"></i>
                  REFUNDS
                </a>
              </li>
              <li>
                <a href="/support/chargebacks.php">
                  <i class="fa-solid fa-cloud-showers-heavy"></i>
                  CHARGEBACKS
                </a>
              </li>
              <li>
                <a href="/support/transaction-verification.php">
                  <i class="fa-solid fa-flag-checkered"></i>
                  TRANSACTION VERIFICATION
                </a>
              </li>
              <li>
                <a href="/support/international-transactions.php">
                  <i class="fa-solid fa-earth-americas"></i>
                  INTERNATIONAL TRANSACTIONS
                </a>
              </li>
              <li>
                <a href="/support/authorization-testing.php">
                  <i class="fa-solid fa-flask"></i>
                  AUTHORIZATION TESTING
                </a>
              </li>
              <li>
                <a href="/support/client-verification.php">
                  <i class="fa-solid fa-user-check"></i>
                  CLIENT VERIFICATION
                </a>
              </li>
              <li>
                <a href="/support/send-us-a-message.php">
                  <i class="fa-solid fa-envelope"></i>
                  SEND US A MESSAGE
                </a>
              </li>
            </ul>
          </li>

          <!-- LOGIN with submenu + icons -->
          <li class="vp-nav-item">
            <button class="vp-nav-button" type="button" data-menu="login">
              <i class="fa-solid fa-right-to-bracket"></i>
              LOGIN
              <span class="vp-chevron">
                    <i class="fa-solid fa-chevron-down"></i>
              </span>
            </button>
            <ul class="vp-nav-dropdown">
              <li>
                <a href="https://velocityprocessing.com/portals/clients/" target="_blank" rel="noopener noreferrer">
                  <i class="fa-solid fa-circle-user"></i>
                  CLIENT PORTAL
                </a>
              </li>
              <li>
                <a href="https://www.paymentsinsider.com/ui/#/us/en_US/login" target="_blank" rel="noopener noreferrer">
                  <i class="fa-solid fa-chart-pie"></i>
                  PAYMENTS INSIDER
                </a>
              </li>
              <li>
                <a href="https://www.convergepay.com/converge-webapp/#!/login" target="_blank" rel="noopener noreferrer">
                  <i class="fa-solid fa-credit-card"></i>
                  CONVERGE
                </a>
              </li>
              <li>
                <a href="https://www.pcicompliancemanager.com" target="_blank" rel="noopener noreferrer">
                  <i class="fa-solid fa-shield-halved"></i>
                  PCI MANAGER
                </a>
              </li>
              <li>
                <a href="https://login.authorize.net" target="_blank" rel="noopener noreferrer">
                  <i class="fa-solid fa-grip"></i>
                  AUTHORIZE.NET
                </a>
              </li>
              <li>
                <a href="/secure-app/index.php" target="_blank" rel="noopener noreferrer">
                  <i class="fa-solid fa-user-plus"></i>
                  APPLICATION PORTAL
                </a>
              </li>
              <li>
                <a href="https://developer.elavon.com/alt-all-docs" target="_blank" rel="noopener noreferrer">
                  <i class="fa-solid fa-screwdriver-wrench"></i>
                  DEVELOPER PORTAL
                </a>
              </li>
              <li>
                <a href="https://portal.sandbox.elavonpayments.com/" target="_blank" rel="noopener noreferrer">
                  <i class="fa-solid fa-laptop-code"></i>
                  EPG SANDBOX
                </a>
              </li>
              <li>
                <a href="/portals/m-portal" target="_blank" rel="noopener noreferrer">
                  <i class="fa-solid fa-sliders"></i>
                  M-PORTAL
                </a>
              </li>
              <li>
                <a href="/portals/p-portal" target="_blank" rel="noopener noreferrer">
                  <i class="fa-solid fa-network-wired"></i>
                  P-PORTAL
                </a>
              </li>
              <li>
                <a href="/portals/v-portal" target="_blank" rel="noopener noreferrer">
                  <i class="fa-solid fa-bars-progress"></i>
                  V-PORTAL
                </a>
              </li>
            </ul>
          </li>

        </ul><!-- /.vp-nav-list -->
      </div><!-- /.vp-nav-inner -->
    </div><!-- /.vp-container -->
  </div><!-- /.vp-nav-bar -->
</div><!-- /.vp-site-header -->

<!-- ============ MOBILE DRAWER POSITION ============ -->
<!-- Measures the logo bar + white mobile bar so the slide-out menu (styled in
     head.php) opens just below the hamburger on every device. -->
<script>
(function(){
  var header = document.querySelector('.vp-site-header');
  var bar    = document.querySelector('.vp-mobile-bar');
  if (!header || !bar) return;

  function setDrawerTop(){
    if (getComputedStyle(bar).display === 'none') return;
    var bottom = Math.max(0, Math.round(bar.getBoundingClientRect().bottom));
    header.style.setProperty('--vp-drawer-top', bottom + 'px');
  }

  setDrawerTop();
  window.addEventListener('resize', setDrawerTop);
  window.addEventListener('orientationchange', setDrawerTop);
  window.addEventListener('scroll', setDrawerTop, { passive: true });
  window.addEventListener('load', setDrawerTop);

  var logo = header.querySelector('.vp-logo img');
  if (logo && !logo.complete) logo.addEventListener('load', setDrawerTop);

  /* Re-measure the moment the menu opens (body gets .vp-nav-open). */
  if ('MutationObserver' in window){
    new MutationObserver(setDrawerTop).observe(document.body, { attributes:true, attributeFilter:['class'] });
  }
})();
</script>

<!-- ============ DESKTOP DROPDOWN EDGE FIX ============ -->
<!-- A dropdown that would run past the right edge of the screen opens
     right-aligned instead (class vp-drop-right, styled in head.php), so the
     page never scrolls sideways and the menu is never cut off. -->
<script>
(function(){
  var items = document.querySelectorAll('.vp-nav-bar .vp-nav-item');
  if (!items.length) return;

  function alignDropdowns(){
    var edge = document.documentElement.clientWidth - 8;
    items.forEach(function(item){
      var dd = item.querySelector('.vp-nav-dropdown');
      if (!dd) return;
      item.classList.remove('vp-drop-right');
      var left = item.getBoundingClientRect().left;
      if (left + dd.offsetWidth > edge) item.classList.add('vp-drop-right');
    });
  }

  alignDropdowns();
  window.addEventListener('resize', alignDropdowns);
  window.addEventListener('load', alignDropdowns);
  if (document.fonts && document.fonts.ready) document.fonts.ready.then(alignDropdowns);
})();
</script>

<main class="vh-page">

<style>
/* ============================================================================
   TOKENS  (adjust --vh-scale to grow/shrink ALL text on the page)
============================================================================ */
:root{
  --vp-orange:#FF6600;
  --vp-black:#111827;
  --vp-grey:#6b7280;
  --vp-muted:#6b7280;
}
.vh-page{
  --vh-scale:1;
  --vh-orange:#FF6600;
  --vh-orange-soft:#ffbc8a;
  --vh-peach:#fff1e6;
  --vh-cream:#fffaf6;
  --vh-grad:linear-gradient(135deg,#ff6600,#ff6600 40%,#ffbc8a);
  --vh-grad-soft:linear-gradient(135deg,#fff4ec,#ffe6d3);
  --vh-ink:#2d2a28;
  --vh-text:#4a4440;
  --vh-muted:#8a7f78;
  --vh-line:#f3dccb;
  --vh-radius:32px;

  background:
    radial-gradient(1200px 600px at 100% 0%, rgba(255,188,138,.22), transparent 60%),
    var(--vh-cream);
  padding:40px 0 100px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",
    "Avenir Next","Segoe UI",sans-serif;
  color:var(--vh-ink);
}
.vh-page *{ box-sizing:border-box; }

.vh-wrap{
  max-width:1920px;
  margin:0 auto;
  padding:0 28px;
}

/* Gradient text helper */
.vh-grad-text{
  background:var(--vh-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Shared Velocity gradient-border panel */
.vh-panel{
  border-radius:var(--vh-radius);
  border:2px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--vh-grad) border-box;
  box-shadow:0 18px 44px rgba(255,102,0,.10);
}

/* ============================================================================
   LAYOUT (single full-width column)
============================================================================ */
.vh-layout,
.vh-main,
.vh-welcome-wrap{ min-width:0; }

/* Keeps a phrase together so headings break only where intended */
.vh-nowrap{ white-space:nowrap; }

/* ============================================================================
   WELCOME BANNER + HOLIDAY PILL
============================================================================ */
.vh-welcome{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin-bottom:26px;
}
.vh-welcome-line{
  flex:1;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--vh-orange-soft), transparent);
}
.vh-welcome-text{
  font-size:calc(30px * var(--vh-scale));
  font-weight:900;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--vh-ink);
  white-space:nowrap;
}

.vh-holiday{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:0 0 28px;
  padding:24px 34px;
  border-radius:var(--vh-radius);
  border:2px solid transparent;
  background:
    var(--vh-grad-soft) padding-box,
    var(--vh-grad) border-box;
  box-shadow:0 14px 34px rgba(255,102,0,.12);
  text-align:center;
}
.vh-holiday i{ font-size:34px; }
.vh-holiday-text{
  font-size:calc(26px * var(--vh-scale));
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--vh-ink);
  line-height:1.35;
}

/* ============================================================================
   HERO
============================================================================ */
.vh-hero{
  position:relative;
  overflow:hidden;
  border-radius:36px;
  border:2px solid transparent;
  background:
    radial-gradient(620px 300px at 100% 0%, rgba(255,102,0,.16), transparent 70%),
    var(--vh-grad-soft) padding-box,
    var(--vh-grad) border-box;
  box-shadow:0 22px 54px rgba(255,102,0,.14);
}
.vh-hero::before,
.vh-hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:var(--vh-grad);
  pointer-events:none;
}
.vh-hero::before{ width:380px; height:380px; right:-120px; top:-170px; opacity:.12; }
.vh-hero::after { width:220px; height:220px; left:38%; bottom:-140px; opacity:.07; }
.vh-hero > *{ position:relative; z-index:1; }

.vh-hero-inner{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:34px;
  align-items:center;
  padding:54px 56px 34px;
}

.vh-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 18px;
  border-radius:999px;
  background:#fff;
  border:1.5px solid var(--vh-orange-soft);
  font-size:calc(16px * var(--vh-scale));
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--vh-ink);
  margin-bottom:18px;
}
.vh-kicker i{ font-size:22px; }

.vh-hero-title{
  margin:0 0 16px;
  font-size:calc(66px * var(--vh-scale));
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.04;
  text-transform:uppercase;
  color:var(--vh-ink);
}
.vh-hero-sub{
  margin:0 0 28px;
  max-width:940px;
  font-size:calc(25px * var(--vh-scale));
  line-height:1.55;
  color:var(--vh-text);
}

.vh-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
}
.vh-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:18px 34px;
  border-radius:999px;
  border:none;
  background:var(--vh-grad);
  color:#fff;
  font-size:calc(18px * var(--vh-scale));
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(255,102,0,.32);
  transition:transform .18s ease, box-shadow .18s ease;
}
.vh-btn:hover{ transform:translateY(-2px); box-shadow:0 20px 40px rgba(255,102,0,.42); }
.vh-btn i{ font-size:22px; }
.vh-btn--outline{
  background:#fff;
  color:var(--vh-orange);
  border:2px solid var(--vh-orange);
  box-shadow:0 10px 24px rgba(255,102,0,.12);
}
.vh-btn--outline:hover{ background:var(--vh-orange); color:#fff; }

.vh-hero-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:20px;
}
.vh-hero-logo{
  width:min(400px,100%);
  height:auto;
  filter:drop-shadow(0 12px 28px rgba(255,102,0,.16));
}
.vh-chips{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:flex-end;
}
.vh-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 18px;
  border-radius:999px;
  background:#fff;
  border:1.5px solid var(--vh-orange-soft);
  font-size:calc(15px * var(--vh-scale));
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--vh-ink);
  white-space:nowrap;
}
.vh-chip i{ color:var(--vh-orange); font-size:16px; }

/* Pillars */
.vh-pillars{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  padding:0 56px 50px;
}
.vh-pillar{
  padding:30px 30px 32px;
  border-radius:28px;
  background:rgba(255,255,255,.92);
  border:1.5px solid rgba(255,188,138,.8);
  box-shadow:0 12px 30px rgba(255,102,0,.08);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.vh-pillar-icon{
  width:72px; height:72px;
  border-radius:22px;
  display:flex; align-items:center; justify-content:center;
  background:var(--vh-grad);
  color:#fff;
  font-size:32px;
  box-shadow:0 12px 26px rgba(255,102,0,.28);
}
.vh-pillar h2{
  margin:0;
  font-size:calc(22px * var(--vh-scale));
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--vh-ink);
}
.vh-pillar p{
  margin:0;
  font-size:calc(21px * var(--vh-scale));
  line-height:1.55;
  color:var(--vh-text);
}

/* ============================================================================
   SECTION HEADINGS
============================================================================ */
.vh-section{ scroll-margin-top:30px; }
.vh-section-head{
  margin:80px 0 34px;
  text-align:center;
}
.vh-card-icons{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:26px;
  margin-bottom:18px;
  font-size:60px;
}
.vh-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 18px;
  border-radius:999px;
  background:var(--vh-peach);
  border:1.5px solid var(--vh-orange-soft);
  font-size:calc(15px * var(--vh-scale));
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--vh-orange);
  margin-bottom:14px;
}
.vh-heading{
  margin:0 0 10px;
  font-size:calc(50px * var(--vh-scale));
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--vh-ink);
}
.vh-subheading{
  margin:0 auto;
  max-width:760px;
  font-size:calc(26px * var(--vh-scale));
  color:var(--vh-muted);
}

/* ============================================================================
   FEATURE PANELS
============================================================================ */
.vh-panels{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px;
}
.vh-feature{
  --vh-pad-top:56px;   /* space above the circle */
  --vh-disc:230px;     /* circle size */
  position:relative;
  overflow:hidden;
  padding:var(--vh-pad-top) 40px 46px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:transform .18s ease, box-shadow .18s ease;
}
.vh-feature::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  /* band ends 16px below the circle, whatever the panel's height */
  height:calc(var(--vh-pad-top) + var(--vh-disc) + 16px);
  background:var(--vh-grad-soft);
  opacity:.75;
  pointer-events:none;
}
.vh-feature > *{ position:relative; }
.vh-feature:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 56px rgba(255,102,0,.18);
}
.vh-feature-disc{
  width:var(--vh-disc); height:var(--vh-disc);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  border:2px solid rgba(255,188,138,.8);
  box-shadow:0 18px 40px rgba(255,102,0,.16);
  margin-bottom:30px;
}
.vh-feature-disc i{ font-size:120px; }
.vh-feature-title{
  margin:0 0 10px;
  font-size:calc(40px * var(--vh-scale));
  font-weight:800;
  color:var(--vh-ink);
}
.vh-feature-text{
  margin:0 auto 30px;
  max-width:520px;
  font-size:calc(26px * var(--vh-scale));
  color:var(--vh-muted);
}

.vh-actions{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:28px;
  margin-top:auto;
}
.vh-action{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.vh-icon-btn{
  width:86px; height:86px;
  border-radius:24px;
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--vh-grad);
  color:#fff;
  font-size:40px;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(255,102,0,.32);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.vh-icon-btn:hover{ transform:translateY(-3px); box-shadow:0 18px 36px rgba(255,102,0,.42); }
.vh-icon-btn--soft{
  border-radius:50%;
  background:var(--vh-peach);
  color:var(--vh-orange);
  border:2px solid var(--vh-orange-soft);
  box-shadow:0 10px 24px rgba(255,102,0,.14);
}
.vh-icon-btn--soft:hover{ background:var(--vh-orange); color:#fff; border-color:var(--vh-orange); }
.vh-action-label{
  font-size:calc(15px * var(--vh-scale));
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--vh-muted);
}
.vh-action:hover .vh-action-label,
.vh-action:focus-within .vh-action-label{
  color:var(--vh-orange);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ============================================================================
   REVIEWS MARQUEE
============================================================================ */
.vh-reviews{
  overflow:hidden;
  padding:10px 0 20px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.vp-reviews-marquee{
  display:flex;
  width:max-content;
  animation:vpMarqueeScroll 60s linear infinite;
}
.vp-reviews-track{ display:flex; flex-shrink:0; }
.vp-reviews-marquee:hover{ animation-play-state:paused; }
@keyframes vpMarqueeScroll{
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
  .vp-reviews-marquee{
    animation:none;
    flex-wrap:wrap;
    justify-content:center;
    width:100%;
  }
}
.vp-review-card{
  flex-shrink:0;
  width:420px;
  margin:0 14px;
  padding:44px 38px 36px;
  border-radius:var(--vh-radius);
  border:2px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,#ffd9bf,#ffeadb) border-box;
  box-shadow:0 12px 30px rgba(255,102,0,.08);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  transition:background .18s ease, box-shadow .18s ease;
}
.vp-review-card:hover{
  background:
    linear-gradient(#fffaf6,#fff) padding-box,
    var(--vh-grad) border-box;
  box-shadow:0 20px 40px rgba(255,102,0,.16);
}
.vp-review-stars{ display:flex; gap:6px; }
.vp-review-stars .fa-star{
  font-size:30px;
  background:var(--vh-grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  display:inline-block;
}
.vp-review-body{
  flex:1;
  font-size:calc(20px * var(--vh-scale));
  line-height:1.65;
  color:var(--vh-text);
}
.vp-review-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:100%;
  padding-top:16px;
  border-top:1.5px solid var(--vh-line);
}
.vp-review-avatar{
  width:56px; height:56px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--vh-grad);
  color:#fff;
  font-size:19px;
  font-weight:800;
  flex-shrink:0;
  box-shadow:0 8px 18px rgba(255,102,0,.25);
}
.vp-review-info{ display:flex; flex-direction:column; gap:2px; text-align:left; }
.vp-review-name{ font-size:calc(18px * var(--vh-scale)); font-weight:800; color:var(--vh-ink); }
.vp-review-role{ font-size:calc(15px * var(--vh-scale)); color:var(--vh-muted); letter-spacing:.03em; }

/* ============================================================================
   FLOATING VIDEO OVERLAY (light Velocity style)
============================================================================ */
.vp-video-overlay{
  position:fixed;
  top:80px;
  left:50%;
  transform:translateX(-50%);
  width:min(760px, calc(100% - 32px));
  border-radius:28px;
  border:2px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--vh-grad, linear-gradient(135deg,#ff6600,#ffbc8a)) border-box;
  color:#2d2a28;
  box-shadow:0 30px 70px rgba(255,102,0,.25);
  display:none;
  flex-direction:column;
  z-index:9600;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;
}
.vp-video-overlay.is-visible{ display:flex; }
.vp-video-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px 10px;
  cursor:grab;
}
.vp-video-header:active{ cursor:grabbing; }
.vp-video-title{
  font-size:18px;
  font-weight:800;
  color:#2d2a28;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding-right:8px;
}
.vp-video-close{
  width:40px; height:40px;
  border-radius:50%;
  border:2px solid #f3dccb;
  background:#fff;
  color:#FF6600;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  flex-shrink:0;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.vp-video-close:hover{ background:#FF6600; border-color:#FF6600; color:#fff; }
.vp-video-body{ padding:0 20px 18px; }
.vp-video-aspect{
  position:relative;
  width:100%;
  padding-top:56.25%;
  border-radius:20px;
  overflow:hidden;
  background:#fff1e6;
}
.vp-video-aspect iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.vp-video-caption{ margin-top:8px; font-size:14px; color:#8a7f78; }

/* ============================================================================
   FLOATING MINI AUDIO PLAYER (light Velocity style)
============================================================================ */
.vp-audio-player{
  position:fixed;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  max-width:580px;
  width:calc(100% - 32px);
  padding:12px 20px 12px 12px;
  border-radius:999px;
  border:2px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,#ff6600,#ff6600 40%,#ffbc8a) border-box;
  color:#2d2a28;
  box-shadow:0 20px 48px rgba(255,102,0,.25);
  display:none;
  align-items:center;
  gap:14px;
  z-index:9500;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;
}
.vp-audio-player.is-visible{ display:flex; }
.vp-audio-player .vp-audio-play-pause{
  width:50px; height:50px;
  border-radius:50%;
  border:none;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#ff6600,#ff6600 40%,#ffbc8a);
  color:#fff;
  cursor:pointer;
  flex-shrink:0;
  box-shadow:0 10px 24px rgba(255,102,0,.32);
  transition:transform .16s ease;
}
.vp-audio-player .vp-audio-play-pause:hover{ transform:translateY(-1px); }
.vp-audio-player .vp-audio-play-pause i{ font-size:22px; }
.vp-audio-player .vp-audio-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1;
  min-width:0;
}
.vp-audio-player .vp-audio-title{
  font-size:17px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.vp-audio-player .vp-audio-time{
  font-size:14px;
  color:#8a7f78;
  display:flex;
  align-items:center;
  gap:4px;
}
.vp-audio-player .vp-audio-progress{
  position:relative;
  height:6px;
  border-radius:999px;
  background:#fff1e6;
  overflow:hidden;
  margin-top:2px;
  cursor:pointer;
}
.vp-audio-player .vp-audio-progress-filled{
  position:absolute;
  left:0; top:0;
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(135deg,#ff6600,#ff6600 40%,#ffbc8a);
}
.vp-audio-player .vp-audio-close{
  border:none;
  background:transparent;
  color:#c9a58c;
  font-size:22px;
  cursor:pointer;
  padding:0 2px 0 4px;
  flex-shrink:0;
}
.vp-audio-player .vp-audio-close:hover{ color:#FF6600; }

/* ============================================================================
   RESPONSIVE
============================================================================ */
@media (max-width:1500px){
  .vh-hero-inner{ grid-template-columns:1fr; }
  .vh-hero-right{ align-items:flex-start; }
  .vh-chips{ justify-content:flex-start; }
  .vh-feature{ --vh-disc:190px; }
  .vh-feature-disc i{ font-size:96px; }
}
@media (max-width:1200px){
  .vh-panels{ grid-template-columns:1fr; max-width:760px; margin:0 auto; }
}
@media (max-width:900px){
  .vh-welcome-text{ white-space:normal; text-align:center; line-height:1.35; }
  .vh-welcome-greeting{ display:block; }
  .vh-welcome-accent{ display:inline-block; }
  .vh-holiday{ padding:18px 22px; gap:14px; border-radius:24px; }
  .vh-holiday i{ font-size:26px; }
  .vh-holiday-text{ font-size:calc(20px * var(--vh-scale)); letter-spacing:.08em; }
  .vh-hero-inner{ padding:38px 28px 26px; }
  .vh-pillars{ grid-template-columns:1fr; padding:0 28px 32px; }
  .vh-hero-title{ font-size:calc(42px * var(--vh-scale)); }
  .vh-hero-sub{ font-size:calc(20px * var(--vh-scale)); }
  .vh-heading{ font-size:calc(34px * var(--vh-scale)); }
  .vh-subheading{ font-size:calc(20px * var(--vh-scale)); }
}
@media (max-width:640px){
  .vh-wrap{ padding:0 14px; }
  .vh-ctas{ flex-direction:column; align-items:stretch; }
  .vh-btn{ width:100%; }
  .vh-welcome-text{ font-size:calc(18px * var(--vh-scale)); letter-spacing:.16em; }
  .vh-welcome{ gap:12px; }
  .vh-hero-title{ font-size:calc(32px * var(--vh-scale)); }
  .vh-chip{ letter-spacing:.06em; }
  .vh-card-icons{ font-size:34px; gap:12px; }
  .vh-feature{ --vh-pad-top:40px; --vh-disc:160px; padding:var(--vh-pad-top) 22px 36px; }
  .vh-feature::before{ height:46%; }   /* phones: unchanged (already correct) */
  .vh-feature-disc i{ font-size:80px; }
  .vh-feature-title{ font-size:calc(30px * var(--vh-scale)); }
  .vh-feature-text{ font-size:calc(20px * var(--vh-scale)); }
  .vh-icon-btn{ width:72px; height:72px; font-size:34px; }
  .vp-review-card{ width:310px; padding:32px 24px 28px; }
  .vp-review-body{ font-size:calc(16px * var(--vh-scale)); }
  .vp-video-overlay{ top:40px; }
}
@media (prefers-reduced-motion:reduce){
  .vh-page *, .vp-video-overlay *, .vp-audio-player *{ transition:none !important; }
}
</style>

<div class="vh-wrap">
<div class="vh-layout">

  <!-- =========================================================================
       WELCOME + HOLIDAY
  ========================================================================= -->
  <section class="vh-section vh-welcome-wrap" id="vhWelcome" aria-label="Welcome">

    <div class="vh-welcome">
      <div class="vh-welcome-line"></div>
      <div class="vh-welcome-text">
        <span class="vh-welcome-greeting">Good morning.</span>
        <span class="vh-welcome-accent vh-grad-text">Welcome to Velocity</span>
      </div>
      <div class="vh-welcome-line"></div>
    </div>

      </section>

  <!-- =========================================================================
       MAIN
  ========================================================================= -->
  <div class="vh-main">

    <!-- ===================== HERO ===================== -->
    <section class="vh-section" aria-label="Velocity overview">
      <div class="vh-hero">
        <div class="vh-hero-inner">

          <div class="vh-hero-left">
            <div class="vh-kicker">
              <i class="fa-solid fa-laptop-code vh-grad-text"></i>
              Built for modern commerce
            </div>

            <h1 class="vh-hero-title">
              Digital <span class="vh-grad-text">Payments</span><br>
              &amp; Custom <span class="vh-grad-text">Solutions</span>
            </h1>

            <p class="vh-hero-sub">
              Velocity delivers high-touch service, intelligent payment infrastructure, and customized software —
              so your payment operations run smoother, smarter, and more profitably.
            </p>

            <div class="vh-ctas">
              <a href="/support/send-us-a-message.php" class="vh-btn">
                <i class="fa-solid fa-calendar-check"></i> Schedule a Strategy Call
              </a>
              <a href="/upload/statements/submit-merchant-statements.php" class="vh-btn vh-btn--outline">
                <i class="fa-solid fa-credit-card"></i> Merchant Statement Analytics
              </a>
            </div>
          </div>

          <div class="vh-hero-right">
            <img
              src="/logos/velocity_color_logo.png"
              alt="Velocity Processing"
              class="vh-hero-logo"
            >
            <div class="vh-chips" aria-label="Trust and capabilities">
              <span class="vh-chip"><i class="fa-solid fa-check"></i>No Contracts</span>
              <span class="vh-chip"><i class="fa-solid fa-check"></i>No Setup Costs</span>
              <span class="vh-chip"><i class="fa-solid fa-check"></i>No Termination Fees</span>
            </div>
          </div>

        </div><!-- /.vh-hero-inner -->

        <div class="vh-pillars">
          <div class="vh-pillar">
            <div class="vh-pillar-icon"><i class="fa-solid fa-bell-concierge"></i></div>
            <h2>Concierge-Level Partnership</h2>
            <p>Personalized service, direct access to decision makers, and proactive support.</p>
          </div>
          <div class="vh-pillar">
            <div class="vh-pillar-icon"><i class="fa-solid fa-sack-dollar"></i></div>
            <h2>Guaranteed Savings</h2>
            <p>Start saving immediately. Reduce your card acceptance fees up to 88% with surcharge-compliant software.</p>
          </div>
          <div class="vh-pillar">
            <div class="vh-pillar-icon"><i class="fa-solid fa-code"></i></div>
            <h2>Customized Software</h2>
            <p>Fully customized software integrating payments, reporting dashboards, and digital registers.</p>
          </div>
        </div><!-- /.vh-pillars -->
      </div><!-- /.vh-hero -->
    </section>

    <!-- ===================== DRIVEN BY RESULTS ===================== -->
    <section class="vh-section" id="vhResults">
      <div class="vh-section-head">
        <div class="vh-card-icons" aria-hidden="true">
          <i class="fa-brands fa-cc-visa vh-grad-text"></i>
          <i class="fa-brands fa-cc-mastercard vh-grad-text"></i>
          <i class="fa-brands fa-cc-amex vh-grad-text"></i>
          <i class="fa-brands fa-cc-discover vh-grad-text"></i>
          <i class="fa-solid fa-laptop-code vh-grad-text"></i>
        </div>
        <h2 class="vh-heading">Driven By <span class="vh-grad-text">Results</span></h2>
        <p class="vh-subheading">Defined by Experience.</p>
      </div>

      <div class="vh-panels">

        <!-- PANEL 1 – MEET OUR TEAM -->
        <article class="vh-feature vh-panel">
          <div class="vh-feature-disc"><i class="fa-regular fa-handshake vh-grad-text"></i></div>
          <h2 class="vh-feature-title">Meet Our Team</h2>
          <p class="vh-feature-text">Passionate and dedicated.</p>
          <div class="vh-actions">
            <div class="vh-action">
              <a href="/about/executive-bios.php" class="vh-icon-btn" aria-label="Executive Bios">
                <i class="fa-solid fa-user-group"></i>
              </a>
              <div class="vh-action-label">Team</div>
            </div>
            <div class="vh-action">
              <button
                type="button"
                class="vh-icon-btn vh-icon-btn--soft vp-audio-trigger"
                data-audio-src="/audio-files/company/meet-our-team.wav"
                data-audio-title="Meet Our Team"
                aria-label="Play Meet Our Team Audio"
              >
                <i class="fa-solid fa-circle-play"></i>
              </button>
              <div class="vh-action-label">Audio</div>
            </div>
          </div>
        </article>

        <!-- PANEL 2 – OUR MISSION -->
        <article class="vh-feature vh-panel">
          <div class="vh-feature-disc"><i class="fa-solid fa-bullseye vh-grad-text"></i></div>
          <h2 class="vh-feature-title">Our Mission</h2>
          <p class="vh-feature-text">Exceptional payment experiences.</p>
          <div class="vh-actions">
            <div class="vh-action">
              <button
                type="button"
                class="vh-icon-btn vp-video-trigger"
                data-video-src="https://biteable.com/watch/embed/2856738/7d65216324c5ac063a918dde4bac26de"
                data-video-title="Our Mission"
                aria-label="Play Our Mission Video"
              >
                <i class="fa-solid fa-video"></i>
              </button>
              <div class="vh-action-label">Video</div>
            </div>
            <div class="vh-action">
              <button
                type="button"
                class="vh-icon-btn vh-icon-btn--soft vp-audio-trigger"
                data-audio-src="/audio-files/company/welcome-letter.wav"
                data-audio-title="Our Mission"
                aria-label="Play Our Mission Audio"
              >
                <i class="fa-solid fa-circle-play"></i>
              </button>
              <div class="vh-action-label">Audio</div>
            </div>
          </div>
        </article>

        <!-- PANEL 3 – HIGH STANDARDS -->
        <article class="vh-feature vh-panel">
          <div class="vh-feature-disc"><i class="fa-solid fa-gauge-high vh-grad-text"></i></div>
          <h2 class="vh-feature-title">High Standards</h2>
          <p class="vh-feature-text">That's our standard.</p>
          <div class="vh-actions">
            <div class="vh-action">
              <button
                type="button"
                class="vh-icon-btn vp-video-trigger"
                data-video-src="https://biteable.com/watch/embed/2889578/b9092d02fed6c6f98de36e572b298dfa"
                data-video-title="Why Choose Velocity"
                aria-label="Watch Overview Video"
              >
                <i class="fa-solid fa-video"></i>
              </button>
              <div class="vh-action-label">Video</div>
            </div>
            <div class="vh-action">
              <button
                type="button"
                class="vh-icon-btn vh-icon-btn--soft vp-audio-trigger"
                data-audio-src="/audio-files/company/high-standards.wav"
                data-audio-title="High Standards"
                aria-label="Listen to High Standards"
              >
                <i class="fa-solid fa-circle-play"></i>
              </button>
              <div class="vh-action-label">Audio</div>
            </div>
          </div>
        </article>

      </div><!-- /.vh-panels -->
    </section>

    <!-- ===================== TRENDING TOPICS ===================== -->
    <section class="vh-section" id="vhTrending">
      <div class="vh-section-head">
        <div class="vh-eyebrow"><i class="fa-solid fa-fire"></i>Trending Now</div>
        <h2 class="vh-heading">Trending <span class="vh-grad-text">Topics</span></h2>
        <p class="vh-subheading">Turning complexity into clarity.</p>
      </div>

      <div class="vh-panels">

        <!-- PANEL 4 – ANALYTICS -->
        <article class="vh-feature vh-panel">
          <div class="vh-feature-disc"><i class="fa-solid fa-chart-line vh-grad-text"></i></div>
          <h2 class="vh-feature-title">Analytics</h2>
          <p class="vh-feature-text">Guaranteed savings. In writing.</p>
          <div class="vh-actions">
            <div class="vh-action">
              <a href="/solutions/comprehensive-analytics.php" class="vh-icon-btn" aria-label="Comprehensive Analytics">
                <i class="fa-solid fa-chart-column"></i>
              </a>
              <div class="vh-action-label">Graphs</div>
            </div>
            <div class="vh-action">
              <button
                type="button"
                class="vh-icon-btn vh-icon-btn--soft vp-audio-trigger"
                data-audio-src="/audio-files/solutions/analytics.wav"
                data-audio-title="Analytics"
                aria-label="Play Analytics Audio"
              >
                <i class="fa-solid fa-circle-play"></i>
              </button>
              <div class="vh-action-label">Audio</div>
            </div>
          </div>
        </article>

        <!-- PANEL 5 – INTELLIGENT REPORTING -->
        <article class="vh-feature vh-panel">
          <div class="vh-feature-disc"><i class="fa-solid fa-chart-simple vh-grad-text"></i></div>
          <h2 class="vh-feature-title">Intelligent Reporting</h2>
          <p class="vh-feature-text">Actionable data at your fingertips.</p>
          <div class="vh-actions">
            <div class="vh-action">
              <a href="/resources/payments-insider.php" class="vh-icon-btn" aria-label="Payments Insider">
                <i class="fa-solid fa-magnifying-glass-chart"></i>
              </a>
              <div class="vh-action-label">Charts</div>
            </div>
            <div class="vh-action">
              <button
                type="button"
                class="vh-icon-btn vh-icon-btn--soft vp-audio-trigger"
                data-audio-src="/audio-files/resources/intelligent-reporting.wav"
                data-audio-title="Intelligent Reporting"
                aria-label="Play Intelligent Reporting Audio"
              >
                <i class="fa-solid fa-circle-play"></i>
              </button>
              <div class="vh-action-label">Audio</div>
            </div>
          </div>
        </article>

        <!-- PANEL 6 – SURCHARGING -->
        <article class="vh-feature vh-panel">
          <div class="vh-feature-disc"><i class="fa-solid fa-plus vh-grad-text"></i></div>
          <h2 class="vh-feature-title">Surcharging</h2>
          <p class="vh-feature-text">Eliminate ~88% of your fees.</p>
          <div class="vh-actions">
            <div class="vh-action">
              <a href="/solutions/surcharged-processing.php" class="vh-icon-btn" aria-label="Surcharged Processing Solutions">
                <i class="fa-regular fa-credit-card"></i>
              </a>
              <div class="vh-action-label">Learn</div>
            </div>
            <div class="vh-action">
              <button
                type="button"
                class="vh-icon-btn vh-icon-btn--soft vp-audio-trigger"
                data-audio-src="/audio-files/solutions/surcharged-processing.wav"
                data-audio-title="Surcharging"
                aria-label="Play Surcharging Audio"
              >
                <i class="fa-solid fa-circle-play"></i>
              </button>
              <div class="vh-action-label">Audio</div>
            </div>
          </div>
        </article>

      </div><!-- /.vh-panels -->
    </section>

    <!-- ===================== CLIENT REVIEWS ===================== -->
    <section class="vh-section" id="vhReviews">
      <div class="vh-section-head">
        <div class="vh-eyebrow"><i class="fa-solid fa-star"></i>5-Star Service</div>
        <h2 class="vh-heading"><span class="vh-nowrap">What Our</span> <span class="vh-nowrap"><span class="vh-grad-text">Clients</span> Say</span></h2>
        <p class="vh-subheading">Trusted by businesses nationwide.</p>
      </div>

      <div class="vh-reviews">
        <div class="vp-reviews-marquee" id="vpReviewsMarquee">
      <div class="vp-reviews-track" id="vpReviewsTrack">

      <!-- REVIEW 1 -->
      <div class="vp-review-card">
        <div class="vp-review-stars">
          <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
        </div>
        <div class="vp-review-body">
          We recently switched our credit card processing to Velocity and it has been a smooth and seamless transition. Their customer support is amazing. It is now easier for our clients to make payments and has simplified the bookkeeping side too. I wish we would have done this a long time ago! Five Stars!!
        </div>
        <div class="vp-review-footer">
          <div class="vp-review-avatar">KB</div>
          <div class="vp-review-info">
            <div class="vp-review-name">Keith Brandel</div>
            <div class="vp-review-role">Owner · Brandel Masonry</div>
          </div>
        </div>
      </div>

      <!-- REVIEW 2 -->
      <div class="vp-review-card">
        <div class="vp-review-stars">
          <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
        </div>
        <div class="vp-review-body">
          In our business we need a fast response and problem resolution. Velocity Processing exceeds our expectations as far as service and able staff to aid us with credit card processing issues! It's a pleasure to deal with Ed and Jeff. We highly recommend this service.
        </div>
        <div class="vp-review-footer">
          <div class="vp-review-avatar">RO</div>
          <div class="vp-review-info">
            <div class="vp-review-name">Rebecca Orozco</div>
            <div class="vp-review-role">Partner · SOFLA Vacations</div>
          </div>
        </div>
      </div>

      <!-- REVIEW 3 -->
      <div class="vp-review-card">
        <div class="vp-review-stars">
          <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
        </div>
        <div class="vp-review-body">
          Jeff was very communicative throughout the process and provided an extensive education to me/my staff to ensure that our transactions were safe and secure. The transition process was smooth and he was always promptly responsive and to our communications. I highly recommend.
        </div>
        <div class="vp-review-footer">
          <div class="vp-review-avatar">SW</div>
          <div class="vp-review-info">
            <div class="vp-review-name">Shari Witkoff</div>
            <div class="vp-review-role">Dentist · Shari A. Witkoff, DMD</div>
          </div>
        </div>
      </div>

      <!-- REVIEW 4 -->
      <div class="vp-review-card">
        <div class="vp-review-stars">
          <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
        </div>
        <div class="vp-review-body">
          I've been using Velocity for my law firm's merchant service processing for years and I love the attention that Jeff, Eddie, and Melody and everyone over there give to me and my business.
        </div>
        <div class="vp-review-footer">
          <div class="vp-review-avatar">MW</div>
          <div class="vp-review-info">
            <div class="vp-review-name">Michael Wild</div>
            <div class="vp-review-role">Managing Partner · WFP Law</div>
          </div>
        </div>
      </div>

      <!-- REVIEW 5 -->
      <div class="vp-review-card">
        <div class="vp-review-stars">
          <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
        </div>
        <div class="vp-review-body">
          Velocity Processing is the best in the business when it comes to merchant processing. They have not only been able to save my company a ton in fees, but they have done it with true professionalism as well. The team their goes above and beyond for any of your merchant processing needs. They will also stay accessible after your accounts open as well.
        </div>
        <div class="vp-review-footer">
          <div class="vp-review-avatar">BI</div>
          <div class="vp-review-info">
            <div class="vp-review-name">Ben Isenberg</div>
            <div class="vp-review-role">Manager · First Beat Media</div>
          </div>
        </div>
      </div>

      <!-- REVIEW 6 -->
      <div class="vp-review-card">
        <div class="vp-review-stars">
          <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
        </div>
        <div class="vp-review-body">
          Great company! If you are interested in exceptional customer service, these are your guys. I've been in business over 30 years and used several processors. Velocity has been my processor for 10 years and I'll never change.
        </div>
        <div class="vp-review-footer">
          <div class="vp-review-avatar">RS</div>
          <div class="vp-review-info">
            <div class="vp-review-name">Rick Schefter</div>
            <div class="vp-review-role">Owner · A Great Place To Sit</div>
          </div>
        </div>
      </div>

      <!-- REVIEW 7 -->
      <div class="vp-review-card">
        <div class="vp-review-stars">
          <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
        </div>
        <div class="vp-review-body">
          The amount of value in alleviation I have had due to the professional, transparent, and personal way this company handles their business is immeasurable. In the dark abyss that is the merchant account world Velocity Processing is the light. I could go on and on describing my experience with this company but I will keep it short. Customer for life.
        </div>
        <div class="vp-review-footer">
          <div class="vp-review-avatar">AJ</div>
          <div class="vp-review-info">
            <div class="vp-review-name">Andy Jan</div>
            <div class="vp-review-role">Partner · Local Poke</div>
          </div>
        </div>
      </div>

      <!-- REVIEW 8 -->
      <div class="vp-review-card">
        <div class="vp-review-stars">
          <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
        </div>
        <div class="vp-review-body">
          We have been using velocity for a couple years now and are extremely happy with the rates they give us it most importantly the service when we need anything. Traveling a lot for business can make it challenging at times to process payments on the go but they've always been there to help get it done even when abroad. Highly recommended.
        </div>
        <div class="vp-review-footer">
          <div class="vp-review-avatar">DG</div>
          <div class="vp-review-info">
            <div class="vp-review-name">Danny Godde</div>
            <div class="vp-review-role">CEO · Int'l Source & Supply</div>
          </div>
        </div>
      </div>

      </div><!-- /#vpReviewsTrack -->
        </div><!-- /#vpReviewsMarquee -->
      </div>
    </section>

  </div><!-- /.vh-main -->
</div><!-- /.vh-layout -->
</div><!-- /.vh-wrap -->

  <!-- ============ REVIEWS MARQUEE SCRIPT ============ -->
  <script>
  (function(){
    const marquee = document.getElementById('vpReviewsMarquee');
    const track   = document.getElementById('vpReviewsTrack');
    if (!marquee || !track) return;

    // The -50% keyframe assumes the content is exactly doubled. Clone the
    // original track and hide the copy from assistive technology.
    const clone = track.cloneNode(true);
    clone.removeAttribute('id');
    clone.setAttribute('aria-hidden', 'true');
    marquee.appendChild(clone);
  })();
  </script>

  <!-- ============ FLOATING VIDEO OVERLAY (DRAGGABLE) ============ -->
  <div class="vp-video-overlay" id="vpVideoOverlay" aria-hidden="true">
    <div class="vp-video-header" id="vpVideoHeader">
      <div class="vp-video-title" id="vpVideoTitle">Velocity Video</div>
      <button class="vp-video-close" id="vpVideoClose" aria-label="Close video player">
        &times;
      </button>
    </div>
    <div class="vp-video-body">
      <div class="vp-video-aspect">
        <iframe
          id="vpVideoIframe"
          src=""
          title="Velocity Video"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
          allowfullscreen
        ></iframe>
      </div>
      <div class="vp-video-caption">
        Use the player controls to play, pause, or expand to full screen.
      </div>
    </div>
  </div>

  <!-- ============ FLOATING MINI AUDIO PLAYER ============ -->
  <div class="vp-audio-player" id="vpMiniAudioPlayer" aria-hidden="true">
    <button class="vp-audio-play-pause" id="vpMiniAudioPlayPause" aria-label="Play audio">
      <i class="fa-solid fa-play"></i>
    </button>

    <div class="vp-audio-meta">
      <div class="vp-audio-title" id="vpMiniAudioTitle"></div>
      <div class="vp-audio-time">
        <span id="vpMiniAudioCurrent">0:00</span>
        <span class="vp-audio-separator">/</span>
        <span id="vpMiniAudioDuration">0:00</span>
      </div>
      <div class="vp-audio-progress" id="vpMiniAudioProgressBar">
        <div class="vp-audio-progress-filled" id="vpMiniAudioProgressFilled"></div>
      </div>
    </div>

    <button class="vp-audio-close" id="vpMiniAudioClose" aria-label="Close audio player">
      &times;
    </button>

    <audio id="vpMiniAudioElement"></audio>
  </div>

</main>

<!-- ===========================================================================
Velocity Processing, LLC
Created by Jeff Davidson on November 21, 2025
Last Modified on December 06, 2025 @ 8:01 PM
Modified on October 30, 2026
Visual makeover to match the homepage and portals: soft Velocity-orange,
peach and cream palette (dark background removed), color logo, larger type,
card-brand icons in orange tiles, policy links as a clean list, new Contact
column (phone + message page), bottom bar with Back to Top.
Unchanged: all text, policy links, card-icon pop animation, cookie notice
script, Schedule modal script, and /js/nav.js include.
Modified on November 4, 2026
The ISO / MSP disclosure sentence now sits in a soft rounded peach card
with an orange check icon. Wording unchanged. Card is 20% narrower
(80% of the column, max 448px instead of 560px); it grows taller to fit.
File name: FOOTER.PHP
The purpose of this file is to control the footer at the bottom of every
page, plus the shared cookie notice, Schedule modal, and nav scripts.
============================================================================ -->

<!-- =========================
     FOOTER
     ========================= -->
<footer class="vp-footer">

  <div class="vp-footer-container">

    <div class="vp-footer-grid">

      <!-- =========================
           COLUMN 1 — LOGO + COPYRIGHT + ISO
           ========================= -->
      <div class="vp-footer-col vp-footer-brand">
        <img
          src="/logos/velocity_color_logo.png"
          alt="Velocity Processing Logo"
          class="vp-footer-logo"
        />

        <p class="vp-footer-copy">
          © 2008–2026 Velocity Processing, LLC.<br>
          All rights reserved.
        </p>

        <p class="vp-footer-iso">
          <span class="vp-footer-iso-icon"><i class="fa-solid fa-circle-check"></i></span>
          <span>
            Velocity Processing is a registered Independent Sales Organization (ISO) /
            Member Service Provider (MSP) of Elavon, Inc. Georgia,
            a wholly owned subsidiary of U.S. Bancorp, Minneapolis, MN.
          </span>
        </p>
      </div>

      <!-- =========================
           COLUMN 2 — LICENSED & REGISTERED (card icons)
           ========================= -->
      <div class="vp-footer-col">
        <h2 class="vp-footer-heading">Licensed & Registered</h2>
        <div class="vp-footer-icons">
          <i class="fa-brands fa-cc-visa" aria-label="Visa"></i>
          <i class="fa-brands fa-cc-mastercard" aria-label="Mastercard"></i>
          <i class="fa-brands fa-cc-amex" aria-label="American Express"></i>
          <i class="fa-brands fa-cc-discover" aria-label="Discover"></i>
        </div>
      </div>

      <!-- =========================
           COLUMN 3 — TERMS OF USE & POLICIES
           ========================= -->
      <div class="vp-footer-col">
        <h2 class="vp-footer-heading">Terms of Use &amp; Policies</h2>
        <nav class="vp-footer-links" aria-label="Terms and policies">
          <a href="/policies/terms-of-use.php"><i class="fa-solid fa-file-contract"></i>Website Terms of Use</a>
          <a href="/policies/privacy-policy.php"><i class="fa-solid fa-user-shield"></i>Privacy Policy</a>
          <a href="/policies/refund-policy.php"><i class="fa-solid fa-rotate-left"></i>Refund Policy</a>
          <a href="/policies/sms-privacy.php"><i class="fa-solid fa-comment-sms"></i>SMS Privacy Policy</a>
          <a href="/policies/sms-terms.php"><i class="fa-solid fa-message"></i>SMS Terms</a>
        </nav>
      </div>

      <!-- =========================
           COLUMN 4 — CONTACT
           ========================= -->
      <div class="vp-footer-col">
        <h2 class="vp-footer-heading">Contact</h2>
        <a href="tel:3059177000" class="vp-footer-call">
          <span class="vp-footer-call-icon"><i class="fa-solid fa-phone"></i></span>
          <span class="vp-footer-call-num">305-917-7000</span>
        </a>
        <a href="/support/send-us-a-message.php" class="vp-footer-btn">
          <i class="fa-solid fa-paper-plane"></i>Send Us a Message
        </a>
      </div>

    </div><!-- /vp-footer-grid -->

    <!-- =========================
         BOTTOM BAR
         ========================= -->
    <div class="vp-footer-bottom">
      <p class="vp-footer-powered">
        Powered by <span>The Scientist</span>
      </p>
      <a href="#" class="vp-footer-top" id="vpFooterTop">
        <i class="fa-solid fa-arrow-up"></i>Back to Top
      </a>
    </div>

  </div>
</footer>

<!-- =========================
     FOOTER STYLES
     (all scoped to .vp-footer so they never touch page styles)
     ========================= -->
<style>
  .vp-footer {
    --vf-orange: #FF6600;
    --vf-orange-soft: #ffbc8a;
    --vf-peach: #fff1e6;
    --vf-grad: linear-gradient(135deg, #ff6600, #ff6600 40%, #ffbc8a);
    --vf-ink: #2d2a28;
    --vf-text: #4a4440;
    --vf-muted: #8a7f78;
    --vf-line: #f3dccb;

    position: relative;
    overflow: hidden;
    margin-top: 60px;
    padding: 70px 28px 34px;
    background:
      radial-gradient(900px 360px at 100% 0%, rgba(255, 102, 0, 0.14), transparent 65%),
      radial-gradient(700px 300px at 0% 100%, rgba(255, 188, 138, 0.22), transparent 65%),
      linear-gradient(180deg, #fffaf6 0%, #fff1e6 100%);
    color: var(--vf-ink);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
      "Avenir Next", "Segoe UI", sans-serif;
  }
  .vp-footer *, .vp-footer *::before, .vp-footer *::after { box-sizing: border-box; }

  /* Orange gradient rule across the top */
  .vp-footer::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 5px;
    background: var(--vf-grad);
  }
  /* Soft decorative circle */
  .vp-footer::after {
    content: "";
    position: absolute;
    width: 420px; height: 420px;
    right: -140px; top: -200px;
    border-radius: 50%;
    background: var(--vf-grad);
    opacity: 0.08;
    pointer-events: none;
  }

  .vp-footer-container {
    position: relative;
    z-index: 1;
    max-width: 1800px;
    margin: 0 auto;
  }

  /* FOUR-COLUMN GRID */
  .vp-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 48px;
    align-items: start;
  }

  .vp-footer-heading {
    margin: 0 0 20px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vf-orange);
  }

  /* COLUMN 1 — BRAND */
  .vp-footer-logo {
    display: block;
    width: 230px;
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
  }
  .vp-footer-copy {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 700;
    color: var(--vf-ink);
  }
  .vp-footer-iso {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    width: 80%;           /* 20% narrower than the column */
    max-width: 448px;     /* was 560px (20% narrower) */
    padding: 16px 22px 16px 16px;
    border-radius: 26px;
    border: 1.5px solid var(--vf-orange-soft);
    background: linear-gradient(135deg, #ffffff, var(--vf-peach));
    box-shadow: 0 10px 24px rgba(255, 102, 0, 0.10);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--vf-text);
    text-align: left;
  }
  .vp-footer-iso-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vf-grad);
    color: #ffffff;
    font-size: 17px;
    box-shadow: 0 6px 14px rgba(255, 102, 0, 0.28);
  }

  /* COLUMN 2 — CARD ICONS (pop animation kept) */
  .vp-footer-icons {
    display: grid;
    grid-template-columns: repeat(2, 84px);
    gap: 14px;
  }
  .vp-footer-icons i {
    width: 84px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: var(--vf-orange);
    background: #ffffff;
    border: 1.5px solid var(--vf-orange-soft);
    box-shadow: 0 10px 22px rgba(255, 102, 0, 0.12);
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }
  .vp-footer-icons.vp-footer-icons--active i {
    animation: vp-icon-pop 650ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
  }
  .vp-footer-icons.vp-footer-icons--active i:nth-child(1) { animation-delay: 0s; }
  .vp-footer-icons.vp-footer-icons--active i:nth-child(2) { animation-delay: 0.08s; }
  .vp-footer-icons.vp-footer-icons--active i:nth-child(3) { animation-delay: 0.16s; }
  .vp-footer-icons.vp-footer-icons--active i:nth-child(4) { animation-delay: 0.24s; }

  @keyframes vp-icon-pop {
    0%   { opacity: 0; transform: translateY(10px) scale(0.9); }
    60%  { opacity: 1; transform: translateY(-2px) scale(1.03); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* COLUMN 3 — POLICY LINKS */
  .vp-footer-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .vp-footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 8px 12px 8px 0;
    border-radius: 14px;
    font-size: 19px;
    font-weight: 600;
    color: var(--vf-text);
    text-decoration: none;
    transition: color 0.15s ease, transform 0.15s ease;
  }
  .vp-footer-links a i {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 17px;
    color: var(--vf-orange);
    background: #ffffff;
    border: 1.5px solid var(--vf-line);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .vp-footer-links a:hover,
  .vp-footer-links a:focus-visible {
    color: var(--vf-orange);
    transform: translateX(3px);
    outline: none;
  }
  .vp-footer-links a:hover i,
  .vp-footer-links a:focus-visible i {
    background: var(--vf-grad);
    border-color: transparent;
    color: #ffffff;
  }

  /* COLUMN 4 — CONTACT */
  .vp-footer-call {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    text-decoration: none;
  }
  .vp-footer-call-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--vf-orange);
    background: #ffffff;
    color: var(--vf-orange);
    font-size: 20px;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .vp-footer-call:hover .vp-footer-call-icon { background: var(--vf-orange); color: #ffffff; }
  .vp-footer-call-num {
    font-size: 26px;
    font-weight: 800;
    color: var(--vf-orange);
  }
  .vp-footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 26px;
    border-radius: 999px;
    background: var(--vf-grad);
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(255, 102, 0, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .vp-footer-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(255, 102, 0, 0.4);
  }

  /* BOTTOM BAR */
  .vp-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 50px;
    padding-top: 26px;
    border-top: 1.5px solid var(--vf-line);
  }
  .vp-footer-powered {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--vf-muted);
  }
  .vp-footer-powered span {
    font-weight: 800;
    background: var(--vf-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .vp-footer-top {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    border-radius: 999px;
    border: 2px solid var(--vf-orange);
    background: #ffffff;
    color: var(--vf-orange);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .vp-footer-top:hover { background: var(--vf-orange); color: #ffffff; }

  /* TABLET */
  @media (max-width: 1200px) {
    .vp-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  }

  /* MOBILE */
  @media (max-width: 780px) {
    .vp-footer { padding: 54px 18px 28px; }
    .vp-footer-grid {
      grid-template-columns: 1fr;
      gap: 36px;
      text-align: center;
    }
    .vp-footer-logo { margin: 0 auto 18px; width: 200px; }
    .vp-footer-copy { font-size: 18px; }
    .vp-footer-iso { font-size: 16px; margin: 0 auto; }
    .vp-footer-icons { justify-content: center; grid-template-columns: repeat(4, 70px); gap: 10px; }
    .vp-footer-icons i { width: 70px; height: 54px; font-size: 32px; }
    .vp-footer-links {
      align-items: flex-start;
      width: fit-content;
      margin: 0 auto;
      text-align: left;
    }
    .vp-footer-links a { font-size: 18px; }
    .vp-footer-call { justify-content: center; }
    .vp-footer-bottom { flex-direction: column; text-align: center; }
  }
  @media (max-width: 380px) {
    .vp-footer-icons { grid-template-columns: repeat(2, 70px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .vp-footer-icons i { opacity: 1; transform: none; }
    .vp-footer-icons.vp-footer-icons--active i { animation: none; }
    .vp-footer * { transition: none !important; }
  }
</style>

<!-- =========================
     FOOTER JS (icon animation)
     ========================= -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const footer = document.querySelector(".vp-footer");
    const iconRow = document.querySelector(".vp-footer-icons");

    if (!footer || !iconRow) return;

    if ("IntersectionObserver" in window) {
      const observer = new IntersectionObserver(
        entries => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              iconRow.classList.add("vp-footer-icons--active");
              observer.unobserve(entry.target);
            }
          });
        },
        { threshold: 0.3 }
      );
      observer.observe(footer);
    } else {
      iconRow.classList.add("vp-footer-icons--active");
    }
  });
</script>

<!-- =========================
     FOOTER JS (back to top)
     ========================= -->
<script>
  (function () {
    const topBtn = document.getElementById("vpFooterTop");
    if (!topBtn) return;
    topBtn.addEventListener("click", function (e) {
      e.preventDefault();
      const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
      window.scrollTo({ top: 0, behavior: reduce ? "auto" : "smooth" });
    });
  })();
</script>

<!-- =========================
     COOKIE POPUP
     ========================= -->
<div
  class="vp-cookie-toast"
  id="vpCookieToast"
  role="dialog"
  aria-live="polite"
  aria-label="Cookie notice"
>
  <div class="vp-cookie-title">Cookies & Experience</div>
  <div class="vp-cookie-text">
    Velocity Processing uses cookies to enhance your browsing experience and analyze site traffic.
  </div>
  <div class="vp-cookie-actions">
    <button type="button" id="vpCookieDecline" class="vp-cookie-btn vp-cookie-btn--secondary">
      Decline
    </button>
    <button type="button" id="vpCookieAccept" class="vp-cookie-btn vp-cookie-btn--primary">
      Accept
    </button>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const toast = document.getElementById("vpCookieToast");
    if (!toast) return;

    const acceptBtn = document.getElementById("vpCookieAccept");
    const declineBtn = document.getElementById("vpCookieDecline");

    function getCookie(name) {
      const match = document.cookie.match(new RegExp("(^| )" + name + "=([^;]+)"));
      return match ? decodeURIComponent(match[2]) : null;
    }

    function setCookie(name, value, days) {
      const d = new Date();
      d.setTime(d.getTime() + (days * 86400000));
      document.cookie = name + "=" + encodeURIComponent(value) + ";expires=" + d.toUTCString() + ";path=/";
    }

    const consent = getCookie("vp_cookie_consent");
    if (!consent) toast.classList.add("is-visible");

    function choose(value) {
      setCookie("vp_cookie_consent", value, 365);
      toast.classList.remove("is-visible");
    }

    acceptBtn.addEventListener("click", () => choose("accepted"));
    declineBtn.addEventListener("click", () => choose("declined"));
  });
</script>

<!-- =========================
     SCHEDULE MODAL JS (for header Schedule button)
     ========================= -->
<script>
  (function () {
    const openBtn  = document.getElementById('vpScheduleOpen');
    const overlay  = document.getElementById('vpScheduleOverlay');
    const closeBtn = document.getElementById('vpScheduleClose');

    if (!overlay) return;

    function openScheduleModal() {
      overlay.classList.add('is-open');
      document.body.classList.add('vp-modal-open');
    }

    function closeScheduleModal() {
      overlay.classList.remove('is-open');
      document.body.classList.remove('vp-modal-open');
    }

    if (openBtn) {
      openBtn.addEventListener('click', function (e) {
        e.preventDefault();
        openScheduleModal();
      });
    }

    if (closeBtn) {
      closeBtn.addEventListener('click', function (e) {
        e.preventDefault();
        closeScheduleModal();
      });
    }

    overlay.addEventListener('click', function (e) {
      if (e.target === overlay) {
        closeScheduleModal();
      }
    });

    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape') {
        closeScheduleModal();
      }
    });
  })();
</script>

<!-- =========================
     GLOBAL NAV / MENU JS
     ========================= -->
<script src="/js/nav.js"></script>
<!-- ============ FLOATING MINI AUDIO PLAYER SCRIPT ============ -->
<script>
(function(){
  const triggers       = document.querySelectorAll('.vp-audio-trigger');
  const player         = document.getElementById('vpMiniAudioPlayer');
  const audio          = document.getElementById('vpMiniAudioElement');
  const playPauseBtn   = document.getElementById('vpMiniAudioPlayPause');
  const closeBtn       = document.getElementById('vpMiniAudioClose');
  const titleEl        = document.getElementById('vpMiniAudioTitle');
  const currentTimeEl  = document.getElementById('vpMiniAudioCurrent');
  const durationEl     = document.getElementById('vpMiniAudioDuration');
  const progressBar    = document.getElementById('vpMiniAudioProgressBar');
  const progressFilled = document.getElementById('vpMiniAudioProgressFilled');

  if (!player || !audio) return;

  let currentSrc = '';

  function showPlayer(){
    player.classList.add('is-visible');
    player.setAttribute('aria-hidden','false');
  }
  function hidePlayer(){
    player.classList.remove('is-visible');
    player.setAttribute('aria-hidden','true');
  }

  function formatTime(sec){
    if (!isFinite(sec)) return '0:00';
    const minutes = Math.floor(sec / 60);
    const seconds = Math.floor(sec % 60);
    return `${minutes}:${seconds.toString().padStart(2,'0')}`;
  }

  function updatePlayIcon(){
    const icon = playPauseBtn.querySelector('i');
    if (!icon) return;
    if (audio.paused){
      icon.classList.remove('fa-pause');
      icon.classList.add('fa-play');
      playPauseBtn.setAttribute('aria-label','Play audio');
    } else {
      icon.classList.remove('fa-play');
      icon.classList.add('fa-pause');
      playPauseBtn.setAttribute('aria-label','Pause audio');
    }
  }

  triggers.forEach(btn => {
    btn.addEventListener('click', () => {
      const src   = btn.getAttribute('data-audio-src');
      const label = btn.getAttribute('data-audio-title') || 'Audio';
      if (!src) return;

      if (src === currentSrc){
        if (audio.paused) audio.play();
        else audio.pause();
        updatePlayIcon();
        showPlayer();
        return;
      }

      currentSrc = src;
      audio.src = src;
      titleEl.textContent = label;

      audio.currentTime = 0;
      progressFilled.style.width = '0%';
      currentTimeEl.textContent = '0:00';
      durationEl.textContent = '0:00';

      audio.play().then(() => {
        showPlayer();
        updatePlayIcon();
      }).catch(() => {
        showPlayer();
        updatePlayIcon();
      });
    });
  });

  playPauseBtn.addEventListener('click', () => {
    if (!audio.src) return;
    if (audio.paused) audio.play();
    else audio.pause();
    updatePlayIcon();
  });

  closeBtn.addEventListener('click', () => {
    audio.pause();
    hidePlayer();
  });

  audio.addEventListener('timeupdate', () => {
    if (!audio.duration) return;
    currentTimeEl.textContent = formatTime(audio.currentTime);
    const pct = (audio.currentTime / audio.duration) * 100;
    progressFilled.style.width = `${pct}%`;
  });

  audio.addEventListener('loadedmetadata', () => {
    durationEl.textContent = formatTime(audio.duration);
  });

  audio.addEventListener('play', updatePlayIcon);
  audio.addEventListener('pause', updatePlayIcon);
  audio.addEventListener('ended', () => { updatePlayIcon(); });

  if (progressBar){
    progressBar.addEventListener('click', e => {
      if (!audio.duration) return;
      const rect = progressBar.getBoundingClientRect();
      const clickX = e.clientX - rect.left;
      const pct = Math.min(Math.max(clickX / rect.width, 0), 1);
      audio.currentTime = pct * audio.duration;
    });
  }
})();
</script>

<!-- ============ FLOATING VIDEO OVERLAY SCRIPT (DRAGGABLE, CENTERED) ============ -->
<script>
(function(){
  const triggers   = document.querySelectorAll('.vp-video-trigger');
  const overlay    = document.getElementById('vpVideoOverlay');
  const iframe     = document.getElementById('vpVideoIframe');
  const titleEl    = document.getElementById('vpVideoTitle');
  const closeBtn   = document.getElementById('vpVideoClose');
  const dragHandle = document.getElementById('vpVideoHeader');

  if (!overlay || !iframe || !dragHandle) return;

  function showOverlay(){
    overlay.classList.add('is-visible');
    overlay.setAttribute('aria-hidden','false');
  }

  function hideOverlay(){
    overlay.classList.remove('is-visible');
    overlay.setAttribute('aria-hidden','true');
    iframe.src = '';
  }

  triggers.forEach(btn => {
    btn.addEventListener('click', () => {
      const src   = btn.getAttribute('data-video-src');
      const label = btn.getAttribute('data-video-title') || 'Velocity Video';
      if (!src) return;

      const audioEl    = document.getElementById('vpMiniAudioElement');
      const audioShell = document.getElementById('vpMiniAudioPlayer');
      if (audioEl) audioEl.pause();
      if (audioShell){
        audioShell.classList.remove('is-visible');
        audioShell.setAttribute('aria-hidden','true');
      }

      iframe.src = src;
      titleEl.textContent = label;

      showOverlay();

      const overlayRect = overlay.getBoundingClientRect();
      const top  = Math.max(40, (window.innerHeight - overlayRect.height) / 2);
      const left = Math.max(16, (window.innerWidth  - overlayRect.width)  / 2);

      overlay.style.transform = 'none';
      overlay.style.top  = top + 'px';
      overlay.style.left = left + 'px';
    });
  });

  if (closeBtn) closeBtn.addEventListener('click', hideOverlay);

  document.addEventListener('keydown', e => {
    if (e.key === 'Escape' && overlay.classList.contains('is-visible')) hideOverlay();
  });

  // ---------- DRAG LOGIC ----------
  let isDragging = false;
  let dragOffsetX = 0;
  let dragOffsetY = 0;

  function onMouseDown(e){
    if (e.button !== 0) return;
    isDragging = true;
    const rect = overlay.getBoundingClientRect();
    dragOffsetX = e.clientX - rect.left;
    dragOffsetY = e.clientY - rect.top;
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
  }

  function onMouseMove(e){
    if (!isDragging) return;
    const newLeft = e.clientX - dragOffsetX;
    const newTop  = e.clientY - dragOffsetY;

    const margin = 8;
    const rect   = overlay.getBoundingClientRect();
    const width  = rect.width;
    const height = rect.height;

    const maxLeft = window.innerWidth - width - margin;
    const maxTop  = window.innerHeight - height - margin;

    overlay.style.left = Math.min(Math.max(newLeft, margin), maxLeft) + 'px';
    overlay.style.top  = Math.min(Math.max(newTop,  margin), maxTop)  + 'px';
  }

  function onMouseUp(){
    isDragging = false;
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  }

  function onTouchStart(e){
    if (!e.touches || !e.touches.length) return;
    isDragging = true;
    const touch = e.touches[0];
    const rect  = overlay.getBoundingClientRect();
    dragOffsetX = touch.clientX - rect.left;
    dragOffsetY = touch.clientY - rect.top;
    document.addEventListener('touchmove', onTouchMove, {passive:false});
    document.addEventListener('touchend', onTouchEnd);
    document.addEventListener('touchcancel', onTouchEnd);
  }

  function onTouchMove(e){
    if (!isDragging || !e.touches || !e.touches.length) return;
    e.preventDefault();
    const touch = e.touches[0];
    const newLeft = touch.clientX - dragOffsetX;
    const newTop  = touch.clientY - dragOffsetY;

    const margin = 8;
    const rect   = overlay.getBoundingClientRect();
    const width  = rect.width;
    const height = rect.height;

    const maxLeft = window.innerWidth - width - margin;
    const maxTop  = window.innerHeight - height - margin;

    overlay.style.left = Math.min(Math.max(newLeft, margin), maxLeft) + 'px';
    overlay.style.top  = Math.min(Math.max(newTop,  margin), maxTop)  + 'px';
  }

  function onTouchEnd(){
    isDragging = false;
    document.removeEventListener('touchmove', onTouchMove);
    document.removeEventListener('touchend', onTouchEnd);
    document.removeEventListener('touchcancel', onTouchEnd);
  }

  dragHandle.addEventListener('mousedown', onMouseDown);
  dragHandle.addEventListener('touchstart', onTouchStart, {passive:false});
})();
</script>

</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpsh-oh'},{'server':'p3plzcpnl508234'},{'dcenter':'p3'},{'cp_id':'10765609'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>