PageSourceSearch

https://www.wearetst.com/how-we-can-help/how-we-can-help.html

html wearetst.com collected 2026-10-10 00:14:55 UTC 125,166 bytes, 2,599 lines download raw bytes

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 &amp; benchmark</button>
1367    <button class="hwch-nav-btn" type="button" data-panel="1">Launch &amp; embed change</button>
1368    <button class="hwch-nav-btn" type="button" data-panel="2">Develop &amp; 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>&amp; benchmark</div>
1378          <p class="hwch-sub">You can&rsquo;t fix what you can&rsquo;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 &mdash; bring us a problem and we&rsquo;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 &mdash; 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 &amp; 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 &amp; <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 &ndash; 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>&amp; 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 &ndash; 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&rsquo;t always fit all&hellip;</h2>
1480      <p class="scale-sub">We&rsquo;ll shape your engagement around what you actually need and we&rsquo;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&rsquo;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&rsquo;re proud to have won a few awards along the way&hellip;</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&rsquo;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&rsquo;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">&copy; 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 &amp; 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 &amp; Johnson", logo:"ise.png"},
2107    {title:"Recruiting Excellence Award — Large Employer",             partnership:"In partnership with Johnson &amp; 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 &amp; 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:"&ldquo;Best of the best&rdquo; 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&rsquo;s <span>talk.</span></h2>
2343          <p class="contact-subline">We&rsquo;d love to hear about what you&rsquo;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&rsquo;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 &mdash; we&rsquo;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.