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 & 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 & Measurement</a> 529 <a href="/services/strategy-transformation" class="nav-drop-item" role="menuitem"><span class="nav-drop-dot" style="--c:#FE6603"></span>Strategy & 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 & 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 & Measurement</a></li> 719 <li><a href="/services/strategy-transformation">Strategy & 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>© <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.