PageSourceSearch

https://www.redpanther.io/

html redpanther.io collected 2026-09-29 10:45:55 UTC 57,655 bytes, 1,149 lines download raw bytes

1<!DOCTYPE html><!--  This site was created in Webflow. https://webflow.com  --><!--  Last Published: Fri May 15 2026 21:13:36 GMT+0000 (Coordinated Universal Time)  -->
2<html data-wf-page="69fbadd39b9ba02294f67691" data-wf-site="69fb63b81280810ee9d14519" lang="en">
3<head>
4  <meta charset="utf-8">
5  <title>Webflow Design Company | Minnesota | Red Panther™</title>
6  <meta content="Upgrade your B2B Webflow website or move to Webflow. Web Design, Webflow Development, Migrations, Graphics, Animations, Interactions, and Mobile Responsiveness. Startups, SaaS, B2B, Contractors." name="description">
7  <meta content="Webflow Design Company | Minnesota | Red Panther™" property="og:title">
8  <meta content="Upgrade your B2B Webflow website or move to Webflow. Web Design, Webflow Development, Migrations, Graphics, Animations, Interactions, and Mobile Responsiveness. Startups, SaaS, B2B, Contractors." property="og:description">
9  <meta content="https://cdn.prod.website-files.com/69fb63b81280810ee9d14519/6a078c673692c057ffe48f5f_Exploration%201.png" property="og:image">
10  <meta content="Webflow Design Company | Minnesota | Red Panther™" property="twitter:title">
11  <meta content="Upgrade your B2B Webflow website or move to Webflow. Web Design, Webflow Development, Migrations, Graphics, Animations, Interactions, and Mobile Responsiveness. Startups, SaaS, B2B, Contractors." property="twitter:description">
12  <meta property="og:type" content="website">
13  <meta content="summary_large_image" name="twitter:card">
14  <meta content="width=device-width, initial-scale=1" name="viewport">
15  <meta content="Webflow" name="generator">
16  <link href="home-assets/css/normalize.css" rel="stylesheet" type="text/css">
17  <link href="home-assets/css/webflow.css" rel="stylesheet" type="text/css">
18  <link href="home-assets/css/rp-2026.webflow.css" rel="stylesheet" type="text/css">
19  
19<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
19
20  <link href="home-assets/images/favicon.png" rel="shortcut icon" type="image/png">
21  <link href="home-assets/images/webclip.png" rel="apple-touch-icon">
22  <!-- Reb2b -->
23  
23<script>!function () {var reb2b = window.reb2b = window.reb2b || [];if (reb2b.invoked) return;reb2b.invoked = true;reb2b.methods = ["identify", "collect"];reb2b.factory = function (method) {return function () {var args = Array.prototype.slice.call(arguments);args.unshift(method);reb2b.push(args);return reb2b;};};for (var i = 0; i < reb2b.methods.length; i++) {var key = reb2b.methods[i];reb2b[key] = reb2b.factory(key);}reb2b.load = function (key) {var script = document.createElement("script");script.type = "text/javascript";script.async = true;script.src = "https://s3-us-west-2.amazonaws.com/b2bjsstore/b/" + key + "/reb2b.js.gz";var first = document.getElementsByTagName("script")[0];first.parentNode.insertBefore(script, first);};reb2b.SNIPPET_VERSION = "1.0.1";reb2b.load("7R6G5YHD3P65");}();</script>
23
24  <!-- Google Tag Manager -->
25  
25<script>
vendor: 335 bytes, lines 25-29
25(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
26  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
27  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
28  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
29  })(window,document,'script','dataLayer','
29GTM-NXWH6B9
vendor: 3 bytes, line 29
29');
29</script>
29
30  <!-- End Google Tag Manager -->
31  <!-- Google tag (gtag.js) -->
vendor: 66 bytes, lines 31-32
31
32  <script async src="https://www.googletagmanager.com/gtag/js?id=
32G-54MEDCHJB0
vendor: 14 bytes, lines 32-33
32"></script>
33  
33<script>
34    
vendor: 139 bytes, lines 34-37
34window.dataLayer = window.dataLayer || [];
35    function gtag(){dataLayer.push(arguments);}
36    gtag('js', new Date());
37    gtag('config', '
37G-54MEDCHJB0
vendor: 6 bytes, lines 37-38
37');
38  
38</script>
38
39</head>
40<body>
41  <!-- Google Tag Manager (noscript) -->
vendor: 70 bytes, lines 41-42
41
42  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
42GTM-NXWH6B9
vendor: 87 bytes, lines 42-44
42"
43  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
44  
44<!-- End Google Tag Manager (noscript) -->
45  <div class="page-wrapper u-minh-100vh">
46    <div data-animation="default" class="nav u-mode-light w-nav" data-easing2="ease" data-easing="ease" data-wf--nav--settings-theme="base" data-collapse="medium" role="banner" data-duration="0" data-doc-height="1">
47      <div class="u-d-none w-embed">
48        <style>
49	/* Mobile menu button animation */
50  .nav-menu_btn.w--open .cc-top {
51    transform: translateY(9px) rotate(45deg);
52  }
53  .nav-menu_btn.w--open .cc-middle {
54    opacity: 0;
55    transform: translateY(0);
56  }
57  .nav-menu_btn.w--open .cc-bottom {
58    transform: translateY(-9px) rotate(-45deg);
59  }
60  /* When a nav dropdown is open.. */
61  /* ..Rotate narrow */
62  .nav-link.w--open .nav-dropdown_arrow {
63    transform: rotate(180deg)
64  }
65  /* ..Show overlay on desktop */
66  @media (min-width: 992px) {
67    .nav-menu:has(.nav-link.w--open) .nav-dropdown_overlay {
68      display: block;
69    }
70  }
71  /* Lock body scroll when mobile nav is open */
72  body:has( .w-nav-button.w--open) {
73    overflow: hidden;
74  }
75  /* Nav CTA wrapper mode when nav menu hidden */
76  @media (min-width: 992px) {
77    .nav-menu + .nav-cta-wrapper {
78      margin-left: 0;
79    }
80  }
81</style>
82      </div>
83      <div class="u-d-none w-embed w-script">
84        
84<script>
85	//---- Skip to <main> backup if #main anchor link isn't set ----
86  document.addEventListener('DOMContentLoaded', () => {
87    const skipLinkEle = document.getElementById('skip-link');
88    if (!skipLinkEle) return;
89    skipLinkEle.addEventListener('click', handleSkipLink);
90    skipLinkEle.addEventListener('keydown', handleSkipLink);
91  });
92  function handleSkipLink(e) {
93    if (e.type === 'keydown' && e.key !== 'Enter') return;
94    e.preventDefault();
95    const target = document.querySelector('main');
96    target.setAttribute('tabindex', '-1');
97    target.focus();
98  }
99</script>
99
100      </div>
101      <a id="skip-link" href="#main" class="nav-skip-link">Skip to Main Content</a>
102      <div class="container cc-nav width">
103        <a href="/" class="nav-logo_link w-nav-brand"><img src="home-assets/images/red-panther-svg-logo-dark.svg" loading="lazy" alt="" class="im-brand">
104          <div>Red Panther</div>
105        </a>
106        <div class="u-d-none">
107          <div class="nav-menu_btn w-nav-button">
108            <div class="nav-menu_btn-bar cc-top"></div>
109            <div class="nav-menu_btn-bar cc-middle"></div>
110            <div class="nav-menu_btn-bar cc-bottom"></div>
111          </div>
112        </div>
113        <nav role="navigation" class="nav-menu u-d-none w-nav-menu">
114          <div class="nav-dropdown_overlay"></div>
115        </nav>
116        <div class="nav-cta-wrapper">
117          <div data-wf--button--button-variant="secondary" class="button w-variant-052759b4-b398-e98d-c28c-099b380d4426">
118            <div aria-hidden="true" class="btn-text">Book a call</div>
119            <a href="/contact" class="u-link-cover w-inline-block">
120              <div class="u-sr-only">Book a call</div>
121            </a>
122          </div>
123        </div>
124      </div>
125    </div>
126    <div class="custom-code-component">
127      <div class="w-embed">
128        <style>
129  /* Col pad design mode indicator */
130  html.wf-design-mode .row .col:has( .slot)::before,
131  html.wf-design-mode .row .col:has( .slot)::after {
132    content: "";
133    position: absolute;
134    top: 0;
135    bottom: 0;
136    width: calc(var(--_layout---grid--gap-main) / 2);
137    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3' viewBox='0 0 3 3' fill='none'%3E%3Cg clip-path='url(%23clip0_481_2070)'%3E%3Cpath d='M2.99997 0.970703L0.969971 3.0007H2.02997L2.99997 2.0307V0.970703Z' fill='%23259d4d'/%3E%3Cpath d='M0.97 0L0 0.97V2.03L2.03 0H0.97Z' fill='%23259d4d'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_481_2070'%3E%3Crect width='3' height='3' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");    background-repeat: repeat;
138    background-size: 4px;
139    opacity: 0;
140    pointer-events: none;
141  }
142  html.wf-design-mode .col:has(>.slot)::before {
143    left: 0;
144  }
145  html.wf-design-mode .col:has(>.slot)::after {
146    right: 0;
147  }
148  html.wf-design-mode .col:has(>.slot):hover::before,
149  html.wf-design-mode .col:has(>.slot):hover::after {
150    opacity: 0.5;
151  }
152  /* Remove pointer events on overlays for easier canvas editing */
153  html.wf-design-mode .u-link-cover {
154    pointer-events: none;
155  }
156  html.wf-design-mode .btn-text {
157    pointer-events: auto;
158  }
159  /* Space tab panes */
160  html.wf-design-mode .tabs-pane:has(+.tabs-pane) {
161  	margin-bottom: var(--_layout---grid--gap-main);
162  }
163</style>
164      </div>
165      <div class="w-embed">
166        <style>
167  /* Text Selection Color */
168  ::selection {
169    background: var(--primary--text);
170    color: var(--primary--background);
171  }
172  ::-moz-selection {
173    background: var(--primary--text);
174    color: var(--primary--background);
175  }
176  /* Apply font smoothing */
177  body {
178    -webkit-font-smoothing: antialiased;
179    -moz-font-smoothing: antialiased;
180    -o-font-smoothing: antialiased;
181  }
182  /* Ensure column stack on increased default browser font size (for accessibility) */
183  body.font-size-increased .row { 
184    container-type: inline-size; 
185  }
186  body.font-size-increased {
187    @container (max-width: 40rem) {
188      .col:not([data-wf--grid-column--column-size="shrink"]) {
189        flex: 0 0 100% !important;
190        max-width: 100% !important;
191      }
192    }
193  }
194  /* Rich text modifiers */
195  .w-richtext>:first-child {
196    margin-top: 0;
197  }
198  /* Line clamp modifiers */
199  .u-text-clamp-1 {
200    -webkit-line-clamp: 1;
201    -webkit-box-orient: vertical;
202  }
203  .u-text-clamp-2 {
204    -webkit-line-clamp: 2;
205    -webkit-box-orient: vertical;
206  }
207  .u-text-clamp-3 {
208    -webkit-line-clamp: 3;
209    -webkit-box-orient: vertical;
210  }
211  /* Row/col gap modifiers */
212  .row.row-gap-0 .col {
213    --_layout---grid--gap-main: 0;
214  }
215  .row.row-gap-0:has( .col[class*="contain"]) .col {
216    --_layout---grid--gap-main: 1px;
217  }
218  .row.row-gap-md .col {
219    --_layout---grid--gap-main: var(--_layout---grid--gap-md);
220  }
221  .row.row-gap-sm .col {
222    --_layout---grid--gap-main: var(--_layout---grid--gap-sm);
223  }
224  .row.row-gap-button .col {
225    --_layout---grid--gap-main: var(--_layout---grid--gap-button);
226  }
227  /* Build mode modifiers */
228  .slot .button:not([data-slider]) {
229    align-self: flex-start;
230  }
231  .slot > *:last-child,
232  .slot > .heading-component:last-child *,
233  .slot > .rich-text-component:last-child .rich-text > *:last-child,
234  .rich-text-component.u-mb-0 .rich-text > *:last-child,
235  .eyebrow-component.u-mb-0 .eyebrow {
236    margin-bottom: 0;
237  }
238  .slot.cc-column > .eyebrow-component {
239    align-self: start;
240  }
241  .card:has(>.u-link-cover:focus-visible) {
242    outline: 2px solid var(--primary--accent);
243    outline-offset: 2px;
244  }
245  .section:has( > .container > .slot > [data-wf--image--settings-aspect-ratio="background"]),
246  .page-wrapper:has( [data-wf--image--settings-aspect-ratio="background"]) {
247    background: transparent !important;
248    z-index: 1;
249  }
250  .card > .slot > [data-wf--image--settings-aspect-ratio="background"] {
251    z-index: 0;
252  }
253  .card > .slot > *:not([data-wf--image--settings-aspect-ratio="background"]) {
254    z-index: 1;
255  }
256  /* Load animation FOUS */
257  html:not(.wf-design-mode) [data-animate="stagger-children"] > * {
258    opacity: 0;
259    visibility: hidden;
260  }
261  .move-this {
262  will-change: transform; /* Hint to the browser for smoother performance */
263}
264</style>
265      </div>
266      <div class="w-embed w-script">
267        
267<script>
268  // ---- Detect default and mark default font size increase (for accessibility) ----
269  (function() {
270    function detectFontSizeIncrease() {
271      // Get the root font size in pixels
272      const rootFontSize = parseFloat(
273        getComputedStyle(document.documentElement).fontSize
274      );
275      // Default is typically 16px
276      const defaultSize = 16;
277      const multiplier = rootFontSize / defaultSize;
278      // Add or remove class based on multiplier
279      if (multiplier >= 2) {
280        document.body.classList.add('font-size-increased');
281      } else {
282        document.body.classList.remove('font-size-increased');
283      }
284    }
285    // Run on load
286    detectFontSizeIncrease();
287    // Watch for changes (when user adjusts font size)
288    const observer = new ResizeObserver(() => {
289      detectFontSizeIncrease();
290    });
291    observer.observe(document.documentElement);
292  })();
293  // ---- Update foot year to current year ----
294  document.addEventListener('DOMContentLoaded', function() {
295    document.querySelectorAll('[data-footer-year]').forEach(el => {
296      el.textContent = new Date().getFullYear();
297    });
298  });
299</script>
299
300        
300<script>
301  // Register the ScrollTrigger plugin
302gsap.registerPlugin(ScrollTrigger);
303// Loop through each element to ensure they trigger based on their own position
304gsap.utils.toArray(".move-this").forEach((element) => {
305  gsap.to(element, {
306    y: -100, // Move up by 100 pixels
307    ease: "none", // Keeps the movement linear with the scroll
308    scrollTrigger: {
309      trigger: element,
310      start: "top bottom", // Animation starts when the top of the element hits the bottom of the viewport
311      end: "bottom top",   // Animation ends when the bottom of the element hits the top of the viewport
312      scrub: true,         // Links the animation progress to the scrollbar
313      markers: false        // Set to true if you need to debug the start/end points
314    }
315  });
316});
317</script>
317
318      </div>
319      <div>
320        <div>
321          <div class="w-embed">
322            <style>
323  /* Set light/dark theme on HTML */
324  :root {
325    color-scheme: light dark;
326  }
327  @media (prefers-color-scheme: dark) {
328    /* Reset Webflow injected Lightning CSS Polyfill */
329    --lightningcss-light: ;
330    --lightningcss-dark: initial;
331  }
332  @media (prefers-color-scheme: light) {
333    /* Reset Webflow injected Lightning CSS Polyfill */
334    --lightningcss-light: initial;
335    --lightningcss-dark: ;
336    /* Canvas modifiers to show the toggle state in Designer */
337    html.wf-design-mode [data-theme-toggle="checkbox"]::before {
338      transform: translateX(1.5em);
339    }
340    html.wf-design-mode [data-theme-toggle="dark-label"] {
341      display: none;
342    }
343    html.wf-design-mode [data-theme-toggle="light-label"] {
344      display: block;
345    }
346  }
347  /* Toggle switch styling */
348  [data-theme-toggle="checkbox"]::before {
349    content: "";
350    position: absolute;
351    width: 1.1em;
352    height: 1.1em;
353    border-radius: 50%;
354    background-color: var(--primary--text);
355    top: 0.2em;
356    left: 0.2em;
357    transition: transform 0.3s ease;
358  }
359  [data-theme-toggle="checkbox"]:checked::before {
360    transform: translateX(1.5em);
361  }
362</style>
363          </div>
364          <div class="w-embed w-script"><!--  Mast Theme Toggle JS  -->
365            
365<script src="https://cdn.jsdelivr.net/gh/nocodesupplyco/mast@latest/theme-toggle.min.js"></script>
365
366          </div>
367        </div>
368        <div>
369          <div class="w-embed">
370            <style>
371  /* Reset apple form styles */
372  input, textarea, select { 
373    -webkit-appearance: none; 
374    -moz-appearance: none; 
375    appearance: none; border-radius: 0; 
376    background-image: none; 
377  }
378  /* Adjust input autofill to brand colors */
379  input:-webkit-autofill,
380  input:-webkit-autofill:focus {
381    background-color: var(--primary--background) !important;
382    color: var(--primary--text) !important;
383    -webkit-box-shadow: 0 0 0 50px var(--primary--background) inset;
384    -webkit-text-fill-color: var(--primary--text);
385  }
386  /* Select input custom arrow */
387  .input-group:has(.input.cc-select)::after {
388    content: "";
389    position: absolute;
390    top: 50%;
391    right: 1.5rem;
392    border-top: 2px solid var(--primary--text);
393    border-right: 2px solid var(--primary--text);
394    transform: translateY(-90%) rotate(135deg);
395    width: 0.4rem;
396    height: 0.4rem;
397    pointer-events: none;
398  }
399</style>
400          </div>
401        </div>
402        <div>
403          <div class="w-embed"><!--  Phosphor regular icons  -->
404            <link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/[email protected]/src/regular/style.css">
405          </div>
406        </div>
407        <div data-custom-code="marquee">
408          <div class="w-embed">
409            <style>
410  /* Marquee */
411  @keyframes marquee-scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
412  @keyframes marquee-scroll-right { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } }
413  @keyframes marquee-scroll-up { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } }
414  @keyframes marquee-scroll-down { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } }
415  .marquee-component[data-marquee-pause-on-hover="true"]:hover .marquee-group {
416    animation-play-state: paused;
417  }
418  .marquee-component[data-marquee-reverse="false"] .marquee-group {
419    animation: marquee-scroll-left var(--marquee-duration) linear infinite;
420  }
421  .marquee-component[data-marquee-reverse="true"] .marquee-group {
422    animation: marquee-scroll-right var(--marquee-duration) linear infinite;
423  }
424  .marquee-component[data-wf--marquee--settings-orientation="vertical"][data-marquee-reverse="false"] .marquee-group {
425    animation: marquee-scroll-down var(--marquee-duration) linear infinite;
426  }
427  .marquee-component[data-wf--marquee--settings-orientation="vertical"][data-marquee-reverse="true"] .marquee-group {
428    animation: marquee-scroll-up var(--marquee-duration) linear infinite;
429  }
430  .marquee-component:not([data-wf--marquee--settings-orientation="vertical"])[data-marquee-fade-edges="true"] {
431    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
432    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
433  }
434  .marquee-component[data-wf--marquee--settings-orientation="vertical"][data-marquee-fade-edges="true"] {
435    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
436    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
437  }
438</style>
439          </div>
440        </div>
441        <div data-custom-code="accordion">
442          <div class="w-embed">
443            <style>
444  /* Accordion */
445  :root {
446    interpolate-size: allow-keywords; /* To animate accordions */
447  }
448  details[open] .accordion-icon {
449    transform: rotate(45deg);
450  }
451  details[data-accordion-animating='closing'] > [data-accordion='content'] {
452    display: block;
453  }
454  summary::-webkit-details-marker {
455    display: none; /* Hide older Safari's default disclosure arrow */
456  }
457</style>
458          </div>
459          <div class="w-embed w-script"><!--  Mast Accordion JS  -->
460            
460<script defer="" src="https://cdn.jsdelivr.net/gh/nocodesupplyco/mast@b014a1b/accordion.min.js"></script>
460
461          </div>
462        </div>
463        <div data-custom-code="modal">
464          <div class="w-embed">
465            <style>
466  /* Modal */
467  body:has(dialog[open]) {
468    overflow: hidden !important;
469  }
470  dialog.modal[open] {
471    animation: fadein 400ms ease-out forwards;
472  }
473  dialog.modal::backdrop {
474    background: color-mix(in srgb, var(--_color---neutral--black) 80%, transparent);
475  }
476  @keyframes fadein{
477    0%{
478      opacity:0;
479    }
480    100%{
481      opacity:1;
482    }
483  }
484  dialog::-webkit-scrollbar {
485    width: 10px;
486  }            
487  dialog::-webkit-scrollbar-track {
488    border-radius: 10px;
489    background-color: transparent;
490  }            
491  dialog::-webkit-scrollbar-thumb {
492    border-radius: 10px;
493    border: 2px solid var(--primary--background);
494    background: var(--primary--text);
495  }
496  dialog::-webkit-scrollbar-thumb:window-inactive {
497    background: var(--primary--text);
498  }
499</style>
500          </div>
501          <div class="w-embed w-script"><!--  Mast Modal JS  -->
502            
502<script defer="" src="https://cdn.jsdelivr.net/gh/nocodesupplyco/mast@e3479b3/modal.min.js"></script>
502
503          </div>
504        </div>
505        <div data-custom-code="slider">
506          <div class="w-embed"><!--  Swiper Slider CSS  -->
507            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
508            <style>
509  /* Slider */
510  .swiper-button-disabled {
511    opacity: 0.5;
512    pointer-events: none;
513  }
514  [data-slider="component"] {
515    --lg: 3; /* Desktop (992px+) */
516    --md: 2; /* Tablet (768-991px) */
517    --sm: 1; /* Mobile Landscape (480-767px) */
518    --xs: 1; /* Mobile Portrait (0-479px) */
519    --gap: 24px; /* Spacing between slides */
520    --current-slides-per-view: var(--xs); /* Current active slides per view (changes with media queries) */
521  }
522  @media (min-width: 480px) and (max-width: 767px) {
523    [data-slider="component"] {--current-slides-per-view: var(--sm);}
524  }
525  @media (min-width: 768px) and (max-width: 991px) {
526    [data-slider="component"] {--current-slides-per-view: var(--md);}
527  }
528  @media (min-width: 992px) {
529    [data-slider="component"] {--current-slides-per-view: var(--lg);}
530  }
531  [data-slider="component"] .swiper-slide {
532    width: calc((100% - (var(--current-slides-per-view) - 1) * var(--gap)) / var(--current-slides-per-view)) !important;
533    margin-right: var(--gap);
534  }
535  [data-slider-overflow="false"] {
536    overflow: hidden;
537  }
538  [data-slider-overflow="true"] {
539    overflow: visible !important;
540  }
541  [data-slider="component"] .swiper-wrapper:empty {
542    min-height: 300px;
543  }
544  [data-slider="component"] .swiper-wrapper .w-dyn-list,
545  [data-slider="component"] .swiper-wrapper .w-dyn-items,
546  [data-slider="component"] .swiper-wrapper .w-dyn-item {
547    display: contents;
548  }
549</style>
550          </div>
551          <div class="w-embed w-script"><!--  Swiper Slider JS  -->
552            
552<script defer="" src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
552
553            <!--  Mast Slider JS (must be used with Swiper)  -->
554            
554<script defer="" src="https://cdn.jsdelivr.net/gh/nocodesupplyco/mast@latest/slider.min.js"></script>
554
555          </div>
556        </div>
557        <div data-custom-code="inline-video">
558          <div class="w-embed w-script"><!--  Mast Inline Video JS  -->
559            
559<script defer="" src="https://cdn.jsdelivr.net/gh/nocodesupplyco/mast@latest/inline-video.min.js"></script>
559
560          </div>
561        </div>
562        <div data-custom-code="tabs">
563          <div class="w-embed">
564            <style>
565  /* Tab pane animations  */
566  .tabs-pane {
567    animation: tabsFadeIn 0.5s ease;
568  }
569  @keyframes tabsFadeIn {
570    from { opacity: 0; }
571    to { opacity: 1; }
572  }
573  .tabs-pane[aria-hidden="true"] {
574    display: none;
575  }
576  /* Vertical menu mods  */
577  [data-wf--tabs-menu--settings-alignment="vertical"] .tabs-link {
578    border-bottom: none;
579    border-left: 2px solid var(--primary--border);
580  }
581  [data-wf--tabs-menu--settings-alignment="vertical"] .tabs-link.cc-active {
582    border-color: var(--primary--text);
583  }
584  [data-wf--tabs-menu--settings-alignment="vertical"] .tabs-autoplay-progress {
585    top: 0;
586    right: auto;
587    bottom: 0;
588    left: -2px;
589    width: 2px;
590    height: 0%;
591  }
592  /* Autoplay animation  */
593  .tabs-menu[data-tabs-autoplay="true"] .tabs-link[aria-selected="true"] .tabs-autoplay-progress {
594    animation: autoplayProgress var(--autoplay-duration, 5s) linear forwards;
595  }
596  .tabs-component.autoplay-paused .tabs-menu[data-tabs-autoplay="true"] .tabs-link[aria-selected="true"] .tabs-autoplay-progress {
597    animation-play-state: paused;
598  }
599  @keyframes autoplayProgress {
600    from { width: 0%; }
601    to { width: 100%; }
602  }
603  .tabs-component .tabs-menu[data-wf--tabs-menu--settings-alignment="vertical"][data-tabs-autoplay="true"] .tabs-link[aria-selected="true"] .tabs-autoplay-progress {
604    animation: autoplayProgressVertical var(--autoplay-duration, 5s) linear forwards;
605  }
606  .tabs-component.autoplay-paused .tabs-menu[data-wf--tabs-menu--settings-alignment="vertical"][data-tabs-autoplay="true"] .tabs-link[aria-selected="true"] .tabs-autoplay-progress {
607    animation-play-state: paused;
608  }
609  @keyframes autoplayProgressVertical {
610    from { height: 0%; }
611    to { height: 100%; }
612  }
613  /* Play/pause button  */
614  .tabs-component.autoplay-paused .tabs-autoplay-toggle_pause {
615    display: none;
616  }
617  .tabs-component.autoplay-paused .tabs-autoplay-toggle_play {
618    display: flex;
619  }
620  /* Mobile dropdown */
621  @media (max-width: 767px) {
622    .tabs-menu[data-tab-mobile-dropdown="true"] .tabs-menu_dropdown-toggle {
623      display: flex;
624    }
625    .tabs-menu[data-tab-mobile-dropdown="true"] .tabs-menu_dropdown-toggle.cc-open {
626      border-radius: var(--_components---button--border-radius) var(--_components---button--border-radius) 0 0;
627    }
628    .tabs-menu[data-tab-mobile-dropdown="true"] .tabs-menu_dropdown-toggle.cc-open .tabs-menu_dropdown-arrow {
629      transform: rotate(180deg);
630    }
631    .tabs-menu[data-tab-mobile-dropdown="true"] .tabs-menu_dropdown-menu {
632      display: none;
633      position: absolute;
634      top: calc(100% - 1px);
635      left: 0;
636      right: 0;
637      background: var(--primary--background);
638      border: 1px solid var(--primary--border);
639      border-radius: 0 0 var(--_components---button--border-radius) var(--_components---button--border-radius);
640      z-index: 10;
641      max-height: 300px;
642      overflow-x: hidden;
643      overflow-y: auto;
644    }
645    .tabs-menu[data-tab-mobile-dropdown="true"] .tabs-menu_dropdown-menu.cc-open {
646      display: block;
647    }
648    .tabs-menu[data-tab-mobile-dropdown="true"] .slot.cc-tabs-menu {
649      display: flex;
650      flex-direction: column;
651    }
652    .tabs-menu[data-tab-mobile-dropdown="true"] .tabs-link {
653      border: none;
654    }
655    .tabs-menu[data-tab-mobile-dropdown="true"] .tabs-link.cc-active {
656      background-color: var(--primary--border);
657    }
658  }
659</style>
660          </div>
661          <div class="w-embed w-script"><!--  Mast Tabs JS  -->
662            
662<script defer="" src="https://cdn.jsdelivr.net/gh/nocodesupplyco/mast@latest/tabs.min.js"></script>
662
663          </div>
664        </div>
665      </div>
666    </div>
667    <div class="u-d-none w-embed w-script"><!--  GSAP Libraries  -->
668      
668<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
668
669      
669<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
669
670      
670<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/index.min.js"></script>
670
671      
671<script>
672window.addEventListener("DOMContentLoaded", () => {
673  gsap.registerPlugin(ScrollTrigger);
674  // Small timeout to ensure the DOM and styles are fully painted
675  setTimeout(() => {
676    const items = document.querySelectorAll(".move-this");
677    items.forEach((el) => {
678      gsap.to(el, {
679        y: -800, // Distance to move up
680        ease: "power1.out", // Adds a smooth deceleration
681        scrollTrigger: {
682          trigger: el,
683          start: "top bottom",
684          end: "bottom top",
685          scrub: 1.5, // The higher the number, the smoother/slower the "catch up"
686          markers: false 
687        }
688      });
689    });
690    ScrollTrigger.refresh();
691  }, 100);
692});
693</script>
693
694    </div>
695    <main class="page-main u-mode-light">
696      <div class="svg-gradient w-embed"><svg width="100%" height="100%" viewbox="0 0 1920 5845" fill="none" xmlns="http://www.w3.org/2000/svg">
697          <g filter="url(#filter0_f_403_106)">
698            <path d="M2451.56 720.2C2299.23 873.367 1979.76 1196.9 1920.56 1265.7C1846.56 1351.7 1501 1893.7 1510 2006.7C1519 2119.7 2157.5 2867.7 2157.5 2938.7C2157.5 3009.7 247.562 2924.2 212.062 2938.7C176.562 2953.2 -212.502 3523.2 -200.502 3564.7C-188.502 3606.2 177.563 3953.7 225.063 4078.2C272.563 4202.7 427.5 4590.2 416 4640.2C406.8 4680.2 79.73 4918.53 40.0634 5124.2" stroke="#EB1B3A" stroke-opacity="0.31" stroke-width="423" stroke-linecap="round"></path>
699          </g>
700          <defs>
701            <filter id="filter0_f_403_106" x="-920.973" y="0.000183105" width="4092.74" height="5844.44" filterunits="userSpaceOnUse" color-interpolation-filters="sRGB">
702              <feflood flood-opacity="0" result="BackgroundImageFix">
703              <feblend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape">
704              <fegaussianblur stddeviation="254.35" result="effect1_foregroundBlur_403_106">
705            </fegaussianblur></feblend></feflood></filter>
706          </defs>
707        </svg></div>
708      <section class="section u-pt-0">
709        <div class="container">
710          <div class="hero-content">
711            <div data-poster-url="videos/red-flare-500k_poster.0000000.jpg" data-video-urls="videos/red-flare-500k_mp4.mp4,videos/red-flare-500k_webm.webm" data-autoplay="true" data-loop="true" data-wf-ignore="true" class="u-img-cover u-d-none w-background-video w-background-video-atom"><video id="be0c9af4-9384-7139-8e7d-a17e0243bbd6-video" autoplay="" loop="" style="background-image:url(&quot;home-assets/videos/red-flare-500k_poster.0000000.jpg&quot;)" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover">
712                <source src="home-assets/videos/red-flare-500k_mp4.mp4" data-wf-ignore="true">
713                <source src="home-assets/videos/red-flare-500k_webm.webm" data-wf-ignore="true">
714              </video>
715              <div data-wf--image--settings-aspect-ratio="4x3" class="img-component"><img class="u-img-cover" src="home-assets/images/flare-new.avif" width="Auto" alt="" sizes="(max-width: 800px) 100vw, 800px" data-wf--image-fit--image-fit="cover---center" loading="lazy" fetchpriority="" srcset="home-assets/images/flare-new-p-500.avif 500w, home-assets/images/flare-new-p-800.avif 800w, home-assets/images/flare-new-p-1080.avif 1080w, home-assets/images/flare-new.avif 1328w">
716                <div class="img-component_bg-overlay"></div>
717              </div>
718            </div>
719            <div class="persp-wrap">
720              <div class="persp-clip"></div>
721              <div class="persp-form">
722                <div class="bg-vid-hp move-this">
723                  <div data-poster-url="videos/3d_house_test_ultra_poster.0000000.jpg" data-video-urls="videos/3d_house_test_ultra_mp4.mp4,videos/3d_house_test_ultra_webm.webm" data-autoplay="true" data-loop="true" data-wf-ignore="true" class="u-img-cover hp-vid w-background-video w-background-video-atom"><video id="7df3fc11-a237-1ee2-fdf9-df03031ca106-video" autoplay="" loop="" style="background-image:url(&quot;home-assets/videos/3d_house_test_ultra_poster.0000000.jpg&quot;)" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover">
724                      <source src="home-assets/videos/3d_house_test_ultra_mp4.mp4" data-wf-ignore="true">
725                      <source src="home-assets/videos/3d_house_test_ultra_webm.webm" data-wf-ignore="true">
726                    </video></div>
727                  <div class="w-embed">
728                    <style>
729  /* 1. Establish a 3D space on the parent */
730.bg-vid-hp {
731  perspective: 1000px;
732  overflow: hidden; /* Optional: keeps the movement contained */
733}
734/* 2. Set the initial state of the child */
735.u-img-cover {
736  transition: transform 0.5s ease;
737  display: block; /* Ensures transform applies correctly */
738}
739</style>
740                  </div>
741                </div><img src="home-assets/images/Group-79.avif" loading="eager" sizes="(max-width: 1531px) 100v
741w, 1531px" srcset="home-assets/images/Group-79-p-500.avif 500w, home-assets/images/Group-79.avif 1531w" alt="" class="img-flare red-flare"><img src="home-assets/images/blue-flare1.avif" loading="lazy" alt="" class="img-flare hide-land"><img src="home-assets/images/blue-flare1.avif" loading="lazy" alt="" class="img-flare r fade-up hide-land"><img src="home-assets/images/grid-texture1.avif" loading="lazy" sizes="(max-width: 5280px) 100vw, 5280px" srcset="home-assets/images/grid-texture1-p-500.png 500w, home-assets/images/grid-texture1-p-800.png 800w, home-assets/images/grid-texture1.avif 5280w" alt="" class="arb-image fade-up hide-land"><img src="home-assets/images/grid-texture1.avif" loading="lazy" sizes="(max-width: 5280px) 100vw, 5280px" srcset="home-assets/images/grid-texture1-p-500.png 500w, home-assets/images/grid-texture1-p-800.png 800w, home-assets/images/grid-texture1.avif 5280w" alt="" class="arb-image fade-up hide-land">
742                <div class="w-embed">
743                  <style>
744.fade-up {
745  /* Prevent the mask from tiling/repeating */
746  -webkit-mask-repeat: no-repeat;
747  mask-repeat: no-repeat;
748  /* Force the mask to span the full width/height */
749  -webkit-mask-size: 100% 100%;
750  mask-size: 100% 100%;
751  /* Use exact stops with the prefix first */
752  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
753  mask-image: linear-gradient(to top, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
754}
755</style>
756                </div>
757              </div>
758            </div>
759            <div class="inner-content-padding">
760              <div class="row u-mb-md flex-m">
761                <div class="col col-lg-10">
762                  <div class="eyebrow">Web Design & Development Freelancer</div>
763                  <div class="heading-component">
764                    <h1 class="heading-text h1-m">Websites that <em>sell</em>, <em>grow</em>, and are <em>enjoyed</em> by you and your customers</h1>
765                  </div>
766                  <div class="logo-css u-d-none w-embed">
767                    <style>
768  .space-control {
769    animation: rotateYAxis 150s linear infinite;
770    animation-play-state: paused; 
771    transform-style: preserve-3d;
772  }
773  .is-playing {
774    animation-play-state: running !important;
775  }
776  @keyframes rotateYAxis {
777    from { transform: rotateY(0deg); }
778    to { transform: rotateY(360deg); }
779  }
780</style>
781                  </div>
782                  <div class="logo-js u-d-none w-embed w-script">
783                    
783<script>
784window.addEventListener("load", () => {
785  // 1. DUPLICATION
786  const sourceSpace = document.querySelector('.space');
787  const destination = document.querySelector('.space-clip-top');
788  if (sourceSpace && destination) {
789    const spaceClone = sourceSpace.cloneNode(true);
790    spaceClone.querySelectorAll('[id]').forEach(el => el.removeAttribute('id'));
791    destination.appendChild(spaceClone);
792  }
793  // 2. DISTRIBUTION & FADE
794  const containers = document.querySelectorAll('.space-control');
795  containers.forEach((container) => {
796    const style = window.getComputedStyle(container);
797    const duration = parseFloat(style.animationDuration) || 150;
798    const originals = Array.from(container.children).filter(child => 
799      child.classList.contains('space-rotate')
800    );
801    if (originals.length === 0) return;
802    originals.forEach((el) => {
803      container.appendChild(el.cloneNode(true));
804    });
805    const allElements = container.querySelectorAll('.space-rotate');
806    const totalCount = allElements.length;
807    const angleStep = 360 / totalCount;
808    allElements.forEach((el, index) => {
809      // Set rotation on parent
810      let rotationY = index * angleStep;
811      if (rotationY === 0) rotationY = 0.01;
812      el.style.transform = `rotateY(${rotationY}deg)`;
813      // Fade on child (.space-face)
814      const face = el.querySelector('.space-face');
815      if (face) {
816        const delayOffset = (index / totalCount) * duration;
817        gsap.fromTo(face, 
818          { opacity: 1 }, 
819          { 
820            opacity: 0, 
821            duration: duration / 2, 
822            repeat: -1, 
823            yoyo: true, 
824            ease: "sine.inOut",
825            delay: -delayOffset 
826          }
827        );
828      }
829    });
830    container.classList.add('is-playing');
831  });
832  // 3. SCROLL TILT
833  if (window.gsap && window.ScrollTrigger) {
834    gsap.registerPlugin(ScrollTrigger);
835    gsap.fromTo(".space-scroll", 
836      { rotationX: -18 }, 
837      { 
838        rotationX: 12,
839        ease: "none",
840        scrollTrigger: {
841          trigger: ".space-scroll",
842          start: "top bottom",
843          end: "bottom top",
844          scrub: 1
845        }
846      }
847    );
848  }
849});
850</script>
850
851                  </div>
852                </div>
853                <div class="col col-lg-2 bottom u-mb-md">
854                  <div data-wf--button--button-variant="primary" class="button">
855                    <div aria-hidden="true" class="btn-text">Book a call</div>
856                    <a href="/contact" class="u-link-cover w-inline-block">
857                      <div class="u-sr-only">Book a call</div>
858                    </a>
859                  </div>
860                </div>
861              </div>
862            </div>
863            <div class="space-wrap">
864              <div class="space-clip-first">
865                <div class="space">
866                  <div class="space-scroll">
867                    <div class="space-control">
868                      <div data-wf--logo-carousel---image--variant="md" class="space-rotate">
869                        <div class="space-face">
870                          <div class="link-logo"><img loading="lazy" src="home-assets/images/inkit-logo.svg" alt="" class="image-logo"></div>
871                        </div>
872                      </div>
873                      <div data-wf--logo-carousel---image--variant="sm" class="space-rotate">
874                        <div class="space-face">
875                          <div class="link-logo w-variant-4a6f280b-11ab-1a69-ee52-5db8370487c4"><img loading="lazy" src="home-assets/images/formateria.svg" alt="" class="image-logo"></div>
876                        </div>
877                      </div>
878                      <div data-wf--logo-carousel---image--variant="md" class="space-rotate">
879                        <div class="space-face">
880                          <div class="link-logo"><img loading="lazy" src="home-assets/images/skedda-logo.svg" alt="" class="image-logo"></div>
881                        </div>
882                      </div>
883                      <div data-wf--logo-carousel---image--variant="md" class="space-rotate">
884                        <div class="space-face">
885                          <div class="link-logo"><img loading="lazy" src="home-assets/images/all-cares.svg" alt="" class="image-logo"></div>
886                        </div>
887                      </div>
888                      <div data-wf--logo-carousel---image--variant="md" class="space-rotate">
889                        <div class="space-face">
890                          <div class="link-logo"><img loading="lazy" src="home-assets/images/knoetic.svg" alt="" class="image-logo"></div>
891                        </div>
892                      </div>
893                      <div data-wf--logo-carousel---image--variant="md" class="space-rotate">
894                        <div class="space-face">
895                          <div class="link-logo"><img loading="lazy" src="home-assets/images/malomo.svg" alt="" class="image-logo"></div>
896                        </div>
897                      </div>
898                      <div data-wf--logo-carousel---image--variant="md" class="space-rotate">
899                        <div class="space-face">
900                          <div class="link-logo"><img loading="lazy" src="home-assets/images/social-sport.svg" alt="" class="image-logo"></div>
901                        </div>
902                      </div>
903                      <div data-wf--logo-carousel---image--variant="md" class="space-rotate">
904                        <div class="space-face">
905                          <div class="link-logo"><img loading="lazy" src="home-assets/images/songbird.svg" alt="" class="image-logo"></div>
906                        </div>
907                      </div>
908                      <div data-wf--logo-carousel---image--variant="sm" class="space-rotate">
909                        <div class="space-face">
910                          <div class="link-logo w-variant-4a6f280b-11ab-1a69-ee52-5db8370487c4"><img loading="lazy" src="home-assets/images/siro.svg" alt="" class="image-logo"></div>
911                        </div>
912                      </div>
913                    </div>
914                  </div>
915                </div>
916              </div>
917              <div class="space-clip-top"></div>
918            </div>
919          </div>
920        </div>
921      </section>
922      <section class="section">
923        <div class="container">
924          <div class="slot cc-section">
925            <div class="large-content-text">
926              <div id="scroll-text"><strong>Red Panther</strong>™ is a one man Web Design and Development company run by Karr Fager.<br><br><strong>Services</strong> include full website refreshes, website sprints, month-to-month maintenance, and subscriptions.<br><br><strong>Industries</strong> include B2B, tech, AI, health, contractors, and more.<br><br>100% <strong>happiness guarantee</strong>: you don’t pay unless you’re 100% happy. Seriously.<br><br><strong>Authentic</strong> companies only.</div>
927              <div class="w-embed w-script">
928                <style>
929  #scroll-text .word {
930    display: inline-block;
931    opacity: 0.1;
932    will-change: opacity;
933  }
934</style>
935                
935<script>
936  document.addEventListener('DOMContentLoaded', () => {
937    if (!document.getElementById('scroll-text')) return;
938    if (typeof gsap === 'undefined' || typeof SplitType === 'undefined') return;
939    gsap.registerPlugin(ScrollTrigger);
940    document.fonts.ready.then(() => {
941      const split = new SplitType('#scroll-text', { types: 'words' });
942      gsap.to(split.words, {
943        opacity: 1,
944        ease: 'none',
945        stagger: 0.5,
946        scrollTrigger: {
947          trigger: '#scroll-text',
948          start: 'top 75%',
949          end: 'bottom 35%',
950          scrub: true
951        }
952      });
953    });
954  });
955</script>
955
956              </div>
957            </div>
958          </div>
959        </div>
960      </section>
961      <section class="section">
962        <div class="container">
963          <div class="slot cc-section">
964            <div>
965              <div data-poster-url="videos/cta_callout_final_poster.0000000.jpg" data-video-urls="videos/cta_callout_final_mp4.mp4,videos/cta_callout_final_webm.webm" data-autoplay="true" data-loop="true" data-wf-ignore="true" class="u-img-cover cta-callout w-background-video w-background-video-atom"><video id="3dde3176-aa62-ddec-497d-9c5881b6e3c8-video" autoplay="" loop="" style="background-image:url(&quot;home-assets/videos/cta_callout_final_poster.0000000.jpg&quot;)" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover">
966                  <source src="home-assets/videos/cta_callout_final_mp4.mp4" data-wf-ignore="true">
967                  <source src="home-assets/videos/cta_callout_final_webm.webm" data-wf-ignore="true">
968                </video>
969                <div class="cta-callout-bg-over"></div>
970                <div class="cc-width-40 u-position-relative">
971                  <div class="u-d-flex badge-row">
972                    <div class="u-d-flex badge-flex">
973                      <div class="badge-icon w-embed"><svg width="100%" height="100%" viewbox="0 0 289 181" fill="none" xmlns="http://www.w3.org/2000/svg">
974                          <path fill-rule="evenodd" clip-rule="evenodd" d="M288.606 0L196.515 180.027H110.016L148.556 105.416H146.827C115.032 146.69 67.5931 173.861 0 180.027V106.449C0 106.449 43.2409 103.895 68.661 77.169H0V0.00142205H77.1676V63.4706L78.8996 63.4635L110.433 0.00142205H168.793V63.0682L170.525 63.0654L203.241 0H288.606Z" fill="white"></path>
975                        </svg></div>
976                      <div class="eyebrow badge-eyebrow">Any platform</div>
977                    </div>
978                    <div class="u-d-flex badge-flex">
979                      <div class="badge-icon w-embed"><svg width="100%" height="100%" viewbox="0 0 84 33" fill="none" xmlns="http://www.w3.org/2000/svg">
980                          <path d="M41.812 0L43.7079 5.83472H49.8428L44.8795 9.44077L46.7754 15.2755L41.812 11.6694L36.8487 15.2755L38.7446 9.44077L33.7812 5.83472H39.9162L41.812 0Z" fill="white"></path>
981                          <path d="M58.687 6.3335L60.5829 12.1682H66.7178L61.7545 15.7743L63.6504 21.609L58.687 18.0029L53.7237 21.609L55.6196 15.7743L50.6562 12.1682H56.7912L58.687 6.3335Z" fill="white"></path>
982                          <path d="M24.9136 6.3335L26.8094 12.1682H32.9444L27.9811 15.7743L29.8769 21.609L24.9136 18.0029L19.9503 21.609L21.8461 15.7743L16.8828 12.1682H23.0178L24.9136 6.3335Z" fill="white"></path>
983                          <path d="M75.5777 16.8887L77.4735 22.7234H83.6085L78.6452 26.3294L80.541 32.1642L75.5777 28.5581L70.6144 32.1642L72.5102 26.3294L67.5469 22.7234H73.6819L75.5777 16.8887Z" fill="white"></path>
984                          <path d="M8.0308 16.8887L9.92661 22.7234H16.0616L11.0983 26.3294L12.9941 32.1642L8.0308 28.5581L3.06749 32.1642L4.96331 26.3294L0 22.7234H6.13498L8.0308 16.8887Z" fill="white"></path>
985                        </svg></div>
986                      <div class="eyebrow badge-eyebrow">4.9/5 Google rating</div>
987                    </div>
988                    <div class="u-d-flex badge-flex">
989                      <div class="badge-icon w-embed"><svg width="100%" height="100%" viewbox="0 0 63 63" fill="none" xmlns="http://www.w3.org/2000/svg">
990                          <mask id="mask0_410_60" style="mask-type:alpha" maskunits="userSpaceOnUse" x="0" y="0" width="63" height="63">
991                            <circle cx="31.5" cy="31.5" r="31.5" fill="white"></circle>
992                          </mask>
993                          <g mask="url(#mask0_410_60)">
994                            <rect y="32" width="63" height="31" fill="white"></rect>
995                            <circle cx="44" cy="15" r="5" fill="white"></circle>
996                            <circle cx="19" cy="15" r="5" fill="white"></circle>
997                          </g>
998                        </svg></div>
999                      <div class="eyebrow badge-eyebrow">one man crew</div>
1000                    </div>
1001                  </div>
1002                  <div class="u-mt-sm">
1003                    <h2 class="h2">Start your next website project today</h2>
1004                  </div>
1005                  <div class="u-mt-md">
1006                    <div data-wf--button--button-variant="primary" class="button">
1007                      <div aria-hidden="true" class="btn-text">Book a call</div>
1008                      <a href="/contact" class="u-link-cover w-inline-block">
1009                        <div class="u-sr-only">Book a call</div>
1010                      </a>
1011                    </div>
1012                  </div>
1013                </div>
1014              </div>
1015            </div>
1016          </div>
1017        </div>
1018      </section>
1019    </main>
1020  </div>
1021  <div class="footer-section section u-bg-white">
1022    <div class="metal-texture"></div>
1023    <div class="metal-texture bot"></div>
1024    <div class="container-2 z-index-10">
1025      <div class="four-grid footer-grid">
1026        <div id="w-node-f8a19393-0186-d599-2189-e8278609b894-94f67691">
1027          <div class="nav-top-flex">
1028            <div>Latest YouTube Vid</div>
1029            <a href="https://youtube.com/@redpantherio?sub_confirmation=1" class="nav-link-2 w-inline-block">
1030              <div>Subscribe</div>
1031              <div class="arrow-embed w-embed"><svg width="10" height="10" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
1032                  <path d="M0.292893 10.2929C-0.0976311 10.6834 -0.0976311 11.3166 0.292893 11.7071C0.683418 12.0976 1.31658 12.0976 1.70711 11.7071L0.292893 10.2929ZM12 1C12 0.447714 11.5523 -7.61451e-07 11 -3.39982e-07L2 -2.13542e-07C1.44772 -5.50717e-07 1 0.447715 1 0.999999C1 1.55228 1.44772 2 2 2L10 2L10 10C10 10.5523 10.4477 11 11 11C11.5523 11 12 10.5523 12 10L12 1ZM1.70711 11.7071L11.7071 1.70711L10.2929 0.292893L0.292893 10.2929L1.70711 11.7071Z" fill="currentColor" fill-opacity=".5"></path>
1033                </svg></div>
1034            </a>
1035          </div>
1036          <div class="yt_vid_container">
1037            <div class="yt_vid_embed w-embed w-iframe w-script"><iframe class="latestVideoEmbed" vnum="0" cid="UC0sEqnEgQSx5ee0sdYXQMiQ" width="100%" height="100%" frameborder="0" allowfullscreen="" loading="lazy"></iframe>
1038              
1038<script>
1039document.addEventListener("DOMContentLoaded", function () {
1040  var reqURL = "https://api.rss2json.com/v1/api.json?rss_url=" + encodeURIComponent("https://www.youtube.com/feeds/videos.xml?channel_id=");
1041  function loadVideo(iframe) {
1042    fetch(reqURL + iframe.getAttribute('cid'))
1043      .then(response => response.json())
1044      .then(data => {
1045        var videoNumber = iframe.getAttribute('vnum') ? Number(iframe.getAttribute('vnum')) : 0;
1046        var link = data.items[videoNumber].link;
1047        var title = data.items[videoNumber].title;
1048        var id = link.substr(link.indexOf("=") + 1);
1049        iframe.setAttribute("src", "https://youtube.com/embed/" + id + "?controls=1&autoplay=0");
1050        iframe.parentElement.querySelector("#video-title").innerText = title;
1051      })
1052      .catch(error => console.error("Failed to load YouTube video data:", error));
1053  }
1054  var iframes = document.getElementsByClassName('latestVideoEmbed');
1055  Array.prototype.forEach.call(iframes, function(iframe) {
1056    loadVideo(iframe);
1057  });
1058});
1059</script>
1059
1060            </div>
1061          </div>
1062        </div>
1063        <div id="w-node-f8a19393-0186-d599-2189-e8278609b89e-94f67691">
1064          <div class="nav-top-flex">
1065            <div>Coming 2026!</div>
1066            <a href="https://youtube.com/@redpantherio?sub_confirmation=1" class="nav-link-2 w-inline-block">
1067              <div>Get Notified</div>
1068              <div class="arrow-embed w-embed"><svg width="10" height="10" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
1069                  <path d="M0.292893 10.2929C-0.0976311 10.6834 -0.0976311 11.3166 0.292893 11.7071C0.683418 12.0976 1.31658 12.0976 1.70711 11.7071L0.292893 10.2929ZM12 1C12 0.447714 11.5523 -7.61451e-07 11 -3.39982e-07L2 -2.13542e-07C1.44772 -5.50717e-07 1 0.447715 1 0.999999C1 1.55228 1.44772 2 2 2L10 2L10 10C10 10.5523 10.4477 11 11 11C11.5523 11 12 10.5523 12 10L12 1ZM1.70711 11.7071L11.7071 1.70711L10.2929 0.292893L0.292893 10.2929L1.70711 11.7071Z" fill="currentColor" fill-opacity=".5"></path>
1070                </svg></div>
1071            </a>
1072          </div>
1073          <div class="yt_vid_container">
1074            <div class="redesigns-live">
1075              <div class="h4-2">Live website redesigns </div><img src="home-assets/images/website-redesigns.jpg" loading="lazy" sizes="100vw" srcset="home-assets/images/website-redesigns-p-500.jpg 500w, home-assets/images/website-redesigns.jpg 1313w" alt="" class="u-mt-1 ar-16-9">
1076              <div class="_2nd-column-loop-wrap">
1077                <div class="full-text-column loop">
1078                  <div>Coming soon</div>
1079                </div>
1080                <div class="full-text-column loop">
1081                  <div>Coming soon</div>
1082                </div>
1083              </div>
1084            </div>
1085          </div>
1086        </div>
1087        <div id="w-node-f8a19393-0186-d599-2189-e8278609b8b2-94f67691" class="nav-link-wrap">
1088          <div class="nav-list">
1089            <div>Company</div>
1090            <div class="links">
1091              <a href="#" class="nav-link-2 w-inline-block">
1092                <div>About</div>
1093                <div class="arrow-embed w-embed"><svg width="10" height="10" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
1094                    <path d="M0.292893 10.2929C-0.0976311 10.6834 -0.0976311 11.3166 0.292893 11.7071C0.683418 12.0976 1.31658 12.0976 1.70711 11.7071L0.292893 10.2929ZM12 1C12 0.447714 11.5523 -7.61451e-07 11 -3.39982e-07L2 -2.13542e-07C1.44772 -5.50717e-07 1 0.447715 1 0.999999C1 1.55228 1.44772 2 2 2L10 2L10 10C10 10.5523 10.4477 11 11 11C11.5523 11 12 10.5523 12 10L12 1ZM1.70711 11.7071L11.7071 1.70711L10.2929 0.292893L0.292893 10.2929L1.70711 11.7071Z" fill="currentColor" fill-opacity=".5"></path>
1095                  </svg></div>
1096              </a>
1097              <a href="/portfolio" class="nav-link-2 w-inline-block">
1098                <div>Portfolio</div>
1099                <div class="arrow-embed w-embed"><svg width="10" height="10" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
1100                    <path d="M0.292893 10.2929C-0.0976311 10.6834 -0.0976311 11.3166 0.292893 11.7071C0.683418 12.0976 1.31658 12.0976 1.70711 11.7071L0.292893 10.2929ZM12 1C12 0.447714 11.5523 -7.61451e-07 11 -3.39982e-07L2 -2.13542e-07C1.44772 -5.50717e-07 1 0.447715 1 0.999999C1 1.55228 1.44772 2 2 2L10 2L10 10C10 10.5523 10.4477 11 11 11C11.5523 11 12 10.5523 12 10L12 1ZM1.70711 11.7071L11.7071 1.70711L10.2929 0.292893L0.292893 10.2929L1.70711 11.7071Z" fill="currentColor" fill-opacity=".5"></path>
1101                  </svg></div>
1102              </a>
1103              <a href="/courses/3d-jumpstarter" class="nav-link-2 w-inline-block">
1104                <div>Courses</div>
1105                <div class="arrow-embed w-embed"><svg width="10" height="10" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
1106                    <path d="M0.292893 10.2929C-0.0976311 10.6834 -0.0976311 11.3166 0.292893 11.7071C0.683418 12.0976 1.31658 12.0976 1.70711 11.7071L0.292893 10.2929ZM12 1C12 0.447714 11.5523 -7.61451e-07 11 -3.39982e-07L2 -2.13542e-07C1.44772 -5.50717e-07 1 0.447715 1 0.999999C1 1.55228 1.44772 2 2 2L10 2L10 10C10 10.5523 10.4477 11 11 11C11.5523 11 12 10.5523 12 10L12 1ZM1.70711 11.7071L11.7071 1.70711L10.2929 0.292893L0.292893 10.2929L1.70711 11.7071Z" fill="currentColor" fill-opacity=".5"></path>
1107                  </svg></div>
1108              </a>
1109              <a href="/news" class="nav-link-2 w-inline-block">
1110                <div>News</div>
1111                <div class="arrow-embed w-embed"><svg width="10" height="10" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
1112                    <path d="M0.292893 10.2929C-0.0976311 10.6834 -0.0976311 11.3166 0.292893 11.7071C0.683418 12.0976 1.31658 12.0976 1.70711 11.7071L0.292893 10.2929ZM12 1C12 0.447714 11.5523 -7.61451e-07 11 -3.39982e-07L2 -2.13542e-07C1.44772 -5.50717e-07 1 0.447715 1 0.999999C1 1.55228 1.44772 2 2 2L10 2L10 10C10 10.5523 10.4477 11 11 11C11.5523 11 12 10.5523 12 10L12 1ZM1.70711 11.7071L11.7071 1.70711L10.2929 0.292893L0.292893 10.2929L1.70711 11.7071Z" fill="currentColor" fill-opacity=".5"></path>
1113                  </svg></div>
1114              </a>
1115              <a href="/blog" class="nav-link-2 w-inline-block">
1116                <div>Blog</div>
1117                <div class="arrow-embed w-embed"><svg width="10" height="10" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
1118                    <path d="M0.292893 10.2929C-0.0976311 10.6834 -0.0976311 11.3166 0.292893 11.7071C0.683418 12.0976 1.31658 12.0976 1.70711 11.7071L0.292893 10.2929ZM12 1C12 0.447714 11.5523 -7.61451e-07 11 -3.39982e-07L2 -2.13542e-07C1.44772 -5.50717e-07 1 0.447715 1 0.999999C1 1.55228 1.44772 2 2 2L10 2L10 10C10 10.5523 10.4477 11 11 11C11.5523 11 12 10.5523 12 10L12 1ZM1.70711 11.7071L11.7071 1.70711L10.2929 0.292893L0.292893 10.2929L1.70711 11.7071Z" fill="currentColor" fill-opacity=".5"></path>
1119                  </svg></div>
1120              </a>
1121            </div>
1122          </div>
1123        </div>
1124        <div id="w-node-f8a19393-0186-d599-2189-e8278609b8fb-94f67691" class="footer_extra_links u-hflex-left-center u-gap-small">
1125          <a aria-current='page' aria-label='Homepage' class='footer_brand_link w-inline-block w--current' href='/'><img src="home-assets/images/red-panther-svg-logo-dark.svg" loading="lazy" alt="" class="footer_brand_icon"></a>
1126          <a href="https://webflow.com/@redpanther" class="webflow_link_wrap u-hflex-center-center u-gap-xsmall w-inline-block"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 57 35" fill="none" class="webflow_brand_icon">
1127              <g clip-path="url(#clip0_1495_2)">
1128                <path fill-rule="evenodd" clip-rule="evenodd" d="M56.0831 0L38.1877 34.9836H21.3788L28.8681 20.4849H28.532C22.3535 28.5055 13.135 33.7854 0 34.9836V20.6855C0 20.6855 8.40278 20.1892 13.3425 14.9958H0V0.000276334H14.9956V12.3339L15.3321 12.3325L21.4598 0.000276334H32.8005V12.2557L33.1371 12.2551L39.4947 0H56.0831Z" fill="currentColor"></path>
1129              </g>
1130              <defs>
1131                <clippath id="clip0_1495_2">
1132                  <rect width="56.0831" height="35" fill="currentColor"></rect>
1133                </clippath>
1134              </defs>
1135            </svg>
1136            <div>Webflow Certified Partner</div>
1137          </a>
1138        </div>
1139        <div id="w-node-f8a19393-0186-d599-2189-e8278609b907-94f67691" class="footer_small_text u-text-small u-color-faded">Copyright © 2026 Red Panther. Privacy Policy. Red Panther is a Trademark of Red Panther LLC.</div>
1140      </div>
1141    </div>
1142  </div>
1143  
1143<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=69fb63b81280810ee9d14519" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
1143
1144  
1144<script src="home-assets/js/webflow.js" type="text/javascript"></script>
1144
1145  
1145<script src="https://cdn.prod.website-files.com/gsap/3.15.0/gsap.min.js" type="text/javascript"></script>
1145
1146  
1146<script src="https://cdn.prod.website-files.com/gsap/3.15.0/ScrollTrigger.min.js" type="text/javascript"></script>
vendor: 1 bytes, line 1146
1146
1147<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"dc8e0eb73bb342c8bb2dc0c57d04f600","r":1,"spa":2}' crossorigin="anonymous"></script>
1147
1148</body>
1149</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.