1<!DOCTYPE html> 2<html lang="en-GB"> 3<head> 4 <link rel="icon" type="image/png" href="/favicon.png"> 5<meta charset="UTF-8"> 6<meta name="viewport" content="width=device-width, initial-scale=1.0"> 7<title>TST â How we can help</title> 8 <meta name="description" content="Diagnose and benchmark, develop and upskill, or launch and embed change â discover how TST helps your people, teams and organisation perform."> 9 <link rel="canonical" href="https://www.wearetst.com/how-we-can-help/how-we-can-help.html"> 10 <meta property="og:type" content="website"> 11 <meta property="og:site_name" content="TST"> 12 <meta property="og:title" content="How we can help"> 13 <meta property="og:description" content="Diagnose and benchmark, develop and upskill, or launch and embed change â discover how TST helps your people, teams and organisation perform."> 14 <meta property="og:url" content="https://www.wearetst.com/how-we-can-help/how-we-can-help.html"> 15 <meta property="og:image" content="https://www.wearetst.com/assets/og-share.png"> 16 <meta property="og:image:secure_url" content="https://www.wearetst.com/assets/og-share.png"> 17 <meta property="og:image:width" content="1200"> 18 <meta property="og:image:height" content="630"> 19 <meta property="og:image:type" content="image/png"> 20 <meta property="og:image:alt" content="TST â designed to stick"> 21 <meta name="twitter:card" content="summary_large_image"> 22 <meta name="twitter:image" content="https://www.wearetst.com/assets/og-share.png"> 23 <meta name="twitter:title" content="How we can help"> 24 <meta name="twitter:description" content="Diagnose and benchmark, develop and upskill, or launch and embed change â discover how TST helps your people, teams and organisation perform."> 25<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],200;12..96,300;12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Sans:opsz,[email protected],300;9..40,400;9..40,700&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
26<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
vendor: 1 bytes, line 26
26
27<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
27 28<style> 29 30/* âââ RESET & BASE âââââââââââââââââââââââââââââââââââââ */ 31:root { 32 --dark: #222222; 33 --light: #F9F9F9; 34 --cyan: #36DBFF; 35 --orange: #FF7E1D; 36 --lime: #BDEF00; 37 --teal: #19F4D4; 38 --purple: #AE99FF; 39 --ease-brand: cubic-bezier(0.2, 0.8, 0.2, 1); 40} 41*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } 42html { scroll-behavior: smooth; } 43body { 44 background: var(--dark); 45 color: var(--dark); 46 font-family: 'DM Sans', sans-serif; 47 font-weight: 300; 48 overflow-x: hidden; 49 -webkit-font-smoothing: antialiased; 50} 51body::after { 52 content: ''; 53 position: fixed; inset: 0; 54 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); 55 pointer-events: none; z-index: 9990; opacity: .45; 56} 57 58/* âââ SLIDE NAV ââââââââââââââââââââââââââââââââââââââ */ 59.tst-header { 60 position: fixed; top: 0; left: 0; right: 0; z-index: 9997; 61 display: grid; grid-template-columns: 1fr auto 1fr; 62 align-items: center; padding: 10px 40px; 63 background: rgba(34,34,34,0.92); 64 backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); 65 border-bottom: 1px solid rgba(249,249,249,0.08); 66 transition: transform 0.35s ease; 67} 68.tst-header.tst-hidden { transform: translateY(-100%); } 69.tst-logo { text-decoration: none; display: block; justify-self: center; } 70.tst-logo svg { width: 108px; height: 60px; fill: var(--light); display: block; } 71.tst-menu-btn { 72 display: flex; align-items: center; justify-self: start; 73 background: none; border: none; cursor: pointer; padding: 8px; 74 color: var(--light); 75} 76.tst-menu-icon { 77 width: 24px; height: 18px; 78 position: relative; display: inline-block; 79} 80.tst-burger-line { 81 display: block; width: 100%; height: 2px; 82 background: var(--light); border-radius: 2px; 83 position: absolute; left: 0; transform-origin: center; 84} 85.tst-burger-line:nth-child(1) { top: 0; } 86.tst-burger-line:nth-child(2) { top: 8px; } 87.tst-burger-line:nth-child(3) { bottom: 0; } 88.tst-header-cta { 89 font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; 90 letter-spacing: 0.14em; text-transform: uppercase; 91 color: var(--dark); background: var(--lime); 92 border-radius: 999px; padding: 10px 20px; 93 text-decoration: none; white-space: nowrap; 94 justify-self: end; 95 transition: background 0.2s, color 0.2s; 96} 97.tst-header-cta:hover { background: var(--light); } 98.tst-nav-overlay { 99 position: fixed; inset: 0; z-index: 9998; 100 display: none; 101} 102.tst-nav-menu { 103 position: absolute; inset: 0; 104 overflow: hidden; 105} 106.tst-nav-bg-panels { position: absolute; inset: 0; } 107.tst-nav-panel { position: absolute; inset: 0; } 108.tst-nav-panel:nth-child(1) { background: #1a1a1a; z-index: 1; } 109.tst-nav-panel:nth-child(2) { background: var(--orange); z-index: 2; } 110.tst-nav-panel:nth-child(3) { background: var(--cyan); z-index: 3; } 111.tst-nav-inner { 112 position: absolute; inset: 0; display: flex; flex-direction: column; 113 align-items: center; justify-content: center; 114 padding: 60px 48px; z-index: 10; 115 overflow-y: auto; 116} 117.tst-nav-list { list-style: none; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: min(1000px, calc(100% - 96px)); } 118.tst-nav-item { border-top: 1px solid rgba(34,34,34,0.15); overflow: hidden; width: 100%; } 119.tst-nav-item:last-child { border-bottom: 1px solid rgba(34,34,34,0.15); } 120.tst-nav-link { 121 display: flex; align-items: baseline; justify-content: center; 122 padding: 20px 0; text-decoration: none; 123} 124.tst-nav-heading { 125 font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; 126 font-size: clamp(48px, 6vw, 96px); 127 line-height: 0.9; letter-spacing: -0.03em; color: var(--dark); 128 display: inline-block; position: relative; 129 overflow: hidden; isolation: isolate; 130 padding: 0.1em 0.12em; border-radius: 8px; 131 transition: color 0.3s cubic-bezier(0.65, 0.01, 0.05, 0.99); 132} 133.tst-nav-heading::after {
134 content: ''; position: absolute; inset: 0; 135 background: var(--dark); 136 transform: translateY(101%); 137 transition: transform 0.5s cubic-bezier(0.65, 0.01, 0.05, 0.99); 138 z-index: -1; 139} 140.tst-nav-link:hover .tst-nav-heading { color: var(--cyan); } 141.tst-nav-link:hover .tst-nav-heading::after { transform: translateY(0); } 142.tst-nav-num { 143 font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 500; 144 letter-spacing: 0.14em; text-transform: uppercase; 145 color: #BDEF00; flex-shrink: 0; margin-left: 24px; align-self: center; 146} 147.tst-nav-socials { display: flex; gap: 32px; flex-shrink: 0; padding-top: 32px; justify-content: center; } 148.tst-nav-social { 149 font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; 150 letter-spacing: 0.14em; text-transform: uppercase; 151 color: rgba(34,34,34,0.5); text-decoration: none; transition: color 0.2s; 152} 153.tst-nav-social:hover { color: var(--dark); } 154.tst-nav-num { display: none; } 155.tst-nav-topbar { 156 position: absolute; top: 0; left: 0; right: 0; z-index: 20; 157 display: flex; align-items: center; justify-content: center; 158 padding: 20px 40px; 159} 160.tst-nav-brand { 161 position: absolute; left: 40px; top: 50%; transform: translateY(-50%); 162 text-decoration: none; display: block; 163} 164.tst-nav-brand svg { width: 72px; height: 40px; fill: var(--light); display: block; } 165.tst-nav-close { 166 position: absolute; top: 10px; left: 40px; z-index: 20; 167 background: none; border: none; cursor: pointer; 168 display: flex; align-items: center; 169 color: var(--dark); padding: 8px; 170} 171.tst-nav-close:hover { opacity: 0.65; } 172.tst-nav-cta-wrap { overflow: hidden; margin: 32px 0 0; padding-bottom: 16px; display: flex; justify-content: center; } 173.tst-nav-cta { 174 display: inline-flex; align-items: center; gap: 10px; 175 font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; 176 letter-spacing: 0.14em; text-transform: uppercase; 177 color: var(--cyan); background: var(--dark); 178 border-radius: 999px; padding: 13px 24px; 179 text-decoration: none; 180 transition: background 0.2s, color 0.2s; 181} 182.tst-nav-cta:hover { background: var(--light); color: var(--dark); } 183/* âââ PAGE HERO ââââââââââââââââââââââââââââââââââââââââ */ 184.page-hero { 185 background: var(--dark); 186 min-height: 100vh; 187 display: flex; 188 flex-direction: column; 189 align-items: center; 190 justify-content: center; 191 padding: 120px 56px 80px; 192 text-align: center; 193 position: relative; 194} 195.ph-eyebrow { 196 font-family: 'DM Mono', monospace; 197 font-size: 12px; font-weight: 500; 198 letter-spacing: 0.22em; text-transform: uppercase; 199 color: var(--lime); 200 margin-bottom: 32px; display: block; 201 opacity: 0; transform: translateY(16px); 202} 203.ph-heading-wrap { 204 position: relative; 205 display: inline-block; 206} 207.ph-heading { 208 font-family: 'Bricolage Grotesque', sans-serif; 209 font-weight: 800; 210 font-size: clamp(64px, 10vw, 140px); 211 line-height: 0.88; letter-spacing: -0.04em; 212 color: var(--light); 213 margin: 0; 214} 215.ph-line { display: block; } 216.ph-word { display: inline-block; will-change: transform, opacity; } 217.ph-float { 218 position: absolute; 219 height: clamp(72px, 7vw, 118px); 220 width: auto; 221 pointer-events: none; 222} 223.ph-float-book { left: -12%; top: 50px; } 224.ph-float-hand { right: -12%; bottom: -10%; } 225.ph-sub { 226 font-family: 'DM Sans', sans-serif; 227 font-weight: 400; 228 font-size: clamp(18px, 1.8vw, 24px); 229 line-height: 1.5; 230 color: var(--light); 231 margin-top: 52px; 232 opacity: 0; transform: translateY(20px); 233} 234.ph-sub strong { font-weight: 700; } 235.ph-sticker { 236 display: inline-block; 237 vertical-align: middle; 238 height: 0.78em; 239 width: auto; 240 object-fit: contain; 241 margin: 0 0.02em; 242 position: relative; 243 top: -0.04em; 244} 245.ph-rule { 246 display: flex; align-items: center; gap: 20px; 247 padding: 32px 56px 0; 248 background: var(--dark); 249} 250.ph-rule-line { flex: 1; height: 1px; background: rgba(249,249,249,0.1); } 251.ph-rule-label { 252 font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; 253 letter-spacing: 0.18em; text-transform: uppercase; 254 color: rgba(249,249,249,0.28); white-space: nowrap; 255} 256 257/* âââ HERO PHOTOS ââââââââââââââââââââââââââââââââââââââ */ 258.ph-photo { 259 position: absolute; 260 aspect-ratio: 4 / 5; 261 border-radius: 14px; 262 overflow: hidden; 263 pointer-events: none; 264 opacity: 0; 265 will-change: transform, opacity; 266} 267.ph-photo-inner { 268 width: 100%; height: 100%; 269 background-size: cover; 270 background-position: center; 271} 272/* large â pulled in, frame the heading top */ 273#phImg1 { top: 6%; left: 17%; width: clamp(145px, 13vw, 215px); } 274#phImg4 { top: 8%; right: 17%; width: clamp(145px, 13vw, 215px); } 275/* small â pushed out to the edge */ 276#phImg2 { top: 40%; left: 2%; width: clamp(160px, 15vw, 240px); aspect-ratio: 3/2; } 277#phImg5 { top: 44%; right: 2%; width: clamp(160px, 15vw, 240px); aspect-ratio: 3/2; } 278/* medium â pulled in, frame below the sub copy */ 279#phImg3 { top: 70%; left: 15%; width: clamp(125px, 11vw, 185px); } 280#phImg6 { top: 72%; right: 15%; width: clamp(125px, 11vw, 185px); } 281@media (max-width: 768px) { .ph-photo { display: none; } } 282 283/* âââ HOW WE CAN HELP PANELS âââââââââââââââââââââââââââ */ 284.hwch-section { 285 background: var(--dark); 286 padding: 220px 24px 100px; 287} 288.hwch-statement { 289 font-family: 'Bricolage Grotesque', sans-serif; 290 font-weight: 800; 291 font-size: clamp(40px, 5.5vw, 72px); 292 line-height: 0.92; 293 letter-spacing: -0.03em; 294 color: var(--light); 295 text-align: center; 296 margin-bottom: 72px; 297} 298.hwch-grid { 299 display: flex; 300 gap: 20px; 301 align-items: stretch; 302} 303/* Mobile carousel nav â hidden on desktop (shown in the mobile @media) */ 304.hwch-nav { display: none; } 305@keyframes hwchPanelIn { 306 from { opacity: 0; transform: translateY(16px) scale(0.985); } 307 to { opacity: 1; transform: none; } 308} 309.hwch-panel { 310 border-radius: 28px; 311 overflow: hidden; 312 flex: 1; 313 height: clamp(320px, 55vh, 480px); 314 cursor: pointer; 315 position: relative; 316 transform: rotate(var(--panel-rotation, 0deg)); 317 transform-origin: 50% 65%; 318 transition: flex 0.85s cubic-bezier(0.65, 0, 0.35, 1), 319 opacity 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); 320} 321.hwch-teal { background: var(--teal); --panel-rotation: -1.5deg; } 322.hwch-orange { background: var(--orange);
322 --panel-rotation: 0deg; } 323.hwch-purple { background: var(--purple); --panel-rotation: 1.5deg; } 324/* Hover is now only a cue â a slight lift; expansion happens on CLICK (.is-open). */ 325@media (hover: hover) { 326 .hwch-panel:not(.is-open):hover { 327 transform: rotate(0deg) translateY(-6px); 328 } 329} 330/* âââ CLICK-TO-EXPAND âââââââââââââââââââââââââââââââââââ 331 A panel opens on click (JS toggles .is-open); its siblings shrink (accordion). */ 332.hwch-grid:has(.hwch-panel.is-open) .hwch-panel:not(.is-open) { 333 flex: 0.5; 334 transform: scale(0.97) rotate(var(--panel-rotation, 0deg)); 335 opacity: 1; 336} 337.hwch-panel.is-open { 338 flex: 3; 339 transform: rotate(0deg); 340} 341.hwch-grid:has(.hwch-panel.is-open) .hwch-panel:not(.is-open) .hwch-panel-inner { 342 opacity: 0; 343 transition: opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); 344} 345/* Fade non-open panels' title/sub out immediately â prevents reflow being visible as panels shrink/expand */ 346.hwch-grid:has(.hwch-panel.is-open) .hwch-panel:not(.is-open) .hwch-title, 347.hwch-grid:has(.hwch-panel.is-open) .hwch-panel:not(.is-open) .hwch-sub { 348 opacity: 0; 349 transition: opacity 0.15s ease; 350} 351.hwch-panel.is-open .hwch-panel-left { flex: 0 0 38%; } 352.hwch-panel.is-open .hwch-panel-right { 353 flex: 0 0 62%; opacity: 1; transform: translateY(0); 354 /* ENTER: expand width first, then fade content in */ 355 transition: flex 0.85s cubic-bezier(0.65, 0, 0.35, 1), 356 opacity 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.85s, 357 transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.85s; 358} 359.hwch-panel-inner { 360 display: flex; 361 width: 100%; 362 height: 100%; 363 padding: 28px; 364 box-sizing: border-box; 365 /* delayed fade-in so icon reappears only once panel has expanded */ 366 transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s; 367} 368.hwch-panel-left { 369 flex: 0 0 100%; 370 display: flex; 371 flex-direction: column; 372 overflow: hidden; 373 min-width: 0; 374 transition: flex 0.85s cubic-bezier(0.65, 0, 0.35, 1); 375} 376.hwch-panel-right { 377 flex: 0 0 0%; 378 overflow: hidden; 379 display: flex; 380 flex-direction: column; 381 justify-content: flex-start; 382 padding-left: 28px; 383 opacity: 0; 384 transform: translateY(14px); 385 min-width: 0; 386 /* EXIT: fade content out first, then collapse width */ 387 transition: flex 0.85s cubic-bezier(0.65, 0, 0.35, 1) 0.3s, 388 opacity 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), 389 transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); 390} 391.hwch-sticker { 392 width: clamp(100px, 12vw, 160px); 393 height: clamp(100px, 12vw, 160px); 394 object-fit: contain; 395 display: block; 396 flex-shrink: 0; 397} 398.hwch-title { 399 font-family: 'Bricolage Grotesque', sans-serif; 400 font-weight: 800; 401 font-size: clamp(32px, 3.8vw, 58px); 402 line-height: 0.92; letter-spacing: -0.03em; 403 color: var(--dark); 404 margin-bottom: 16px; 405 opacity: 1; 406 /* delayed fade-in so text reappears only once panel has expanded */ 407 transition: color 0s, opacity 0.4s ease 0.5s; 408} 409.hwch-sub { 410 font-family: 'DM Sans', sans-serif; 411 font-weight: 300; font-size: 18px; line-height: 1.35; 412 color: rgba(34,34,34,0.72); 413 opacity: 1; 414 transition: color 0s, opacity 0.4s ease 0.5s; 415} 416 417/* Expand wrapper â grid-template-rows trick for smooth height reveal */ 418.hwch-expand-wrap { 419 display: grid; 420 grid-template-rows: 0fr; 421 transition: grid-template-rows 0.55s var(--ease-brand); 422} 423.hwch-panel:hover .hwch-expand-wrap { 424 grid-template-rows: 1fr; 425} 426.hwch-expand { 427 overflow: hidden; 428 opacity: 0; 429 transition: opacity 0s; 430} 431.hwch-panel:hover .hwch-expand { 432 opacity: 1; 433 transition: opacity 0.45s var(--ease-brand) 0.22s; 434} 435.hwch-desc { 436 font-family: 'DM Sans', sans-serif; 437 font-weight: 300; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.2; 438 color: var(--dark); 439} 440.hwch-tags-label { 441 font-family: 'DM Mono', monospace; 442 font-size: 13px; font-weight: 500; 443 letter-spacing: 0.18em; text-transform: uppercase; 444 color: rgba(34,34,34,0.7); 445 margin-top: auto; 446 padding-top: 24px; 447 margin-bottom: 4px; 448} 449.hwch-tags-hint { 450 font-family: 'DM Mono', monospace; 451 font-size: 10px; font-weight: 500; 452 letter-spacing: 0.14em; text-transform: uppercase; 453 color: rgba(34,34,34,0.38); 454 margin-bottom: 10px; 455 display: none; 456} 457@media (hover: hover) { .hwch-tags-hint { display: block; } } 458.hwch-tags { 459 list-style: none; 460 display: flex; flex-wrap: wrap; gap: 8px; 461 padding-bottom: 4px; 462 margin-top: clamp(18px, 2.5vh, 32px); 463} 464.hwch-tags li { 465 font-family: 'DM Mono', monospace; 466 font-size: 12px; font-weight: 500; 467 letter-spacing: 0.11em; text-transform: uppercase; 468 line-height: 1; 469 padding: 11px 22px; border-radius: 999px; 470 background: var(--dark); 471 color: var(--light); 472 white-space: nowrap; 473} 474.hwch-tags li[data-tip] { cursor: default; } 475 476/* âââ PANEL HOVER AFFORDANCE âââââââââââââââââââââââââââ */ 477.hwch-plus { 478 position: absolute; 479 bottom: 22px; right: 22px; 480 width: 34px; height: 34px; 481 border-radius: 50%; 482 background: rgba(0, 0, 0, 0.12); 483 display: flex; align-items: center; justify-content: center; 484 color: var(--dark); 485 pointer-events: auto; 486 cursor: pointer; 487 user-select: none; 488 transition: background 0.25s ease, color 0.25s ease; 489} 490/* the vertical stroke fades out when the panel is open â the + becomes a â (click to minimise) */ 491.hwch-plus svg line:first-child { transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } 492.hwch-panel.is-open .hwch-plus svg line:first-child { opacity: 0; } 493@keyframes hwchPlusSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } 494@media (hover: hover) { 495 /* hovering a closed panel spins the + once â the "click to expand" cue */ 496 .hwch-panel:not(.is-open):hover .hwch-plus { animation: hwchPlusSpin 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } 497 /* hovering the + itself turns it into a button: dark icon on a white circle */ 498 .hwch-plus:hover { background: var(--light); color: var(--dark); } 499} 500@media (prefers-reduced-motion: reduce) { 501 .hwch-panel:not(.is-open):hover .hwch-plus { animation: none; } 502} 503 504/* âââ OFFERING TOOLTIP âââââââââââââââââââââââââââââââââ */ 505.hwch-tip { 506 position: fixed;
507 z-index: 9995; 508 pointer-events: none; 509 background: #1a1a1a; 510 color: var(--light); 511 font-family: 'DM Sans', sans-serif; 512 font-size: 13px; font-weight: 300; 513 line-height: 1.45; 514 padding: 10px 14px; 515 border-radius: 8px; 516 max-width: 210px; 517 border: 1px solid rgba(249,249,249,0.12); 518 box-shadow: 0 4px 24px rgba(0,0,0,0.55); 519 opacity: 0; 520 transition: opacity 0.18s ease; 521 letter-spacing: 0; 522 text-transform: none; 523} 524 525/* âââ SCALE SECTION âââââââââââââââââââââââââââââââââââ */ 526.scale-section { 527 position: relative; 528 min-height: 380vh; 529 background: var(--dark); 530} 531.scale-stage { 532 position: sticky; 533 top: 0; 534 height: 100vh; 535 display: flex; 536 flex-direction: column; 537 align-items: center; 538 justify-content: center; 539 overflow: hidden; 540 padding: 0 80px; 541} 542.scale-header { 543 text-align: center; 544 position: relative; 545 z-index: 2; 546 margin-bottom: 56px; 547 max-width: 800px; 548} 549.scale-h2 { 550 font-family: 'Bricolage Grotesque', sans-serif; 551 font-weight: 800; 552 font-size: clamp(36px, 4.8vw, 68px); 553 line-height: 0.92; 554 letter-spacing: -0.03em; 555 color: var(--light); 556 margin-bottom: 16px; 557} 558.scale-sub { 559 font-family: 'DM Sans', sans-serif; 560 font-weight: 300; 561 font-size: clamp(15px, 1.3vw, 18px); 562 line-height: 1.5; 563 color: var(--light); 564 max-width: 44ch; 565 margin: 0 auto; 566} 567 568/* âââ SPECTRUM VISUAL âââââââââââââââââââââââââââââââââââ */ 569.spectrum-outer { 570 width: 100%; 571 max-width: 960px; 572 position: relative; 573 z-index: 2; 574} 575.spectrum-ends { 576 display: flex; 577 justify-content: space-between; 578 margin-bottom: 14px; 579} 580.spectrum-end-label { 581 font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; 582 letter-spacing: 0.14em; text-transform: uppercase; 583 color: rgba(249,249,249,0.55); 584} 585.spectrum-track-wrap { 586 position: relative; 587 height: 4px; 588} 589.spectrum-track-bg { 590 position: absolute; 591 inset: 0; 592 background: rgba(249,249,249,0.1); 593 border-radius: 999px; 594} 595.spectrum-track-fill { 596 position: absolute; 597 left: 0; top: 0; bottom: 0; 598 width: 16.67%; 599 background: linear-gradient(to right, #19F4D4, #AE99FF, #36DBFF); 600 border-radius: 999px; 601} 602.spectrum-tick { 603 position: absolute; 604 top: 50%; 605 width: 3px; 606 height: 14px; 607 border-radius: 2px; 608 background: rgba(249,249,249,0.2); 609 transform: translate(-50%, -50%); 610 transition: background 0.45s ease, height 0.35s ease; 611 z-index: 2; 612} 613.spectrum-tick.s-active { 614 background: var(--s-color, var(--light)); 615 height: 22px; 616} 617.spectrum-indicator { 618 position: absolute; 619 top: 50%; 620 left: 16.67%; 621 width: 30px; 622 height: 30px; 623 border-radius: 50%; 624 background: var(--light); 625 transform: translate(-50%, -50%); 626 z-index: 4; 627 box-shadow: 0 0 0 6px rgba(249,249,249,0.1), 0 0 20px rgba(249,249,249,0.15); 628} 629.spectrum-indicator::after { 630 content: ''; 631 position: absolute; 632 inset: -10px; 633 border-radius: 50%; 634 border: 1.5px solid rgba(249,249,249,0.15); 635 animation: specPulse 2.4s ease-in-out infinite; 636} 637@keyframes specPulse { 638 0%,100% { transform: scale(1); opacity: 0.7; } 639 50% { transform: scale(1.8); opacity: 0; } 640} 641@media (prefers-reduced-motion: reduce) { 642 .spectrum-indicator::after { animation: none; } 643} 644.spectrum-cards { 645 display: grid; 646 grid-template-columns: 1fr 1fr 1fr; 647 gap: 24px; 648 margin-top: 52px; 649} 650.spectrum-card { 651 transition: opacity 0.5s ease; 652} 653.spectrum-card:not(.s-active) { opacity: 0.2; } 654.spectrum-card.s-active { opacity: 1; } 655.spectrum-card:nth-child(2) { text-align: center; } 656.spectrum-card:nth-child(3) { text-align: right; } 657.spectrum-card-num { 658 font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; 659 letter-spacing: 0.22em; text-transform: uppercase; 660 color: rgba(249,249,249,0.3); 661 display: block; margin-bottom: 12px; 662 transition: color 0.45s ease; 663} 664.spectrum-card.s-active .spectrum-card-num { color: var(--s-color, var(--light)); } 665.spectrum-card-title { 666 font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; 667 font-size: clamp(24px, 2.6vw, 36px); 668 line-height: 1.0; letter-spacing: -0.025em; 669 color: var(--light); 670 margin-bottom: 12px; 671} 672.spectrum-card-desc { 673 font-family: 'DM Sans', sans-serif; font-weight: 300; 674 font-size: 15px; line-height: 1.55; 675 color: var(--light); 676} 677.spectrum-card:nth-child(2) .spectrum-card-desc { margin: 0 auto; } 678.spectrum-card:nth-child(3) .spectrum-card-desc { margin-left: auto; } 679 680 681/* âââ CTA BAND âââââââââââââââââââââââââââââââââââââââââ */ 682.services-cta { 683 background: var(--dark); 684 padding: 120px 56px; 685 border-top: 1px solid rgba(249,249,249,0.08); 686} 687.services-cta-inner { 688 max-width: 900px; margin: 0 auto; text-align: center; 689} 690.services-cta-eyebrow { 691 font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 500; 692 letter-spacing: 0.22em; text-transform: uppercase; 693 color: var(--lime); display: block; margin-bottom: 28px; 694} 695.services-cta h2 { 696 font-family: 'Bricolage Grotesque', sans-serif; 697 font-weight: 800; font-size: clamp(40px, 5.5vw, 72px); 698 line-height: 0.92; letter-spacing: -0.03em; 699 color: var(--light); margin-bottom: 48px; 700} 701.services-cta h2 em { font-style: normal;
701 color: var(--lime); } 702 703/* âââ SHARED BUTTON ââââââââââââââââââââââââââââââââââââ */ 704.btn-help { 705 display: inline-flex; align-items: center; gap: 12px; 706 font-family: 'DM Mono', monospace; font-size: 11px; 707 letter-spacing: 0.14em; text-transform: uppercase; 708 color: var(--dark); background: transparent; 709 border: 1px solid rgba(34,34,34,0.4); border-radius: 999px; 710 padding: 14px 28px; cursor: pointer; 711 text-decoration: none; font-weight: 500; 712 align-self: flex-start; margin-top: 18px; 713 position: relative; overflow: hidden; 714 transition: color 0.35s ease, border-color 0.35s ease; 715} 716.btn-help::before { 717 content: ''; position: absolute; inset: 0; 718 background: var(--dark); transform: translateX(-101%); 719 transition: transform 0.35s ease; border-radius: inherit; 720} 721.btn-help:hover::before { transform: translateX(0); } 722.btn-help:hover { color: var(--light); } 723.btn-help:hover .btn-help-arrow svg { fill: var(--light); } 724.btn-help span { position: relative; z-index: 2; } 725.btn-help-arrow { position: relative; z-index: 2; display: flex; align-items: center; } 726.btn-help .btn-help-arrow svg { width: 18px; height: 18px; display: block; fill: var(--dark); transition: fill 0.35s ease; } 727.btn-intent { 728 display: inline-flex; align-items: center; gap: 12px; 729 font-family: 'DM Mono', monospace; font-size: 11px; 730 letter-spacing: 0.14em; text-transform: uppercase; 731 color: var(--dark); background: var(--lime); 732 border: none; border-radius: 999px; 733 padding: 14px 28px; cursor: pointer; 734 text-decoration: none; font-weight: 500; 735 position: relative; overflow: hidden; 736 transition: color 0.35s ease; 737} 738.btn-intent::before { 739 content: ''; position: absolute; inset: 0; 740 background: var(--dark); transform: translateX(-101%); 741 transition: transform 0.35s ease; border-radius: 999px; 742} 743.btn-intent:hover::before { transform: translateX(0); } 744.btn-intent:hover { color: var(--light); } 745.btn-intent:hover .btn-intent-arrow svg { fill: var(--light); } 746.btn-intent span { position: relative; z-index: 1; } 747.btn-intent .btn-intent-arrow svg { fill: var(--dark); transition: fill 0.35s ease; } 748/* On a dark/black section the wipe fills white with dark ink (text + arrow stay dark) */ 749.btn-intent.btn-on-dark::before { background: var(--light); } 750.btn-intent.btn-on-dark:hover { color: var(--dark); } 751.btn-intent.btn-on-dark:hover .btn-intent-arrow svg { fill: var(--dark); } 752 753/* âââ FOOTER âââââââââââââââââââââââââââââââââââââââââââ */ 754.site-footer { 755 position: relative; overflow: hidden; 756 background: var(--dark); color: var(--light); 757 padding: 72px 64px 32px; 758 border-top: 1px solid rgba(249,249,249,0.08); 759} 760.footer-inner { max-width: 1320px; margin: 0 auto; } 761.footer-cta { 762 display: flex; justify-content: space-between; align-items: flex-end; 763 gap: 40px; padding-bottom: 48px; 764 border-bottom: 1px solid rgba(249,249,249,0.12); flex-wrap: wrap; 765} 766.footer-cta .f-eyebrow { 767 font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 500; 768 letter-spacing: 0.14em; text-transform: uppercase; 769 color: var(--cyan); margin-bottom: 16px; 770} 771.footer-cta h2 { 772 font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; 773 font-size: clamp(30px, 3.4vw, 46px); line-height: 1.04; 774 letter-spacing: -0.015em; max-width: 16ch; color: var(--light); 775} 776.footer-cta h2 em { font-style: normal; color: var(--cyan); } 777.footer-pill { 778 display: inline-flex; align-items: center; gap: 9px; 779 height: 48px; padding: 0 26px; border-radius: 999px; 780 background: var(--cyan); color: var(--dark); 781 font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 14px; 782 white-space: nowrap; text-decoration: none; 783 transition: transform 220ms var(--ease-brand), background 200ms var(--ease-brand); 784} 785.footer-pill:hover { background: var(--light); transform: translateX(4px); } 786.footer-pill svg { width: 16px; height: 16px; flex-shrink: 0; } 787.footer-cols { 788 display: grid; grid-template-columns: repeat(3, 1fr) 1.3fr; 789 gap: 48px; padding: 48px 0 64px; 790} 791.footer-col h5 { 792 font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 500; 793 letter-spacing: 0.12em; text-transform: uppercase; 794 color: rgba(249,249,249,0.5); margin-bottom: 20px; 795} 796.footer-col a.f-lnk { 797 display: block; font-family: 'DM Sans', sans-serif; font-size: 15px; 798 padding: 7px 0; color: rgba(249,249,249,0.82); width: fit-content; 799 text-decoration: none; 800 transition: color 160ms var(--ease-brand), transform 200ms var(--ease-brand); 801} 802.footer-col a.f-lnk:hover { color: var(--cyan); transform: translateX(3px); } 803.f-addr { font-size: 13.5px; line-height: 1.65; color: rgba(249,249,249,0.62); margin-top: 4px; } 804.f-addr .f-place { display: block; color: var(--light); font-weight: 600; font-size: 13px; margin-bottom: 3px; } 805.f-addr .f-block { margin-bottom: 16px; } 806.footer-news h5 { margin-bottom: 10px; } 807.footer-news p { 808 font-family: 'DM Sans', sans-serif; font-size: 13.5px; 809 color: rgba(249,249,249,0.6); line-height: 1.5; margin-bottom: 18px; max-width: 34ch; 810} 811.f-news-field { 812 display: flex; align-items: center; gap: 8px; 813 background: rgba(249,249,249,0.05); border: 1px solid rgba(249,249,249,0.12); 814 border-radius: 999px; padding: 5px 5px 5px 20px; 815 transition: border-color 200ms var(--ease-brand); 816} 817.f-news-field:focus-within { border-color: var(--cyan); } 818.f-news-field input { 819 flex: 1; background: none; border: none; outline: none; 820 color: var(--light); font-family: 'DM Sans', sans-serif; font-size: 15px; 821} 822.f-news-field input::placeholder { color: rgba(249,249,249,0.4); } 823.f-news-submit { 824 height: 40px; padding: 0 22px; border-radius: 999px; border: none; 825 background: var(--cyan); color: var(--dark); 826 font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 13px; 827 cursor: pointer; flex: none; transition: background 200ms var(--ease-brand); 828} 829.f-news-submit:hover { background: var(--light); } 830.f-news-help { font-size: 12px; color: rgba(249,249,249,0.45); margin-top: 11px; } 831.f-news-help.error { color: var(--orange); } 832.f-news-help.ok { color: var(--cyan); } 833.f-socials { display: flex; gap: 10px; margin-top: 24px; } 834.f-socials a { 835 display: flex; align-items: center; justify-content: center; 836 width: 42px; height: 42px; border-radius: 999px; 837 border: 1px solid rgba(249,249,249,0.12); color: rgba(249,249,249,0.75); 838 text-decoration: none; 839 transition: background 200ms var(--ease-brand), color 200ms var(--ease-brand), 840 border-color 200ms, transform 200ms var(--ease-brand); 841} 842.f-socials a:hover { background: var(--cyan); border-color: var(--cyan); color: var(--dark); transform: translateY(-3px); } 843.f-socials svg { width: 18px; height: 18px; } 844.f-hero-logo { padding: 12px 0 30px; } 845.f-logo-svg { display: block; width: 100%; height: auto; } 846.f-bottombar { 847 display: flex; justify-content: space-between; align-items: center; 848 gap: 20px; padding-top: 26px; 849 border-top: 1px solid rgba(249,249,249,0.12); flex-wrap: wrap; 850} 851.f-bottombar .f-cr { font-size: 12.5px; color: rgba(249,249,249,0.5); } 852.f-legal { display: flex; gap: 24px; } 853.f-legal a { font-size: 12.5px; color: rgba(249,249,249,0.6); text-decoration: none; transition: color 160ms var(--ease-brand); } 854.f-legal a:hover { color: var(--cyan); } 855@media (max-width: 900px) { 856 .footer-cols { grid-template-columns: 1fr 1fr; } 857 .footer-news { grid-column: 1 / -1; } 858} 859 860/* âââ TESTIMONIALS âââââââââââââââââââââââââââââââââââ */ 861.t-track { height: 370vh; position: relative; } 862.t-sticky { 863 position: sticky; top: 0; height: 100vh; 864 overflow: hidden; 865 display: flex; flex-direction: column; 866 justify-content: center; 867 background: var(--dark); 868} 869.t-head { 870 flex: 0 0 auto; text-align: center; 871 padding: clamp(88px, 10vh, 120px) 24px clamp(8px, 1.5vh, 16px); 872 will-change: transform, opacity; 873} 874.t-eyebrow { 875 font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; 876 letter-spacing: 0.22em; text-transform: uppercase; 877 color: var(--cyan); display: block; margin-bottom: 16px; 878} 879.t-h2 {
880 font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; 881 font-size: clamp(28px, 3.6vw, 52px); 882 line-height: 1.0; letter-spacing: -0.025em; color: var(--light); 883} 884.t-h2 em { font-style: normal; color: var(--cyan); } 885.t-grid { 886 flex: 0 0 auto; 887 display: grid; grid-template-columns: repeat(3, 1fr); 888 align-items: stretch; 889 gap: clamp(8px, 0.9vw, 12px); 890 padding: 0 clamp(20px, 4vw, 56px) clamp(10px, 2vh, 28px); 891 max-width: 1200px; margin: 0 auto; width: 100%; 892} 893.tcell { will-change: transform, opacity, filter; display: flex; } 894.tcard { 895 flex: 1; width: 100%; 896 padding: clamp(14px, 1.5vw, 22px); 897 border: 1px solid rgba(249,249,249,0.12); 898 border-radius: 10px; 899 background: rgba(255,255,255,0.05); 900 display: flex; flex-direction: column; 901 transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease; 902 cursor: default; 903} 904.tcard:hover { background: var(--cyan); border-color: var(--cyan); transform: translateY(-3px); } 905.tcard-qm { 906 font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; 907 font-size: clamp(30px, 3.4vw, 52px); 908 line-height: 0.78; color: var(--cyan); 909 margin-bottom: clamp(6px, 0.9vh, 10px); 910 user-select: none; transition: color 0.22s ease; 911} 912.tcard:hover .tcard-qm { color: var(--dark); } 913.tcard-q { 914 font-family: 'Bricolage Grotesque', sans-serif; font-weight: 400; 915 font-size: clamp(14px, 1.35vw, 19px); 916 line-height: 1.42; letter-spacing: -0.01em; 917 color: var(--light); 918 margin-bottom: clamp(10px, 1.3vh, 16px); 919 transition: color 0.22s ease; 920} 921.tcard:hover .tcard-q { color: var(--dark); } 922.tcard-attr { 923 padding-top: clamp(8px, 1vh, 12px); 924 border-top: 1px solid rgba(249,249,249,0.12); 925 display: flex; flex-direction: column; gap: 5px; 926 transition: border-color 0.22s ease; 927} 928.tcard:hover .tcard-attr { border-color: rgba(34,34,34,0.22); } 929.tcard-name { 930 font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; 931 color: var(--light); transition: color 0.22s ease; 932} 933.tcard:hover .tcard-name { color: var(--dark); } 934.tcard-role { 935 font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; 936 text-transform: uppercase; letter-spacing: 0.04em; 937 color: rgba(249,249,249,0.42); transition: color 0.22s ease; 938} 939.tcard:hover .tcard-role { color: rgba(34,34,34,0.55); } 940.t-scroll-cue { 941 position: absolute; left: 50%; bottom: 22px; 942 transform: translateX(-50%); 943 display: flex; flex-direction: column; align-items: center; gap: 8px; 944 color: rgba(249,249,249,0.42); 945 font-family: 'DM Mono', monospace; font-size: 11px; 946 letter-spacing: 0.22em; text-transform: uppercase; 947 pointer-events: none; 948} 949.t-cue-dot { animation: tCueBob 1.6s ease infinite; } 950@keyframes tCueBob { 951 0%,100% { transform: translateY(0); opacity: 1; } 952 50% { transform: translateY(8px); opacity: 0.2; } 953} 954@media (prefers-reduced-motion: reduce) { .t-cue-dot { animation: none; } } 955.t-rule { height: 1px; background: rgba(249,249,249,0.08); width: 100%; } 956@media (max-height: 700px) { 957 .t-head { padding: 6px 24px 4px; } 958 .t-h2 { font-size: clamp(20px, 3vw, 36px); } 959 .tcard { padding: 10px 12px; } 960 .tcard-qm { font-size: 28px; margin-bottom: 4px; } 961 .tcard-q { font-size: 13px; margin-bottom: 8px; } 962 .tcard-attr { padding-top: 6px; gap: 2px; } 963 .tcard-name { font-size: 12px; } 964 .tcard-role { font-size: 10px; } 965 .t-grid { gap: 6px; padding: 0 16px 8px; } 966} 967 968/* âââ AWARDS SECTION âââââââââââââââââââââââââââââââââââ */ 969#awOuter { margin-top: clamp(60px, 9vh, 120px); } 970.aw-track { height: 420vh; position: relative; } 971.aw-sticky { 972 position: sticky; top: 0; height: 100vh; 973 overflow: hidden; 974 display: flex; flex-direction: column; 975 justify-content: center; 976 gap: clamp(20px, 3.5vh, 40px); 977 background: var(--purple); 978} 979.aw-head { 980 padding: 0 clamp(24px, 4vw, 60px); flex: 0 0 auto; 981 text-align: center; 982 transition: opacity 0.55s var(--ease-brand), transform 0.55s var(--ease-brand); 983} 984.aw-eyebrow { 985 font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 500; 986 letter-spacing: 0.04em; text-transform: uppercase; 987 color: var(--dark); opacity: 0.6; display: block; margin-bottom: 10px; 988} 989.aw-title { 990 font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; 991 font-size: clamp(36px, 4.8vw, 68px); 992 line-height: 0.92; letter-spacing: -0.03em; color: var(--dark); 993} 994.aw-title em { font-style: normal;
994 color: var(--dark); } 995.aw-rows { flex: 0 0 auto; display: flex; flex-direction: column; gap: clamp(12px, 1.6vh, 20px); } 996.aw-row-wrap { 997 overflow: hidden; 998 transition: opacity 0.72s 0.06s var(--ease-brand), transform 0.72s 0.06s var(--ease-brand); 999} 1000.aw-rows .aw-row-wrap:last-child { 1001 transition: opacity 0.72s 0.16s var(--ease-brand), transform 0.72s 0.16s var(--ease-brand); 1002} 1003.aw-row { display: flex; gap: clamp(12px, 1.2vw, 18px); will-change: transform; padding: 4px 0; } 1004.aw-card { 1005 flex: 0 0 clamp(220px, 20vw, 290px); 1006 padding: clamp(18px, 2vw, 26px); 1007 border-radius: 12px; background: var(--dark); 1008 border: 1px solid transparent; 1009 display: flex; flex-direction: column; gap: 8px; cursor: default; 1010} 1011.aw-logo { 1012 width: 100%; height: 36px; 1013 object-fit: contain; object-position: left center; 1014 margin-bottom: 4px; 1015 flex-shrink: 0; 1016 display: block; 1017} 1018.aw-year { 1019 font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; 1020 letter-spacing: 0.04em; text-transform: uppercase; color: var(--purple); 1021} 1022.aw-name { 1023 font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; 1024 font-size: clamp(15px, 1.5vw, 19px); 1025 line-height: 1.2; letter-spacing: -0.01em; flex: 1; color: var(--light); 1026} 1027.aw-level { 1028 font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; 1029 letter-spacing: 0.04em; text-transform: uppercase; color: rgba(249,249,249,0.55); 1030} 1031.aw-body { 1032 font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; 1033 letter-spacing: 0.04em; text-transform: uppercase; color: rgba(249,249,249,0.4); 1034 margin-top: auto; padding-top: 6px; 1035} 1036.aw-progress { 1037 flex: 0 0 auto; height: 1px; 1038 background: rgba(34,34,34,0.25); 1039 margin: 0 clamp(24px, 4vw, 60px); 1040 position: relative; overflow: hidden; 1041} 1042.aw-progress-fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--dark); } 1043.aw-cue { 1044 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); 1045 display: flex; flex-direction: column; align-items: center; gap: 8px; 1046 color: rgba(34,34,34,0.45); 1047 font-family: 'DM Mono', monospace; font-size: 11px; 1048 letter-spacing: 0.22em; text-transform: uppercase; pointer-events: none; 1049} 1050.aw-cue-dot { animation: awCueBob 1.6s ease infinite; } 1051@keyframes awCueBob { 1052 0%,100% { transform: translateY(0); opacity: 1; } 1053 50% { transform: translateY(8px); opacity: 0.2; } 1054} 1055@media (prefers-reduced-motion: reduce) { .aw-cue-dot { animation: none; } } 1056.aw-sticky.e-pending .aw-head { opacity: 0; transform: translateX(-56px); } 1057.aw-sticky.e-pending .aw-rows .aw-row-wrap:first-child { opacity: 0; transform: translateX(-100vw); } 1058.aw-sticky.e-pending .aw-rows .aw-row-wrap:last-child { opacity: 0; transform: translateX(100vw); } 1059@media (max-height: 680px) { 1060 .aw-title { font-size: clamp(28px, 3.6vw, 48px); } 1061 .aw-card { padding: 12px 14px; } 1062 .aw-name { font-size: 14px; } 1063 .aw-logo { height: 28px; } 1064} 1065 1066</style> 1067 1068<style> 1069/* âââ MOBILE RESPONSIVE âââââââââââââââââââââââââââââââââââ */ 1070@media (max-width: 768px) { 1071 /* âââ HEADER / NAV ââââââââââââââââââââââââââââââââââââââââââââ */ 1072 .tst-header { padding: 16px 20px; } 1073 .tst-header.tst-hidden { transform: translateY(-100%); } 1074 .tst-header-cta { display: none; } 1075 .tst-nav-menu { width: 100% !important; } 1076 .tst-nav-inner { padding: 100px 28px 36px; } 1077 .tst-nav-heading { font-size: clamp(22px, 6.6vw, 42px); white-space: nowrap; } 1078 1079 /* âââ FOOTER ââââââââââââââââââââââââââââââââââââââââââââââââââ */ 1080 .site-footer { padding: 60px 20px 28px; } 1081 .footer-cta { flex-direction: column; align-items: flex-start; gap: 24px; } 1082 .footer-cols { grid-template-columns: 1fr 1fr; } 1083 .footer-news { grid-column: 1 / -1; } 1084 1085 /* âââ PAGE HERO âââââââââââââââââââââââââââââââââââââââââââââââ */ 1086 .page-hero { padding: 100px 20px 60px !important; min-height: 100dvh; } 1087 .ph-heading { font-size: clamp(44px, 10vw, 100px); } 1088 .ph-float { display: none; } 1089 .ph-sub { font-size: clamp(16px, 4vw, 20px); margin-top: 32px; } 1090 .ph-rule { padding: 24px 20px 0; } 1091 1092 /* âââ SERVICE PANELS (3-col â 1-col) ââââââââââââââââââââââââââ */ 1093 .hwch-section { padding: 80px 16px 60px; } 1094 .hwch-statement { font-size: clamp(32px, 8vw, 56px); margin-bottom: 48px; } 1095 /* Carousel: one panel at a time, switched by the .hwch-nav pills */ 1096 .hwch-grid { display: block; } 1097 .hwch-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 28px; } 1098 .hwch-nav-btn { 1099 padding: 11px 16px; border-radius: 999px; white-space: nowrap; 1100 border: 1px solid rgba(249,249,249,0.25); background: transparent; 1101 color: var(--light); font-family: 'DM Mono', monospace; font-size: 11px; 1102 letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; 1103 cursor: pointer; -webkit-tap-highlight-color: transparent; 1104 transition: background 0.25s, color 0.25s, border-color 0.25s; 1105 } 1106 .hwch-nav-btn[data-panel="0"].is-active { background: var(--purple); color: var(--dark); border-color: var(--purple); } 1107 .hwch-nav-btn[data-panel="1"].is-active { background: var(--orange); color: var(--dark); border-color: var(--orange); } 1108 .hwch-nav-btn[data-panel="2"].is-active { background: var(--teal); color: var(--dark); border-color: var(--teal); } 1109 .spectrum-labels { grid-template-columns: 1fr; } 1110 1111 /* âââ SCALE SECTION (un-pin, stack cards) âââââââââââââââââââââ */ 1112 .scale-section { min-height: auto; } 1113 .scale-stage { position: relative; height: auto; padding: 80px 24px 60px; } 1114 .spectrum-track-wrap { display: none; } 1115 .spectrum-ends { display: none; } 1116 .spectrum-cards { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; } 1117 .spectrum-card, 1118 .spectrum-card:nth-child(2), 1119 .spectrum-card:nth-child(3) { opacity: 1 !important; text-align: left !important; } 1120 .spectrum-card-num { color: var(--s-color, rgba(249,249,249,0.5)) !important; } 1121 1122 /* âââ PANELS: neutralise rotation, reveal all content on mobile ââ */ 1123 .hwch-panel { display: none; height: auto !important; transform: none !important; flex: none !important; } 1124 .hwch-panel.is-active { display: block; animation: hwchPanelIn 0.42s cubic-bezier(0.2, 0.8, 0.2, 1); } 1125 .hwch-panel-inner { flex-direction: column; padding: 24px; } 1126 .hwch-panel-left { flex: none !important; } 1127 .hwch-panel-right { flex: none !important; opacity: 1 !important; padding-left: 0 !important; margin-top: 20px; } 1128 /* Long sentence-length offerings (e.g. Diagnose card) must wrap, not clip, at phone widths */ 1129 .hwch-tags li { white-space: normal; line-height: 1.35; border-radius: 16px; } 1130 1131 /* âââ SERVICES CTA âââââââââââââââââââââââââââââââââââââââââââââ */ 1132 .services-cta { padding: 80px 20px; } 1133 1134 /* âââ TESTIMONIALS âââââââââââââââââââââââââââââââââââââââââââââ */ 1135 .t-track { height: auto; } 1136 .t-sticky { position: relative; top: auto; height: auto; overflow: visible; 1137 padding: 60px 16px 48px; } 1138 .t-grid { grid-template-columns: 1fr; gap: 12px; padding: 0; } 1139 .tcell { opacity: 1 !important; filter: none !important; transform: none !important; } 1140 .tcard { padding: 20px; } 1141 .t-scroll-cue { display: none; } 1142 1143 /* âââ AWARDS âââââââââââââââââââââââââââââââââââââââââââââââââââ */ 1144 .aw-track { height: auto; } 1145 .aw-sticky { position: relative; top: auto; height: auto; 1146 padding: 60px 0 48px; gap: 24px; } 1147 .aw-row-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; 1148 -webkit-mask-image: none; mask-image: none; } 1149 .aw-row { padding: 4px 20px; } 1150 .aw-sticky.e-pending .aw-head, 1151 .aw-sticky.e-pending .aw-rows .aw-row-wrap:first-child, 1152 .aw-sticky.e-pending .aw-rows .aw-row-wrap:last-child { opacity: 1 !important; transform: none !important; } 1153 .aw-cue { display: none; } 1154 .aw-progress { display: none; } 1155} 1156 1157@media (max-width: 480px) { 1158 .footer-cols { grid-template-columns: 1fr; } 1159 .ph-heading { font-size: clamp(36px, 9vw, 72px); } 1160} 1161</style> 1162<style id="a11y-btn-reset">button.tst-header-cta,button.tst-nav-cta,button.footer-pill,button.cta-btn,button.mobile-float-cta,button.btn-intent{border:0;margin:0;-webkit-appearance:none;appearance:none;cursor:pointer;}</style> 1163<style id="a11y-skip">.skip-link{position:absolute;
1163left:-9999px;top:0;z-index:100000;background:var(--lime,#BDEF00);color:var(--dark,#222);padding:10px 16px;font-family:'DM Mono',monospace;font-size:13px;text-transform:uppercase;letter-spacing:.1em;text-decoration:none}.skip-link:focus{left:0}#main-content:focus{outline:none}</style> 1164</head> 1165<body> 1166<a class="skip-link" href="#main-content">Skip to main content</a> 1167 1168<!-- SLIDE NAV --> 1169<header class="tst-header" id="tstHeader"> 1170 <button class="tst-menu-btn" id="tstMenuBtn" aria-label="Toggle navigation" aria-expanded="false"> 1171 <span class="tst-menu-icon" id="tstMenuIcon" aria-hidden="true"> 1172 <span class="tst-burger-line" id="tstBurgerLine1"></span> 1173 <span class="tst-burger-line" id="tstBurgerLine2"></span> 1174 <span class="tst-burger-line" id="tstBurgerLine3"></span> 1175 </span> 1176 </button> 1177 <a href="../index.html" class="tst-logo" aria-label="TST"> 1178 <svg viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg"> 1179 <path d="M1538.68,768.49h-249.2v-105.58h-105.58v-354.78h460.37v354.78h-105.58v105.58Z"/> 1180 <path d="M630.52,768.49h-249.2v-105.58h-105.58v-354.78h460.37v354.78h-105.58v105.58Z"/> 1181 <path d="M1153.9,308.13h-287.06c-55.63,0-100.73,45.1-100.73,100.73v28.72c0,55.63,45.1,100.73,100.73,100.73h-100.73v230.18h287.06c55.63,0,100.73-45.1,100.73-100.73v-28.72c0-55.63-45.1-100.73-100.73-100.73h100.73v-230.18Z"/> 1182 </svg> 1183 </a> 1184 <button type="button" class="tst-header-cta" onclick="openContact()"><span>Get in touch</span></button> 1185</header> 1186 1187<div class="tst-nav-overlay" id="tstNavOverlay"> 1188 <button class="tst-nav-close" onclick="closeMenu()" aria-label="Close navigation"> 1189 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 1190 <line x1="4" y1="4" x2="20" y2="20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> 1191 <line x1="20" y1="4" x2="4" y2="20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> 1192 </svg> 1193 </button> 1194 <div class="tst-nav-menu" id="tstNavMenu"> 1195 <div class="tst-nav-bg-panels"> 1196 <div class="tst-nav-panel"></div> 1197 <div class="tst-nav-panel"></div> 1198 <div class="tst-nav-panel"></div> 1199 </div> 1200 <nav class="tst-nav-inner" aria-label="Main navigation"> 1201 <ul class="tst-nav-list"> 1202 <li class="tst-nav-item"> 1203 <a href="../index.html" class="tst-nav-link"> 1204 <span class="tst-nav-heading">Home</span> 1205 <span class="tst-nav-num">01</span> 1206 </a> 1207 </li> 1208 <li class="tst-nav-item"> 1209 <a href="../how-we-can-help/how-we-can-help.html" class="tst-nav-link"> 1210 <span class="tst-nav-heading">How we can help</span> 1211 <span class="tst-nav-num">01</span> 1212 </a> 1213 </li> 1214 <li class="tst-nav-item"> 1215 <a href="../in-practice/in-practice.html" class="tst-nav-link"> 1216 <span class="tst-nav-heading">Case studies</span> 1217 <span class="tst-nav-num">02</span> 1218 </a> 1219 </li> 1220 <li class="tst-nav-item"> 1221 <a href="../insights/insights.html" class="tst-nav-link"> 1222 <span class="tst-nav-heading">Insights</span> 1223 <span class="tst-nav-num">03</span> 1224 </a> 1225 </li> 1226 <li class="tst-nav-item"> 1227 <a href="../eco/eco.html" class="tst-nav-link"> 1228 <span class="tst-nav-heading">ECO</span> 1229 <span class="tst-nav-num">01</span> 1230 </a> 1231 </li> 1232 <li class="tst-nav-item"> 1233 <a href="../our-people/our-people.html" class="tst-nav-link"> 1234 <span class="tst-nav-heading">Our people</span> 1235 <span class="tst-nav-num">04</span> 1236 </a> 1237 </li> 1238 1239 </ul> 1240 <div class="tst-nav-cta-wrap"> 1241 <button type="button" onclick="closeMenu();setTimeout(openContact,300);" class="tst-nav-cta"><span>Get in touch</span><span class="btn-intent-arrow"><svg viewBox="0 0 28.35 28.35" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M14.17,0C6.35,0,0,6.35,0,14.17s6.35,14.17,14.17,14.17,14.17-6.35,14.17-14.17S22,0,14.17,0ZM18.67,16.92l-.75.75-2.92-2.92-3.92,3.92-1.41-1.41,3.92-3.92-2.92-2.92.75-.75h7.25v7.25Z"/></svg></span></button> 1242 </div> 1243 <div class="tst-nav-socials"> 1244 <a href="https://www.linkedin.com/company/we-are-tst/" target="_blank" rel="noopener" class="tst-nav-social">LinkedIn</a> 1245 <a href="https://www.instagram.com/we_are_tst" target="_blank" rel="noopener" class="tst-nav-social">Instagram</a> 1246 </div> 1247 </nav> 1248 </div> 1249</div> 1250
1251<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/CustomEase.min.js"></script>
vendor: 1 bytes, line 1251
1251
1252<script> 1253(function () { 1254 'use strict'; 1255 CustomEase.create('tst', '0.65, 0.01, 0.05, 0.99'); 1256 var header = document.getElementById('tstHeader'); 1257 var btn = document.getElementById('tstMenuBtn'); 1258 var navWrap = document.getElementById('tstNavOverlay'); 1259 var menu = document.getElementById('tstNavMenu'); 1260 var bgPanels = navWrap.querySelectorAll('.tst-nav-panel'); 1261 var menuLinks = navWrap.querySelectorAll('.tst-nav-link, .tst-nav-cta'); 1262 var burgerLine1 = document.getElementById('tstBurgerLine1'); 1263 var burgerLine2 = document.getElementById('tstBurgerLine2'); 1264 var burgerLine3 = document.getElementById('tstBurgerLine3'); 1265 var fadeTargets = navWrap.querySelectorAll('.tst-nav-social'); 1266 var isOpen = false, isAnimating = false; 1267 1268 gsap.set(navWrap, { display: 'none' }); 1269 gsap.set(bgPanels, { xPercent: -101 }); 1270 gsap.set(menuLinks, { yPercent: 140, rotate: 10, autoAlpha: 0 }); 1271 gsap.set(fadeTargets, { autoAlpha: 0, yPercent: 50 }); 1272 1273 function openMenu() { 1274 if (isAnimating || isOpen) return; 1275 isOpen = true; isAnimating = true; 1276 var sw = window.innerWidth - document.documentElement.clientWidth; 1277 document.body.style.overflow = 'hidden'; 1278 if (sw > 0) { 1279 document.body.style.paddingRight = sw + 'px'; 1280 header.style.paddingRight = (40 + sw) + 'px'; 1281 } 1282 btn.setAttribute('aria-expanded', 'true'); 1283 gsap.set(navWrap, { display: 'block' }); 1284 gsap.timeline({ onComplete: function () { isAnimating = false; } }) 1285 .to(burgerLine1, { y: 8, rotate: 45, ease: 'tst' }) 1286 .to(burgerLine2, { autoAlpha: 0, ease: 'tst' }, '<') 1287 .to(burgerLine3, { y: -8, rotate: -45, ease: 'tst' }, '<') 1288 .to(bgPanels, { xPercent: 0, stagger: 0.12, duration: 0.575, ease: 'tst' }, '<') 1289 .to(menuLinks, { yPercent: 0, rotate: 0, autoAlpha: 1, stagger: 0.05, duration: 0.5, ease: 'tst' }, '-=0.35') 1290 .to(fadeTargets, { autoAlpha: 1, yPercent: 0, stagger: 0.04, ease: 'tst' }, '-=0.25'); 1291 } 1292 1293 function closeMenu() { 1294 if (isAnimating || !isOpen) return; 1295 isOpen = false; isAnimating = true; 1296 btn.setAttribute('aria-expanded', 'false'); 1297 gsap.timeline({ onComplete: function () { 1298 gsap.set(navWrap, { display: 'none' }); 1299 gsap.set(menu, { xPercent: 0 }); 1300 gsap.set(bgPanels, { xPercent: -101 }); 1301 gsap.set(menuLinks, { yPercent: 140, rotate: 10, autoAlpha: 0 }); 1302 gsap.set(fadeTargets, { autoAlpha: 0, yPercent: 50 }); 1303 gsap.set(burgerLine1, { y: 0, rotate: 0 }); 1304 gsap.set(burgerLine2, { autoAlpha: 1 }); 1305 gsap.set(burgerLine3, { y: 0, rotate: 0 }); 1306 document.body.style.overflow = ''; 1307 document.body.style.paddingRight = ''; 1308 header.style.paddingRight = ''; 1309 isAnimating = false; 1310 }}) 1311 .to([menuLinks, fadeTargets], { autoAlpha: 0, duration: 0.2, ease: 'power2.in' }) 1312 .to(menu, { xPercent: -120, ease: 'tst' }) 1313 .to(burgerLine1, { y: 0, rotate: 0, ease: 'tst' }, '<') 1314 .to(burgerLine2, { autoAlpha: 1, ease: 'tst' }, '<') 1315 .to(burgerLine3, { y: 0, rotate: 0, ease: 'tst' }, '<'); 1316 } 1317 1318 window.closeMenu = closeMenu; 1319 btn.addEventListener('click', function () { isOpen ? closeMenu() : openMenu(); }); 1320 document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && isOpen) closeMenu(); }); 1321 var lastScrollY = 0; 1322 window.addEventListener('scroll', function () { 1323 var y = window.scrollY; 1324 header.style.borderBottomColor = y > 20 1325 ? 'rgba(249,249,249,0.12)' 1326 : 'rgba(249,249,249,0.08)'; 1327 if (!isOpen) { 1328 if (y > lastScrollY && y > 90) header.classList.add('tst-hidden'); 1329 else header.classList.remove('tst-hidden'); 1330 } else { 1331 header.classList.remove('tst-hidden'); 1332 } 1333 lastScrollY = y; 1334 }, { passive: true }); 1335}()); 1336</script>
1336 1337 1338<main id="main-content" tabindex="-1"> 1339 1340 1341<!-- PAGE HERO --> 1342<section class="page-hero"> 1343 <span class="ph-eyebrow" id="phEyebrow"></span> 1344 <div class="ph-heading-wrap"> 1345 <h1 class="ph-heading" id="phHeading"><span class="ph-line"><span class="ph-word" id="phWord1">How <img class="ph-sticker" src="https://tstwebsite.blob.core.windows.net/media/how-we-can-help/assets/hero-sticker-1.png" alt="" aria-hidden="true"> we</span></span> <span class="ph-line"><span class="ph-word" id="phWord2">can help you.</span></span></h1> 1346 <img class="ph-float ph-float-book" id="phStickerBook" src="https://tstwebsite.blob.core.windows.net/media/how-we-can-help/assets/hero-sticker-2.png" alt="" aria-hidden="true"> 1347 <img class="ph-float ph-float-hand" id="phStickerHand" src="https://tstwebsite.blob.core.windows.net/media/how-we-can-help/assets/hero-sticker-3.png" alt="" aria-hidden="true"> 1348 </div> 1349 <p class="ph-sub" id="phSub">We design these offerings across <strong>all audience types.</strong></p> 1350 1351 <!-- HERO PHOTOS --> 1352 <div class="ph-photo" id="phImg1"><div class="ph-photo-inner" style="background-image: url('https://tstwebsite.blob.core.windows.net/media/how-we-can-help/assets/header-image-1.png')"></div></div> 1353 <div class="ph-photo" id="phImg2"><div class="ph-photo-inner" style="background-image: url('https://tstwebsite.blob.core.windows.net/media/how-we-can-help/assets/header-image-2.png')"></div></div> 1354 <div class="ph-photo" id="phImg3"><div class="ph-photo-inner" style="background-image: url('https://tstwebsite.blob.core.windows.net/media/how-we-can-help/assets/header-image-3.png')"></div></div> 1355 <div class="ph-photo" id="phImg4"><div class="ph-photo-inner" style="background-image: url('https://tstwebsite.blob.core.windows.net/media/how-we-can-help/assets/header-image-4.png')"></div></div> 1356 <div class="ph-photo" id="phImg5"><div class="ph-photo-inner" style="background-image: url('https://tstwebsite.blob.core.windows.net/media/case-study/images/global-insurance-broker-experience-6.png')"></div></div> 1357 <div class="ph-photo" id="phImg6"><div class="ph-photo-inner" style="background-image: url('https://tstwebsite.blob.core.windows.net/media/how-we-can-help/assets/header-image-6.png')"></div></div> 1358</section> 1359 1360 1361 1362<!-- HOW WE CAN HELP PANELS --> 1363<section class="hwch-section"> 1364 <!-- Mobile-only carousel nav (hidden on desktop via CSS) --> 1365 <div class="hwch-nav" role="tablist" aria-label="Offerings"> 1366 <button class="hwch-nav-btn is-active" type="button" data-panel="0">Diagnose & benchmark</button> 1367 <button class="hwch-nav-btn" type="button" data-panel="1">Launch & embed change</button> 1368 <button class="hwch-nav-btn" type="button" data-panel="2">Develop & upskill</button> 1369 </div> 1370 <div class="hwch-grid"> 1371 1372 <!-- Panel 1: Diagnose & Benchmark (purple) --> 1373 <div class="hwch-panel hwch-purple is-active"> 1374 <div class="hwch-panel-inner"> 1375 <div class="hwch-panel-left"> 1376 <img class="hwch-sticker" src="https://tstwebsite.blob.core.windows.net/media/how-we-can-help/assets/diagnose-and-benchmark.png" alt="" aria-hidden="true"> 1377 <div class="hwch-title">Diagnose <br>& benchmark</div> 1378 <p class="hwch-sub">You can’t fix what you can’t see.</p> 1379 <a href="../eco/eco.html" class="btn-help"> 1380 <span>Find out more about ECO</span> 1381 <span class="btn-help-arrow"> 1382 <svg viewBox="0 0 28.35 28.35" xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px;display:block;"><path fill-rule="evenodd" d="M14.17,0C6.35,0,0,6.35,0,14.17s6.35,14.17,14.17,14.17,14.17-6.35,14.17-14.17S22,0,14.17,0ZM18.67,16.92l-.75.75-2.92-2.92-3.92,3.92-1.41-1.41,3.92-3.92-2.92-2.92.75-.75h7.25v7.25Z"></path></svg> 1383 </span> 1384 </a> 1385 </div> 1386 <div class="hwch-panel-right"> 1387 <p class="hwch-desc">We give you an honest picture of where you are and clear, actionable steps for where to go next. Our diagnostic solutions provide an evidence-based starting point to build the skills and behaviours that matter.</p> 1388 <ul class="hwch-tags"> 1389 <li data-tip="An expert-facilitated in-person session. Bring a single problem, use a structured process to explore, align, and leave with actionable solutions.">TST Studio — bring us a problem and we’ll help you solve it</li> 1390 <li data-tip="TST's Early Careers diagnostic. Structured evidence-based assessment, benchmarking, and a report plus workshop to identify priorities and improvement opportunities.">ECO — our Early Careers diagnostic</li> 1391 <li data-tip="Research, analysis, and report-building that delivers evidence-based recommendations to address a specific challenge.">Broader diagnostic & benchmarking support</li> 1392 </ul> 1393 </div> 1394 </div> 1395 <div class="hwch-plus" aria-hidden="true"> 1396 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
1397 <line x1="7" y1="1" x2="7" y2="13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/> 1398 <line x1="1" y1="7" x2="13" y2="7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/> 1399 </svg> 1400 </div> 1401 </div> 1402 1403 <!-- Panel 2: Launch & Embed Change (orange) --> 1404 <div class="hwch-panel hwch-orange"> 1405 <div class="hwch-panel-inner"> 1406 <div class="hwch-panel-left"> 1407 <img class="hwch-sticker" src="https://tstwebsite.blob.core.windows.net/media/how-we-can-help/assets/launch-and-embed-change.png" alt="" aria-hidden="true"> 1408 <div class="hwch-title">Launch & <br>embed change</div> 1409 <p class="hwch-sub">Change only counts if it sticks.</p> 1410 </div> 1411 <div class="hwch-panel-right"> 1412 <p class="hwch-desc">We take you from early advisory through to full implementation – shifting behaviours, evolving culture and embedding new ways of working that last.</p> 1413 <ul class="hwch-tags"> 1414 <li data-tip="Coordinated launches that kick start a change programme or initiative. Multisensory, scientific, rigorously designed to engage people and ground expected behaviour change.">Launch events</li> 1415 <li data-tip="Senior-led, high-impact keynotes that set context, model desired behaviours, and frame the launch narrative. Scientific storytelling at its best.">Keynotes</li> 1416 <li data-tip="Short, focused sessions run post-launch to reinforce learning, embed behaviours, and operationalise changes in teams. 45â90 minutes.">Embedding sessions</li> 1417 <li data-tip="Targeted emails, nudges, and other comms that promote, reinforce, and embed behaviours and learning within a wider change journey.">Comms campaign</li> 1418 <li data-tip="Produced videos for communicating key messaging, storytelling, or spotlighting. Nano films, narrative films, motion assets made by our creative and learning design teams.">Videos</li> 1419 <li data-tip="Short, practical tasks that people do in their day job to apply new behaviours. 60 seconds to 15 minutes, digital, accessible across channels including email, communication apps and LMS.">Self-led missions</li> 1420 <li data-tip="Pre-packaged, ready-to-run materials leaders can deploy in town halls, meetings, or offsites. Easy to use for leaders, while driving consistency in role modelling across your organisation.">In a box meetings</li> 1421 <li data-tip="Physical, on-site activations that make change visible and engage people in your offices and sites. Can include signage, interactive booths, screens, etc.">Installations</li> 1422 <li data-tip="We use the best of our transdisciplinary expertise to advise you on how to shape your message and change behaviours in your organisation.">Advisory</li> 1423 </ul> 1424 </div> 1425 </div> 1426 <div class="hwch-plus" aria-hidden="true"> 1427 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> 1428 <line x1="7" y1="1" x2="7" y2="13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/> 1429 <line x1="1" y1="7" x2="13" y2="7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/> 1430 </svg> 1431 </div> 1432 </div> 1433 1434 <!-- Panel 3: Develop & Upskill (teal) --> 1435 <div class="hwch-panel hwch-teal"> 1436 <div class="hwch-panel-inner"> 1437 <div class="hwch-panel-left"> 1438 <img class="hwch-sticker" src="https://tstwebsite.blob.core.windows.net/media/how-we-can-help/assets/develop-and-upskill.png" alt="" aria-hidden="true"> 1439 <div class="hwch-title">Develop <br>& upskill</div> 1440 <p class="hwch-sub">We build the skills that matter.</p> 1441 </div> 1442 <div class="hwch-panel-right"> 1443 <p class="hwch-desc">From focused sessions to end-to-end development programmes, we help people to perform, adapt and lead – at every level of your organisation.</p> 1444 <ul class="hwch-tags"> 1445 <li data-tip="Short, standalone sessions focused on a single capability. Face-to-face, virtual, or e-learning.">Skills sessions</li> 1446 <li data-tip="Skills-focused onboarding events for people new to a role or business. Half-day to week-long, built to integrate and activate from day one.">Inductions</li> 1447 <li data-tip="Events and campus activities that attract early talent and bring your employer brand to life.">Attraction events</li> 1448 <li data-tip="Days designed to reset, connect or align your teams. Practical, engaging, energising, aligned to your strategic or team performance needs.">Away days</li> 1449 <li data-tip="Multi-element learning programmes that deliver sustained upskilling across a cohort through sessions, practices, events, toolkits, comms, and measurement.">Dev programmes</li> 1450 <li data-tip="Pre-boarding and early joining programmes that immerse, engage, and support candidates from offer through to programme start.">Onboarding</li> 1451 <li data-tip="Content for learning, storytelling, or engagement. Includes nano films, narrative films, motion assets made by our creative and learning design team
1451s.">Videos</li> 1452 <li data-tip="Digital guides that reinforce and embed key learning content in practice. One-pagers, checklists, leader packs, nudge materials. Standalone or LMS-integrated.">Toolkits</li> 1453 <li data-tip="Targeted emails, nudges, and other comms that promote, remind, and embed behaviours and learning within a wider journey.">Communications</li> 1454 <li data-tip="Short, practical tasks that learners do in their day-to-day to apply new skills. 60 seconds to 15 minutes, digital, accessible across channels including email, communication apps and LMS.">In-role practices</li> 1455 <li data-tip="We use the best of our transdisciplinary expertise to advise you on how to shape your message and change behaviours in your organisation.">Advisory</li> 1456 <li data-tip="An organisation-level narrative and messaging platform that explains the talent proposition, links to EVP and careers, and drives clear calls to action for all stakeholders.">Talent narratives</li> 1457 <li data-tip="A learning promise, proposition, and blueprint. Articulates what development means in your organisation, how it works, and what people can hold you to.">Dev value props</li> 1458 <li data-tip="Large, high-impact experiences that mark milestones, deliver development, reset culture, or build alignment. Half-day to multi-day.">Flagship events</li> 1459 </ul> 1460 </div> 1461 </div> 1462 <div class="hwch-plus" aria-hidden="true"> 1463 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> 1464 <line x1="7" y1="1" x2="7" y2="13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/> 1465 <line x1="1" y1="7" x2="13" y2="7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/> 1466 </svg> 1467 </div> 1468 </div> 1469 1470 </div> 1471</section> 1472 1473 1474<!-- SCALE SECTION --> 1475<section class="scale-section" id="scaleSection"> 1476 <div class="scale-stage" id="scaleStage"> 1477 1478 <div class="scale-header" id="scaleHeader"> 1479 <h2 class="scale-h2">We get that one size <br>doesn’t always fit all…</h2> 1480 <p class="scale-sub">We’ll shape your engagement around what you actually need and we’re flexible about how we get there.</p> 1481 </div> 1482 1483 <div class="spectrum-outer" id="spectrumOuter"> 1484 1485 <div class="spectrum-ends"> 1486 <span class="spectrum-end-label">Standard</span> 1487 <span class="spectrum-end-label">Fully bespoke</span> 1488 </div> 1489 1490 <div class="spectrum-track-wrap"> 1491 <div class="spectrum-track-bg"></div> 1492 <div class="spectrum-track-fill" id="specFill"></div> 1493 <div class="spectrum-tick" id="specTick0" style="left:16.67%"></div> 1494 <div class="spectrum-tick" id="specTick1" style="left:50%"></div> 1495 <div class="spectrum-tick" id="specTick2" style="left:83.33%"></div> 1496 <div class="spectrum-indicator" id="specIndicator"></div> 1497 </div> 1498 1499 <div class="spectrum-cards"> 1500 <div class="spectrum-card" id="specCard0"> 1501 <span class="spectrum-card-num">01</span> 1502 <div class="spectrum-card-title">As is</div> 1503 <p class="spectrum-card-desc">An existing design, deployed as is. When speed matters, with a proven format.</p> 1504 </div> 1505 <div class="spectrum-card" id="specCard1"> 1506 <span class="spectrum-card-num">02</span> 1507 <div class="spectrum-card-title">Fit to you</div> 1508 <p class="spectrum-card-desc">An existing design, adapted to your context, your people, and your brand.</p> 1509 </div> 1510 <div class="spectrum-card" id="specCard2"> 1511 <span class="spectrum-card-num">03</span> 1512 <div class="spectrum-card-title">Made for you</div> 1513 <p class="spectrum-card-desc">Built from scratch around your organisation, your challenges, your people.</p> 1514 </div> 1515 </div> 1516 1517 </div> 1518 1519 </div> 1520</section> 1521 1522 1523<!-- TESTIMONIALS --> 1524<div class="t-rule"></div> 1525<div id="testimonials"> 1526 <div class="t-track" id="tTrack"> 1527 <div class="t-sticky" id="tSticky"> 1528 1529 <header class="t-head" id="tHead"> 1530 <h2 class="t-h2">Don’t take our word for it.</h2> 1531 </header> 1532
1533 <div class="t-grid" id="tGrid" aria-label="Client testimonials"></div> 1534 1535 <div class="t-scroll-cue" id="tCue" aria-hidden="true"> 1536 <span>Scroll</span> 1537 <svg width="14" height="22" viewBox="0 0 14 22" fill="none"> 1538 <rect x="1" y="1" width="12" height="20" rx="6" stroke="currentColor" stroke-width="1.4"></rect> 1539 <circle class="t-cue-dot" cx="7" cy="6" r="1.8" fill="currentColor"></circle> 1540 </svg> 1541 </div> 1542 1543 </div> 1544 </div> 1545</div> 1546<div class="t-rule"></div> 1547 1548 1549<!-- AWARDS SECTION --> 1550<div id="awOuter"> 1551 <div class="aw-track" id="awTrack"> 1552 <div class="aw-sticky e-pending" id="awSticky"> 1553 1554 <div class="aw-head" id="awHead"> 1555 <h2 class="aw-title">We’re proud to have won a few awards along the way…</h2> 1556 </div> 1557 1558 <div class="aw-rows"> 1559 <div class="aw-row-wrap"> 1560 <div class="aw-row" id="awRow1" aria-label="Awards 1 to 8"></div> 1561 </div> 1562 <div class="aw-row-wrap"> 1563 <div class="aw-row" id="awRow2" aria-label="Awards 9 to 16"></div> 1564 </div> 1565 </div> 1566 1567 <div class="aw-progress"> 1568 <div class="aw-progress-fill" id="awFill"></div> 1569 </div> 1570 1571 <div class="aw-cue" id="awCue" aria-hidden="true"> 1572 <span>Scroll</span> 1573 <svg width="14" height="22" viewBox="0 0 14 22" fill="none"> 1574 <rect x="1" y="1" width="12" height="20" rx="6" stroke="currentColor" stroke-width="1.4"></rect> 1575 <circle class="aw-cue-dot" cx="7" cy="6" r="1.8" fill="currentColor"></circle> 1576 </svg> 1577 </div> 1578 1579 </div> 1580 </div> 1581</div> 1582 1583 1584<!-- CTA BAND --> 1585<section class="services-cta"> 1586 <div class="services-cta-inner"> 1587 <span class="services-cta-eyebrow">Let’s talk</span> 1588 <h2>Not sure where <br>to <em>start</em>?</h2> 1589 <button type="button" class="btn-intent btn-on-dark" onclick="openContact()"> 1590 <span>Get in touch</span> 1591 <span class="btn-intent-arrow"> 1592 <svg viewBox="0 0 28.35 28.35" xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px;display:block;"><path fill-rule="evenodd" d="M14.17,0C6.35,0,0,6.35,0,14.17s6.35,14.17,14.17,14.17,14.17-6.35,14.17-14.17S22,0,14.17,0ZM18.67,16.92l-.75.75-2.92-2.92-3.92,3.92-1.41-1.41,3.92-3.92-2.92-2.92.75-.75h7.25v7.25Z"/></svg> 1593 </span> 1594 </button> 1595 </div> 1596</section> 1597 1598 1599<!-- FOOTER --> 1600</main> 1601 1602<footer class="site-footer"> 1603 <div class="footer-inner"> 1604 <div class="footer-cta"> 1605 <div> 1606 <div class="f-eyebrow">Designed to stick</div> 1607 <h2>Let’s build something worth <em>talking about.</em></h2> 1608 </div> 1609 <button type="button" class="footer-pill" onclick="openContact()"><span>Start a conversation</span><span class="btn-intent-arrow"><svg viewBox="0 0 28.35 28.35" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M14.17,0C6.35,0,0,6.35,0,14.17s6.35,14.17,14.17,14.17,14.17-6.35,14.17-14.17S22,0,14.17,0ZM18.67,16.92l-.75.75-2.92-2.92-3.92,3.92-1.41-1.41,3.92-3.92-2.92-2.92.75-.75h7.25v7.25Z"/></svg></span></button> 1610 </div> 1611 <div class="footer-cols"> 1612 <div class="footer-col"> 1613 <h5>Talk to us</h5> 1614 <a class="f-lnk" href="mailto:[email protected]">[email protected]</a> 1615 <a class="f-lnk" href="tel:+442075090216">+44 20 7509 0216</a> 1616 </div> 1617 <div class="footer-col"> 1618 <h5>Find us</h5> 1619 <div class="f-addr"> 1620 <div class="f-block"><span class="f-place">London HQ</span>207 Union Street,<br>London, SE1 0LN</div> 1621 <div class="f-block"><span class="f-place">Abu Dhabi HQ</span>Sky Tower, Shams Abu Dhabi,<br>Al Reem Island</div> 1622 </div> 1623 </div> 1624 <div class="footer-col"> 1625 <h5>Explore</h5> 1626 <a class="f-lnk" href="../how-we-can-help/how-we-can-help.html">How we can help you</a> 1627 <a class="f-lnk" href="../in-practice/in-practice.html">Case studies</a> 1628 <a class="f-lnk" href="../insights/insights.html">Insights</a> 1629 <a class="f-lnk" href="../our-people/our-people.html">Team</a> 1630 </div> 1631 <div class="footer-col footer-news"> 1632 <h5>Newsletter</h5> 1633 <p>Sharp thinking on talent, learning and the future of work. Straight to your inbox.</p> 1634 <div id="footerHsForm" class="f-news-hs"></div> 1635 <div class="f-news-help" id="footerHsFallback" style="display:none;">Prefer email? <a href="mailto:[email protected]" style="color:var(--cyan);">[email protected]</a></div> 1636 <div class="f-socials"> 1637 <a href="https://www.linkedin.com/company/we-are-tst/" target="_blank" rel="noopener" title="LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.8 0 0 .78 0 1.74v20.52C0 23.22.8 24
16371.77 24h20.45c.97 0 1.78-.78 1.78-1.74V1.74C24 .78 23.19 0 22.22 0z"></path></svg></a> 1638 <a href="https://www.instagram.com/we_are_tst" target="_blank" rel="noopener" title="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><rect x="3" y="3" width="18" height="18" rx="5"></rect><circle cx="12" cy="12" r="4"></circle><circle cx="17.5" cy="6.5" r="1.1" fill="currentColor" stroke="none"></circle></svg></a> 1639 1640 <a href="mailto:[email protected]" title="Email"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"></rect><path d="m3 7 9 6 9-6"></path></svg></a> 1641 </div> 1642 </div> 1643 </div> 1644 <div class="f-hero-logo"> 1645 <img class="f-logo-svg" src="https://tstwebsite.blob.core.windows.net/media/assets/footer-logo.svg" alt="TST"> 1646 </div> 1647 <div class="f-bottombar"> 1648 <div class="f-cr">© 2026 TST. All rights reserved.<span class="f-reg" style="display:block;margin-top:7px;font-size:11.5px;color:rgba(249,249,249,0.38);line-height:1.5;">TST is a trading name of The Smarty Train Limited | Company No. 06201155 | Registered in England and Wales</span></div> 1649 <div class="f-legal"><a href="/privacy-policy/privacy-policy.html">Privacy Policy</a> 1650 </div> 1651 </div> 1652 </div> 1653</footer> 1654 1655<style> 1656/* Footer newsletter â HubSpot embed, brand-styled for the dark footer */ 1657.f-news-hs { margin-top: 4px; } 1658.f-news-hs .hs-form-field { margin-bottom: 12px; } 1659.f-news-hs .hs-form-field > label { display: block; font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(249,249,249,0.45); margin-bottom: 6px; } 1660.f-news-hs .hs-form-required { color: var(--cyan); margin-left: 2px; } 1661.f-news-hs .hs-field-desc { font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(249,249,249,0.4); margin: 0 0 6px; } 1662.f-news-hs .hs-input { width: 100%; box-sizing: border-box; background: rgba(249,249,249,0.06); border: 1px solid rgba(249,249,249,0.18); border-radius: 8px; color: var(--light); font-family: 'DM Sans', sans-serif; font-size: 16px; padding: 11px 14px; transition: border-color 160ms; } 1663.f-news-hs .hs-input:focus { border-color: var(--cyan); outline: none; } 1664.f-news-hs select.hs-input { -webkit-appearance: none; appearance: none; } 1665.f-news-hs input[type="checkbox"], .f-news-hs input[type="radio"] { width: auto; margin: 3px 8px 0 0; } 1666.f-news-hs .inputs-list { list-style: none; margin: 0; padding: 0; } 1667.f-news-hs .hs-error-msgs, .f-news-hs .hs-error-msg { list-style: none; margin: 6px 0 0; padding: 0; color: var(--orange); font-family: 'DM Sans', sans-serif; font-size: 12px; } 1668.f-news-hs .hs-button { background: var(--cyan); color: var(--dark); border: none; border-radius: 999px; font-family: 'DM Mono', monospace; font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 24px; margin-top: 8px; cursor: pointer; transition: transform 180ms; } 1669.f-news-hs .hs-button:hover { transform: translateX(3px); } 1670.f-news-hs .submitted-message { font-family: 'DM Sans', sans-serif; font-size: 14px; line-height: 1.5; color: var(--cyan); } 1671.f-news-hs .legal-consent-container, .f-news-hs .hs-richtext { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.04em; color: rgba(249,249,249,0.38); line-height: 1.6; margin-top: 6px; } 1672</style> 1673
1674<script> 1675/* Footer newsletter â HubSpot embed (portal 5406543, form 1676 8bcac489-ace1-4141-bd11-decc789a61a3, region na1). Renders into #footerHsForm; 1677 shows an email fallback if the embed script can't load. */ 1678(function () { 1679 var target = document.getElementById('footerHsForm'); 1680 if (!target || target.dataset.hsInit) return; 1681 target.dataset.hsInit = '1'; 1682 var ready = false, fb = document.getElementById('footerHsFallback'); 1683 function showFallback() { if (!ready && fb) fb.style.display = 'block'; } 1684 var failTimer = setTimeout(showFallback, 9000); 1685 var s = document.createElement('script'); 1686 s.src = 'https://js.hsforms.net/forms/embed/v2.js'; 1687 s.async = true; 1688 s.onload = function () { 1689 if (!window.hbspt || !hbspt.forms || typeof hbspt.forms.create !== 'function') { showFallback(); return; } 1690 hbspt.forms.create({ 1691 portalId: '5406543', 1692 formId: '8bcac489-ace1-4141-bd11-decc789a61a3', 1693 region: 'na1', 1694 target: '#footerHsForm', 1695 onFormReady: function () { ready = true; clearTimeout(failTimer); } 1696 }); 1697 }; 1698 s.onerror = showFallback; 1699 document.head.appendChild(s); 1700})(); 1701</script>
1701 1702 1703
1704<script> 1705gsap.registerPlugin(ScrollTrigger); 1706 1707/* ââ PAGE HERO ENTRANCE âââââââââââââââââââââââââââââââ */ 1708(function () { 1709 gsap.set('#phEyebrow', { opacity: 0, y: 16 }); 1710 gsap.set('#phWord1', { x: '-110vw', opacity: 0 }); 1711 gsap.set('#phWord2', { x: '110vw', opacity: 0 }); 1712 gsap.set('#phStickerBook', { x: -400, y: -280, rotation: -55, scale: 0, opacity: 0 }); 1713 gsap.set('#phStickerHand', { x: 500, y: 350, rotation: 50, scale: 0, opacity: 0 }); 1714 gsap.set('#phSub', { opacity: 0, y: 24 }); 1715 1716 /* Hero photos â spring in from slightly off-position */ 1717 if (window.matchMedia('(min-width: 769px) and (hover: hover)').matches) { 1718 gsap.set('#phImg1', { x: -100, y: -60, rotation: -28, scale: 0, opacity: 0 }); 1719 gsap.set('#phImg2', { x: -130, y: 30, rotation: 25, scale: 0, opacity: 0 }); 1720 gsap.set('#phImg3', { x: -80, y: 80, rotation: -21, scale: 0, opacity: 0 }); 1721 gsap.set('#phImg4', { x: 100, y: -60, rotation: 29, scale: 0, opacity: 0 }); 1722 gsap.set('#phImg5', { x: 130, y: 30, rotation: -26, scale: 0, opacity: 0 }); 1723 gsap.set('#phImg6', { x: 80, y: 80, rotation: 23, scale: 0, opacity: 0 }); 1724 } 1725 1726 const tl = gsap.timeline({ delay: 0.3 }); 1727 tl.to('#phEyebrow', { opacity: 1, y: 0, duration: 0.55, ease: 'power2.out' }, 0.2); 1728 tl.to('#phWord1', { x: 0, opacity: 1, duration: 1.1, ease: 'expo.out' }, 0); 1729 tl.to('#phWord2', { x: 0, opacity: 1, duration: 1.1, ease: 'expo.out' }, 0.08); 1730 1731 if (window.matchMedia('(min-width: 769px) and (hover: hover)').matches) { 1732 tl.to('#phImg1', { x: 0, y: 0, scale: 1, opacity: 1, rotation: -8, duration: 1.25, ease: 'elastic.out(1, 0.45)' }, 0.10); 1733 tl.to('#phImg4', { x: 0, y: 0, scale: 1, opacity: 1, rotation: 9, duration: 1.25, ease: 'elastic.out(1, 0.45)' }, 0.17); 1734 tl.to('#phImg2', { x: 0, y: 0, scale: 1, opacity: 1, rotation: 5, duration: 1.25, ease: 'elastic.out(1, 0.45)' }, 0.24); 1735 tl.to('#phImg5', { x: 0, y: 0, scale: 1, opacity: 1, rotation: -6, duration: 1.25, ease: 'elastic.out(1, 0.45)' }, 0.31); 1736 tl.to('#phImg3', { x: 0, y: 0, scale: 1, opacity: 1, rotation: -11, duration: 1.25, ease: 'elastic.out(1, 0.45)' }, 0.38); 1737 tl.to('#phImg6', { x: 0, y: 0, scale: 1, opacity: 1, rotation: 13, duration: 1.25, ease: 'elastic.out(1, 0.45)' }, 0.45); 1738 } 1739 1740 tl.to('#phStickerBook', { 1741 x: 0, y: 0, scale: 0.9, rotation: -10, opacity: 1, 1742 duration: 1.3, ease: 'elastic.out(1, 0.45)' 1743 }, 0.55); 1744 tl.to('#phStickerHand', { 1745 x: 0, y: 0, scale: 1, rotation: 5, opacity: 1, 1746 duration: 1.3, ease: 'elastic.out(1, 0.45)' 1747 }, 0.65); 1748 tl.to('#phSub', { opacity: 1, y: 0, duration: 0.7, ease: 'expo.out' }, 1.2); 1749})(); 1750 1751/* ââ HERO PHOTOS PARALLAX ââââââââââââââââââââââââââââââ */ 1752(function () { 1753 if (!window.matchMedia('(min-width: 769px)').matches) return; 1754 var depths = [ 1755 { id: '#phImg1', y: -80 }, 1756 { id: '#phImg2', y: -150 }, 1757 { id: '#phImg3', y: -60 }, 1758 { id: '#phImg4', y: -120 }, 1759 { id: '#phImg5', y: -100 }, 1760 { id: '#phImg6', y: -70 }, 1761 ]; 1762 depths.forEach(function (p) { 1763 gsap.fromTo(p.id, 1764 { y: 0 }, 1765 { 1766 y: p.y, 1767 ease: 'none', 1768 scrollTrigger: { 1769 trigger: '.page-hero', 1770 start: 'top top', 1771 end: 'bottom top', 1772 scrub: 1.8, 1773 }, 1774 } 1775 ); 1776 }); 1777})(); 1778 1779 1780/* ââ STATEMENT PARALLAX ENTRY ââââââââââââââââââââââââââ */ 1781(function () { 1782 gsap.fromTo('#hwchStatement',
1783 { y: 64, opacity: 0 }, 1784 { 1785 y: 0, opacity: 1, 1786 ease: 'power2.out', 1787 scrollTrigger: { 1788 trigger: '#hwchStatement', 1789 start: 'top 88%', 1790 end: 'top 42%', 1791 scrub: 1.4, 1792 }, 1793 } 1794 ); 1795})(); 1796 1797/* ââ PANELS FAN ENTRANCE âââââââââââââââââââââââââââââââ */ 1798(function () { 1799 if (!window.matchMedia('(min-width: 769px)').matches) return; 1800 1801 const panels = [...document.querySelectorAll('.hwch-panel')]; 1802 const grid = document.querySelector('.hwch-grid'); 1803 const finalRotations = [-1.5, 0, 1.5]; 1804 1805 /* Measure each panel's offset from the grid's horizontal centre */ 1806 var gridCx = grid.offsetWidth / 2; 1807 panels.forEach(function (p, i) { 1808 var pCx = p.offsetLeft + p.offsetWidth / 2; 1809 gsap.set(p, { 1810 x: gridCx - pCx, 1811 y: 80, 1812 rotation: 0, 1813 scale: 0.88, 1814 opacity: 0, 1815 transformOrigin: 'center center', 1816 zIndex: panels.length - i, 1817 }); 1818 }); 1819 1820 ScrollTrigger.create({ 1821 trigger: '.hwch-section', 1822 start: 'top 70%', 1823 once: true, 1824 onEnter: function () { 1825 gsap.to(panels, { 1826 x: 0, 1827 y: 0, 1828 rotation: function (i) { return finalRotations[i]; }, 1829 scale: 1, 1830 opacity: 1, 1831 duration: 0.82, 1832 ease: 'power3.out', 1833 stagger: 0.07, 1834 onComplete: function () { 1835 /* Hand transform back to CSS so hover effects work */ 1836 gsap.set(panels, { clearProps: 'transform,zIndex' }); 1837 }, 1838 }); 1839 }, 1840 }); 1841})(); 1842 1843/* ââ OFFERINGS â MOBILE CAROUSEL (nav pills switch one panel at a time) ââ */ 1844(function () { 1845 var nav = document.querySelector('.hwch-nav'); 1846 var panels = [].slice.call(document.querySelectorAll('.hwch-panel')); 1847 if (!nav || !panels.length) return; 1848 var btns = [].slice.call(nav.querySelectorAll('.hwch-nav-btn')); 1849 function activate(i) { 1850 panels.forEach(function (p, j) { p.classList.toggle('is-active', j === i); }); 1851 btns.forEach(function (b, j) { b.classList.toggle('is-active', j === i); }); 1852 } 1853 btns.forEach(function (b, i) { b.addEventListener('click', function () { activate(i); }); }); 1854 activate(0); 1855})(); 1856 1857/* ââ OFFERINGS â DESKTOP CLICK-TO-EXPAND ââââââââââââââââââââââ 1858 On desktop the three panels expand on CLICK (not hover). Clicking anywhere 1859 on a panel toggles it open; its siblings collapse (accordion). The + 1860 bottom-right is the affordance: it spins on hover, and becomes a â when 1861 open. Mobile (â¤768px) keeps its own carousel, so the toggle is guarded by 1862 the media query. */ 1863(function () { 1864 var mq = window.matchMedia('(min-width: 769px)'); 1865 var panels = [].slice.call(document.querySelectorAll('.hwch-panel')); 1866 if (!panels.length) return; 1867 function toggle(panel) { 1868 if (!mq.matches) return; // mobile carousel handles its own taps 1869 var willOpen = !panel.classList.contains('is-open'); 1870 panels.forEach(function (p) { 1871 p.classList.remove('is-open'); 1872 p.setAttribute('aria-expanded', 'false'); 1873 }); 1874 if (willOpen) { 1875 panel.classList.add('is-open'); 1876 panel.setAttribute('aria-expanded', 'true'); 1877 } 1878 } 1879 panels.forEach(function (panel) { 1880 panel.setAttribute('role', 'button'); 1881 panel.setAttribute('tabindex', '0'); 1882 panel.setAttribute('aria-expanded', 'false'); 1883 panel.addEventListener('click', function () { toggle(panel); }); 1884 panel.addEventListener('keydown', function (e) { 1885 if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') { e.preventDefault(); toggle(panel); } 1886 }); 1887 }); 1888})(); 1889 1890 1891/* ââ SCALE SECTION (SCROLL-PINNED SPECTRUM) ââââ */ 1892(function () { 1893 var section = document.getElementById('scaleSection'); 1894 var fill = document.getElementById('specFill'); 1895 var indicator = document.getElementById('specIndicator'); 1896 var ticks = [document.getElementById('specTick0'), document.getElementById('specTick1'), document.getElementById('specTick2')]; 1897 var cards = [document.getElementById('specCard0'), document.getElementById('specCard1'), document.getElementById('specCard2')]; 1898 var header = document.getElementById('scaleHeader'); 1899 1900 if (!section || !fill) return; 1901 1902 var STOPS = [
1903 { left: 16.67, color: '#19F4D4' }, 1904 { left: 50, color: '#AE99FF' }, 1905 { left: 83.33, color: '#36DBFF' }, 1906 ]; 1907 var currentStop = -1; 1908 1909 function setStop(i, instant) { 1910 if (currentStop === i) return; 1911 currentStop = i; 1912 var s = STOPS[i]; 1913 var dur = instant ? 0 : 0.7; 1914 1915 gsap.to(indicator, { 1916 left: s.left + '%', 1917 backgroundColor: s.color, 1918 boxShadow: '0 0 0 6px ' + s.color + '28, 0 0 28px ' + s.color + '55', 1919 duration: dur, ease: 'power3.inOut', 1920 }); 1921 gsap.to(fill, { width: s.left + '%', duration: dur, ease: 'power3.inOut' }); 1922 1923 ticks.forEach(function (t, j) { 1924 t.classList.toggle('s-active', j === i); 1925 if (j === i) t.style.setProperty('--s-color', STOPS[j].color); 1926 }); 1927 cards.forEach(function (c, j) { 1928 c.classList.toggle('s-active', j === i); 1929 if (j === i) c.style.setProperty('--s-color', STOPS[j].color); 1930 }); 1931 } 1932 1933 /* Mobile: un-pin, show all cards */ 1934 if (!window.matchMedia('(min-width: 769px)').matches) { 1935 gsap.set(header, { opacity: 0, y: 40 }); 1936 cards.forEach(function (c, j) { 1937 c.classList.add('s-active'); 1938 c.style.setProperty('--s-color', STOPS[j].color); 1939 }); 1940 ScrollTrigger.create({ 1941 trigger: section, start: 'top 80%', once: true, 1942 onEnter: function () { gsap.to(header, { opacity: 1, y: 0, duration: 0.75, ease: 'power2.out' }); }, 1943 }); 1944 return; 1945 } 1946 1947 /* Desktop */ 1948 gsap.set(header, { opacity: 0, y: 40 }); 1949 ScrollTrigger.create({ 1950 trigger: section, start: 'top 75%', once: true, 1951 onEnter: function () { gsap.to(header, { opacity: 1, y: 0, duration: 0.75, ease: 'power2.out' }); }, 1952 }); 1953 1954 /* Initialise at stop 0 instantly */ 1955 gsap.set(indicator, { 1956 left: STOPS[0].left + '%', 1957 backgroundColor: STOPS[0].color, 1958 boxShadow: '0 0 0 6px ' + STOPS[0].color + '28, 0 0 28px ' + STOPS[0].color + '55', 1959 }); 1960 gsap.set(fill, { width: STOPS[0].left + '%' }); 1961 1962 /* Set active card/tick without moving the indicator (that's handled by the timeline) */ 1963 function setActiveStep(i) { 1964 if (currentStop === i) return; 1965 currentStop = i; 1966 ticks.forEach(function (t, j) { 1967 t.classList.toggle('s-active', j === i); 1968 if (j === i) t.style.setProperty('--s-color', STOPS[j].color); 1969 }); 1970 cards.forEach(function (c, j) { 1971 c.classList.toggle('s-active', j === i); 1972 if (j === i) c.style.setProperty('--s-color', STOPS[j].color); 1973 }); 1974 } 1975 setActiveStep(0); 1976 1977 /* Continuous scroll-driven timeline â indicator + fill move smoothly. 1978 Animation completes by scroll progress 0.5; dummy hold extends to 1.0 1979 so the final stop stays visible for ~90vh before the section unsticks. */ 1980 var tl = gsap.timeline({ paused: true }) 1981 .to(indicator, { 1982 left: STOPS[1].left + '%', 1983 backgroundColor: STOPS[1].color, 1984 boxShadow: '0 0 0 6px ' + STOPS[1].color + '28, 0 0 28px ' + STOPS[1].color + '55', 1985 ease: 'none', duration: 1, 1986 }, 0) 1987 .to(fill, { width: STOPS[1].left + '%', ease: 'none', duration: 1 }, 0) 1988 .to(indicator, { 1989 left: STOPS[2].left + '%', 1990 backgroundColor: STOPS[2].color, 1991 boxShadow: '0 0 0 6px ' + STOPS[2].color + '28, 0 0 28px ' + STOPS[2].color + '55', 1992 ease: 'none', duration: 1, 1993 }, 1) 1994 .to(fill, { width: STOPS[2].left + '%', ease: 'none', duration: 1 }, 1) 1995 .to({}, { duration: 2 }); /* hold at final stop for the second half of scroll */ 1996 1997 ScrollTrigger.create({ 1998 trigger: section, 1999 start: 'top top', 2000 end: 'bottom top', 2001 animation: tl, 2002 scrub: true, 2003 onUpdate: function (self) { 2004 var step = self.progress < 0.25 ? 0 : self.progress < 0.5 ? 1 : 2; 2005 setActiveStep(step); 2006 }, 2007 }); 2008})(); 2009 2010 2011/* ââ TESTIMONIALS ââââââââââââââââââââââââââââââââââââââ */ 2012(function () { 2013 if (!window.matchMedia('(min-width: 769px)').matches) return; 2014 2015 var QUOTES = [ 2016 { sx: -64, sy: -62, sr: -26, ss: 0.36, delay: 0.04, span: 0.50, 2017 quote: "One of the most impactful trainings I have attended in a long time, in the innovative approach and really impressive way it was put together and delivered. We need this out of the box thinking in the way
2017we approach these subjects as it leaves lasting impact.", 2018 name: "Senior Leader", role: "Rio Tinto" }, 2019 { sx: 5, sy: -90, sr: 14, ss: 0.30, delay: 0.12, span: 0.50, 2020 quote: "Itâs our partnership with TST that has made the whole experience work.", 2021 name: "Senior Leader", role: "Barclays" }, 2022 { sx: 64, sy: -56, sr: 22, ss: 0.42, delay: 0.20, span: 0.50, 2023 quote: "Inception to execution in a lightning 6 weeks.", 2024 name: "Global HR Leader", role: "Johnson & Johnson" }, 2025 { sx: -60, sy: 68, sr: 20, ss: 0.40, delay: 0.26, span: 0.50, 2026 quote: "Itâs refreshing to work with a vendor who are just as passionate as us to launch a useful, value add product.", 2027 name: "Senior Leader", role: "bp" }, 2028 { sx: 4, sy: 82, sr: -14, ss: 0.34, delay: 0.32, span: 0.50, 2029 quote: "The Line Manager Expedition has fundamentally changed how our managers see their role. Not just as task owners, but as career shapers. Itâs created a lasting shift in mindset and capability thatâs already making a visible difference across our teams.", 2030 name: "Head of Organisational Development", role: "Aerospace multinational" }, 2031 { sx: 62, sy: 60, sr: -20, ss: 0.44, delay: 0.38, span: 0.50, 2032 quote: "The energy, the excitement, the engagement. Itâs easy to imagine, after my session, how these graduates are our future.", 2033 name: "Business Leader", role: "Barclays" } 2034 ]; 2035 2036 var lerp = function (a, b, t) { return a + (b - a) * t; }; 2037 var clamp01 = function (v) { return v < 0 ? 0 : v > 1 ? 1 : v; }; 2038 var ease3 = function (t) { return 1 - Math.pow(1 - t, 3); }; 2039 2040 var tiles = []; 2041 var grid = document.getElementById('tGrid'); 2042 if (!grid) return; 2043 2044 QUOTES.forEach(function (q) { 2045 var cell = document.createElement('div'); 2046 cell.className = 'tcell'; 2047 cell.innerHTML = 2048 '<article class="tcard">' + 2049 '<div class="tcard-qm" aria-hidden="true">â</div>' + 2050 '<p class="tcard-q">' + q.quote + '</p>' + 2051 '<div class="tcard-attr">' + 2052 '<span class="tcard-name">' + q.name + '</span>' + 2053 '<span class="tcard-role">' + q.role + '</span>' + 2054 '</div>' + 2055 '</article>'; 2056 grid.appendChild(cell); 2057 cell._sx = q.sx; cell._sy = q.sy; 2058 cell._sr = q.sr; cell._ss = q.ss; 2059 cell._delay = q.delay; cell._span = q.span; 2060 tiles.push(cell); 2061 }); 2062 2063 var track = document.getElementById('tTrack'); 2064 var head = document.getElementById('tHead'); 2065 var cue = document.getElementById('tCue'); 2066 var raf = 0; 2067 2068 function tProgress() { 2069 var r = track.getBoundingClientRect(); 2070 var span = r.height - window.innerHeight; 2071 return span <= 0 ? 0 : clamp01(-r.top / span); 2072 } 2073 2074 function tRender() { 2075 var p = tProgress(); 2076 head.style.opacity = '1'; 2077 head.style.transform = 'translateY(' + lerp(12, 0, clamp01(p / 0.10)) + 'px)'; 2078 if (cue) cue.style.opacity = String(clamp01(1 - p / 0.07)); 2079 for (var i = 0; i < tiles.length; i++) { 2080 var t = tiles[i]; 2081 var local = ease3(clamp01((p - t._delay) / t._span)); 2082 var inv = 1 - local; 2083 t.style.transform = 'translate(' + (t._sx * inv) + 'vw,' + (t._sy * inv) + 'vh) rotate(' + (t._sr * inv) + 'deg) scale(' + lerp(t._ss, 1, local) + ')'; 2084 t.style.opacity = String(lerp(0, 1, clamp01(local * 1.4))); 2085 t.style.filter = 'blur(' + lerp(10, 0, clamp01(local * 1.8)) + 'px)'; 2086 } 2087 } 2088 2089 function tSchedule() { 2090 if (raf) return; 2091 raf = requestAnimationFrame(function () { raf = 0; tRender(); }); 2092 } 2093 2094 tRender(); 2095 window.addEventListener('scroll', tSchedule, { passive: true }); 2096 window.addEventListener('resize', tSchedule); 2097})(); 2098 2099 2100/* ââ AWARDS SECTION ââââââââââââââââââââââââââââââââââââ */ 2101(function () { 2102 var AWARDS = [ 2103 {title:"Commended Winners â International CSR Excellence Awards", partnership:"In partnership with Rio Tinto", logo:"csr-excellence-awards.png"}, 2104 {title:"Award of Merit in Financial and Professional Services", partnership:"In partnership with Barclays", logo:"learning-excellence-awards.png"}, 2105 {title:"Best Use of Blended Learning", partnership:"In partnership with Rio Tinto", logo:"brandon-hall-excellence-awards.png"}, 2106 {title:"Outstanding Employer and Supplier Development Partnership", partnership:"In partnership with Johnson & Johnson", logo:"ise.png"}, 2107 {title:"Recruiting Excellence Award â Large Employer", partnership:"In partnership with Johnson & Johnson", logo:"nace.png"}, 2108 {title:"Outstanding Employer and Supplier Development Partnership", partnership:"In partnership with Sky", logo:"ise.png"}, 2109 {title:"Staff Development Programme of the Year â finalist", partnership:"In partnership with Accenture", logo:"learning-performance-institute.png"}, 2110 {title:"Best Supplier Contribution to the Industry", partnership:"3Ã Winner", logo:"ise.png"}, 2111 {title:"Best Innovation in Student Recruitment", partnership:"In partnership with bp", logo:"targetjobs.png"}, 2112 {title:"Innovation in Attraction", partnership:"In partnership with bp", logo:"ise.png"}, 2113 {title:"Top 100 Best Internship Programmes 2021", partnership:"In partnership with Johnson & Johnson", logo:"wayup.png"}, 2114 {title:"Best UK Induction", partnership:"In partnership with Clifford Chance", logo:"ise.png"}, 2115 {title:"Finalist â In-house Recruiting Awards", partnership:"In partnership with bp", logo:"ihr.png"}, 2116 {title:"“Best of the best” award for innovation", partnership:"In partnership with Accenture", logo:"ise.png"}, 2117 {title:"Service Excellence Award", partnership:"Siemens Internal Award", logo:"siemens.png"}, 2118 {title:"Best Strategically Aligned Programme", partnership:"In partnership with Santander", logo:"ise.png"}, 2119 ]; 2120 2121 var row1El = document.getElementById('awRow1'); 2122 var row2El = document.getElementById('awRow2'); 2123 if (!row1El) return; 2124 2125 function makeCard(a) { 2126 var d = document.createElement('div'); 2127 d.className = 'aw-card'; 2128 d.innerHTML = 2129 '<img class="aw-logo" src="https://tstwebsite.blob.core.windows.net/media/how-we-can-help/assets/' + a.logo + '" alt="' + a.logo.replace('.png','') + '" onerror="this.style.visibility=\'hidden\'">' + 2130 '<div class="aw-name">' + a.title + '</div>' + 2131 '<div class="aw-level">' + a.partnership + '</div>'; 2132 return d; 2133 } 2134 2135 AWARDS.slice(0, 8).forEach(function (a) { row1El.appendChild(makeCard(a)); });
2136 AWARDS.slice(8, 16).forEach(function (a) { row2El.appendChild(makeCard(a)); }); 2137 2138 var track = document.getElementById('awTrack'); 2139 var fill = document.getElementById('awFill'); 2140 var cue = document.getElementById('awCue'); 2141 var sticky = document.getElementById('awSticky'); 2142 var lerp = function (a, b, t) { return a + (b - a) * t; }; 2143 var clamp01 = function (v) { return v < 0 ? 0 : v > 1 ? 1 : v; }; 2144 var overflow = 0; 2145 var awRaf = 0; 2146 2147 function calcOverflow() { 2148 overflow = Math.max(0, row1El.scrollWidth - row1El.parentElement.offsetWidth); 2149 } 2150 2151 function awProgress() { 2152 var r = track.getBoundingClientRect(); 2153 var span = r.height - window.innerHeight; 2154 return span <= 0 ? 0 : clamp01(-r.top / span); 2155 } 2156 2157 function awRender() { 2158 calcOverflow(); 2159 var p = awProgress(); 2160 row1El.style.transform = 'translateX(' + lerp(-overflow, 0, p) + 'px)'; 2161 row2El.style.transform = 'translateX(' + lerp(0, -overflow * 1.2, p) + 'px)'; 2162 fill.style.width = (p * 100) + '%'; 2163 if (cue) cue.style.opacity = String(clamp01(1 - p / 0.06)); 2164 } 2165 2166 function awSchedule() { 2167 if (awRaf) return; 2168 awRaf = requestAnimationFrame(function () { awRaf = 0; awRender(); }); 2169 } 2170 2171 /* Entrance: heading from left, row 1 from left, row 2 from right */ 2172 var enterHandler = null; 2173 function armEntrance() { 2174 if (enterHandler) window.removeEventListener('scroll', enterHandler, { passive: true }); 2175 function check() { 2176 if (!sticky.classList.contains('e-pending')) return; 2177 var r = track.getBoundingClientRect(); 2178 if (r.top < window.innerHeight * 0.7) { 2179 requestAnimationFrame(function () { sticky.classList.remove('e-pending'); }); 2180 window.removeEventListener('scroll', enterHandler, { passive: true }); 2181 } 2182 } 2183 enterHandler = check; 2184 window.addEventListener('scroll', enterHandler, { passive: true }); 2185 requestAnimationFrame(check); 2186 } 2187 2188 armEntrance(); 2189 /* Desktop: scroll-driven horizontal marquee. Mobile: both rows are native 2190 overflow-x:auto (swipeable), so skip the scroll transform â it was leaving 2191 row 1 shifted left and unresponsive to swipe while row 2 worked. */ 2192 if (window.matchMedia('(min-width: 769px)').matches) { 2193 calcOverflow(); 2194 awRender(); 2195 window.addEventListener('scroll', awSchedule, { passive: true }); 2196 window.addEventListener('resize', function () { calcOverflow(); awRender(); }); 2197 } 2198})(); 2199 2200 2201/* ââ FOOTER NEWSLETTER ââââââââââââââââââââââââââââââââ */ 2202(function () { 2203 const form = document.getElementById('f-news-form'); 2204 const email = document.getElementById('f-email'); 2205 const help = document.getElementById('f-help'); 2206 if (!form) return; 2207 form.addEventListener('submit', function (e) { 2208 e.preventDefault(); 2209 const v = email.value.trim(); 2210 const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v); 2211 if (!v) { help.className = 'f-news-help error'; help.textContent = 'Please enter your email address.'; return; } 2212 if (!ok) { help.className = 'f-news-help error'; help.textContent = "That doesn't look like a valid email."; return; } 2213 help.className = 'f-news-help ok'; 2214 help.textContent = "Thanks â you're on the list."; 2215 email.value = ''; 2216 email.placeholder = "You're subscribed"; 2217 }); 2218})(); 2219 2220 2221/* ââ OFFERING PILL TOOLTIPS âââââââââââââââââââââââââââ */ 2222(function () { 2223 if (!window.matchMedia('(hover: hover)').matches) return; 2224 2225 var tip = document.createElement('div'); 2226 tip.className = 'hwch-tip'; 2227 document.body.appendChild(tip); 2228 2229 document.querySelectorAll('.hwch-tags li[data-tip]').forEach(function (el) { 2230 el.addEventListener('mouseenter', function () { 2231 tip.textContent = el.getAttribute('data-tip'); 2232 tip.style.top = '-9999px'; 2233 tip.style.left = '-9999px'; 2234 tip.style.opacity = '0'; 2235 2236 var r = el.getBoundingClientRect(); 2237 var tw = tip.offsetWidth; 2238 var th = tip.offsetHeight; 2239 var left = r.left + r.width / 2 - tw / 2; 2240 var top = r.top - th - 10; 2241 2242 /* Flip below pill if not enough room above */
2243 if (top < 8) top = r.bottom + 10; 2244 /* Clamp horizontally */ 2245 left = Math.max(8, Math.min(left, window.innerWidth - tw - 8)); 2246 2247 tip.style.left = left + 'px'; 2248 tip.style.top = top + 'px'; 2249 tip.style.opacity = '1'; 2250 }); 2251 el.addEventListener('mouseleave', function () { 2252 tip.style.opacity = '0'; 2253 }); 2254 }); 2255}()); 2256</script>
2256 2257 2258 2259<style> 2260/* âââ CONTACT OVERLAY âââââââââââââââââââââââââââââââââââââââââââââââ */ 2261:root { --ease-brand: cubic-bezier(0.2, 0.8, 0.2, 1); } 2262.contact-overlay { 2263 position: fixed; inset: 0; z-index: 9000; 2264 background: var(--dark); display: flex; flex-direction: column; 2265 overflow: hidden; transform: translateY(100%); 2266 transition: transform 480ms var(--ease-brand); 2267} 2268.contact-overlay.is-open { transform: translateY(0); } 2269.contact-overlay-topbar { flex-shrink: 0; display: flex; justify-content: flex-end; padding: 100px 36px 0; } 2270.contact-overlay-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; } 2271.contact-overlay-inner { 2272 max-width: 1160px; margin: 0 auto; padding: 52px 64px 96px; 2273 opacity: 0; transform: translateY(28px); 2274 transition: opacity 320ms var(--ease-brand), transform 320ms var(--ease-brand); 2275 transition-delay: 140ms; 2276} 2277.contact-overlay.is-open .contact-overlay-inner { opacity: 1; transform: translateY(0); } 2278.contact-close { 2279 width: 48px; height: 48px; border-radius: 999px; 2280 border: 1px solid rgba(249,249,249,0.18); background: transparent; 2281 color: rgba(249,249,249,0.65); cursor: pointer; 2282 display: flex; align-items: center; justify-content: center; 2283 opacity: 0; flex-shrink: 0; 2284 transition: background 200ms var(--ease-brand), color 200ms var(--ease-brand), 2285 border-color 200ms var(--ease-brand), transform 200ms var(--ease-brand), 2286 opacity 240ms var(--ease-brand); 2287 transition-delay: 160ms; 2288} 2289.contact-overlay.is-open .contact-close { opacity: 1; } 2290.contact-close:hover { background: rgba(249,249,249,0.08); color: var(--light); border-color: rgba(249,249,249,0.3); transform: rotate(90deg); transition-delay: 0ms; } 2291.contact-close svg { width: 18px; height: 18px; } 2292.contact-cols { display: grid; grid-template-columns: 5fr 7fr; gap: 96px; align-items: start; } 2293.contact-heading { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(56px,7vw,96px); line-height: 0.95; letter-spacing: -0.025em; color: var(--light); margin-bottom: 22px; } 2294.contact-heading span { color: var(--lime); } 2295.contact-subline { font-family: 'DM Sans', sans-serif; font-weight: 300; font-size: 18px; line-height: 1.45; color: rgba(249,249,249,0.62); max-width: 32ch; margin-bottom: 44px; } 2296.contact-detail-block { margin-bottom: 22px; } 2297.contact-detail-label { font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime); margin-bottom: 5px; } 2298.contact-detail-value { font-family: 'DM Sans', sans-serif; font-size: 14px; line-height: 1.65; color: rgba(249,249,249,0.75); } 2299.contact-detail-value a { color: inherit; text-decoration: none; transition: color 160ms var(--ease-brand); } 2300.contact-detail-value a:hover { color: var(--light); } 2301.contact-details-divider { border: none; border-top: 1px solid rgba(249,249,249,0.1); margin: 34px 0; } 2302.contact-socials { display: flex; gap: 10px; } 2303.contact-socials a { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(249,249,249,0.14); color: rgba(249,249,249,0.62); text-decoration: none; transition: background 200ms, color 200ms, border-color 200ms, transform 200ms var(--ease-brand); } 2304.contact-socials a:hover { background: var(--lime); border-color: var(--lime); color: var(--dark); transform: translateY(-3px); } 2305.contact-socials svg { width: 17px; height: 17px; } 2306.contact-form-eyebrow { font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(249,249,249,0.4); margin-bottom: 26px; } 2307.contact-form { display: flex; flex-direction: column; gap: 18px; } 2308.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } 2309.cf-field { display: flex; flex-direction: column; gap: 7px; } 2310.cf-label { font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(249,249,249,0.44); } 2311.cf-label .cf-req { color: var(--lime); margin-left: 2px; } 2312.cf-input, .cf-textarea, .cf-select { background: rgba(249,249,249,0.04); border: 1px solid rgba(249,249,249,0.12); border-radius: 10px; color: var(--light); font-family: 'DM Sans', sans-serif; font-size: 15px; padding: 13px 16px; outline: none; width: 100%; -webkit-appearance: none; appearance: none; transition: border-color 180ms, background 180ms; } 2313.cf-input:focus, .cf-textarea:focus, .cf-select:focus { border-color: rgba(189,239,0,0.48); background: rgba(249,249,249,0.06); } 2314.cf-input::placeholder, .cf-textarea::placeholder { color: rgba(249,249,249,0.26); } 2315.cf-input.cf-error, .cf-textarea.cf-error, .cf-select.cf-error { border-color: var(--orange); } 2316.cf-textarea { resize: vertical; min-height: 124px; line-height: 1.55; } 2317.cf-select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(249,249,249,0.35)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; } 2318.cf-select option { background: #2e2e2e; color: var(--light); } 2319.cf-actions { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; } 2320.cf-submit { height: 54px; padding: 0 34px; border-radius: 999px; background: var(--lime); color: var(--dark); font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 15px; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; transition: transform 200ms var(--ease-brand), background 200ms; } 2321.cf-submit:hover { transform: translateX(5px); } 2322.cf-submit svg { width: 16px; height: 16px; } 2323.cf-privacy { font-family: 'DM Mono', monospace; font-size: 10px; line-height: 1.65; color: rgba(249,249,249,0.3); } 2324.cf-privacy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; opacity: 0.75; } 2325.cf-success { display: none; padding: 24px 28px; border-radius: 10px; background: rgba(189,239,0,0.05); border: 1px solid rgba(189,239,0,0.2); margin-top: 4px; } 2326.cf-success p { font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.5; color: var(--lime); } 2327.cf-success p + p { color: rgba(249,249,249,0.55); font-size: 14px; margin-top: 8px; } 2328@media (max-width: 960px) { .contact-overlay-inner { padding: 44px 40px 80px; } .contact-cols { grid-template-columns: 1fr; gap: 56px; } .contact-heading { font-size: clamp(48px,10vw,80px); } } 2329@media (max-width: 600px) { .contact-overlay-topbar { padding: 100px 20px 0; } .contact-overlay-inner { padding: 36px 20px 64px; } .cf-row { grid-template-columns: 1fr; gap: 18px; } } 2330</style> 2331 2332<div class="contact-overlay" id="contactOverlay" role="dialog" aria-modal="true" aria-label="Get in touch" aria-hidden="true"> 2333 <div class="contact-overlay-topbar"> 2334 <button class="contact-close" id="contactClose" onclick="closeContact()" aria-label="Close contact panel"> 2335 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> 2336 </button> 2337 </div> 2338 <div class="contact-overlay-body"> 2339 <div class="contact-overlay-inner"> 2340 <div class="contact-cols"> 2341 <div class="contact-left"> 2342 <h2 class="contact-heading">Let’s <span>talk.</span></h2> 2343 <p class="contact-subline">We’d love to hear about what you’re working on.</p> 2344 <div class="contact-detail-block"><div class="contact-detail-label">Email</div><div class="contact-detail-value"><a href="mailto:[email protected]">[email protected]</a></div></div> 2345 <div class="contact-detail-block"><div class="contact-detail-label">Phone</div><div class="contact-detail-value"><a href="tel:+442075090216">+44 20 7509 0216</a></div></div> 2346 <div class="contact-detail-block"><div class="contact-detail-label">London HQ</div><div class="contact-detail-value">207 Union Street<br>London SE1 0LN</div></div> 2347 <div class="contact-detail-block"><div class="contact-detail-label">Abu Dhabi HQ</div><div class="contact-detail-value">Sky Tower, Shams Abu Dhabi<br>Al Reem Island</div></div> 2348 <hr class="contact-details-divider"> 2349 <div class="contact-socials"> 2350 <a href="https://www.linkedin.com/company/we-are-tst/" target="_blank" rel="noopener" title="LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.8 0 0 .78 0 1.74v20.52C0 23.22.8 24
23501.77 24h20.45c.97 0 1.78-.78 1.78-1.74V1.74C24 .78 23.19 0 22.22 0z"></path></svg></a> 2351 <a href="https://www.instagram.com/we_are_tst" target="_blank" rel="noopener" title="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><rect x="3" y="3" width="18" height="18" rx="5"></rect><circle cx="12" cy="12" r="4"></circle><circle cx="17.5" cy="6.5" r="1.1" fill="currentColor" stroke="none"></circle></svg></a> 2352 2353 </div> 2354 </div> 2355 <div class="contact-right"> 2356 <div class="contact-form-eyebrow">Send us a message</div> 2357 <form class="contact-form" id="contactForm" novalidate> 2358 <div class="cf-row"> 2359 <div class="cf-field"><label class="cf-label" for="cf-firstname">First name <span class="cf-req">*</span></label><input class="cf-input" type="text" id="cf-firstname" name="firstname" autocomplete="given-name" required></div> 2360 <div class="cf-field"><label class="cf-label" for="cf-lastname">Last name <span class="cf-req">*</span></label><input class="cf-input" type="text" id="cf-lastname" name="lastname" autocomplete="family-name" required></div> 2361 </div> 2362 <div class="cf-row"> 2363 <div class="cf-field"><label class="cf-label" for="cf-email">Email <span class="cf-req">*</span></label><input class="cf-input" type="email" id="cf-email" name="email" autocomplete="email" required></div> 2364 <div class="cf-field"><label class="cf-label" for="cf-company">Company</label><input class="cf-input" type="text" id="cf-company" name="company" autocomplete="organization"></div> 2365 </div> 2366 <div class="cf-field"><label class="cf-label" for="cf-message">Message <span class="cf-req">*</span></label><textarea class="cf-textarea" id="cf-message" name="message" required></textarea></div> 2367 <div class="cf-field"> 2368 <label class="cf-label" for="cf-source">How did you hear about us?</label> 2369 <select class="cf-select" id="cf-source" name="how_did_you_hear_about_us_"> 2370 <option value="">Please select</option> 2371 <option value="Search engine (Google, Yahoo, etc.)">Search engine</option> 2372 <option value="Recommended by friend or colleague">Recommended by a colleague</option> 2373 <option value="Social media">Social media</option> 2374 <option value="Blog or publication">Blog or publication</option> 2375 <option value="Event or webinar">Event or webinar</option> 2376 <option value="Other">Other</option> 2377 </select> 2378 </div> 2379 <div class="cf-actions"> 2380 <button type="submit" class="cf-submit"><span>Send it</span></button> 2381 <p class="cf-privacy">We’ll only use your details to respond to your message. Read our <a href="/privacy-policy/privacy-policy.html" target="_blank" rel="noopener">Privacy Policy</a>.</p> 2382 </div> 2383 </form> 2384 <div class="cf-success" id="cfSuccess"><p>Thanks — we’ll be in touch shortly.</p></div> 2385 </div> 2386 </div> 2387 </div> 2388 </div> 2389</div> 2390
2391<script> 2392(function () { 2393 var overlay = document.getElementById('contactOverlay'); 2394 var closeBtn = document.getElementById('contactClose'); 2395 var form = document.getElementById('contactForm'); 2396 var success = document.getElementById('cfSuccess'); 2397 var _prevFocus = null; 2398 function openContact() { 2399 if (!overlay) return; 2400 _prevFocus = document.activeElement; 2401 overlay.classList.add('is-open'); 2402 overlay.setAttribute('aria-hidden', 'false'); 2403 document.body.style.overflow = 'hidden'; 2404 setTimeout(function () { if (closeBtn) closeBtn.focus(); }, 520); 2405 } 2406 function closeContact() { 2407 if (!overlay) return; 2408 overlay.classList.remove('is-open'); 2409 overlay.setAttribute('aria-hidden', 'true'); 2410 document.body.style.overflow = ''; 2411 if (_prevFocus) { _prevFocus.focus(); _prevFocus = null; } 2412 } 2413 document.addEventListener('keydown', function (e) { 2414 if (e.key === 'Escape' && overlay && overlay.classList.contains('is-open')) closeContact(); 2415 }); 2416 if (form) { 2417 form.addEventListener('submit', function (e) { 2418 e.preventDefault(); 2419 var valid = true; 2420 form.querySelectorAll('.cf-error').forEach(function (el) { el.classList.remove('cf-error'); }); 2421 var fn = document.getElementById('cf-firstname'); 2422 var ln = document.getElementById('cf-lastname'); 2423 var em = document.getElementById('cf-email'); 2424 var msg = document.getElementById('cf-message'); 2425 if (!fn.value.trim()) { fn.classList.add('cf-error'); valid = false; } 2426 if (!ln.value.trim()) { ln.classList.add('cf-error'); valid = false; } 2427 if (!em.value.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(em.value.trim())) { em.classList.add('cf-error'); valid = false; } 2428 if (!msg.value.trim()) { msg.classList.add('cf-error'); valid = false; } 2429 if (!valid) { var first = form.querySelector('.cf-error'); if (first) first.focus(); return; } 2430 form.style.display = 'none'; 2431 success.style.display = 'block'; 2432 }); 2433 } 2434 window.openContact = openContact; 2435 window.closeContact = closeContact; 2436}()); 2437</script>
2437 2438 2439<style> 2440/* Footer: collapse columns on mobile to match index.html (authoritative override) */ 2441@media (max-width: 768px) { 2442 .footer-cols { grid-template-columns: 1fr 1fr !important; } 2443 .footer-news { grid-column: 1 / -1 !important; } 2444} 2445@media (max-width: 480px) { 2446 .footer-cols { grid-template-columns: 1fr !important; } 2447} 2448</style> 2449<style> 2450/* âââ ORPHAN/WIDOW PREVENTION âââââââââââââââââââââââââ 2451 Site-wide rule: avoid a single word stranded on its own line. 2452 `balance` evens out heading lines; `pretty` stops single-word 2453 widows on the last line of body copy. Progressive enhancement â 2454 silently ignored by browsers that don't support text-wrap. */ 2455h1, h2, h3, h4, h5, h6 { text-wrap: balance; } 2456p { text-wrap: pretty; } 2457</style> 2458<style> 2459/* âââ ZOOM / SMALL-SCREEN FORM POLISH âââââââââââââââââ 2460 Keeps form controls >=16px on phones so iOS Safari doesn't zoom-on-focus, 2461 and tightens the contact overlay on very small / high-zoom viewports. 2462 Scoped to <=768px / <=480px only â desktop (>=769px) is unchanged. */ 2463@media (max-width: 768px) { 2464 .cf-input, .cf-textarea, .cf-select { font-size: 16px; } 2465} 2466@media (max-width: 480px) { 2467 .contact-overlay-inner { padding: 28px 18px 56px; } 2468 .contact-heading { font-size: clamp(32px, 9vw, 52px); } 2469} 2470</style>
2471<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lenis.min.js"></script>
vendor: 1 bytes, line 2471
2471
2472<script> 2473/* âââ LENIS SMOOTH SCROLL (site-wide) ââââââââââââââââââ 2474 Desktop pointer only; off for touch + prefers-reduced-motion; no-ops if the 2475 CDN global is missing (native scroll, zero breakage). Synced to ScrollTrigger 2476 when present, and paused whenever the nav/contact overlay locks body scroll 2477 (both set body overflow:hidden), so overlay scrolling behaves. */ 2478(function () { 2479 var reduce = matchMedia('(prefers-reduced-motion: reduce)').matches; 2480 var deskFine = matchMedia('(min-width: 769px) and (pointer: fine)').matches; 2481 if (reduce || !deskFine || typeof Lenis === 'undefined') return; 2482 var lenis = new Lenis({ duration: 1.05 }); 2483 window.__lenis = lenis; 2484 if (typeof ScrollTrigger !== 'undefined') lenis.on('scroll', ScrollTrigger.update); 2485 if (window.gsap && gsap.ticker) { 2486 gsap.ticker.add(function (t) { lenis.raf(t * 1000); }); 2487 gsap.ticker.lagSmoothing(0); 2488 } else { 2489 requestAnimationFrame(function raf(t) { lenis.raf(t); requestAnimationFrame(raf); }); 2490 } 2491 var bs = document.body.style; 2492 new MutationObserver(function () { 2493 if (bs.overflow === 'hidden') lenis.stop(); else lenis.start(); 2494 }).observe(document.body, { attributes: true, attributeFilter: ['style'] }); 2495})(); 2496</script>
2496 2497<!-- âââ Application Insights â privacy-light analytics (no user prompts) âââââââ 2498 Auto-collects page views + journeys, browser/OS/device, IP-derived geo (no 2499 location permission), referrer, page-visit time, and click/"media selected" 2500 events. Connection string is a client ingestion key (write-only) â safe in 2501 client JS. No cookies consent prompt is added; see CLAUDE.md "Analytics". -->
2502<script src="https://js.monitor.azure.com/scripts/b/ai.3.gbl.min.js" crossorigin="anonymous"></script>
vendor: 1 bytes, line 2502
2502
2503<script> 2504(function () { 2505 if (!(window.Microsoft && Microsoft.ApplicationInsights)) return; // CDN blocked -> no-op 2506 var ai = new Microsoft.ApplicationInsights.ApplicationInsights({ config: { 2507 connectionString: "InstrumentationKey=085da5fd-3bb7-4b53-862b-f40edf545c29;IngestionEndpoint=https://uksouth-1.in.applicationinsights.azure.com/;LiveEndpoint=https://uksouth.livediagnostics.monitor.azure.com/;ApplicationId=d207b07d-aae0-48ef-8f1e-739c0b7f2322", 2508 autoTrackPageVisitTime: true 2509 }}); 2510 ai.loadAppInsights(); 2511 ai.trackPageView({ properties: { referrer: document.referrer || "(direct)" } }); 2512 window.appInsights = ai; 2513 document.addEventListener("click", function (e) { 2514 var el = e.target.closest("a, button, .insight-card, .ip-card, .cw-plate, .help-pill, video, [data-track]"); 2515 if (!el) return; 2516 var a = el.closest("a"); 2517 ai.trackEvent({ name: "Select", properties: { 2518 element: el.tagName.toLowerCase(), 2519 label: (el.innerText || el.getAttribute("aria-label") || el.getAttribute("alt") || "").replace(/\s+/g, " ").trim().slice(0, 120), 2520 href: a ? (a.getAttribute("href") || "") : "", 2521 page: location.pathname 2522 }}); 2523 }, true); 2524})(); 2525</script>
2525 2526 2527<style id="btn-harmony"> 2528/* ââ BUTTON HARMONISATION â global nav/footer/contact CTAs âââââââââââ 2529 Colour-wipe + DM Mono font + circular arrow (where it fits). These all sit 2530 on dark backgrounds, so the wipe fills white and text flips to dark. */ 2531.tst-header-cta,.tst-nav-cta,.footer-pill,.f-news-submit,.cf-submit{ 2532 font-family:'DM Mono',monospace!important;font-weight:500!important;font-size:11px!important; 2533 letter-spacing:0.14em!important;text-transform:uppercase!important; 2534 position:relative!important;overflow:hidden!important;display:inline-flex!important;align-items:center!important; 2535 transition:color .35s ease,transform .22s ease!important;} 2536/* Mobile: hide the header "Get in touch" CTA (nav drawer + page/float CTA cover it); 2537 higher specificity + !important beats the harmony display:inline-flex above. */ 2538@media (max-width:768px){.tst-header .tst-header-cta{display:none!important;}} 2539.footer-pill,.tst-nav-cta{gap:10px!important;} 2540.tst-header-cta::before,.tst-nav-cta::before,.footer-pill::before,.f-news-submit::before,.cf-submit::before{ 2541 content:'';position:absolute;inset:0;background:var(--light);transform:translateX(-101%); 2542 transition:transform .35s ease;border-radius:inherit;z-index:0;} 2543.tst-header-cta:hover::before,.tst-nav-cta:hover::before,.footer-pill:hover::before, 2544.f-news-submit:hover::before,.cf-submit:hover::before{transform:translateX(0);} 2545.tst-header-cta>*,.tst-nav-cta>*,.footer-pill>*,.f-news-submit>*,.cf-submit>*{position:relative;z-index:1;} 2546.tst-nav-cta:hover{color:var(--dark)!important;} 2547.tst-nav-cta .btn-intent-arrow svg,.footer-pill .btn-intent-arrow svg{ 2548 fill:currentColor;transition:fill .35s ease;display:block;width:18px;height:18px;} 2549.btn-intent-arrow{display:inline-flex;} 2550.tst-header-cta:hover{background:var(--lime)!important;} 2551.tst-nav-cta:hover{background:var(--dark)!important;} 2552.footer-pill:hover{background:var(--cyan)!important;} 2553.f-news-submit:hover{background:var(--cyan)!important;} 2554</style> 2555<style id="nav-fit"> 2556/* Nav drawer fits any desktop height â the full menu (5 links + Get in touch + 2557 socials) was overflowing/cropping on shorter laptop viewports. Scale the 2558 drawer with viewport height so it always fits; tall displays hit the maxima, 2559 i.e. the original reference sizing is unchanged. Desktop-only (mobile nav 2560 has its own rules below 769px). */ 2561@media (min-width: 769px) { 2562 .tst-nav-heading { font-size: clamp(28px, min(6vw, 8vh), 96px); } 2563 .tst-nav-link { padding: clamp(7px, 1.5vh, 20px) 0; } 2564 .tst-nav-cta-wrap { margin: clamp(12px, 2.6vh, 32px) 0 0; padding-bottom: clamp(6px, 1.4vh, 16px); } 2565 .tst-nav-socials { padding-top: clamp(10px, 2.2vh, 32px); } 2566 .tst-nav-inner { padding: clamp(28px, 5vh, 60px) 48px; } 2567} 2568</style> 2569 2570<style id="nav-line-anim"> 2571/* The thin separators between the main-menu items draw in as PART of the text 2572 reveal (instead of appearing instantly). Pure CSS â the keyframes replay each 2573 time the overlay is shown (display:none â block), staggered to match the GSAP 2574 link reveal. Falls back to static lines under reduced-motion / if JS is off. */ 2575.tst-nav-item { position: relative; border-top: none !important; } 2576.tst-nav-item:last-child { border-bottom: none !important; } 2577.tst-nav-item::before, 2578.tst-nav-item:last-child::after { 2579 content: ''; position: absolute; left: 0; right: 0; height: 1px; 2580 background: rgba(34,34,34,0.15); transform-origin: center; 2581} 2582.tst-nav-item::before { top: 0; } 2583.tst-nav-item:last-child::after { bottom: 0; } 2584@media (prefers-reduced-motion: no-preference) { 2585 @keyframes tstNavLineIn { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } 2586 .tst-nav-item::before, 2587 .tst-nav-item:last-child::after { animation: tstNavLineIn 0.55s cubic-bezier(0.65, 0.01, 0.05, 0.99) both; } 2588 .tst-nav-item:nth-child(1)::before { animation-delay: 0.24s; } 2589 .tst-nav-item:nth-child(2)::before { animation-delay: 0.29s; } 2590 .tst-nav-item:nth-child(3)::before { animation-delay: 0.34s; } 2591 .tst-nav-item:nth-child(4)::before { animation-delay: 0.39s; } 2592 .tst-nav-item:nth-child(5)::before { animation-delay: 0.44s; } 2593 .tst-nav-item:nth-child(6)::before { animation-delay: 0.49s; } 2594 .tst-nav-item:last-child::after { animation-delay: 0.49s; } 2595} 2596</style> 2597 2598</body> 2599</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.