PageSourceSearch

https://www.loophorizon.com/contact

html loophorizon.com collected 2026-10-04 07:37:00 UTC 30,830 bytes, 803 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8" />
5  <!-- Google Search Console verification -->
6  <meta name="google-site-verification" content="Chz37GHSYEWHpOXkXBMCamWJUfBo3iqm6QLCepiu5gs" />
7  <!-- OneTrust Cookie Consent -->
8  
8<script src="https://cdn-ukwest.onetrust.com/scripttemplates/otSDKStub.js" type="text/javascript" charset="UTF-8" data-domain-script="018ed226-4701-7dbc-a7f1-1f7da140e49a"></script>
8
9  
9<script type="text/javascript">function OptanonWrapper() { }</script>
9
10  <!-- Google Tag Manager -->
11  
11<script>
vendor: 335 bytes, lines 11-15
11(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
12  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
13  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
14  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
15  })(window,document,'script','dataLayer','
15GTM-W7336WP
vendor: 3 bytes, line 15
15');
15</script>
15
16  <!-- End Google Tag Manager -->
17  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
18  <title>Contact | Loop Horizon</title>
19  <link rel="canonical" href="https://www.loophorizon.com/contact" />
20  <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/loophorizon_nobackground_favicon.png" />
21  <link rel="apple-touch-icon" sizes="256x256" href="/assets/favicon/loophorizon_icon_256.png" />
22  <meta property="og:type" content="website" />
23  <meta property="og:site_name" content="Loop Horizon" />
24  <meta property="og:title" content="Contact | Loop Horizon" />
25  <meta property="og:description" content="Tell us about your challenge. Loop Horizon deploys elite teams to accelerate returns from your customer data." />
26  <meta property="og:url" content="https://www.loophorizon.com/contact" />
27  <meta name="twitter:card" content="summary" />
28  <meta name="twitter:title" content="Contact | Loop Horizon" />
29  <meta name="twitter:description" content="Tell us about your challenge. Loop Horizon deploys elite teams to accelerate returns from your customer data." />
30  <meta name="description" content="Tell us about your challenge. Loop Horizon deploys elite teams to accelerate returns from your customer data." />
31  <link rel="stylesheet" href="styles.css" />
32  <style>
33
34    /* ── Contact page layout ──────────────────────────────── */
35    .contact-page {
36      min-height: 100vh;
37      display: flex;
38      flex-direction: column;
39    }
40
41    /* ── Hero strip ───────────────────────────────────────── */
42    .contact-hero {
43      background: var(--bg-deep);
44      padding: 100px 0 64px;
45      position: relative;
46      overflow: hidden;
47    }
48    .contact-hero::before {
49      content: '';
50      position: absolute;
51      inset: 0;
52      background:
53        radial-gradient(ellipse 60% 80% at 80% 50%, rgba(254,102,3,0.07) 0%, transparent 70%),
54        radial-gradient(ellipse 50% 60% at 10% 60%, rgba(3,165,165,0.06) 0%, transparent 65%);
55      pointer-events: none;
56    }
57    .contact-hero-inner {
58      position: relative;
59      z-index: 1;
60    }
61    .contact-hero .section-badge {
62      margin-bottom: 18px;
63    }
64    .contact-hero h1 {
65      font-size: clamp(38px, 5vw, 64px);
66      font-weight: 500;
67      letter-spacing: -0.03em;
68      line-height: 1.06;
69      color: #fff;
70      max-width: 700px;
71      margin-bottom: 20px;
72    }
73    .contact-hero h1 em {
74      font-style: normal;
75      color: var(--orange);
76    }
77    .contact-hero p {
78      font-size: 18px;
79      color: var(--text-muted);
80      line-height: 1.7;
81      max-width: 520px;
82    }
83
84    /* ── Main two-column section ──────────────────────────── */
85    .contact-body {
86      flex: 1;
87      background: var(--bg-base);
88      padding: 72px 0 100px;
89    }
90    .contact-grid {
91      display: grid;
92      grid-template-columns: 1fr 1.55fr;
93      gap: 64px;
94      align-items: start;
95    }
96
97    /* ── Left — info panel ────────────────────────────────── */
98    .contact-info {
99      position: sticky;
100      top: 108px;
101    }
102    .contact-info-lead {
103      font-size: 16px;
104      color: var(--text-muted);
105      line-height: 1.75;
106      margin-bottom: 40px;
107    }
108
109    /* Detail rows */
110    .contact-detail-list {
111      display: flex;
112      flex-direction: column;
113      gap: 0;
114      margin-bottom: 40px;
115    }
116    .contact-detail {
117      display: flex;
118      align-items: flex-start;
119      gap: 16px;
120      padding: 18px 0;
121      border-bottom: 1px solid var(--border-light);
122    }
123    .contact-detail:first-child {
124      border-top: 1px solid var(--border-light);
125    }
126    .contact-detail-icon {
127      width: 38px;
128      height: 38px;
129      border-radius: 9px;
130      background: rgba(254,102,3,0.10);
131      border: 1px solid rgba(254,102,3,0.18);
132      display: flex;
133      align-items: center;
134      justify-content: center;
135      flex-shrink: 0;
136      margin-top: 1px;
137    }
138    .contact-detail-icon svg {
139      width: 17px;
140      height: 17px;
141      stroke: var(--orange);
142    }
143    .contact-detail-text {
144      display: flex;
145      flex-direction: column;
146      gap: 2px;
147    }
148    .contact-detail-label {
149      font-size: 11px;
150      font-weight: 500;
151      letter-spacing: 0.08em;
152      text-transform: uppercase;
153      color: var(--text-dim);
154    }
155    .contact-detail-value {
156      font-size: 15px;
157      color: #fff;
158      font-weight: 400;
159    }
160    .contact-detail-value a {
161      color: var(--orange);
162      transition: opacity var(--transition);
163    }
164    .contact-detail-value a:hover { opacity: 0.78; }
165
166    /* Trust badges */
167    .contact-trust {
168      display: flex;
169      flex-direction: column;
170      gap: 12px;
171    }
172    .contact-trust-badge {
173      display: flex;
174      align-items: center;
175      gap: 10px;
176      padding: 12px 16px;
177      background: rgba(255,255,255,0.03);
178      border: 1px solid var(--border-light);
179      border-radius: 10px;
180    }
181    .contact-trust-badge svg {
182      width: 18px;
183      height: 18px;
184      flex-shrink: 0;
185    }
186    .contact-trust-badge span {
187      font-size: 13px;
188      color: var(--text-muted);
189    }
190    .contact-trust-badge strong {
191      color: #fff;
192      font-weight: 500;
193    }
194
195    /* ── Right — form ─────────────────────────────────────── */
196    .contact-form-wrap {
197      background: var(--bg-surface);
198      border: 1px solid var(--border);
199      border-radius: var(--radius-lg);
200      padding: 44px 48px 52px;
201      position: relative;
202      overflow: hidden;
203    }
204    .contact-form-wrap::before {
205      content: '';
206      position: absolute;
207      top: -80px;
208      right: -80px;
209      width: 280px;
210      height: 280px;
211      background: radial-gradient(circle, rgba(254,102,3,0.07) 0%, transparent 70%);
212      pointer-events: none;
213    }
214
215    .contact-form-title {
216      font-size: 22px;
217      font-weight: 500;
218      letter-spacing: -0.02em;
219      color: #fff;
220      margin-bottom: 6px;
221    }
222    .contact-form-sub {
223      font-size: 14px;
224      color: var(--text-muted);
225      margin-bottom: 36px;
226      line-height: 1.6;
227    }
228
229    /* Form grid */
230    .form-row {
231      display: grid;
232      grid-template-columns: 1fr 1fr;
233      gap: 16px;
234    }
235    .form-group {
236      display: flex;
237      flex-direction: column;
238      gap: 7px;
239      margin-bottom: 20px;
240    }
241    .form-group.full { grid-column: 1 / -1; }
242    .form-group label {
243      font-size: 12px;
244      font-weight: 500;
245      letter-spacing: 0.05em;
246      text-transform: uppercase;
247      color: var(--text-muted);
248    }
249    .form-group label .req {
250      color: var(--orange);
251      margin-left: 2px;
252    }
253    .form-input,
254    .form-textarea,
255    .form-select {
256      width: 100%;
257      background: rgba(255,255,255,0.04);
258      border: 1px solid rgba(255,255,255,0.12);
259      border-radius: 9px;
260      padding: 13px 16px;
261      color: #fff;
262      font-family: 'Effra', 'Inter', sans-serif;
263      font-size: 15px;
264      line-height: 1.5;
265      outline: none;
266      transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
267      -webkit-appearance: none;
268      appearance: none;
269    }
270    .form-input::placeholder,
271    .form-textarea::placeholder {
272      color: rgba(255,255,255,0.25);
273    }
274    .form-input:focus,
275    .form-textarea:focus,
276    .form-select:focus {
277      border-color: rgba(254,102,3,0.55);
278      background: rgba(255,255,255,0.06);
279      box-shadow: 0 0 0 3px rgba(254,102,3,0.10);
280    }
281    .form-input:hover:not(:focus),
282    .form-textarea:hover:not(:focus),
283    .form-select:hover:not(:focus) {
284      border-color: rgba(255,255,255,0.22);
285    }
286    .form-textarea {
287      min-height: 130px;
288      resize: vertical;
289    }
290    .form-select {
291      cursor: pointer;
292      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
293      background-repeat: no-repeat;
294      background-position: right 14px center;
295      padding-right: 40px;
296    }
297    .form-select option {
298      background: #1A2E45;
299      color: #fff;
300    }
301
302    /* Service interest checkboxes */
303    .service-check-grid {
304      display: grid;
305      grid-template-columns: 1fr 1fr;
306      gap: 8px;
307      margin-top: 2px;
308    }
309    .service-check {
310      display: flex;
311      align-items: center;
312      gap: 10px;
313      padding: 10px 14px;
314      border: 1px solid rgba(255,255,255,0.10);
315      border-radius: 8px;
316      cursor: pointer;
317      transition: border-color 0.18s, background 0.18s;
318      user-select: none;
319    }
320    .service-check:hover {
321      border-color: rgba(254,102,3,0.35);
322      background: rgba(254,102,3,0.04);
323    }
324    .service-check input[type="checkbox"] {
325      width: 15px;
326      height: 15px;
327      border-radius: 4px;
328      border: 1.5px solid rgba(255,255,255,0.25);
329      background: transparent;
330      appearance: none;
331      -webkit-appearance: none;
332      flex-shrink: 0;
333      cursor: pointer;
334      position: relative;
335      transition: border-color 0.18s, background 0.18s;
336    }
337    .service-check input[type="checkbox"]:checked {
338      background: var(--orange);
339      border-color: var(--orange);
340    }
341    .service-check input[type="checkbox"]:checked::after {
342      content: '';
343      position: absolute;
344      inset: 0;
345      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M2 6l3 3 5-5'/%3E%3C/svg%3E");
346      background-size: 10px;
347      background-repeat: no-repeat;
348      background-position: center;
349    }
350    .service-check.checked {
351      border-color: rgba(254,102,3,0.45);
352      background: rgba(254,102,3,0.07);
353    }
354    .service-check-label {
355      font-size: 13px;
356      color: var(--text-muted);
357      line-height: 1.35;
358      transition: color 0.18s;
359    }
360    .service-check.checked .service-check-label {
361      color: #fff;
362    }
363
364    /* Divider */
365    .form-divider {
366      height: 1px;
367      background: var(--border-light);
368      margin: 8px 0 24px;
369    }
370
371    /* Submit */
372    .form-submit-row {
373      display: flex;
374      align-items: center;
375      justify-content: space-between;
376      gap: 16px;
377      margin-top: 8px;
378      flex-wrap: wrap;
379    }
380    .form-privacy {
381      font-size: 12px;
382      color: var(--text-dim);
383      line-height: 1.5;
384      max-width: 240px;
385    }
386    .form-privacy a {
387      color: rgba(255,255,255,0.4);
388      text-decoration: underline;
389      text-underline-offset: 2px;
390      transition: color 0.18s;
391    }
392    .form-privacy a:hover { color: rgba(255,255,255,0.65); }
393
394    .btn-submit {
395      display: inline-flex;
396      align-items: center;
397      gap: 10px;
398      padding: 14px 32px;
399      background: var(--orange);
400      color: #fff;
401      font-family: 'Effra', 'Inter', sans-serif;
402      font-size: 15px;
403      font-weight: 500;
404      border: none;
405      border-radius: 10px;
406      cursor: pointer;
407      letter-spacing: -0.01em;
408      transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
409      box-shadow: 0 4px 16px rgba(254,102,3,0.28);
410      white-space: nowrap;
411    }
412    .btn-submit:hover {
413      background: var(--orange-hover);
414      transform: translateY(-1px);
415      box-shadow: 0 6px 22px rgba(254,102,3,0.38);
416    }
417    .btn-submit:active {
418      transform: translateY(0);
419    }
420    .btn-submit svg {
421      width: 16px;
422      height: 16px;
423      transition: transform 0.18s;
424    }
425    .btn-submit:hover svg {
426      transform: translateX(3px);
427    }
428
429    /* Success state */
430    .form-success {
431      display: none;
432      flex-direction: column;
433      align-items: center;
434      justify-content: center;
435      text-align: center;
436      padding: 60px 32px;
437      gap: 20px;
438    }
439    .form-success.visible { display: flex; }
440    .form-success-icon {
441      width: 64px;
442      height: 64px;
443      border-radius: 50%;
444      background: rgba(3,165,165,0.12);
445      border: 1.5px solid rgba(3,165,165,0.35);
446      display: flex;
447      align-items: center;
448      justify-content: center;
449    }
450    .form-success-icon svg {
451      width: 28px;
452      height: 28px;
453      stroke: var(--teal);
454    }
455    .form-success h3 {
456      font-size: 22px;
457      font-weight: 500;
458      letter-spacing: -0.02em;
459      color: #fff;
460    }
461    .form-success p {
462      font-size: 15px;
463      color: var(--text-muted);
464      line-height: 1.7;
465      max-width: 340px;
466    }
467
468    /* ── Responsive ───────────────────────────────────────── */
469    @media (max-width: 900px) {
470      .contact-grid {
471        grid-template-columns: 1fr;
472        gap: 40px;
473      }
474      .contact-info {
475        position: static;
476      }
477      .contact-form-wrap {
478        padding: 32px 28px 40px;
479      }
480      .form-row {
481        grid-template-columns: 1fr;
482      }
483      .service-check-grid {
484        grid-template-columns: 1fr;
485      }
486      .form-submit-row {
487        flex-direction: column;
488        align-items: flex-start;
489      }
490      .form-privacy { max-width: 100%; }
491    }
492    @media (max-width: 640px) {
493      .contact-hero { padding: 88px 0 48px; }
494      .contact-body { padding: 48px 0 72px; }
495      .contact-form-wrap { padding: 28px 20px 36px; }
496    }
497  </style>
498</head>
499<body class="contact-page">
500<!-- Google Tag Manager (noscript) -->
vendor: 68 bytes, lines 500-501
500
501<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
501GTM-W7336WP
vendor: 83 bytes, line 501
501" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
502<!-- End Google Tag Manager (noscript) -->
503
504  <!-- ══════════════════════════════════════════════════════
505       NAVBAR
506  ══════════════════════════════════════════════════════════ -->
507  <nav id="navbar">
508    <div class="nav-inner">
509      <a href="/" class="nav-logo" aria-label="Loop Horizon Home">
510        <img src="assets/logo/Stacked - Colour + White text/loop-logo-2024-white-colour.png" alt="Loop Horizon" />
511      </a>
512
513      <ul class="nav-links" id="navLinks">
514        <li><a href="/" class="nav-link">Home</a></li>
515
516        <li class="nav-has-dropdown">
517          <a href="/#services" class="nav-link">
518            Services
519            <svg class="nav-chevron" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
520          </a>
521          <div class="nav-dropdown" role="menu">
522            <a href="/#services" class="nav-drop-item nav-drop-all" role="menuitem">All Services</a>
523            <a href="/services/digital-data"            class="nav-drop-item" role="menuitem"><span class="nav-drop-dot" style="--c:#FE6603"></span>Digital Data</a>
524            <a href="/services/data-engineering"        class="nav-drop-item" role="menuitem"><span class="nav-drop-dot" style="--c:#03A5A5"></span>Data Engineering</a>
525            <a href="/services/data-science-analytics"  class="nav-drop-item" role="menuitem"><span class="nav-drop-dot" style="--c:#FFC100"></span>Data Science &amp; Analytics</a>
526            <a href="/services/marketing-technology"    class="nav-drop-item" role="menuitem"><span class="nav-drop-dot" style="--c:#FE6603"></span>Marketing Technology</a>
527            <a href="/services/marketing-activation"    class="nav-drop-item" role="menuitem"><span class="nav-drop-dot" style="--c:#03A5A5"></span>Marketing Activation</a>
528            <a href="/services/reporting-measurement"   class="nav-drop-item" role="menuitem"><span class="nav-drop-dot" style="--c:#FFC100"></span>Reporting &amp; Measurement</a>
529            <a href="/services/strategy-transformation" class="nav-drop-item" role="menuitem"><span class="nav-drop-dot" style="--c:#FE6603"></span>Strategy &amp; Transformation</a>
530          </div>
531        </li>
532
533        <li><a href="/case-studies" class="nav-link">Case Studies</a></li>
534        <li><a href="/insights"     class="nav-link">Insights</a></li>
535        <li><a href="/about"        class="nav-link">About</a></li>
536        <li><a href="/contact"      class="nav-link active">Contact</a></li>
537      </ul>
538
539      <a href="/contact" class="nav-cta">Get In Touch</a>
540
541      <button class="nav-toggle" id="navToggle" aria-label="Toggle menu">
542        <span></span><span></span><span></span>
543      </button>
544    </div>
545  </nav>
546
547
548  <!-- ══════════════════════════════════════════════════════
549       HERO
550  ══════════════════════════════════════════════════════════ -->
551  <section class="contact-hero">
552    <div class="lh-container contact-hero-inner">
553      <h1>Tell us about your<br/><em>challenge</em></h1>
554    </div>
555  </section>
556
557
558  <!-- ══════════════════════════════════════════════════════
559       CONTACT BODY
560  ══════════════════════════════════════════════════════════ -->
561  <section class="contact-body">
562    <div class="lh-container">
563      <div class="contact-grid">
564
565        <!-- ── Left: info panel ── -->
566        <div class="contact-info">
567          <div class="contact-detail-list">
568            <div class="contact-detail">
569              <div class="contact-detail-icon">
570                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
571              </div>
572              <div class="contact-detail-text">
573                <span class="contact-detail-label">Email</span>
574                <span class="contact-detail-value">
575                  <a href="mailto:[email protected]">[email protected]</a>
576                </span>
577              </div>
578            </div>
579
580            <div class="contact-detail">
581              <div class="contact-detail-icon">
582                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
583              </div>
584              <div class="contact-detail-text">
585                <span class="contact-detail-label">Location</span>
586                <span class="contact-detail-value">London, United Kingdom</span>
587              </div>
588            </div>
589
590            <div class="contact-detail">
591              <div class="contact-detail-icon">
592                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
593              </div>
594              <div class="contact-detail-text">
595                <span class="contact-detail-label">LinkedIn</span>
596                <span class="contact-detail-value">
597                  <a href="https://www.linkedin.com/company/loophorizon/" target="_blank" rel="noopener">Loop Horizon</a>
598                </span>
599              </div>
600            </div>
601          </div>
602        </div>
603
604        <!-- ── Right: form ── -->
605        <div class="contact-form-wrap">
606
607          <!-- Form itself -->
608          <div id="contactFormInner">
609            <h2 class="contact-form-title">Send us a message</h2>
610            <p class="contact-form-sub">All fields marked <span style="color:var(--orange)">*</span> are required.</p>
611
612            <form id='contactForm' method='POST' name='contact' novalidate>
613              <!-- Netlify required hidden fields -->
614              <input type="hidden" name="form-name" value="contact" />
615              <p style="display:none"><input name="bot-field" /></p>
616
617              <!-- Name row -->
618              <div class="form-row">
619                <div class="form-group">
620                  <label for="firstName">First name <span class="req">*</span></label>
621                  <input type="text" id="firstName" name="firstName" class="form-input" required />
622                </div>
623                <div class="form-group">
624                  <label for="lastName">Last name <span class="req">*</span></label>
625                  <input type="text" id="lastName" name="lastName" class="form-input" required />
626                </div>
627              </div>
628
629              <!-- Company & Role row -->
630              <div class="form-row">
631                <div class="form-group">
632                  <label for="company">Company <span class="req">*</span></label>
633                  <input type="text" id="company" name="company" class="form-input" required />
634                </div>
635                <div class="form-group">
636                  <label for="jobTitle">Job title</label>
637                  <input type="text" id="jobTitle" name="jobTitle" class="form-input" />
638                </div>
639              </div>
640
641              <!-- Email -->
642              <div class="form-group">
643                <label for="email">Work email <span class="req">*</span></label>
644                <input type="email" id="email" name="email" class="form-input" required />
645              </div>
646
647              <!-- Message -->
648              <div class="form-group" style="margin-top:4px">
649                <label for="message">What are you looking to solve? <span class="req">*</span></label>
650                <textarea id="message" name="message" class="form-textarea" required></textarea>
651              </div>
652
653              <div class="form-divider"></div>
654
655              <!-- Submit row -->
656              <div class="form-submit-row">
657                <p class="form-privacy">
658                  By submitting this form you agree to our <a href="/privacy-policy">Privacy Policy</a>. We'll never share your details.
659                </p>
660                <button type="submit" class="btn-submit">
661                  Send message
662                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
663                </button>
664              </div>
665
666            </form>
667          </div>
668
669          <!-- Success state (shown after submit) -->
670          <div class="form-success" id="formSuccess">
671            <div class="form-success-icon">
672              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
673            </div>
674            <h3>Message sent</h3>
675            <p>Thanks for reaching out. Someone from the team will be in touch shortly.</p>
676          </div>
677
678        </div><!-- /contact-form-wrap -->
679
680      </div><!-- /contact-grid -->
681    </div><!-- /lh-container -->
682  </section>
683
684
685  <!-- ══════════════════════════════════════════════════════
686       FOOTER
687  ══════════════════════════════════════════════════════════ -->
688  <footer>
689    <div class="lh-container">
690      <div class="footer-top">
691        <div class="footer-brand">
692          <a href="/" class="footer-logo">
693            <img src="assets/logo/Stacked - Colour + White text/loop-logo-2024-white-colour.png" alt="Loop Horizon" />
694          </a>
695          <p class="footer-tagline">
696            We deploy elite teams to accelerate returns from your customer data, connecting
697            technology, data and marketing to drive measurable business outcomes.
698          </p>
699          <span class="footer-cert">
700            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg>
701            ISO 27001 Certified
702          </span>
703          <span class="footer-cert">
704            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg>
705            FT1000 Europe's Fastest Growing Companies, 2024-2027
706          </span>
707        </div>
708
709        <div class="footer-cols">
710          <div class="footer-col">
711            <h5>Services</h5>
712            <ul>
713              <li><a href="/services/digital-data">Digital Data</a></li>
714              <li><a href="/services/data-engineering">Data Engineering</a></li>
715              <li><a href="/services/data-science-analytics">Data Science &amp; Analytics</a></li>
716              <li><a href="/services/marketing-technology">Marketing Technology</a></li>
717              <li><a href="/services/marketing-activation">Marketing Activation</a></li>
718              <li><a href="/services/reporting-measurement">Reporting &amp; Measurement</a></li>
719              <li><a href="/services/strategy-transformation">Strategy &amp; Transformation</a></li>
720            </ul>
721          </div>
722          <div class="footer-col">
723            <h5>Company</h5>
724            <ul>
725              <li><a href="/case-studies">Case Studies</a></li>
726              <li><a href="/insights">Insights</a></li>
727              <li><a href="/contact">Contact</a></li>
728              <li><a href="/sustainability">Sustainability</a></li>
729            </ul>
730          </div>
731          <div class="footer-col">
732            <h5>Policies</h5>
733            <ul>
734              <li><a href="/privacy-policy">Privacy Policy</a></li>
735              <li><a href="/cookie-policy">Cookie Policy</a></li>
736              <li><a href="/modern-slavery-policy">Modern Slavery Policy</a></li>
737            </ul>
738          </div>
739        </div>
740      </div>
741
742      <div class="footer-bottom">
743        <span>&copy; <span id="footerYear"></span> Loop Horizon. All rights reserved.</span>
744        <a href="https://www.linkedin.com/company/loophorizon/" target="_blank" rel="noopener" class="footer-linkedin" aria-label="Loop Horizon on LinkedIn">
745          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
746        </a>
747      </div>
748    </div>
749  </footer>
750
751
752  <!-- ══════════════════════════════════════════════════════
753       SCRIPTS
754  ══════════════════════════════════════════════════════════ -->
755  
755<script src="script.js"></script>
755
756  
756<script>
757    // Footer year
758    document.getElementById('footerYear').textContent = new Date().getFullYear();
759
760    // Checkbox visual state sync
761    document.querySelectorAll('.service-check input[type="checkbox"]').forEach(cb => {
762      cb.addEventListener('change', () => {
763        cb.closest('.service-check').classList.toggle('checked', cb.checked);
764      });
765    });
766
767    // Form submit — Netlify POST
768    document.getElementById('contactForm').addEventListener('submit', function(e) {
769      e.preventDefault();
770
771      // Basic client-side validation
772      const required = this.querySelectorAll('[required]');
773      let valid = true;
774      required.forEach(field => {
775        field.style.borderColor = '';
776        if (!field.value.trim()) {
777          field.style.borderColor = 'rgba(254,102,3,0.7)';
778          valid = false;
779        }
780      });
781      if (!valid) return;
782
783      // Encode form data for Netlify
784      const formData = new FormData(this);
785      const encoded  = new URLSearchParams(formData).toString();
786
787      fetch('/', {
788        method: 'POST',
789        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
790        body: encoded,
791      })
792      .then(() => {
793        // Show success state
794        document.getElementById('contactFormInner').style.display = 'none';
795        document.getElementById('formSuccess').classList.add('visible');
796      })
797      .catch(() => {
798        alert('Something went wrong. Please email us directly at [email protected]');
799      });
800    });
801  </script>
801
802</body>
803</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.