PageSourceSearch

https://www.armakuni.com/

html armakuni.com collected 2026-10-02 21:01:49 UTC 196,730 bytes, 4,785 lines download raw bytes

1<!DOCTYPE html><html lang="en" data-theme="royal-blue"><head>
2<meta charset="UTF-8">
3<meta name="viewport" content="width=device-width, initial-scale=1.0">
4<title>Armakuni | The engineering partner for the AI era. AWS Premier.</title>
5<link rel="preconnect" href="https://fonts.googleapis.com">
6<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
7<link href="https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@200;300&amp;family=Inter:wght@350;400;500&amp;family=Roboto+Mono:wght@400&amp;display=swap" rel="stylesheet">
8<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" defer></script>
vendor: 1 bytes, line 8
8
9<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" defer></script>
9
10
11<style>
12/* ========================================
13   0. TOKENS
14   ======================================== */
15:root {
16  --bg: #05050c;
17  --surface: rgba(255,255,255,0.03);
18  --surface-2: rgba(255,255,255,0.04);
19  --surface-card: rgba(255,255,255,0.025);
20  --text: #ebf1fb;
21  --text-s: rgba(235,241,251,0.72);
22  --text-m: rgba(235,241,251,0.45);
23  --border: rgba(255,255,255,0.07);
24  --border-h: rgba(255,255,255,0.14);
25  --accent-cyan: #009be5;
26  --accent-pink: #dd23bb;
27  --aws: #FF9900;
28  --aws-soft: rgba(255,153,0,0.12);
29  --logo-blue: #009FE3;
30  --logo-green: #95C11F;
31  --logo-orange: #F07B20;
32  --logo-coral: #C2004B;
33  --logo-pink: #E6007E;
34  --accent-a04: color-mix(in srgb, var(--accent) 4%, transparent);
35  --accent-a06: color-mix(in srgb, var(--accent) 6%, transparent);
36  --accent-a08: color-mix(in srgb, var(--accent) 8%, transparent);
37  --accent-a12: color-mix(in srgb, var(--accent) 12%, transparent);
38  --accent-a15: color-mix(in srgb, var(--accent) 15%, transparent);
39  --accent-a18: color-mix(in srgb, var(--accent) 18%, transparent);
40  --accent-a26: color-mix(in srgb, var(--accent) 26%, transparent);
41  --accent-a45: color-mix(in srgb, var(--accent) 45%, transparent);
42  --r-sm: 10px;
43  --r-md: 16px;
44  --r-lg: 24px;
45  --f-h: 'Saira Semi Condensed', sans-serif;
46  --f-b: 'Inter', sans-serif;
47  --f-m: 'Roboto Mono', monospace;
48  --ease: cubic-bezier(0.4, 0, 0.2, 1);
49  --ease-glow: cubic-bezier(0.22, 1, 0.36, 1);
50  --ease-menu: cubic-bezier(0.16, 1, 0.3, 1);
51  --trust-strip-h: 0px; /* trust strip removed; kept token at 0 so hero offset math stays valid */
52  --nav-h: 68px;
53}
54
55/* ========================================
56   1. RESET & BASE
57   ======================================== */
58*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
59html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
60body {
61  font-family: var(--f-b); font-weight: 350; font-size: 16px; line-height: 1.65;
62  color: var(--text); background-color: var(--bg);
63  background:
64    radial-gradient(circle at 14% 12%, var(--accent-a15), transparent 24%),
65    radial-gradient(circle at 84% 18%, rgba(0,155,229,0.09), transparent 24%),
66    radial-gradient(circle at 50% 80%, var(--accent-a08), transparent 22%),
67    linear-gradient(180deg, #04040a, #05050c 38%, #070c15 100%);
68  background-attachment: fixed;
69  overflow-x: hidden;
70  opacity: 0;
71  transition: opacity 0.6s var(--ease);
72}
73body.loaded { opacity: 1; }
74a { color: inherit; text-decoration: none; }
75button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
76img { max-width: 100%; display: block; }
77ul, ol { list-style: none; }
78
79/* ========================================
80   2. BACKGROUND ORNAMENTS
81   ======================================== */
82.bg-dot-grid {
83  position: fixed; inset: 0; z-index: 0; pointer-events: none;
84  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
85  background-size: 24px 24px;
86  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0,0,0,0.5) 0%, transparent 100%);
87}
88.bg-continuity-lines { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
89.bg-continuity-lines::before, .bg-continuity-lines::after {
90  content: ''; position: absolute; top: 0; bottom: 0; width: 1px;
91  background: linear-gradient(180deg, transparent 0%, transparent 14%, rgba(255,255,255,0.06) 22%, rgba(255,255,255,0.06) 90%, transparent 100%);
92}
93.bg-continuity-lines::before { left: max(24px, calc((100vw - 1100px) / 2)); }
94.bg-continuity-lines::after { right: max(24px, calc((100vw - 1100px) / 2)); }
95.bg-line-center {
96  position: fixed; top: 0; bottom: 0; left: 50%; width: 1px; z-index: 0; pointer-events: none;
97  background: linear-gradient(180deg, transparent 0%, var(--accent-a08) 15%, rgba(255,255,255,0.05) 50%, var(--accent-a08) 85%, transparent 100%);
98}
99.scroll-progress {
100  position: fixed; top: 0; left: 0; height: 2px; width: 0%; z-index: 10000;
101  background: linear-gradient(90deg, var(--accent), var(--accent-cyan));
102}
103.fog-layer { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
104.fog-blob { position: absolute; border-radius: 50%; filter: blur(92px); opacity: 0.5; }
105.fog-blob-1 { width: 420px; height: 420px; background: var(--accent-a08); top: 10%; left: 8%; animation: fd1 28s ease-in-out infinite; }
106.fog-blob-2 { width: 360px; height: 360px; background: color-mix(in srgb, var(--accent-cyan) 6%, transparent); top: 30%;
106 right: 12%; animation: fd2 32s ease-in-out infinite; }
107.fog-blob-3 { width: 300px; height: 300px; background: var(--accent-a06); bottom: 20%; left: 40%; animation: fd3 26s ease-in-out infinite; }
108@keyframes fd1 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(60px,40px) scale(1.1); } 66% { transform: translate(-30px,70px) scale(0.95); } }
109@keyframes fd2 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(-50px,-30px) scale(1.05); } 66% { transform: translate(40px,-60px) scale(0.9); } }
110@keyframes fd3 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(70px,-50px) scale(1.08); } 66% { transform: translate(-40px,30px) scale(0.92); } }
111.mouse-glow {
112  position: fixed; width: 500px; height: 500px; border-radius: 50%; pointer-events: none; z-index: 1;
113  background: radial-gradient(circle, var(--accent-a06), transparent 70%);
114  transform: translate(-50%, -50%); transition: left 0.3s var(--ease), top 0.3s var(--ease);
115}
116@media (hover: none), (pointer: coarse) { .mouse-glow { display: none; } }
117
118/* ========================================
119   3. TRUST STRIP (NEW - above nav)
120   Component: trust-strip
121   Thin certifications band - proves credibility before the pitch.
122   ======================================== */
123.trust-strip {
124  position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
125  height: var(--trust-strip-h);
126  background: linear-gradient(180deg, rgba(3,4,10,0.95), rgba(5,6,14,0.88));
127  border-bottom: 1px solid var(--border);
128  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
129  overflow: hidden;
130}
131.trust-strip-track {
132  display: flex; align-items: center; gap: 36px;
133  height: 100%; padding: 0 24px;
134  white-space: nowrap;
135  font-family: var(--f-m); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
136  animation: trustMarquee 48s linear infinite;
137  will-change: transform;
138}
139.trust-item {
140  display: inline-flex; align-items: center; gap: 10px; color: var(--text-s); flex-shrink: 0;
141}
142.trust-item::before {
143  content: ''; width: 6px; height: 6px; border-radius: 50%;
144  background: var(--aws);
145  box-shadow: 0 0 8px color-mix(in srgb, var(--aws) 40%, transparent);
146}
147.trust-item.t-aws::before { background: var(--aws); box-shadow: 0 0 8px rgba(255,153,0,0.5); }
148.trust-item.t-tt::before  { background: var(--logo-green); box-shadow: 0 0 8px rgba(149,193,31,0.5); }
149.trust-item.t-sca::before { background: var(--accent-bright); box-shadow: 0 0 8px rgba(123,198,255,0.5); }
150@keyframes trustMarquee {
151  from { transform: translateX(0); }
152  to   { transform: translateX(-50%); }
153}
154
155/* ========================================
156   4. NAV (glass pill - offset below trust strip)
157   ======================================== */
158.nav {
159  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
160  width: min(1060px, calc(100vw - 18px)); z-index: 1000; border-radius: 18px;
161  border: 1px solid var(--border); background: rgba(8,12,20,0.68);
162  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
163  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 40px rgba(0,0,0,0.28);
164  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding: 12px 14px;
165}
166.nav-brand { display: flex; align-items: center; gap: 10px; }
167.brand-name { font-family: var(--f-h); font-weight: 200; font-size: 18px; letter-spacing: 0.02em; }
168.nav-links { display: flex; align-items: center; justify-content: center; gap: 6px; }
169.nav-link {
170  font-family: var(--f-m); font-size: 11px; font-weight: 350; text-transform: uppercase;
171  letter-spacing: 0.1em; color: var(--text-m); padding: 6px 12px; border-radius: 8px;
172  position: relative; transition: color 0.25s var(--ease);
173}
174.nav-link::after {
175  content: ''; position: absolute; bottom: 2px; left: 12px; right: 12px; height: 1px;
176  background: linear-gradient(90deg, var(--accent), var(--accent-cyan));
177  transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease);
178}
179.nav-link:hover { color: var(--text); }
180.nav-link:hover::after { transform: scaleX(1); }
181.nav-cta {
182  font-family: var(--f-m); font-size: 11px; font-weight: 350; text-transform: uppercase;
183  letter-spacing: 0.08em; padding: 8px 16px; border-radius: var(--r-sm);
184  border: 1px solid var(--accent-a26);
185  background: linear-gradient(180deg, var(--accent-a18), var(--accent-a06));
186  box-shadow: inset 0 0 12px 4px var(--accent-a06), 0 0 16px var(--accent-a04);
187  color: var(--text); white-space: nowrap;
188  transition: transform 350ms var(--ease), box-shadow 350ms var(--ease), border-color 350ms var(--ease);
189}
190.nav-cta:hover {
191  border-color: var(--accent-a45);
192  background: linear-gradient(180deg, var(--accent-a26), var(--accent-a12));
193  box-shadow: inset 0 0 20px 6px var(--accent-a12), 0 0 32px var(--accent-a12);
194  transform: translateY(-1px);
195}
196
197/* ========================================
198   5. LAYOUT PRIMITIVES + REVEAL + BUTTONS
199   ======================================== */
200.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
201.wrap-narrow { max-width: 680px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
202section { position: relative; }
203h2 {
204  font-family: var(--f-h); font-weight: 200; font-size: clamp(28px, 3vw, 38px);
205  line-height: 1.15; color: var(--text); margin-bottom: 18px;
206}
207.lead { font-size: 16px; color: var(--text-s); line-height: 1.78; max-width: 680px; }
208.eyebrow {
209  display: inline-block;
210  font-family: var(--f-m); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
211  color: var(--accent-bright); margin-bottom: 18px;
212  position: relative; padding-left: 26px;
213}
214.eyebrow::before {
215  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
216  width: 16px; height: 1px; background: var(--accent-bright);
217}
218
219.reveal {
220  opacity: 0; transform: translateY(16px); filter: blur(6px);
221  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease), filter 0.65s var(--ease);
222}
223.reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); }
224.reveal[data-delay="1"] { transition-delay: 0.08s; }
225.reveal[data-delay="2"] { transition-delay: 0.16s; }
226.reveal[data-delay="3"] { transition-delay: 0.24s; }
227.reveal[data-delay="4"] { transition-delay: 0.32s; }
228.reveal[data-delay="5"] { transition-delay: 0.40s; }
229
230.btn {
231  display: inline-flex; align-items: center; gap: 8px;
232  border: 1px solid var(--accent-a26);
233  background: linear-gradient(180deg, var(--accent-a18), var(--accent-a06));
234  border-radius: 12px; padding: 12px 24px;
235  font-family: var(--f-m); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text);
236  transition: transform 350ms var(--ease), box-shadow 350ms var(--ease), border-color 350ms var(--ease);
237}
238.btn:hover {
239  border-color: var(--accent-a45);
240  background: linear-gradient(180deg, var(--accent-a26), var(--accent-a12));
241  box-shadow: inset 0 0 24px 8px var(--accent-a12), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 40px var(--accent-a12), 0 4px 16px var(--accent-a08);
242  transform: translateY(-2px) scale(1.02);
243}
244.btn:active { transform: translateY(0) scale(0.98); transition-duration: 100ms; }
245.btn-ghost {
246  background: var(--surface); border-color: var(--border);
247}
248.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-h); box-shadow: none; }
249.arr { display: inline-block; transition: transform 0.25s var(--ease); }
250.btn:hover .arr { transform: translateX(4px); }
251.btn-glow-pulse { animation: glowPulse 2.5s ease-in-out infinite; }
252@keyframes glowPulse {
253  0%, 100% { box-shadow: inset 0 0 16px 6px var(--accent-a06), 0 0 24px var(--accent-a04); }
254  50% { box-shadow: inset 0 0 24px 8px var(--accent-a12), 0 0 60px var(--accent-a15), 0 0 30px var(--accent-a08); }
255}
256.link-secondary {
257  font-family: var(--f-b); font-size: 15px; color: var(--text-s);
258  transition: color 0.25s var(--ease); border-bottom: 1px solid transparent;
259}
260.link-secondary:hover { color: var(--text); border-bottom-color: var(--accent); }
261
262/* ========================================
263   6. HERO - Fluid Ink (dark) + category + tagline + concrete what
264   ======================================== */
265.hero {
266  position: relative; overflow: hidden;
267  /* Cap hero height on tall screens. Without the cap, 100vh on a 1440px-tall
268     monitor leaves the centered content marooned in the middle with too much
269     dead space top + bottom. Cap at 820px so the hero feels purposeful on
270     desktop and laptop, while still filling the viewport on phones / tablets. */
271  min-height: min(100dvh, 820px); min-height: min(100vh, 820px);
272  display: flex; flex-direction: column; justify-content: center;
273  padding: calc(var(--trust-strip-h) + var(--nav-h) + 56px) 0 56px;
274}
275.hero-bg-fallback {
276  position: absolute; inset: 0; z-index: 0; pointer-events: none;
277  background:
278    radial-gradient(1200px 800px at 78% 40%, rgba(28,62,160,0.6), transparent 65%),
279    radial-gradient(900px 600px at 85% 55%, rgba(18,30,85,0.55), transparent 70%),
280    radial-gradient(1400px 900px at 95% 30%, rgba(10,16,40,0.7), transparent 75%);
281}
282.hero-bg-canvas {
283  position: absolute; inset: 0; z-index: 0;
284  width: 100%; height: 100%;
285  /* pointer-events auto so the canvas receives mouse movement; buttons still click. */
286}
287/* Content wrapper is transparent to the mouse; only interactive children opt in.
288   This lets the hero BG shader feel the cursor across the full viewport. */
289.hero-content { pointer-events: none; }
290.hero-content .btn, .hero-content .nav-cta, .hero-content a { pointer-events: auto; }
291.hero-bg-tint {
292  position: absolute; inset: 0; z-index: 1; pointer-events: none;
293  /* A soft bottom vignette so the shader reads darker at the bottom of the fold */
294  background: linear-gradient(180deg, transparent 0%, transparent 55%, rgba(5,5,12,0.55) 100%);
295}
296.hero-fade {
297  position: absolute; inset: 0; z-index: 1; pointer-events: none;
298  background: linear-gradient(90deg, rgba(5,5,12,0.85) 0%, rgba(5,5,12,0.55) 38%, rgba(5,5,12,0.18) 60%, transparent 78%);
299}
300.hero-grid {
301  position: absolute; inset: 0; z-index: 1; pointer-events: none;
302  background-image:
303    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
304    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
305  background-size: 72px 72px;
306  mask-image: radial-gradient(ellipse 90% 90% at 50% 30%, black 0%, transparent 100%);
307}
308.hero-content { position: relative; z-index: 2; max-width: 900px; }
309.hero h1 {
310  font-family: var(--f-h); font-weight: 200;
311  font-size: clamp(34px, 4vw, 52px);
312  line-height: 1.06; letter-spacing: -0.01em; margin-bottom: 28px;
313  /* 2026-05-09: cap hero headline width to ~4 words per line */
314  max-width: 720px; text-wrap: balance;
315}
316.hero-what {
317  font-family: var(--f-h); font-weight: 200;
318  font-size: clamp(18px, 1.8vw, 22px);
319  line-height: 1.45; color: var(--text-s);
320  max-width: 680px; margin-bottom: 20px;
321}
322.hero-what strong { color: var(--accent-bright); font-weight: 300; }
323.hero-sub { font-size: 16px; color: var(--text-m); line-height: 1.7; max-width: 620px; margin-bottom: 36px; }
324.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
325.hero-trust-note {
326  font-family: var(--f-m); font-size: 11px; color: var(--text-m);
327  text-transform: uppercase; letter-spacing: 0.1em;
328  margin-left: 16px; display: inline-flex; align-items: center; gap: 8px;
329}
330.hero-trust-note::before {
331  content: ''; width: 4px; height: 4px; border-radius: 50%;
332  background: var(--aws); box-shadow: 0 0 6px rgba(255,153,0,0.6);
333  animation: pulseDot 2s ease-in-out infinite;
334}
335@keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
336a.hero-trust-note { text-decoration: none; cursor: pointer; transition: color 0.2s var(--ease); }
337a.hero-trust-note:hover { color: var(--text); }
338.hero-trust-note .arr { display: inline-block; transition: transform 0.25s var(--ease); }
339.hero-trust-note:hover .arr { transform: translateX(4px); }
340
341/* Char glow */
342.char { display: inline; }
343[data-char-glow] .char {
344  display: inline; opacity: 0.25; color: var(--accent-bright); text-shadow: none;
345  transition: opacity 0.5s var(--ease-glow), color 0.5s var(--ease-glow), text-shadow 0.5s var(--ease-glow);
346}
347[data-char-glow] .char.lit {
348  opacity: 1; color: var(--text);
349  text-shadow: 0 0 12px color-mix(in srgb, var(--accent-bright) 60%, transparent), 0 0 24px var(--accent-a18);
350}
351[data-char-glow] .char.settled {
352  opacity: 1; color: var(--text); text-shadow: none;
353  transition: text-shadow 0.6s var(--ease-glow);
354}
355
356/* ========================================
357   7. LOGO WALL (NEW component - dedicated trust band)
358   ======================================== */
359.logo-wall {
360  padding: 48px 0 56px;
361  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.015) 40%, transparent);
362  border-top: 1px solid var(--border);
363  border-bottom: 1px solid var(--border);
364  overflow: hidden;
365}
366.logo-wall-lbl {
367  font-family: var(--f-m); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
368  color: var(--text-m); text-align: center; margin-bottom: 32px;
369}
370.logo-wall-lbl strong { color: var(--text-s); font-weight: 400; }
371.logo-marquee {
372  position: relative;
373  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
374  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
375}
376.logo-marquee-track {
377  display: flex; align-items: center; gap: 56px;
378  width: max-content;
379  animation: logoScroll 480s linear infinite;
380}
381.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
382.logo-name {
383  font-family: var(--f-h); font-weight: 300; font-size: 22px;
384  color: var(--text-m); letter-spacing: 0.02em;
385  opacity: 0.6; white-space: nowrap;
386  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
387  flex-shrink: 0;
388}
389.logo-name:hover { opacity: 1; color: var(--text); }
390@keyframes logoScroll {
391  from { transform: translateX(0); }
392  to   { transform: translateX(-50%); }
393}
394
395/* ========================================
396   8. CASE STUDY CAROUSEL (tm-sec from master design system)
397   Component: testimonial-carousel (design-system.html :3133)
398   ======================================== */
399.tm-sec { position: relative; overflow: hidden; padding: 88px 0 72px; }
400.tm-head { text-align: center; margin-bottom: 32px; }
401.tm-head .eyebrow { margin-left: auto; margin-right: auto; }
402.tm-head h2 { max-width: 780px; margin: 8px auto 0; }
403.tm-glow {
404  position: absolute; left: 50%; transform: translateX(-50%);
405  width: min(1100px, 85vw); height: 240px; bottom: 0;
406  background: radial-gradient(ellipse at center, var(--accent-a08), transparent 70%);
407  pointer-events: none; z-index: 0; filter: blur(40px);
408}
409/* tm-viewport: full-bleed clipped frame; tm-track: flex container that
410   translates left/right under JS control. Avoids native scroll-snap edge
411   bugs and works on every viewport width. */
412.tm-viewport {
413  position: relative; z-index: 1;
414  overflow: hidden;
415  margin-left: calc(-50vw + 50%); width: 100vw;
416  padding: 20px max(24px, calc((100vw - 820px) / 2));
417  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
418  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
419}
420.tm-track {
421  display: flex; gap: 24px;
422  /* Stretch so every slide matches the height of the tallest sibling. The
423     footer's `margin-top: auto` keeps short-quote slides bottom-aligned
424     instead of leaving the footer halfway up the card. Uniform height
425     reads as a polished carousel; staggered heights read as a layout bug. */
426  align-items: stretch;
427  transition: transform 0.55s cubic-bezier(0.16,1,0.3,1);
428  will-change: transform;
429}
430.tm-nav {
431  display: flex; align-items: center; justify-content: center;
432  gap: 16px; margin-top: 24px; position: relative; z-index: 1;
433}
434.tm-arrow {
435  width: 40px; height: 40px; border-radius: 50%;
436  background: transparent; border: 1px solid #fff; color: #fff;
437  font-size: 16px; display: flex; align-items: center; justify-content: center;
438  transition: border-color 0.2s, color 0.2s, opacity 0.2s;
439  cursor: pointer;
440}
441.tm-arrow:hover, .tm-arrow:active { background: var(--accent-bright); border-color: var(--accent-bright); color: #fff; }
442.tm-slide {
443  flex: 0 0 min(820px, calc(100vw - 80px));
444  padding: 40px 48px; border-radius: 20px;
445  position: relative; overflow: hidden;
446  display: flex; flex-direction: column;
447  background: linear-gradient(170deg, var(--accent-a12) 0%, color-mix(in srgb, var(--accent-cyan) 6%, transparent) 40%, rgba(5,5,12,0.85) 100%);
448  border: 1px solid var(--accent-a18);
449  transition: transform 0.55s cubic-bezier(0.16,1,0.3,1), opacity 0.4s;
450}
451.tm-slide:not(.active) { opacity: 0.35; transform: scale(0.94); }
452.tm-slide.active { opacity: 1; }
453.tm-slide-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
454.tm-divider { border: 0; border-top: 1px solid var(--accent-a26); margin: 0 0 28px; }
455.tm-tag {
456  font-family: var(--f-m); font-size: 10px; letter-spacing: 0.16em;
457  text-transform: uppercase; color: var(--accent-bright);
458  padding: 5px 10px; border: 1px solid var(--accent-a26);
459  border-radius: 9999px; background: var(--accent-a04);
460  display: inline-block; margin-left: auto; flex-shrink: 0;
461}
462/* tm-logo-mark: small monochrome customer logo at the top of each slide.
463   `brightness(0) invert(1)` forces any source colour to clean white, so
464   colored AVIFs and pre-whitened PNGs both render uniformly.
465   Use the `.tm-logo-mark--colored` modifier on slides whose source asset
466   doesn't carry alpha and renders as a flat white block under the filter
467   (e.g. logos exported as opaque AVIFs). */
468.tm-logo-mark {
469  height: 32px;
470  display: flex;
471  align-items: center;
472}
473.tm-logo-mark img {
474  height: 100%;
475  width: auto;
476  max-width: 140px;
477  object-fit: contain;
478  filter: brightness(0) invert(1);
479  opacity: 0.85;
480}
481.tm-logo-mark--colored img {
482  filter: none;
483  opacity: 1;
484}
485.tm-system { display: none; }
486.tm-metric { display: none; }
487.tm-slide blockquote {
488  font-weight: 350; font-size: 17px; line-height: 1.65;
489  color: rgba(235,241,251,0.9);
490  margin: 0 0 28px;
491  font-style: normal;
492  overflow-wrap: break-word;
493  word-break: normal;
494  hyphens: auto;
495}
496.tm-footer { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 8px; }
497.tm-avatar {
498  width: 44px; height: 44px; border-radius: 50%;
499  background: linear-gradient(135deg, var(--accent-a26), color-mix(in srgb, var(--accent-cyan) 30%, transparent));
500  border: 2px solid rgba(255,255,255,0.1); flex-shrink: 0;
501}
502.tm-name { font-weight: 550; font-size: 15px; color: var(--text); }
503.tm-role { font-size: 13px; color: var(--text-m); margin-top: 3px; }
504
505/* ========================================
506   9. OFFERINGS - icon-tile-row (canonical, design-system.html #56)
507   modal.com "Powering any ML workload" pattern:
508   accent-tinted container, dark tiles inside, 3D isometric
509   illustration + heading + body + proof.
510   ======================================== */
511.itr-section { padding: 96px 0; position: relative; }
512.itr-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
513.itr-head h2 { margin-bottom: 0; }
514.itr-head .lead { max-width: 360px; margin: 0; font-size: 15px; }
515.itr-container {
516  position: relative;
517  overflow: hidden;
518  padding: 10px 0;
519}
520.itr-grid {
521  position: relative; z-index: 1;
522  display: grid; gap: 14px;
523}
524.itr-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
525.itr-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
526.itr-tile {
527  /* --offering-accent / --offering-bright are scoped per tile via data-offering-theme below.
528     Default falls back to current accent so uncolored tiles still look right. */
529  --offering-accent: var(--accent);
530  --offering-bright: var(--accent-bright);
531  background: linear-gradient(180deg, #05070e, #080b18);
532  border: 1px solid var(--border);
533  border-radius: var(--r-md);
534  padding: 20px 18px 22px;
535  display: flex; flex-direction: column; gap: 10px;
536  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease);
537  position: relative; overflow: hidden;
538  color: var(--text);
539  text-decoration: none;
540}
541/* Per-offering theme preview on hover - clicking through to that offering, user sees the color they're about to enter */
542.itr-tile[data-offering-theme="blue"]      { --offering-accent: #2d62ff; --offering-bright: #7bc6ff; }
543.itr-tile[data-offering-theme="pink"]      { --offering-accent: #dd23bb; --offering-bright: #f472b6; }
544.itr-tile[data-offering-theme="cyan"]      { --offering-accent: #009be5; --offering-bright: #67e8f9; }
545.itr-tile[data-offering-theme="orange"]    { --offering-accent: #F07B20; --offering-bright: #fbbf24; }
546.itr-tile[data-offering-theme="green"]     { --offering-accent: #95C11F; --offering-bright: #a3e635; }
547.itr-tile[data-offering-theme="deep-blue"] { --offering-accent: #009FE3; --offering-bright: #7bc6ff; }
548.itr-tile[data-offering-theme="coral"]     { --offering-accent: #C2004B; --offering-bright: #E6007E; }
549.itr-tile:hover {
550  border-color: color-mix(in srgb, var(--offering-accent) 45%, transparent);
551  transform: translateY(-4px);
552  background: linear-gradient(180deg, color-mix(in srgb, var(--offering-accent) 8%, #05070e), color-mix(in srgb, var(--offering-accent) 4%, #080b18));
553  box-shadow:
554    0 12px 40px rgba(0,0,0,0.4),
555    0 0 0 1px color-mix(in srgb, var(--offering-accent) 20%, transparent),
556    0 0 48px color-mix(in srgb, var(--offering-accent) 15%, transparent);
557}
558.itr-tile:hover .itr-name { color: var(--offering-bright); transition: color 0.35s var(--ease); }
559.itr-tile:hover .itr-meta { color: var(--offering-bright); transition: color 0.35s var(--ease); }
560.itr-name, .itr-meta { transition: color 0.35s var(--ease); }
561.itr-img {
562  aspect-ratio: 1 / 1;
563  border-radius: var(--r-sm);
564  overflow: hidden;
565  background: radial-gradient(circle at 50% 50%, var(--accent-a12), transparent 70%);
566  display: flex; align-items: center; justify-content: center;
567  margin-bottom: 8px;
568}
569.itr-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease); }
570.itr-tile:hover .itr-img img { transform: scale(1.06); }
571.itr-name {
572  font-family: var(--f-h); font-weight: 200; font-size: 20px;
573  line-height: 1.2; color: var(--text);
574}
575.itr-desc {
576  font-family: var(--f-b); font-weight: 350; font-size: 13.5px;
577  line-height: 1.55; color: var(--text-s); flex: 1;
578}
579.itr-meta {
580  font-family: var(--f-m); font-size: 10.5px; letter-spacing: 0.1em;
581  text-transform: uppercase; color: var(--aws);
582  margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--border);
583}
584
585/* ========================================
586   10. HORIZONTAL TIMELINE (NEW - slim, replaces vertical)
587   Component: timeline-horizontal
588   ======================================== */
589.timeline-section-h {
590  padding: 80px 0 88px; position: relative;
591  background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
592  overflow: hidden;
593}
594.timeline-section-h .eyebrow-wrap { text-align: center; margin-bottom: 12px; }
595.timeline-section-h h2 { text-align: center; max-width: 720px; margin: 0 auto 48px; font-size: clamp(28px, 3vw, 38px); }
596/* Timeline geometry:
597   - Dot is 14px tall (incl 2px border on each side = 18px total)
598   - Dot vertical center = padding-top (28px) + dot-border-top (2px) + dot-radius (7px) = 37px
599   - Line height = 1px; to place its vertical center at 37px set top: 36.5px
600   This guarantees pixel-perfect alignment of the 1px line with the dot centers. */
601.timeline-track {
602  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
603  max-width: 1000px; margin: 0 auto; padding: 28px 0 0;
604}
605.timeline-line {
606  position: absolute; top: 36.5px; left: 7px; right: calc(25% - 31px); height: 1px;
607  background: rgba(255,255,255,0.08); z-index: 0;
608}
609.timeline-line-fill {
610  position: absolute; top: 0; left: 0; height: 100%; width: 0%;
611  background: linear-gradient(90deg, var(--accent-bright), var(--accent-cyan));
612  box-shadow: 0 0 6px var(--accent-a26);
613}
614.t-era {
615  position: relative; text-align: left; z-index: 1;
616}
617.t-era-dot {
618  width: 14px; height: 14px; border-radius: 50%;
619  margin: 0 0 24px; background: var(--bg);
620  border: 2px solid rgba(255,255,255,0.15);
621  box-sizing: border-box;
622  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease);
623  position: relative; z-index: 2;
624}
625.t-era.active .t-era-dot {
626  border-color: var(--accent-bright);
627  background: var(--accent-bright);
628  box-shadow: 0 0 14px var(--accent-bright), 0 0 28px var(--accent-a45);
629}
630.t-era-year {
631  font-family: var(--f-m); font-weight: 400; font-size: 22px; color: var(--aws);
632  margin-bottom: 6px; letter-spacing: 0.03em;
633}
634.t-era-headline {
635  font-family: var(--f-h); font-weight: 200; font-size: 15px; line-height: 1.35;
636  color: var(--text); margin-bottom: 4px; max-width: 200px;
637}
638.t-era-note {
639  font-family: var(--f-m); font-size: 10.5px; color: var(--text-m);
640  text-transform: uppercase; letter-spacing: 0.1em;
641}
642
643/* ========================================
644   11. PROCESS / HOW WE WORK - canonical horizontal process-flow
645   Component: process-flow (design-system.html :2231)
646   ======================================== */
647.process-section {
648  padding: 96px 0; position: relative;
649  /* No background tint - flat with the rest of the page */
650  overflow: hidden;
651}
652.process-head { max-width: 820px; margin-bottom: 40px; }
653.process-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: process; position: relative; padding-top: 48px; }
654.process-flow::before {
655  content: ''; position: absolute; top: 24px; left: 6px; right: calc(25% - 21px); height: 1px;
656  background: linear-gradient(90deg, transparent, var(--accent-bright), var(--accent-bright), transparent);
657  opacity: 0.35; z-index: 2;
658}
659.process-step {
660  position: relative; padding: 32px 22px; background: var(--surface-card);
661  border: 1px solid var(--border); border-radius: var(--r-md);
662  opacity: 0.55; transition: opacity 0.5s var(--ease), border-color 0.3s, transform 0.3s;
663  display: flex; flex-direction: column; gap: 10px;
664  overflow: visible;
665}
666.process-step::before {
667  counter-increment: process; content: '0' counter(process);
668  font-family: var(--f-m); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
669  color: var(--accent-bright); display: block;
670}
671.process-step-dot {
672  position: absolute; top: -30px; left: 0;
673  width: 12px; height: 12px; border-radius: 50%;
674  background: var(--bg);
675  border: 2px solid var(--border); z-index: 3;
676  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s;
677}
678.process-step.active { opacity: 1; border-color: var(--accent-a26); }
679.process-step.active .process-step-dot { border-color: var(--accent-bright); background: var(--accent-bright); box-shadow: 0 0 10px var(--accent-bright), 0 0 20px var(--accent-a45); }
680.process-step:hover { transform: translateY(-3px); }
681.process-step h4 { font-family: var(--f-h); font-weight: 200; font-size: 20px; line-height: 1.25; margin-top: 14px; }
682.process-step p { font-family: var(--f-b); font-weight: 350; font-size: 14px; line-height: 1.6; color: var(--text-s); }
683.process-step p strong { color: var(--accent-bright); font-weight: 500; }
684.process-step-metric {
685  font-family: var(--f-m); font-size: 10.5px; color: var(--aws);
686  text-transform: uppercase; letter-spacing: 0.12em;
687  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--border);
688}
689
690/* ========================================
691   12. INDUSTRIES - illustration-dominant tall cards (Retool pattern)
692   Component: industry-illus-carousel (new - design-system.html)
693   Tall 3:4 cards. Illustration fills ~70%. Big title + 1-line hook
694   + metric overlay at the bottom.
695   ======================================== */
696.industries-section { padding: 96px 0; }
697.industries-head {
698  display: grid; grid-template-columns: 1fr auto; align-items: end;
699  gap: 24px; margin-bottom: 28px;
700}
701.industries-head h2 {
702  font-size: clamp(28px, 3vw, 38px); line-height: 1.05; margin-bottom: 0;
703  max-width: 820px;
704}
705.industries-head .lead { margin: 0; font-size: 15px; max-width: 360px; }
706.industries-nav { display: flex; gap: 10px; align-items: center; }
707.ind-arrow-btn {
708  width: 42px; height: 42px; border-radius: 50%;
709  background: var(--surface-card); border: 1px solid var(--border);
710  color: var(--text-s); font-family: var(--f-m); font-size: 16px;
711  display: flex; align-items: center; justify-content: center; cursor: pointer;
712  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
713}
714.ind-arrow-btn:hover { border-color: var(--accent-a26); color: var(--text); background: var(--accent-a08); transform: translateY(-1px); }
715.ind-arrow-btn:disabled { opacity: 0.3; cursor: default; }
716.ind-arrow-btn:disabled:hover { border-color: var(--border); color: var(--text-s); background: var(--surface-card); transform: none; }
717.horizontal-scroll {
718  display: flex; gap: 16px; overflow-x: auto;
719  /* `proximity` snap (not `mandatory`) — snap on arrow click without fighting
720     the pixel-by-pixel edge auto-scroll. */
721  scroll-snap-type: x proximity; padding: 8px 0 24px;
722  -ms-overflow-style: none; scrollbar-width: none;
723  /* First card aligns with .wrap's left edge (1120px content max-width
724     centered). Subsequent cards extend off-screen right and scroll. */
725  margin-left: calc(-50vw + 50%); width: 100vw;
726  padding-left: max(24px, calc(50vw - 560px));
727  /* Gutter so the first card doesn't touch the viewport edge.
728     scroll-padding keeps the snap respecting the gutter. */
729  padding-left: max(24px, calc((100vw - 1120px) / 2));
730  padding-right: max(24px, calc((100vw - 1120px) / 2));
731  scroll-padding-left: max(24px, calc((100vw - 1120px) / 2));
732}
733/* When the edge auto-scroller is driving, disable snap entirely so each
734   frame's scrollLeft assignment isn't rubber-banded. */
735.horizontal-scroll.edge-scrolling { scroll-snap-type: none; }
736.horizontal-scroll::-webkit-scrollbar { display: none; }
737.ind-card {
738  flex: 0 0 clamp(176px, 15vw, 208px);
739  aspect-ratio: 3 / 4;
740  scroll-snap-align: start;
741  border-radius: var(--r-lg); overflow: hidden;
742  position: relative;
743  background: var(--surface-card); border: 1px solid var(--border);
744  display: flex; flex-direction: column; justify-content: flex-end;
745  transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.3s;
746  text-decoration: none;
747  color: var(--text);
748}
749/* Per-industry theme preview on hover - same pattern as offering tiles */
750.ind-card[data-offering-theme="blue"]      { --offering-accent: #2d62ff; --offering-bright: #7bc6ff; }
751.ind-card[data-offering-theme="pink"]      { --offering-accent: #dd23bb; --offering-bright: #f472b6; }
752.ind-card[data-offering-theme="cyan"]      { --offering-accent: #009be5; --offering-bright: #67e8f9; }
753.ind-card[data-offering-theme="orange"]    { --offering-accent: #F07B20; --offering-bright: #fbbf24; }
754.ind-card[data-offering-theme="green"]     { --offering-accent: #95C11F; --offering-bright: #a3e635; }
755.ind-card[data-offering-theme="deep-blue"] { --offering-accent: #009FE3; --offering-bright: #7bc6ff; }
756.ind-card[data-offering-theme="coral"]     { --offering-accent: #C2004B; --offering-bright: #E6007E; }
757.ind-card:hover {
758  transform: translateY(-4px);
759  border-color: color-mix(in srgb, var(--offering-accent, var(--accent)) 50%, transparent);
760  box-shadow:
761    0 18px 50px rgba(0,0,0,0.4),
762    0 0 0 1px color-mix(in srgb, var(--offering-accent, var(--accent)) 18%, transparent),
763    0 0 48px color-mix(in srgb, var(--offering-accent, var(--accent)) 15%, transparent);
764}
765.ind-card:hover .ind-card-meta { color: var(--offering-bright, var(--accent-bright)); transition: color 0.35s var(--ease); }
766.ind-card-img {
767  /* Full-bleed background. The "1:1 master shows uncropped via contain"
768     intent in the prior version was wrong — sources are actually 576x768
769     (3:4), same aspect as the card, so contain just rendered them at
770     normal size with breathing room around. Cover + full inset lets the
771     central icon dominate; the ind-card-shade gradient at the bottom
772     still gives the text overlay readability. */
773  position: absolute; inset: 0; width: 100%; height: 100%;
774  object-fit: cover; object-position: center 30%;
775  z-index: 0;
776  transition: transform 0.6s var(--ease);
777}
778.ind-card:hover .ind-card-img { transform: scale(1.04); }
779.ind-card-shade {
780  position: absolute; inset: 0; z-index: 1; pointer-events: none;
781  background: linear-gradient(180deg, rgba(5,5,12,0.12) 0%, rgba(5,5,12,0.22) 18%, rgba(5,5,12,0.7) 34%, rgba(5,5,12,0.87) 55%, rgba(5,5,12,0.95) 78%, rgba(5,5,12,0.98) 100%);
782}
783.ind-card-content {
784  position: relative; z-index: 2; padding: 28px 26px 26px;
785  display: flex; flex-direction: column; gap: 8px;
786}
787.ind-card-name {
788  font-family: var(--f-h); font-weight: 200;
789  font-size: clamp(22px, 2.1vw, 28px); line-height: 1.08;
790  color: var(--text); letter-spacing: -0.01em;
791  text-shadow: 0 2px 18px rgba(0,0,0,0.4);
792}
793.ind-card-hook {
794  font-family: var(--f-b); font-weight: 350; font-size: 14px;
795  line-height: 1.45; color: var(--text-s); margin: 0;
796}
797.ind-card-meta {
798  font-family: var(--f-m); font-size: 10.5px; text-transform: uppercase;
799  letter-spacing: 0.14em; color: var(--accent-bright);
800  margin-top: 6px;
801}
802.ind-card-arrow {
803  position: absolute; top: 22px; right: 22px; z-index: 3;
804  width: 36px; height: 36px; border-radius: 50%;
805  background: rgba(5,5,12,0.55); backdrop-filter: blur(8px);
806  border: 1px solid rgba(255,255,255,0.12);
807  display: flex; align-items: center; justify-content: center;
808  color: var(--text); font-family: var(--f-m); font-size: 14px;
809  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
810}
811.ind-card:hover .ind-card-arrow {
812  background: var(--accent-a26); border-color: var(--accent-a45);
813  transform: translate(2px, -2px);
814}
815
816/* ========================================
817   13. CREDENTIALS (SHRUNK to 1 line + badges)
818   ======================================== */
819.credentials-section {
820  padding: 56px 0; text-align: center;
821  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
822  background: rgba(255,255,255,0.015);
823}
824.credentials-line {
825  font-family: var(--f-h); font-weight: 200; font-size: clamp(22px, 2.4vw, 28px);
826  color: var(--text); margin-bottom: 20px;
827}
828.credentials-line strong { color: var(--accent-bright); font-weight: 300; }
829.credential-badges {
830  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
831}
832.credential-badge {
833  font-family: var(--f-m); font-size: 10.5px; text-transform: uppercase;
834  letter-spacing: 0.1em; color: var(--text-s); padding: 7px 14px;
835  border: 1px solid var(--border); border-radius: var(--r-sm);
836  transition: border-color 0.2s, color 0.2s, background 0.2s;
837}
838.credential-badge:hover { border-color: var(--accent-a26); color: var(--text); background: var(--accent-a04); }
839
840/* AWS Partnership Strip: a richer multi-row module under credentials.
841   Row 1 (banner): Premier Tier badge + Specializations + Strategic Collab chip + partner-profile link
842   Row 2 (group label + grid): Service Competencies
843   Row 3 (group label + grid): Vertical Competencies
844   Row 4 (group label + grid): AWS Service Delivery validations
845*/
846.aws-partner-module {
847  margin-top: 36px;
848  padding: 28px 0 0;
849  border-top: 1px solid var(--border);
850  display: flex;
851  flex-direction: column;
852  gap: 24px;
853}
854.aws-partner-banner {
855  display: flex;
856  flex-wrap: wrap;
857  align-items: center;
858  justify-content: center;
859  gap: 18px 32px;
860}
861.aws-partner-banner img,
862.aws-partner-banner svg {
863  height: 64px;
864  width: auto;
865  display: block;
866  filter: brightness(1.05);
867}
868.aws-partner-chip {
869  padding: 12px 16px;
870  border: 1px solid var(--accent-a26);
871  border-radius: var(--r-sm);
872  background: var(--accent-a04);
873  color: var(--text);
874  font-family: var(--f-m);
875  font-size: 11px;
876  font-weight: 500;
877  letter-spacing: 0.12em;
878  text-transform: uppercase;
879  line-height: 1.35;
880  display: inline-flex;
881  flex-direction: column;
882  gap: 3px;
883}
884.aws-partner-chip small {
885  font-size: 9px;
886  color: var(--text-s);
887  font-weight: 400;
888  letter-spacing: 0.18em;
889}
890/* aws-partner-badge-link: wraps the Premier Tier badge as the AWS Partner
891   profile link. Subtle hover lift signals it's clickable; image inherits
892   the banner's height/filter rules so the badge looks identical to the
893   non-clickable siblings except for the hover affordance. */
894.aws-partner-badge-link {
895  display: inline-flex;
896  align-items: center;
897  text-decoration: none;
898  border-radius: var(--r-sm);
899  transition: transform 0.2s, filter 0.2s;
900  cursor: pointer;
901}
902.aws-partner-badge-link:hover { transform: translateY(-2px); }
903.aws-partner-badge-link:hover img { filter: brightness(1.15); }
904.aws-partner-group {
905  display: flex;
906  flex-direction: column;
907  align-items: center;
908  gap: 12px;
909}
910.aws-partner-group-label {
911  font-family: var(--f-m);
912  font-size: 9.5px;
913  font-weight: 500;
914  text-transform: uppercase;
915  letter-spacing: 0.22em;
916  color: var(--text-s);
917}
918.aws-partner-grid {
919  display: flex;
920  flex-wrap: wrap;
921  align-items: center;
922  justify-content: center;
923  gap: 14px 22px;
924}
925.aws-partner-grid img {
926  height: 52px;
927  width: auto;
928  display: block;
929  filter: brightness(1.05);
930  opacity: 0.92;
931  transition: opacity 0.2s, transform 0.2s;
932}
933.aws-partner-grid img:hover { opacity: 1; transform: translateY(-2px); }
934.aws-partner-grid--small img { height: 42px; }
935@media (max-width: 720px) {
936  .aws-partner-banner { gap: 12px 18px; }
937  .aws-partner-banner img,
938  .aws-partner-banner svg { height: 48px; }
939  .aws-partner-grid img { height: 40px; }
940  .aws-partner-grid--small img { height: 32px; }
941  .process-flow::before { display: none; }
942  .process-step-dot { display: none; }
943}
944
945/* ========================================
946   14. INSIGHTS - canonical blog cards (design-system.html :2176)
947   ======================================== */
948.insights-section { padding: 96px 0; }
949.insights-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
950.insights-head h2 { margin-bottom: 0; }
951.insights-all-link {
952  font-family: var(--f-m); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em;
953  color: var(--accent-bright); padding: 10px 18px; border-radius: 9999px;
954  border: 1px solid var(--accent-a26); background: var(--accent-a04);
955  display: inline-flex; align-items: center; gap: 8px;
956  transition: background 0.2s, border-color 0.2s, transform 0.2s;
957}
958.insights-all-link:hover { background: var(--accent-a12); border-color: var(--accent-bright); transform: translateY(-1px); }
959.insights-all-link .arr { transition: transform 0.2s; }
960.insights-all-link:hover .arr { transform: translateX(3px); }
961/* Blog thumb image variant: when the dynamic insights renderer outputs an <imgdecoding="async">
962   inside .blog-thumb, swap from procedural-SVG layout to background-image style. */
963.blog-thumb-img {
964  width: 100%; height: 100%; object-fit: cover; display: block;
965  transition: transform 0.5s var(--ease);
966}
967.card-blog:hover .blog-thumb-img { transform: scale(1.05); }
968.blog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
969.card-blog {
970  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--r-md);
971  overflow: hidden; transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s;
972  display: flex; flex-direction: column;
973}
974.card-blog:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.25); border-color: var(--border-h); }
975.blog-thumb {
976  aspect-ratio: 16/9; position: relative; overflow: hidden;
977  background: linear-gradient(135deg, var(--accent-a12), color-mix(in srgb, var(--accent-cyan) 8%, transparent));
978}
979.blog-thumb-inner {
980  width: 100%; height: 100%;
981  background: linear-gradient(135deg, rgba(1,29,56,0.8), rgba(5,5,12,0.9));
982  transition: transform 0.5s var(--ease);
983  display: flex; align-items: center; justify-content: center;
984}
985.card-blog:hover .blog-thumb-inner { transform: scale(1.05); }
986.blog-thumb svg { width: 64%; height: 64%; opacity: 0.75; }
987.blog-content { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
988.blog-category {
989  position: absolute; top: 14px; right: 14px; z-index: 2;
990  font-family: var(--f-m); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
991  color: var(--text);
992  background: rgba(5,10,25,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
993  border: 1px solid rgba(255,255,255,0.12);
994  padding: 6px 14px; border-radius: 9999px; display: inline-block; width: fit-content;
995}
996.blog-title {
997  font-family: var(--f-h); font-weight: 300; font-size: 23px; line-height: 1.25;
998  color: var(--text);
999}
1000.blog-excerpt {
1001  font-family: var(--f-b); font-weight: 350; font-size: 14.5px; line-height: 1.6;
1002  color: var(--text-s);
1003  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
1004}
1005.blog-meta {
1006  font-family: var(--f-m); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
1007  color: var(--text-m);
1008}
1009.blog-read-more {
1010  font-family: var(--f-m); font-size: 13px; font-weight: 500; color: var(--accent-bright);
1011  margin-top: auto; padding-top: 8px;
1012  transition: opacity 0.25s var(--ease);
1013}
1014.card-blog:hover .blog-read-more { text-decoration: underline; }
1015
1016/* ========================================
1017   15. CTA (Tompkins - canvas particles)
1018   ======================================== */
1019.cta-section { padding: clamp(64px, 7vw, 96px) 0; text-align: center; position: relative; overflow: hidden; }
1020.cta-particle-canvas { position: absolute; inset: 0; z-index: 0; }
1021.cta-inner { position: relative; z-index: 1; }
1022.cta-section h2 { font-size: clamp(28px, 3vw, 38px); max-width: 640px; margin: 0 auto 18px; }
1023.cta-section .lead { max-width: 520px; margin: 0 auto 36px; text-align: center; }
1024.cta-actions { display: flex; flex-direction: column; align-items: center; gap: 18px; }
1025
1026/* ========================================
1027   16. FOOTER
1028   ======================================== */
1029footer { border-top: 1px solid var(--border); padding: 60px 0 40px; position: relative; z-index: 2; }
1030.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; margin-bottom: 48px; }
1031.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
1032.footer-desc { font-size: 14px; color: var(--text-m); line-height: 1.6; }
1033.footer-col-heading {
1034  font-family: var(--f-m); font-size: 10px; text-transform: uppercase;
1035  letter-spacing: 0.1em; color: var(--text-m); margin-bottom: 16px;
1036}
1037.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
1038.footer-col ul li a { font-size: 14px; color: var(--text-s); position: relative; transition: color 0.25s var(--ease); }
1039.footer-col ul li a:hover { color: var(--text); }
1040.footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; }
1041.footer-copyright { font-family: var(--f-m); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-m); }
1042
1043/* ========================================
1044   R. RESPONSIVE
1045   ======================================== */
1046@media (max-width: 960px) {
1047  .trust-strip { overflow: hidden; }
1048  .trust-strip-track { gap: 24px; }
1049  .nav { width: calc(100vw - 16px); }
1050  .nav-links { display: none; }
1051  .hero { padding-top: calc(var(--trust-strip-h) + var(--nav-h) + 48px); }
1052  .hero-ctas { flex-direction: column; align-items: flex-start; }
1053  .hero-trust-note { margin-left: 0; }
1054  .stats-grid { grid-template-columns: repeat(2, 1fr); }
1055  .offerings-head { grid-template-columns: 1fr; }
1056  .offerings-grid { grid-template-columns: repeat(6, 1fr); }
1057  .offering-tile[data-size="wide"], .offering-tile[data-size="half"] { grid-column: span 6; }
1058  .offering-tile[data-size="third"] { grid-column: span 6; }
1059  .offering-tile[data-size="full"] { grid-column: span 6; flex-direction: column; align-items: flex-start; }
1060  .offering-tile[data-size="full"] .offering-cta-side { align-items: flex-start; text-align: left; }
1061  #case-studies .tm-layout { grid-template-columns: 1fr; gap: 32px; }
1062  #credentials .cred-main { grid-template-columns: 1fr; gap: 32px; }
1063  .cred-bottom-strip { flex-wrap: wrap; row-gap: 24px; }
1064  #credentials .cred-bottom-item { flex: 1 1 100%; }
1065  .blog-grid { grid-template-columns: 1fr 1fr; }
1066  .footer-grid { grid-template-columns: 1fr 1fr; }
1067  .mouse-glow { display: none; }
1068  .bg-continuity-lines, .bg-line-center { display: none; }
1069  .cta-particle-canvas { display: none; }
1070  .vnav-wrapper { padding-left: 0; }
1071  .vnav-line, .vnav-dot { display: none; }
1072  .vnav-step { opacity: 1 !important; }
1073}
1074@media (max-width: 720px) {
1075  #timelineTrackH { grid-template-columns: 1fr; gap: 20px; }
1076  .timeline-line { display: none; }
1077  .t-era { padding-left: 12px; border-left: 2px solid var(--border); transition: border-color 0.4s var(--ease); }
1078  .t-era.active { border-left-color: var(--accent-bright); }
1079  .t-era-dot { display: none; }
1080  .t-era-headline, .t-era-note { max-width: none; margin-left: 0; }
1081}
1082@media (max-width: 580px) {
1083  .hero h1 { font-size: 34px; }
1084  .stats-grid { grid-template-columns: 1fr; }
1085  .offerings-grid { grid-template-columns: 1fr; }
1086  .offering-tile[data-size="wide"], .offering-tile[data-size="half"], .offering-tile[data-size="third"], .offering-tile[data-size="full"] { grid-column: span 1; }
1087  .blog-grid { grid-template-columns: 1fr; }
1088  .footer-grid { grid-template-columns: 1fr; }
1089  .industry-name { font-size: 22px; }
1090}
1091@media (min-width: 700px) and (max-width: 960px) {
1092  #credentials .cred-bottom-item { flex: 1 1 200px; }
1093}
1094
1095/* ========================================
1096   REDUCED MOTION
1097   ======================================== */
1098@media (prefers-reduced-motion: reduce) {
1099  .reveal { transition: none; opacity: 1; transform: none !important; }
1100  .fog-blob { animation: none; }
1101  .mouse-glow { display: none; }
1102  .trust-strip-track, .logo-marquee-track { animation: none; }
1103  [data-char-glow] .char { opacity: 1; color: var(--text); text-shadow: none; transition: none; }
1104  .btn-glow-pulse { animation: none; }
1105  .hero-trust-note::before { animation: none; }
1106  *, *::before, *::after {
1107    animation-duration: 0.01ms !important;
1108    animation-iteration-count: 1 !important;
1109    transition-duration: 0.01ms !important;
1110    scroll-behavior: auto !important;
1111  }
1112}
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152/* AKWriter:logo-img */
1153.logo-img { display: block; height: auto; max-height: 32px; width: auto; max-width: 160px; object-fit: contain; flex-shrink: 0; filter: grayscale(1) brightness(1.5) invert(0); opacity: 0.7; transition: opacity 0.3s ease, filter 0.3s ease; }
1154.logo-img.is-dark-on-light { filter: grayscale(1) brightness(1.5) invert(1); }
1155.logo-img:hover { opacity: 1; filter: grayscale(0) brightness(1) contrast(1); }
1156/* /AKWriter:logo-img */
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312
1313
1314
1315
1316
1317
1318
1319
1320
1321
1322
1323
1324
1325
1326
1327
1328
1329
1330
1331
1332
1333
1334
1335
1336
1337
1338
1339
1340
1341
1342
1343
1344
1345
1346
1347
1348
1349
1350
1351
1352
1353
1354
1355
1356
1357
1358
1359
1360
1361
1362
1363
1364
1365
1366
1367
1368
1369
1370
1371
1372
1373
1374
1375
1376
1377
1378
1379
1380
1381
1382
1383
1384
1385
1386
1387
1388
1389
1390
1391
1392
1393
1394
1395
1396
1397
1398
1399
1400
1401
1402
1403
1404
1405
1406
1407
1408
1409
1410
1411
1412
1413
1414
1415
1416
1417
1418
1419
1420
1421
1422
1423
1424
1425
1426
1427
1428
1429
1430
1431
1432
1433
1434
1435
1436
1437
1438
1439
1440
1441
1442
1443
1444
1445
1446
1447
1448
1449
1450
1451
1452
1453
1454
1455
1456
1457
1458
1459
1460
1461
1462
1463
1464
1465
1466
1467
1468
1469
1470
1471
1472
1473
1474
1475
1476
1477
1478
1479
1480
1481
1482
1483
1484
1485
1486
1487
1488
1489
1490
1491
1492
1493
1494
1495
1496
1497
1498
1499
1500
1501
1502
1503
1504
1505
1506
1507
1508
1509
1510
1511
1512
1513
1514
1515
1516
1517
1518
1519
1520
1521
1522
1523
1524
1525
1526
1527
1528
1529
1530
1531
1532
1533
1534
1535
1536
1537
1538
1539
1540
1541
1542
1543
1544
1545
1546
1547
1548
1549
1550
1551
1552
1553
1554
1555
1556
1557
1558
1559
1560
1561
1562
1563
1564
1565
1566
1567
1568
1569
1570
1571
1572
1573
1574
1575
1576
1577
1578
1579
1580
1581
1582
1583
1584
1585
1586
1587
1588
1589
1590
1591
1592
1593
1594
1595
1596
1597
1598
1599
1600
1601
1602
1603
1604
1605
1606
1607
1608
1609
1610
1611
1612
1613
1614
1615
1616
1617
1618
1619
1620
1621
1622
1623
1624
1625
1626
1627
1628
1629
1630
1631
1632
1633
1634
1635
1636
1637
1638
1639
1640
1641
1642
1643
1644
1645
1646
1647
1648
1649
1650
1651
1652
1653
1654
1655
1656
1657
1658
1659
1660
1661
1662
1663
1664
1665
1666
1667
1668
1669
1670
1671
1672
1673
1674
1675
1676
1677
1678
1679
1680
1681
1682
1683
1684
1685
1686
1687
1688
1689
1690
1691
1692
1693
1694
1695
1696
1697
1698
1699
1700
1701
1702
1703
1704
1705
1706
1707
1708
1709
1710
1711
1712
1713
1714
1715
1716
1717
1718
1719
1720
1721
1722
1723
1724
1725
1726
1727
1728
1729
1730
1731
1732
1733
1734
1735
1736
1737
1738
1739
1740
1741
1742
1743
1744
1745
1746
1747
1748
1749
1750
1751
1752
1753
1754
1755
1756
1757
1758
1759
1760
1761
1762
1763
1764
1765
1766
1767
1768
1769
1770
1771
1772
1773
1774
1775
1776
1777
1778
1779
1780
1781
1782
1783
1784
1785
1786
1787
1788
1789
1790
1791
1792
1793
1794
1795
1796
1797
1798
1799
1800
1801
1802
1803
1804
1805
1806
1807
1808
1809
1810
1811
1812
1813
1814
1815
1816
1817
1818
1819
1820
1821
1822
1823
1824
1825
1826
1827
1828
1829
1830
1831
1832
1833
1834
1835
1836
1837
1838
1839
1840
1841
1842
1843
1844
1845
1846
1847
1848
1849
1850
1851
1852
1853
1854
1855
1856
1857
1858
1859
1860
1861
1862
1863
1864
1865
1866
1867
1868
1869
1870
1871
1872
1873
1874
1875
1876
1877
1878
1879
1880
1881
1882
1883
1884
1885
1886
1887
1888
1889
1890
1891
1892
1893
1894
1895
1896
1897
1898
1899
1900
1901
1902
1903
1904
1905
1906
1907
1908
1909
1910
1911
1912
1913
1914
1915
1916
1917
1918
1919
1920
1921
1922
1923
1924
1925
1926
1927
1928
1929
1930
1931
1932
1933
1934
1935
1936
1937
1938
1939
1940
1941
1942
1943
1944
1945
1946
1947
1948
1949
1950
1951
1952
1953
1954
1955
1956
1957
1958
1959
1960
1961
1962
1963
1964
1965
1966
1967
1968
1969
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040
2041
2042
2043
2044
2045
2046
2047
2048
2049
2050
2051
2052
2053
2054
2055
2056
2057
2058
2059
2060
2061
2062
2063
2064
2065
2066
2067
2068
2069
2070
2071
2072
2073
2074
2075
2076
2077
2078
2079
2080
2081
2082
2083
2084
2085
2086
2087
2088
2089
2090
2091
2092
2093
2094
2095
2096
2097
2098
2099
2100
2101
2102
2103
2104
2105
2106
2107
2108
2109
2110
2111
2112
2113
2114
2115
2116
2117
2118
2119
2120
2121
2122
2123
2124
2125
2126
2127
2128
2129
2130
2131
2132
2133
2134
2135
2136
2137
2138
2139
2140
2141
2142
2143
2144
2145
2146
2147
2148
2149
2150
2151
2152
2153
2154
2155
2156
2157
2158
2159
2160
2161
2162
2163
2164
2165
2166
2167
2168
2169
2170
2171
2172
2173
2174
2175
2176
2177
2178
2179
2180
2181
2182
2183
2184
2185
2186
2187
2188
2189
2190
2191
2192
2193
2194
2195
2196
2197
2198
2199
2200
2201
2202
2203
2204
2205
2206
2207
2208
2209
2210
2211
2212
2213
2214
2215
2216
2217
2218
2219
2220
2221
2222
2223
2224
2225
2226
2227
2228
2229
2230
2231
2232
2233
2234
2235
2236
2237
2238
2239
2240
2241
2242
2243
2244
2245
2246
2247
2248
2249
2250
2251
2252
2253
2254
2255
2256
2257
2258
2259
2260
2261
2262
2263
2264
2265
2266
2267
2268
2269
2270
2271
2272
2273
2274
2275
2276
2277
2278
2279
2280
2281
2282
2283
2284
2285
2286
2287
2288
2289
2290
2291
2292
2293
2294
2295
2296
2297
2298
2299
2300
2301
2302
2303
2304
2305
2306
2307
2308
2309
2310
2311
2312
2313
2314
2315
2316
2317
2318
2319
2320
2321
2322
2323
2324
2325
2326
2327
2328
2329
2330
2331
2332
2333
2334
2335
2336
2337
2338
2339
2340
2341
2342
2343
2344
2345
2346
2347
2348
2349
2350
2351
2352
2353
2354
2355
2356
2357
2358
2359
2360
2361
2362
2363
2364
2365
2366
2367
2368
2369
2370
2371
2372
2373
2374
2375
2376
2377
2378
2379
2380
2381
2382
2383
2384
2385
2386
2387
2388
2389
2390
2391
2392
2393
2394
2395
2396
2397
2398
2399
2400
2401
2402
2403
2404
2405
2406
2407
2408
2409
2410
2411
2412
2413
2414
2415
2416
2417
2418
2419
2420
2421
2422
2423
2424
2425
2426
2427
2428
2429
2430
2431
2432
2433
2434
2435
2436
2437
2438
2439
2440
2441
2442
2443
2444
2445
2446
2447
2448
2449
2450
2451
2452
2453
2454
2455
2456
2457
2458
2459
2460
2461
2462
2463
2464
2465
2466
2467
2468
2469
2470
2471
2472
2473
2474
2475
2476
2477
2478
2479
2480
2481
2482
2483
2484
2485
2486
2487
2488
2489
2490
2491
2492
2493
2494
2495
2496
2497
2498
2499
2500
2501
2502
2503
2504
2505
2506
2507
2508
2509
2510
2511
2512
2513
2514
2515
2516
2517
2518
2519
2520
2521
2522
2523
2524
2525
2526
2527
2528
2529
2530
2531
2532
2533
2534
2535
2536
2537
2538
2539
2540
2541
2542
2543
2544
2545
2546
2547
2548
2549
2550
2551
2552
2553
2554
2555
2556
2557
2558
2559
2560
2561
2562
2563
2564
2565
2566
2567
2568
2569
2570
2571
2572
2573
2574
2575
2576
2577
2578
2579
2580
2581
2582
2583
2584
2585
2586
2587
2588
2589
2590
2591
2592
2593
2594
2595
2596
2597
2598
2599
2600
2601
2602
2603
2604
2605
2606
2607
2608
2609
2610
2611
2612
2613
2614</style>
2615<link rel="stylesheet" href="/assets/css/tokens.css">
2616<link rel="stylesheet" href="/assets/css/base.css">
2617<link rel="stylesheet" href="/assets/css/ambient.css">
2618<link rel="stylesheet" href="/assets/css/components.css">
2619<style>
2620/* Process section overrides — after components.css so these win */
2621.process-flow { padding-top: 48px; }
2622.process-flow::before { top: 24px; left: 6px; right: calc(25% - 21px); height: 2px; background: var(--accent-bright); opacity: 0.8; z-index: 2; }
2623.process-step { z-index: auto; overflow: visible; }
2624.process-step-dot { top: -30px; z-index: 3; }
2625/* Carousel overrides — two-column grid layout, single card fills right column */
2626.tm-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: stretch; }
2627.tm-content { display: flex; flex-direction: column; }
2628.tm-content .eyebrow { display: block; }
2629.tm-content h2 { text-align: left; max-width: none; margin: auto 0 0; font-size: clamp(36px, 4.5vw, 58px) !important; line-height: 1.08 !important; }
2630.tm-tagline { font-size: 1.35rem; font-weight: 300; color: var(--text-m); margin: 12px 0 0; line-height: 1.4; }
2631.tm-nav { justify-content: flex-start; margin-top: auto; padding-top: 32px; }
2632.tm-viewport { margin-left: 0; width: auto; padding: 0; border-radius: 20px; -webkit-mask-image: none; mask-image: none; overflow: hidden; }
2633.tm-track { width: 100%; }
2634.tm-slide { flex: 0 0 100%; min-width: 0; padding: 40px 48px; transition: opacity 0.4s; }
2635.tm-slide:hover { transform: none; }
2636.tm-slide:not(.active) { opacity: 0; transform: none; }
2637.tm-slide.active { opacity: 1; transform: none; }
2638.tm-slide-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
2639.tm-divider { border: 0; border-top: 1px solid var(--accent-a26); margin: 0 0 28px; }
2640.tm-tag { align-self: auto; margin-bottom: 0; margin-left: auto; flex-shrink: 0; }
2641.tm-logo-mark { height: 32px; margin-bottom: 0; }
2642.tm-system { display: block; font-family: var(--f-h); font-weight: 300; font-size: 22px; line-height: 1.25; color: var(--text); margin-bottom: 16px; }
2643.tm-metric { display: none !important; }
2644.tm-slide blockquote { font-size: 17px; line-height: 1.65; color: rgba(235,241,251,0.9); margin: 0 0 28px; flex: none; }
2645.tm-name { font-weight: 550; font-size: 15px; }
2646.tm-role { font-size: 13px; margin-top: 3px; }
2647.tm-arrow { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
2648/* ── Credentials section — Figma redesign ── */
2649.credentials-section { text-align: left; padding: 80px 0; }
2650.cred-headline { font-family: var(--f-h); font-size: clamp(1rem, calc((100vw - 48px) / 29), 2.2rem); font-weight: 300; color: var(--text); margin-bottom: 56px; max-width: none; line-height: 1.15; white-space: nowrap; }
2651.cred-stats { display: flex; margin-bottom: 64px; }
2652.cred-stat { flex: 1; padding: 36px 32px; border-right: 1px solid var(--accent-a26); text-align: left; }
2653.cred-stat:first-child { padding-left: 0; }
2654.cred-stat:last-child { border-right: none; }
2655.cred-stat-num { font-family: var(--f-h); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 300; color: var(--accent-bright); line-height: 1; letter-spacing: -0.02em; }
2656.cred-stat-label { font-size: 0.875rem; color: var(--text-m); margin-top: 10px; }
2657.cred-main { display: grid; grid-template-columns: 3fr 7fr; gap: 48px; align-items: start; margin-bottom: 64px; }
2658.cred-badge-display { display: flex; align-items: center; justify-content: center; height: 320px; }
2659.cred-badge-display-pic { display: flex; align-items: center; justify-content: center; }
2660.cred-badge-display-img { width: 220px; height: 220px; object-fit: contain; transition: opacity 0.2s ease, transform 0.2s ease; }
2661.cred-badge-display.reveal { transform: translateY(16px) scale(0.88); }
2662.cred-badge-display.reveal.visible { transform: translateY(0) scale(1); }
2663.cred-badge-item--active { background: rgba(123,198,255,0.08) !important; border-left: 2px solid var(--accent-bright) !important; padding-left: 18px !important; }
2664.cred-badge-item { cursor: pointer; }
2665.cred-tabs-panel { display: flex; flex-direction: column; height: 320px; border: 1px solid var(--accent-a26); border-radius: 8px; overflow: hidden; }
2666.cred-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--accent-a26); background: rgba(255,255,255,0.02); flex-shrink: 0; }
2667.cred-tab { flex: 0 0 auto; padding: 16px 24px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--text-m); font-size: 14px; font-family: var(--f-m); letter-spacing: 0.04em; text-align: left; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
2668.cred-tab.active { color: var(--accent-bright); border-bottom-color: var(--accent-bright); }
2669.cred-tab:hover:not(.active) { color: var(--text); }
2670.cred-tab-pane { display: none; flex-direction: column; flex: 1; min-height: 0; }
2671.cred-tab-pane.active { display: flex; }
2672.cred-badge-list { flex: 1; overflow-y: auto; padding: 0; scrollbar-width: thin; scrollbar-color: #f90 transparent; }
2673.cred-badge-list::-webkit-scrollbar { width: 4px; }
2674.cred-badge-list::-webkit-scrollbar-thumb { background: #f90; border-radius: 2px; }
2675.cred-badge-item { display: flex; align-items: center; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); transition: background 0.15s; }
2676.cred-badge-item:last-child { border-bottom: none; }
2677.cred-badge-item:hover { background: rgba(255,255,255,0.03); }
2678.cred-badge-item picture, .cred-badge-item > img { display: none; }
2679.cred-badge-name { font-size: 14px; color: var(--text); line-height: 1.4; width: 100%; }
2680.cred-bottom-strip { display: flex; gap: 0; border-top: 1px solid var(--accent-a26); padding-top: 48px; }
2681.cred-bottom-item { display: flex; align-items: flex-start; gap: 16px; flex: 1; padding-right: 40px; }
2682.cred-bottom-item:last-child { padding-right: 0; }
2683.cred-bottom-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
2684.cred-bottom-label { font-size: 16px; font-weight: 450; color: var(--text); line-height: 1.5; padding-top: 6px; }
2685
2686
2687
2688
2689
2690
2691
2692
2693
2694
2695
2696
2697
2698
2699
2700
2701
2702
2703
2704/* AKWriter typography + theme normalization */
2705:where(body[data-theme], html[data-theme] body) { font-family: var(--f-b, 'Inter', system-ui, sans-serif); font-weight: 350; line-height: 1.65; color: var(--text, #ebf1fb); }
2706:where(body[data-theme], html[data-theme] body) h1 { font-family: var(--f-h, 'Saira Semi Condensed', sans-serif); font-weight: 200; font-size: clamp(34px, 4vw, 52px) !important; line-height: 1.05; letter-spacing: -0.01em; color: var(--text, #ebf1fb); }
2707:where(body[data-theme], html[data-theme] body) h2 { font-family: var(--f-h, 'Saira Semi Condensed', sans-serif); font-weight: 300; font-size: clamp(28px, 3vw, 38px) !important; line-height: 1.18; color: var(--text, #ebf1fb); }
2708:where(body[data-theme], html[data-theme] body) h3 { font-family: var(--f-h, 'Saira Semi Condensed', sans-serif); font-weight: 300; line-height: 1.25; color: var(--accent-bright, #7bc6ff); }
2709:where(body[data-theme], html[data-theme] body) h4 { font-family: var(--f-h, 'Saira Semi Condensed', sans-serif); font-weight: 400; color: var(--text, #ebf1fb); }
2710:where(body[data-theme], html[data-theme] body) section p { font-size: 16px; line-height: 1.65; }
2711:where(body[data-theme], html[data-theme] body) section li { font-size: 15px; line-height: 1.6; }
2712:where(body[data-theme], html[data-theme] body) strong { color: var(--text, #ebf1fb); font-weight: 500; }
2713:where(body[data-theme], html[data-theme] body) section :where(.eyebrow, [class*="eyebrow"], .stat-lbl, .kv .lbl) { color: var(--accent-cyan, #009be5); }
2714:where(body[data-theme], html[data-theme] body) section :where(.stat-num, .num, .kv .num) { color: var(--aws, #FF9900); }
2715:where(body[data-theme], html[data-theme] body) section a:not([class]):hover { color: var(--accent-bright, #7bc6ff); }
2716/* /AKWriter typography + theme normalization */
2717
2718
2719/* AKWriter unified site nav (extends canonical nav from components.css) */
2720nav[role="navigation"][aria-label="Main navigation"]{position:fixed !important;top:14px !important;left:50% !important;transform:translateX(-50%) !important;width:min(1100px, calc(100vw - 32px)) !important;z-index:1000 !important;display:grid !important;grid-template-columns:auto 1fr auto !important;gap:18px !important;padding:10px 16px !important;border-radius:22px !important;border:1px solid rgba(255,255,255,0.11) !important;background:linear-gradient(180deg,rgba(11,17,30,0.80),rgba(6,9,16,0.70)) !important;backdrop-filter:blur(26px) saturate(1.30) !important;-webkit-backdrop-filter:blur(26px) saturate(1.30) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(255,255,255,0.025), 0 18px 44px rgba(0,0,0,0.32), 0 0 38px rgba(45,98,25
27205,0.06) !important;}
2721nav[role="navigation"][aria-label="Main navigation"] .nav-brand{display:flex !important;align-items:center !important;gap:4px !important;text-decoration:none !important;}
2722nav[role="navigation"][aria-label="Main navigation"] .nav-links{display:flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;}
2723.nav-brand{display:flex;align-items:center;gap:4px;text-decoration:none;color:var(--text,#ebf1fb);}
2724.nav-brand-mark{display:block;height:17px;width:auto;flex-shrink:0;}
2725.nav-brand-name{display:inline-flex;align-items:center;height:17px;font-family:var(--f-h,'Saira Semi Condensed',sans-serif);font-weight:300;font-size:15px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text,#ebf1fb);line-height:17px;}
2726.nav-mobile-toggle{display:none;background:none;border:0;color:var(--text,#ebf1fb);font-size:22px;cursor:pointer;padding:4px 8px;line-height:1;}
2727.nav-link{font-family:var(--f-m,monospace);font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:0.12em;padding:7px 10px;}
2728button.nav-link{background:none;border:0;cursor:pointer;font-family:var(--f-m,monospace);font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:0.12em;padding:7px 10px;}
2729.nav-caret{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;margin-left:6px;opacity:0.5;transition:transform 0.22s var(--ease-default,ease),opacity 0.22s var(--ease-default,ease);}
2730.nav-dd:hover .nav-caret,.nav-dd[data-open="true"] .nav-caret{transform:rotate(180deg);opacity:0.9;}
2731.nav-dd{position:relative;display:inline-flex;align-items:center;}
2732.nav-dd:hover > .nav-link,.nav-dd:focus-within > .nav-link{color:var(--text,#ebf1fb);}
2733.nav-dd.is-active > .nav-link{color:var(--text,#ebf1fb);}
2734.nav-dd.is-active > .nav-link::after{transform:scaleX(1) !important;}
2735a.nav-link.is-active{color:var(--text,#ebf1fb);}
2736a.nav-link.is-active::after{transform:scaleX(1) !important;}
2737.nav-dd-panel{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px) scale(0.985);margin-top:12px;background:linear-gradient(145deg,rgba(10,16,28,0.995),rgba(4,7,14,0.992));border:1px solid rgba(255,255,255,0.14);border-radius:22px;padding:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(255,255,255,0.03),0 30px 74px rgba(0,0,0,0.72),0 0 46px rgba(0,155,229,0.08);z-index:1001;backdrop-filter:blur(34px) saturate(1.12);-webkit-backdrop-filter:blur(34px) saturate(1.12);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.18s var(--ease-default,ease),visibility 0.18s var(--ease-default,ease),transform 0.22s var(--ease-default,ease);}
2738.nav-dd-panel::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px;}
2739.nav-dd-panel::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,15,0.62),rgba(5,8,15,0.42)),radial-gradient(circle at 18% 0%,rgba(123,198,255,0.08),transparent 34%),radial-gradient(circle at 100% 30%,rgba(230,0,126,0.035),transparent 28%);}
2740.nav-dd-panel > *{position:relative;z-index:1;}
2741.nav-dd:hover .nav-dd-panel,.nav-dd:focus-within .nav-dd-panel,.nav-dd[data-open="true"] .nav-dd-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1);}
2742.nav-dd-panel-narrow{min-width:260px;}
2743.nav-dd-panel-narrow ul{list-style:none;margin:0;padding:0;}
2744.nav-dd-panel-narrow li{margin:0;}
2745.nav-dd-panel-menu{gap:8px;}
2746.nav-dd-panel-wide{width:min(1060px,calc(100vw - 48px));}
2747.nav-dd-panel-wide{display:flex;flex-direction:column;}
2748.nav-dd-panel-services{min-width:760px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;padding:16px;}
2749.nav-dd-panel-industries{min-width:760px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;padding:16px;}
2750.nav-menu-row{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:14px;padding:11px 12px;border-radius:15px;text-decoration:none;color:var(--text,#ebf1fb);text-transform:none;letter-spacing:normal;transition:background 0.16s var(--ease-default,ease),transform 0.16s var(--ease-default,ease);}
2751.nav-menu-row:hover{background:rgba(123,198,255,0.065);transform:translateX(2px);}
2752.nav-menu-row.is-current{background:rgba(45,98,255,0.11);}
2753.nav-links .nav-menu-row{font-family:var(--f-b,sans-serif);font-size:inherit;font-weight:400;text-transform:none;letter-spacing:0;color:var(--text,#ebf1fb);padding:11px 12px;border-radius:15px;}
2754.nav-industry-row{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:15px;text-decoration:none;color:var(--text,#ebf1fb);text-transform:none;letter-spacing:0;transition:background 0.16s var(--ease-default,ease),transform 0.16s var(--ease-default,ease);}
2755.nav-industry-row:hover{background:rgba(123,198,255,0.065);transform:translateX(2px);}
2756.nav-links .nav-industry-row{font-family:var(--f-b,sans-serif);font-size:inherit;font-weight:400;text-transform:none;letter-spacing:0;color:var(--text,#ebf1fb);padding:11px 12px;border-radius:15px;}
2757.nav-industry-thumb{width:38px;height:38px;display:block;flex-shrink:0;border-radius:10px;overflow:hidden;background:rgba(255,255,255,0.025);border:1px solid rgba(123,198,255,0.12);}
2758.nav-industry-thumb img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(1.04) contrast(1.03);}
2759.nav-industry-icon img{object-fit:cover;border-radius:inherit;filter:saturate(1.04) contrast(1.03);}
2760.nav-industry-title{font-family:var(--f-b,sans-serif);font-size:13px;font-weight:400;line-height:1.28;color:rgba(235,241,251,0.84);}
2761.nav-solutions-layout{display:block;padding:8px;}
2762.nav-solution-feature{display:flex;flex-direction:column;gap:18px;padding:8px 14px;}
2763.nav-solution-feature-head{display:flex;gap:14px;color:inherit;text-decoration:none;text-transform:none;letter-spacing:normal;}
2764.nav-solution-col{min-width:0;display:block;padding:12px;border-radius:15px;background:rgba(255,255,255,0.012);transition:background 0.16s var(--ease-default,ease),transform 0.16s var(--ease-default,ease);}
2765.nav-solution-col:hover{background:rgba(123,198,255,0.055);}
2766.nav-card-head{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:14px;min-height:44px;text-decoration:none;color:inherit;text-transform:none;letter-spacing:normal;}
2767.nav-card-links{width:100%;display:grid;grid-template-columns:1fr;gap:8px;padding-top:13px;margin-top:13px;border-top:1px solid rgba(255,255,255,0.08);}
2768.nav-link-group{min-width:0;padding-left:0;}
2769.nav-dd-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:10px;overflow:hidden;background:rgba(255,255,255,0.035);align-self:center;}
2770.nav-dd-icon img{display:block;width:42px;height:42px;object-fit:cover;filter:saturate(1.08) contrast(1.04);}
2771.nav-dd-text{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;align-self:center;}
2772.nav-dd-title{display:block;font-family:var(--f-h,'Saira Semi Condensed',sans-serif);font-weight:300;font-size:17px;color:rgba(235,241,251,0.94);line-height:1.05;text-transform:none;letter-spacing:0.01em;}
2773.nav-dd-desc{display:block;font-family:var(--f-b,sans-serif);font-weight:350;font-size:12px;color:rgba(235,241,251,0.58);line-height:1.32;text-transform:none;letter-spacing:0;margin-top:3px;}
2774.nav-cta{font-family:var(--f-m,monospace) !important;font-size:11px !important;font-weight:400 !important;letter-spacing:0.12em !important;padding:8px 16px !important;border-radius:15px !important;text-decoration:none !important;}
2775.nav-dd-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
2776.nav-dd-col ul{list-style:none;margin:0;padding:0;}
2777.nav-dd-sub{margin-top:12px;}
2778.nav-dd-sub:first-of-type{margin-top:0;}
2779.nav-dd-sub-label{padding:0 0 7px;font-family:var(--f-m,monospace);font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:0.18em;color:rgba(235,241,251,0.46);}
2780.nav-dd-link{display:block;padding:6px 0;color:var(--text-s,rgba(235,241,251,0.78));font-family:var(--f-m,monospace);font-size:12px;font-weight:400;text-transform:none;letter-spacing:0.02em;text-decoration:none;border-radius:9px;transition:color 0.15s var(--ease-default,ease),transform 0.15s var(--ease-default,ease);}
2781.nav-links .nav-dd-link{font-family:var(--f-m,monospace);font-size:12px;font-weight:400;text-transform:none;letter-spacing:0.02em;color:var(--text-s,rgba(235,241,251,0.78));padding:6px 0;border-radius:9px;}
2782.nav-dd-link::after{display:none !important;}
2783.nav-dd-link:hover{color:var(--text,#ebf1fb);transform:translateX(2px);}
2784.nav-dd-link.is-current{color:var(--accent-bright,#7bc6ff);}
2785.nav-menu-section-label{font-family:var(--f-m,monospace);font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:0.18em;color:rgba(235,241,251,0.46);padding:0 0 3px;}
2786.nav-menu-section-label--solutions{color:var(--accent-bright,#7bc6ff);}
2787.nav-menu-section-label--workshop{color:var(--aws-orange,#FF9900);}
2788.nav-dd-link.has-desc{padding:7px 0;}
2789.nav-dd-link-label{display:block;line-height:1.25;}
2790.nav-dd-link-desc{display:block;font-family:var(--f-b,sans-serif);font-size:11.5px;font-weight:350;text-transform:none;letter-spacing:0;line-height:1.32;color:rgba(235,241,251,0.46);margin-top:3px;}
2791.nav-dd-link:hover .nav-dd-link-desc{color:rgba(235,241,251,0.62);}
2792
2793@media(max-width:880px){
2794  nav[role="navigation"][aria-label="Main navigation"]{left:16px !important;right:auto !important;transform:none !important;width:calc(100dvw - 32px) !important;grid-template-columns:auto 1fr auto !important;gap:8px !important;}
2795  .nav-mobile-toggle{display:block;justify-self:end;grid-column:3;}
2796  nav[role="navigation"][aria-label="Main navigation"] .nav-links{display:none !important;grid-column:1/-1;flex-direction:column;align-items:stretch;gap:4px;padding-top:8px;border-top:1px solid var(--border,rgba(255,255,255,0.07));}
2797  nav[role="navigation"][aria-label="Main navigation"][data-open="true"] .nav-links{display:flex !important;}
2798  .nav-cta{display:none;}
2799  nav[data-open="true"] .nav-cta{display:inline-flex;justify-content:center;grid-column:1/-1;margin-top:8px;}
2800  .nav-dd{display:flex;flex-direction:column;align-items:stretch;width:100%;min-width:0;}
2801  .nav-dd > .nav-link{width:100%;text-align:left;}
2802  .nav-dd-panel{position:static !important;left:auto !important;right:auto !important;top:auto !important;display:none;opacity:1;visibility:visible;pointer-events:auto;transform:none !important;width:100% !important;min-width:0 !important;max-width:100% !important;background:transparent;border:0;box-shadow:none;margin:0;padding:0 0 8px 12px;backdrop-filter:none;-webkit-backdrop-filter:none;}
2803  .nav-dd[data-open="true"] .nav-dd-panel{display:block;}
2804  .nav-dd[data-open="true"] .nav-dd-panel-services{display:grid;}
2805  .nav-dd[data-open="true"] .nav-dd-panel-wide{display:flex;}
2806  .nav-dd[data-open="true"] .nav-dd-panel-industries{display:grid;}
2807  .nav-dd-panel::after{display:none;}
2808  .nav-dd-panel-services{min-width:auto;grid-template-columns:1fr;}
2809  .nav-dd-panel-industries{min-width:auto;width:100%;grid-template-columns:1fr;padding:0 0 8px 12px;}
2810  .nav-dd-panel-wide{width:100%;}
2811  .nav-solutions-layout{display:block;padding:0;}
2812  .nav-dd-cols{grid-template-columns:1fr;gap:8px;}
2813  .nav-solution-feature,.nav-solution-col{display:block;padding:10px;background:rgba(255,255,255,0.025);}
2814  .nav-card-links{grid-template-columns:1fr;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,0.08);}
2815  .nav-menu-row{padding:10px;}
2816}
2817/* /AKWriter unified site nav */
2818
2819
2820/* AKWriter unified site footer */
2821footer.site-footer{margin-top:120px;padding:80px 0 32px;background:linear-gradient(180deg,transparent 0%,rgba(8,12,20,0.6) 24%,rgba(8,12,20,0.92) 100%);border-top:1px solid var(--border,rgba(255,255,255,0.07));position:relative;z-index:1;}
2822footer.site-footer .wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
2823footer.site-footer .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;gap:48px;}
2824footer.site-footer .footer-brand-col{display:flex;flex-direction:column;gap:16px;}
2825footer.site-footer .footer-brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--text,#ebf1fb);}
2826footer.site-footer .footer-brand-mark{display:block;height:24px;width:auto;flex-shrink:0;}
2827footer.site-footer .footer-brand-name{font-family:var(--f-h, 'Saira Semi Condensed'),sans-serif;font-weight:300;font-size:18px;letter-spacing:0.18em;text-transform:uppercase;color:var(--text,#ebf1fb);line-height:1;}
2828footer.site-footer .footer-tagline{font-family:var(--f-b,sans-serif);font-weight:350;font-size:13px;line-height:1.6;color:var(--text-s,rgba(235,241,251,0.72));max-width:340px;margin:0;}
2829footer.site-footer .footer-col{display:flex;flex-direction:column;gap:14px;}
2830footer.site-footer .footer-col-heading{font-family:var(--f-m,monospace);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:0.16em;color:var(--accent-cyan,#009be5);}
2831footer.site-footer .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
2832footer.site-footer .footer-col a{color:var(--text-s,rgba(235,241,251,0.72));text-decoration:none;font-family:var(--f-b,sans-serif);font-size:13.5px;line-height:1.5;transition:color 0.15s var(--ease-default,ease);}
2833footer.site-footer .footer-col a:hover{color:var(--accent-bright,#7bc6ff);}
2834footer.site-footer .footer-office{display:flex;flex-direction:column;gap:2px;padding:0;color:var(--text-s,rgba(235,241,251,0.72));}
2835footer.site-footer .footer-office-city{font-family:var(--f-h,sans-serif);font-weight:400;font-size:13px;color:var(--text,#ebf1fb);}
2836footer.site-footer .footer-office-addr{font-family:var(--f-b,sans-serif);font-size:12px;line-height:1.45;color:var(--text-s,rgba(235,241,251,0.62));}
2837footer.site-footer .footer-office-phone{font-family:var(--f-m,monospace);font-size:11px;letter-spacing:0.04em;color:var(--text-m,rgba(235,241,251,0.45));margin-top:2px;}
2838footer.site-footer .footer-bottom{margin-top:56px;padding-top:24px;border-top:1px solid var(--border,rgba(255,255,255,0.07));display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
2839footer.site-footer .footer-copyright{font-family:var(--f-b,sans-serif);font-size:12px;color:var(--text-m,rgba(235,241,251,0.45));}
2840footer.site-footer .footer-legal-nav{display:flex;flex-wrap:wrap;align-items:center;gap:18px;}
2841footer.site-footer .footer-bottom-link{font-family:var(--f-m,monospace);font-size:12px;color:var(--text-s,rgba(235,241,251,0.62));text-decoration:none;letter-spacing:0.04em;transition:color 0.15s var(--ease-default,ease);}
2842footer.site-footer .footer-bottom-link:hover{color:var(--accent-bright,#7bc6ff);}
2843@media(max-width:1080px){footer.site-footer .footer-grid{grid-template-columns:1fr 1fr;gap:36px 32px;}}
2844@media(max-width:640px){footer.site-footer{padding:56px 0 28px;margin-top:80px;}footer.site-footer .footer-grid{grid-template-columns:1fr;gap:32px;}footer.site-footer .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px;}footer.site-footer .footer-legal-nav{gap:14px;}}
2845/* /AKWriter unified site footer */
2846
2847</style>
2848<!-- AKWriter:seo start -->
2849<meta name="description" content="AWS Premier Partner. 1,300+ engineers shipping production AI on AWS since 2012. Modernization, Gen AI, Agentic, Connect, Data Engineering and Pods.">
2850<link rel="canonical" href="https://www.armakuni.com/">
2851<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32.png">
2852<link rel="icon" type="image/png" sizes="256x256" href="/assets/favicon-256.png">
2853<link rel="apple-touch-icon" href="/assets/favicon-256.png">
2854<link rel="shortcut icon" href="/assets/favicon-32.png">
2855<meta property="og:type" content="website">
2856<meta property="og:title" content="Armakuni | The engineering partner for the AI era. AWS Premier.">
2857<meta property="og:description" content="AWS Premier Partner. 1,300+ engineers shipping production AI on AWS since 2012. Modernization, Gen AI, Agentic, Connect, Data Engineering and Pods.">
2858<meta property="og:url" content="https://www.armakuni.com/">
2859<meta property="og:image" content="https://www.armakuni.com/assets/og-image.png">
2860<meta property="og:image:alt" content="Armakuni | AWS Premier Partner">
2861<meta property="og:site_name" content="Armakuni">
2862<meta name="twitter:card" content="summary_large_image">
2863<meta name="twitter:title" content="Armakuni | The engineering partner for the AI era. AWS Premier.">
2864<meta name="twitter:description" content="AWS Premier Partner. 1,300+ engineers shipping production AI on AWS since 2012. Modernization, Gen AI, Agentic, Connect, Data Engineering and Pods.">
2865<meta name="twitter:image" content="https://www.armakuni.com/assets/og-image.png">
2866<script type="application/ld+json">
2867{
2868  "@context": "https://schema.org",
2869  "@type": "Organization",
2870  "name": "Armakuni",
2871  "url": "https://www.armakuni.com",
2872  "logo": "https://www.armakuni.com/assets/ak-logo.png",
2873  "description": "AWS Premier Partner. Engineering partner for the AI era. 1,300+ engineers shipping on AWS since 2012.",
2874  "sameAs": [
2875    "https://www.linkedin.com/company/armakuni",
2876    "https://github.com/armakuni"
2877  ],
2878  "award": [
2879    "AWS Premier Tier Services Partner",
2880    "AWS Migration and Modernization Competency",
2881    "AWS DevOps Consulting Competency",
2882    "AWS Data and Analytics Consulting Competency",
2883    "AWS AI Services Competency"
2884  ]
2885}
2886</script>
vendor: 1 bytes, line 2886
2886
2887<script type="application/ld+json">
2888{
2889  "@context": "https://schema.org",
2890  "@type": "WebPage",
2891  "name": "Armakuni | The engineering partner for the AI era. AWS Premier.",
2892  "description": "AWS Premier Partner. 1,300+ engineers shipping production AI on AWS since 2012. Modernization, Gen AI, Agentic, Connect, Data Engineering and Pods.",
2893  "url": "https://www.armakuni.com/",
2894  "inLanguage": "en",
2895  "isPartOf": {
2896    "@type": "WebSite",
2897    "name": "Armakuni",
2898    "url": "https://www.armakuni.com"
2899  },
2900  "publisher": {
2901    "@type": "Organization",
2902    "name": "Armakuni"
2903  }
2904}
2905</script>
vendor: 1 bytes, line 2905
2905
2906<script type="application/ld+json">
2907{
2908  "@context": "https://schema.org",
2909  "@type": "BreadcrumbList",
2910  "itemListElement": [
2911    {
2912      "@type": "ListItem",
2913      "position": 1,
2914      "name": "Home",
2915      "item": "https://www.armakuni.com/"
2916    }
2917  ]
2918}
2919</script>
2919
2920<!-- AKWriter:seo end -->
2921<link rel="stylesheet" href="/assets/css/mobile-fixes.css" media="(max-width: 1024px)">
2922<!-- AKWriter:analytics head start -->
2923<script>
2924window.dataLayer = window.dataLayer || [];
2925dataLayer.push({
2926  'page_type': 'home',
2927  'content_group': 'homepage',
2928  'page_language': 'en'
2929});
2930</script>
vendor: 1 bytes, line 2930
2930
2931<script>
2932window.dataLayer=window.dataLayer||[];
2933function gtag(){dataLayer.push(arguments);}
2934gtag('consent','default',{
2935  ad_storage:'denied',
2936  ad_user_data:'denied',
2937  ad_personalization:'denied',
2938  analytics_storage:'denied',
2939  functionality_storage:'granted',
2940  security_storage:'granted',
2941  wait_for_update:500
2942});
2943gtag('set','ads_data_redaction',true);
2944gtag('set','url_passthrough',true);
2945try{
2946  var __akc=JSON.parse(localStorage.getItem('ak_consent_v1')||'null');
2947  if(__akc&&__akc.v==='v1'){
2948    gtag('consent','update',{
2949      analytics_storage:__akc.analytics?'granted':'denied',
2950      ad_storage:__akc.ads?'granted':'denied',
2951      ad_user_data:__akc.ads?'granted':'denied',
2952      ad_personalization:__akc.ads?'granted':'denied'
2953    });
2954  }
2955}catch(e){}
2956</script>
2956
2957<!-- Google Tag Manager -->
2958<script>
vendor: 327 bytes, lines 2958-2962
2958(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
2959new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
2960j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
2961'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
2962})(window,document,'script','dataLayer','
2962GTM-PKPHRLX5
vendor: 3 bytes, line 2962
2962');
2962</script>
2962
2963<!-- End Google Tag Manager -->
2964<script>
2965function __akClarityLoad(){
2966  if(window.__akClarityLoaded)return;
2967  window.__akClarityLoaded=true;
2968  (function(c,l,a,r,i,t,y){
2969    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
2970    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
2971    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
2972  })(window, document, "clarity", "script", "w1px8bq351");
2973}
2974try{
2975  var __akcc=JSON.parse(localStorage.getItem('ak_consent_v1')||'null');
2976  if(__akcc&&__akcc.v==='v1'&&__akcc.analytics)__akClarityLoad();
2977}catch(e){}
2978</script>
2978
2979<!-- AKWriter:analytics head end -->
2980</head>
2981<body>
2982<!-- AKWriter:analytics body start -->
2983<!-- Google Tag Manager (noscript) -->
vendor: 68 bytes, lines 2983-2984
2983
2984<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
2984GTM-PKPHRLX5
vendor: 83 bytes, lines 2984-2985
2984"
2985height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
2986<!-- End Google Tag Manager (noscript) -->
2987<!-- AKWriter:analytics body end -->
2988<a href="#main" class="skip-to-main">Skip to main content</a>
2989
2990<!-- BACKGROUND SYSTEM -->
2991<div class="bg-dot-grid"></div>
2992<div class="bg-continuity-lines"></div>
2993<div class="bg-line-center"></div>
2994<div class="fog-layer">
2995  <div class="fog-blob fog-blob-1"></div>
2996  <div class="fog-blob fog-blob-2"></div>
2997  <div class="fog-blob fog-blob-3"></div>
2998</div>
2999<div class="mouse-glow" id="mouseGlow"></div>
3000<div class="scroll-progress" id="scrollProgress"></div>
3001
3002<!-- Trust-strip marquee removed per taste direction 2026-04-23. Certifications
3003     surface in the credentials section + nav instead of a top scrolling band. -->
3004
3005<!-- NAV -->
3006<!-- AKWriter:nav start -->
3007<nav role="navigation" aria-label="Main navigation">
3008  <a class="nav-brand" href="/" aria-label="Armakuni home">
3009    <img class="nav-brand-mark" src="/assets/AK%20White%20Logo.webp" width="320" height="52" alt="Armakuni" decoding="async">
3010  </a>
3011  <div class="nav-links">
3012    <div class="nav-dd" data-nav-key="services">
3013        <button class="nav-link nav-dd-trigger" aria-haspopup="true" aria-expanded="false">Services<span class="nav-caret" aria-hidden="true"></span></button>
3014        <div class="nav-dd-panel nav-dd-panel-menu nav-dd-panel-services" role="menu">
3015            <a href="/offerings/modernization-with-ai" class="nav-menu-row">
3016              <span class="nav-dd-icon"><img src="/assets/nav-icons/service-modernization.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span>
3017              <div class="nav-dd-text">
3018                <div class="nav-dd-title">Modernization with AI</div>
3019                <div class="nav-dd-desc">Continuous modernization on AWS</div>
3020              </div>
3021            </a>
3022            <a href="/offerings/gen-ai-and-agentic-ai" class="nav-menu-row">
3023              <span class="nav-dd-icon"><img src="/assets/nav-icons/service-ai.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span>
3024              <div class="nav-dd-text">
3025                <div class="nav-dd-title">AI Transformation</div>
3026                <div class="nav-dd-desc">Production GenAI and agentic systems</div>
3027              </div>
3028            </a>
3029            <a href="/offerings/amazon-connect" class="nav-menu-row">
3030              <span class="nav-dd-icon"><img src="/assets/nav-icons/service-connect.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span>
3031              <div class="nav-dd-text">
3032                <div class="nav-dd-title">Connect Customer</div>
3033                <div class="nav-dd-desc">AI-augmented contact centres</div>
3034              </div>
3035            </a>
3036            <a href="/offerings/data-engineering" class="nav-menu-row">
3037              <span class="nav-dd-icon"><img src="/assets/nav-icons/service-data.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span>
3038              <div class="nav-dd-text">
3039                <div class="nav-dd-title">Data Engineering</div>
3040                <div class="nav-dd-desc">Pipelines and platforms on AWS</div>
3041              </div>
3042            </a>
3043            <a href="/offerings/managed-services" class="nav-menu-row">
3044              <span class="nav-dd-icon"><img src="/assets/nav-icons/service-managed.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span>
3045              <div class="nav-dd-text">
3046                <div class="nav-dd-title">Managed Services</div>
3047                <div class="nav-dd-desc">24×7 ownership of your platform</div>
3048              </div>
3049            </a>
3050            <a href="/offerings/app-dev-pods" class="nav-menu-row">
3051              <span class="nav-dd-icon"><img src="/assets/nav-icons/service-pods.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span>
3052              <div class="nav-dd-text">
3053                <div class="nav-dd-title">Application Development Pods</div>
3054                <div class="nav-dd-desc">Embedded engineering teams</div>
3055              </div>
3056            </a>
3057            <a href="/offerings/migration" class="nav-menu-row">
3058              <span class="nav-dd-icon"><img src="/assets/nav-icons/service-migration.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span>
3059              <div class="nav-dd-text">
3060                <div class="nav-dd-title">Migration</div>
3061                <div class="nav-dd-desc">AWS migration with AI tooling</div>
3062              </div>
3063            </a>
3064        </div>
3065      </div>
3066      <div class="nav-dd" data-nav-key="solutions">
3067        <button class="nav-link nav-dd-trigger" aria-haspopup="true" aria-expanded="false">Solutions<span class="nav-caret" aria-hidden="true"></span></button>
3068        <div class="nav-dd-panel nav-dd-panel-menu nav-dd-panel-wide" role="menu">
3069          <div class="nav-solutions-layout">
3070            <div class="nav-dd-cols">
3071          <div class="nav-solution-col">
3072            <a href="/offerings/modernization-with-ai" class="nav-card-head">
3073              <span class="nav-dd-icon"><img src="/assets/nav-icons/service-modernization.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span>
3074              <div class="nav-dd-text">
3075                <div class="nav-dd-title">Modernization</div>
3076              </div>
3077            </a>
3078            <div class="nav-card-links">
3079              <div class="nav-link-group">
3080                <div class="nav-menu-section-label nav-menu-section-label--solutions">Solutions</div>
3081                <a href="/offerings/modernization-with-ai/evolve" class="nav-dd-link has-desc"><span class="nav-dd-link-label">Evolve</span><span class="nav-dd-link-desc">AI-assisted codebase modernization</span></a>
3082                <a href="/offerings/modernization-with-ai/compass" class="nav-dd-link has-desc"><span class="nav-dd-link-label">Compass</span><span class="nav-dd-link-desc">Modernization assessment engine</span></a>
3083              </div><div class="nav-link-group">
3084                <div class="nav-menu-section-label nav-menu-section-label--workshop">Workshop</div>
3085                <a href="/workshops/ai-sdlc" class="nav-dd-link has-desc"><span class="nav-dd-link-label">AI DLC</span><span class="nav-dd-link-desc">AI maturity workshop</span></a>
3086                <a href="/offerings/modernization-with-ai/workshop-evolve" class="nav-dd-link has-desc"><span class="nav-dd-link-label">Evolve</span><span class="nav-dd-link-desc">AI-assisted codebase modernization</span></a>
3087                <a href="/offerings/modernization-with-ai/workshop-compass" class="nav-dd-link has-desc"><span class="nav-dd-link-label">Compass</span><span class="nav-dd-link-desc">Modernization assessment engine</span></a>
3088              </div>
3089            </div>
3090          </div>
3091          <div class="nav-solution-col">
3092            <a href="/offerings/gen-ai-and-agentic-ai" class="nav-card-head">
3093              <span class="nav-dd-icon"><img src="/assets/nav-icons/service-ai.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span>
3094              <div class="nav-dd-text">
3095                <div class="nav-dd-title">AI Transformation</div>
3096              </div>
3097            </a>
3098            <div class="nav-card-links">
3099              <div class="nav-link-group">
3100                <div class="nav-menu-section-label nav-menu-section-label--workshop">Workshop</div>
3101                <a href="/workshops/push" class="nav-dd-link"><span class="nav-dd-link-label">Push + Agentic</span></a>
3102                <a href="/workshops/ai-at-scale-governance" class="nav-dd-link"><span class="nav-dd-link-label">AI Strategy &amp; Governance</span></a>
3103                <a href="/workshops/ai-agents-ak-way" class="nav-dd-link"><span class="nav-dd-link-label">Building Production AI</span></a>
3104                <a href="/workshops/openai-bedrock-migration" class="nav-dd-link"><span class="nav-dd-link-label">OpenAI → Bedrock</span></a>
3105              </div>
3106            </div>
3107          </div>
3108          <div class="nav-solution-col">
3109            <a href="/offerings/amazon-connect" class="nav-card-head">
3110              <span class="nav-dd-icon"><img src="/assets/nav-icons/service-connect.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span>
3111              <div class="nav-dd-text">
3112                <div class="nav-dd-title">Connect Customer</div>
3113              </div>
3114            </a>
3115            <div class="nav-card-links">
3116              <div class="nav-link-group">
3117                <div class="nav-menu-section-label nav-menu-section-label--solutions">Solutions</div>
3118                <a href="/offerings/amazon-connect/compliant-connect-accelerator" class="nav-dd-link has-desc"><span class="nav-dd-link-label">Compliant Connect Accelerator</span><span class="nav-dd-link-desc">Compliant contact-centre deployment</span></a>
3119                <a href="/offerings/amazon-connect/sonic" class="nav-dd-link has-desc"><span class="nav-dd-link-label">Sonic</span><span class="nav-dd-link-desc">AI vocal coaching</span></a>
3120                <a href="/offerings/amazon-connect/flowshift" class="nav-dd-link has-desc"><span class="nav-dd-link-label">FlowShift</span><span class="nav-dd-link-desc">Connect migration accelerator</span></a>
3121              </div><div class="nav-link-group">
3122                <div class="nav-menu-section-label nav-menu-section-label--workshop">Workshop</div>
3123                <a href="/offerings/amazon-connect/workshop-intelligence" class="nav-dd-link has-desc"><span class="nav-dd-link-label">Intelligence</span><span class="nav-dd-link-desc">Agent assist workshop</span></a>
3124                <a href="/offerings/amazon-connect/workshop-migration" class="nav-dd-link has-desc"><span class="nav-dd-link-label">Migration</span><span class="nav-dd-link-desc">
3124Migration readiness assessment</span></a>
3125              </div>
3126            </div>
3127          </div>
3128          <div class="nav-solution-col">
3129            <a href="/offerings/data-engineering" class="nav-card-head">
3130              <span class="nav-dd-icon"><img src="/assets/nav-icons/service-data.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span>
3131              <div class="nav-dd-text">
3132                <div class="nav-dd-title">Data Engineering</div>
3133              </div>
3134            </a>
3135            <div class="nav-card-links">
3136              <div class="nav-link-group">
3137                <div class="nav-menu-section-label nav-menu-section-label--solutions">Solutions</div>
3138                <a href="/offerings/data-engineering/axiom" class="nav-dd-link has-desc"><span class="nav-dd-link-label">Axiom</span><span class="nav-dd-link-desc">Semantic data layer</span></a>
3139              </div><div class="nav-link-group">
3140                <div class="nav-menu-section-label nav-menu-section-label--workshop">Workshop</div>
3141                <a href="/offerings/data-engineering/workshop" class="nav-dd-link"><span class="nav-dd-link-label">Data Engineering</span></a>
3142              </div>
3143            </div>
3144          </div>
3145            </div>
3146          </div>
3147        </div>
3148      </div>
3149      <div class="nav-dd" data-nav-key="industries">
3150        <button class="nav-link nav-dd-trigger" aria-haspopup="true" aria-expanded="false">Industries<span class="nav-caret" aria-hidden="true"></span></button>
3151        <div class="nav-dd-panel nav-dd-panel-menu nav-dd-panel-industries" role="menu">
3152            <a href="/industries/financial-services" class="nav-menu-row nav-industry-row">
3153              <span class="nav-dd-icon nav-industry-icon"><img src="/assets/nav-industries/financial-services.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span>
3154              <span class="nav-dd-text">
3155                <span class="nav-dd-title">Financial Services</span>
3156                <span class="nav-dd-desc">Banking, insurance, payments</span>
3157              </span>
3158            </a>
3159            <a href="/industries/healthcare" class="nav-menu-row nav-industry-row">
3160              <span class="nav-dd-icon nav-industry-icon"><img src="/assets/nav-industries/healthcare.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span>
3161              <span class="nav-dd-text">
3162                <span class="nav-dd-title">Healthcare</span>
3163                <span class="nav-dd-desc">Clinical data and care operations</span>
3164              </span>
3165            </a>
3166            <a href="/industries/public-sector" class="nav-menu-row nav-industry-row">
3167              <span class="nav-dd-icon nav-industry-icon"><img src="/assets/nav-industries/public-sector.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span>
3168              <span class="nav-dd-text">
3169                <span class="nav-dd-title">Public Sector</span>
3170                <span class="nav-dd-desc">Public services and social impact</span>
3171              </span>
3172            </a>
3173            <a href="/industries/manufacturing" class="nav-menu-row nav-industry-row">
3174              <span class="nav-dd-icon nav-industry-icon"><img src="/assets/nav-industries/manufacturing.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span>
3175              <span class="nav-dd-text">
3176                <span class="nav-dd-title">Manufacturing</span>
3177                <span class="nav-dd-desc">Operations and supply chains</span>
3178              </span>
3179            </a>
3180            <a href="/industries/media-entertainment" class="nav-menu-row nav-industry-row">
3181              <span class="nav-dd-icon nav-industry-icon"><img src="/assets/nav-industries/media-entertainment.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span>
3182              <span class="nav-dd-text">
3183                <span class="nav-dd-title">Media &amp; Entertainment</span>
3184                <span class="nav-dd-desc">Live scale and content platforms</span>
3185              </span>
3186            </a>
3187            <a href="/industries/saas-isv" class="nav-menu-row nav-industry-row">
3188              <span class="nav-dd-icon nav-industry-icon"><img src="/assets/nav-industries/saas-isv.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span>
3189              <span class="nav-dd-text">
3190                <span class="nav-dd-title">SaaS &amp; ISV</span>
3191                <span class="nav-dd-desc">Multi-tenant product platforms</span>
3192              </span>
3193            </a>
3194            <a href="/industries/retail-ecommerce" class="nav-menu-row nav-industry-row">
3195              <span class="nav-dd-icon nav-industry-icon"><img src="/assets/nav-industries/retail-ecommerce.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span>
3196              <span class="nav-dd-text">
3197                <span class="nav-dd-title">Retail &amp; E-commerce</span>
3198                <span class="nav-dd-desc">Commerce and fulfilment systems</span>
3199              </span>
3200            </a>
3201            <a href="/industries/private-equity-vc" class="nav-menu-row nav-industry-row">
3202              <span class="nav-dd-icon nav-industry-icon"><img src="/assets/nav-industries/private-equity-vc.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span>
3203              <span class="nav-dd-text">
3204                <span class="nav-dd-title">Private Equity &amp; VC</span>
3205                <span class="nav-dd-desc">Portfolio engineering, diligence, value creation</span>
3206              </span>
3207            </a>
3208            <a href="/industries/telecom" class="nav-menu-row nav-industry-row">
3209              <span class="nav-dd-icon nav-industry-icon"><img src="/assets/nav-industries/telecom.webp" width="96" height="96" alt="" decoding="async" loading="lazy"></span>
3210              <span class="nav-dd-text">
3211                <span class="nav-dd-title">Telecom</span>
3212                <span class="nav-dd-desc">Voice, network, and contact centres</span>
3213              </span>
3214            </a>
3215        </div>
3216      </div>
3217      <a href="/case-studies" class="nav-link">Case Studies</a>
3218      <a href="/insights" class="nav-link">Insights</a>
3219      <a href="/about" class="nav-link">About</a>
3220      <a href="https://armakuni.keka.com/careers/" class="nav-link" target="_blank" rel="noopener noreferrer">Careers</a>
3221  </div>
3222  <a href="/contact" class="nav-cta">Contact us</a>
3223  <button class="nav-mobile-toggle" aria-label="Open menu" aria-expanded="false">☰</button>
3224</nav>
3225<!-- AKWriter:nav end -->
3226
3227<!-- SECTION 1: HERO - Fluid Ink (dark), category + tagline + concrete what-we-do -->
3228<section class="hero" id="hero" data-design-system-component="hero-a" data-hero-background="P-02" data-philosopher="tompkins" data-copy-section="hero">
3229  <div class="hero-bg-fallback"></div>
3230  <canvas class="hero-bg-canvas" id="heroFluidInk" aria-hidden="true"></canvas>
3231  <div class="hero-bg-tint"></div>
3232  <div class="hero-fade"></div>
3233  <div class="hero-grid"></div>
3234  <div class="wrap">
3235    <div class="hero-content">
3236      <div class="eyebrow reveal" data-copy-id="hero.eyebrow">The engineering partner for the AI era</div>
3237      <h1 class="reveal" data-char-glow="" data-copy-id="hero.h1">Turning tomorrow's technology into today's unfair advantage.</h1>
3238      <p class="hero-what reveal" data-delay="1" data-copy-id="hero.body_0">
3239        We plug AI into the systems your business already runs on AWS, with the engineering discipline that survives production. Your competitors stay one quarter behind.
3240      </p>
3241      <p class="hero-sub reveal" data-delay="2" data-copy-id="hero.body_1">
3242        <strong>The AK Way</strong> is how we build it: cloud platforms, AI agents, and data products that still work after we leave.
3243      </p>
3244      <div class="hero-ctas reveal" data-delay="3">
3245        <a href="#cta" class="btn btn-glow-pulse" data-copy-id="hero.cta_0">Start Building <span class="arr">→</span></a>
3246        <a href="#offerings" class="btn btn-ghost" data-copy-id="hero.cta_1">See what we build <span class="arr">→</span></a>
3247        <a href="/contact" class="hero-trust-note" data-copy-id="hero.body_2">Book a 30-min architecture review <span class="arr">→</span></a>
3248      </div>
3249    </div>
3250  </div>
3251</section>
3252
3253<!-- SECTION 2: LOGO WALL (dedicated trust section) -->
3254<section data-philosopher="kowalski" class="logo-wall" data-design-system-component="logo-wall" aria-label="Customer logos" data-copy-section="s1">
3255  <div class="wrap">
3256    <div class="logo-wall-lbl" data-copy-id="s1.body_0"><strong>Trusted by</strong> enterprises, banks, healthcare systems, and the world's biggest brands</div>
3257  </div>
3258  <div class="logo-marquee" aria-label="Customers we've worked with">
3259    <div class="logo-marquee-track" id="logoTrack">
3260      <img class="logo-trust" src="/assets/customer-logos/hyundai-glovis-white.webp" width="237" height="64" alt="Hyundai Glovis logo" loading="lazy" decoding="async">
3261      <img class="logo-trust" src="/assets/customer-logos/pixis-w
3261hite.webp" width="211" height="64" alt="Pixis logo" loading="lazy" decoding="async">
3262      <img class="logo-trust" src="/assets/customer-logos/goruck-white.webp" width="300" height="28" alt="GORUCK logo" loading="lazy" decoding="async">
3263      <img class="logo-trust" src="/assets/customer-logos/sweet-analytics-white.webp" width="218" height="64" alt="Sweet Analytics logo" loading="lazy" decoding="async">
3264      <img class="logo-trust" src="/assets/customer-logos/red-bull-white.webp" width="136" height="64" alt="Red Bull logo" loading="lazy" decoding="async">
3265      <img class="logo-trust" src="/assets/customer-logos/gavel-white.webp" width="113" height="64" alt="Gavel logo" loading="lazy" decoding="async">
3266      <img class="logo-trust" src="/assets/customer-logos/carsaver-white.webp" width="258" height="64" alt="CarSaver logo" loading="lazy" decoding="async">
3267      <img class="logo-trust" src="/assets/customer-logos/newton-white.webp" width="88" height="64" alt="Newton logo" loading="lazy" decoding="async">
3268      <img class="logo-trust" src="/assets/customer-logos/reven-ai-white.webp" width="300" height="45" alt="Reven AI logo" loading="lazy" decoding="async">
3269      <img class="logo-trust" src="/assets/customer-logos/solvpath-white.webp" width="300" height="57" alt="SolvPath logo" loading="lazy" decoding="async">
3270      <img class="logo-trust" src="/assets/customer-logos/virgil-white.webp" width="170" height="64" alt="Virgil logo" loading="lazy" decoding="async">
3271      <img class="logo-trust" src="/assets/customer-logos/rynoss-white.webp" width="161" height="64" alt="Ryno Strategic Solutions logo" loading="lazy" decoding="async">
3272      <img class="logo-trust" src="/assets/customer-logos/hyundai-glovis-white.webp" width="237" height="64" alt="Hyundai Glovis logo" loading="lazy" decoding="async">
3273      <img class="logo-trust" src="/assets/customer-logos/pixis-white.webp" width="211" height="64" alt="Pixis logo" loading="lazy" decoding="async">
3274      <img class="logo-trust" src="/assets/customer-logos/goruck-white.webp" width="300" height="28" alt="GORUCK logo" loading="lazy" decoding="async">
3275      <img class="logo-trust" src="/assets/customer-logos/sweet-analytics-white.webp" width="218" height="64" alt="Sweet Analytics logo" loading="lazy" decoding="async">
3276      <img class="logo-trust" src="/assets/customer-logos/red-bull-white.webp" width="136" height="64" alt="Red Bull logo" loading="lazy" decoding="async">
3277      <img class="logo-trust" src="/assets/customer-logos/gavel-white.webp" width="113" height="64" alt="Gavel logo" loading="lazy" decoding="async">
3278      <img class="logo-trust" src="/assets/customer-logos/carsaver-white.webp" width="258" height="64" alt="CarSaver logo" loading="lazy" decoding="async">
3279      <img class="logo-trust" src="/assets/customer-logos/newton-white.webp" width="88" height="64" alt="Newton logo" loading="lazy" decoding="async">
3280      <img class="logo-trust" src="/assets/customer-logos/reven-ai-white.webp" width="300" height="45" alt="Reven AI logo" loading="lazy" decoding="async">
3281      <img class="logo-trust" src="/assets/customer-logos/solvpath-white.webp" width="300" height="57" alt="SolvPath logo" loading="lazy" decoding="async">
3282      <img class="logo-trust" src="/assets/customer-logos/virgil-white.webp" width="170" height="64" alt="Virgil logo" loading="lazy" decoding="async">
3283      <img class="logo-trust" src="/assets/customer-logos/rynoss-white.webp" width="161" height="64" alt="Ryno Strategic Solutions logo" loading="lazy" decoding="async">
3284    </div>
3285  </div>
3286</section>
3287
3288<!-- SECTION 3: CASE STUDY CAROUSEL - canonical tm-sec from design system
3289     Each slide proves a different offering, so the section carries the AK Way
3290     thread (qualify → foundation → build → hand over) without a separate explainer. -->
3291<section data-philosopher="tompkins" class="tm-sec" id="case-studies" data-design-system-component="testimonial-carousel" data-copy-section="s2">
3292  <div class="tm-glow"></div>
3293  <div class="wrap">
3294    <div class="tm-layout">
3295      <div class="tm-content reveal">
3296        <span class="eyebrow" data-copy-id="s2.eyebrow">The AK Way in production</span>
3297        <h2 class="reveal" data-char-glow="" data-copy-id="s2.h2">Engineering discipline applied across every offering.</h2>
3298        <p class="tm-tagline reveal" data-delay="1">
3298Here's what it built.</p>
3299        <div class="tm-nav">
3300          <button class="tm-arrow" id="tmPrev" aria-label="Previous case study"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5M12 19l-7-7 7-7"/></svg></button>
3301          <button class="tm-arrow" id="tmNext" aria-label="Next case study"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg></button>
3302        </div>
3303      </div>
3304      <div class="tm-viewport reveal" data-delay="1">
3305        <div class="tm-track" id="tmTrack">
3306
3307      <!-- 1. Comic Relief. Modernization -->
3308      <div class="tm-slide">
3309        <div class="tm-slide-header">
3310          <div class="tm-logo-mark tm-logo-mark--colored"><img src="/assets/armakuni-com/homepage/comic-relief.webp" width="65" height="65" alt="Comic Relief" decoding="async" loading="lazy"></div>
3311          <div class="tm-tag">Modernization</div>
3312        </div>
3313        <div class="tm-system">Live BBC donation platform.</div>
3314        <hr class="tm-divider">
3315        <blockquote data-copy-id="s2.body_0">Armakuni was a game-changer for Comic Relief; they built us a new donation platform, on time and on budget while also helping us break the GBP 100 million mark for the first time.</blockquote>
3316        <div class="tm-footer"><div><div class="tm-name">Derek Gannon</div><div class="tm-role">COO, Comic Relief</div></div></div>
3317      </div>
3318
3319      <!-- 2. HSBC. Cloud Native Delivery -->
3320      <div class="tm-slide">
3321        <div class="tm-slide-header">
3322          <div class="tm-logo-mark tm-logo-mark--colored"><img src="/assets/customer-logos/hsbc.svg" width="316" height="85" alt="HSBC" decoding="async" loading="lazy"></div>
3323          <div class="tm-tag">Cloud Native Delivery</div>
3324        </div>
3325        <div class="tm-system">Global banking, delivered cloud-native at scale.</div>
3326        <hr class="tm-divider">
3327        <blockquote data-copy-id="s2.body_1">HSBC adopted cloud-native delivery through the AK Way. Automated pipelines, continuous testing, and engineering discipline applied at global-bank scale.</blockquote>
3328        <div class="tm-footer"><div><div class="tm-role">Financial Services · Global Banking</div></div></div>
3329      </div>
3330
3331      <!-- 3. JPMorgan Chase. Enterprise Banking -->
3332      <div class="tm-slide">
3333        <div class="tm-slide-header">
3334          <div class="tm-logo-mark"><img src="/assets/customer-logos/jp-morgan-chase.svg" width="1000" height="142" alt="JPMorgan Chase" decoding="async" loading="lazy"></div>
3335          <div class="tm-tag">Enterprise Banking</div>
3336        </div>
3337        <div class="tm-system">Global investment and commercial banking on AWS.</div>
3338        <hr class="tm-divider">
3339        <blockquote data-copy-id="s2.body_2">JPMorgan Chase is one of five of the world's largest financial institutions Armakuni has delivered AWS engineering work for. Proof the AK Way holds at systemically important scale.</blockquote>
3340        <div class="tm-footer"><div><div class="tm-role">Financial Services · Global Banking</div></div></div>
3341      </div>
3342
3343      <!-- 4. Red Bull. Media & Entertainment -->
3344      <div class="tm-slide">
3345        <div class="tm-slide-header">
3346          <div class="tm-logo-mark"><img src="/assets/customer-logos/red-bull-white.webp" width="136" height="64" alt="Red Bull" decoding="async" loading="lazy"></div>
3347          <div class="tm-tag">Media &amp; Entertainment</div>
3348        </div>
3349        <div class="tm-system">Global sports and media brand, engineered for scale.</div>
3350        <hr class="tm-divider">
3351        <blockquote data-copy-id="s2.body_3">Red Bull is part of Armakuni's media and entertainment portfolio. Proof the AK Way extends beyond financial services into global consumer brands.</blockquote>
3352        <div class="tm-footer"><div><div class="tm-role">Media &amp; Entertainment · Global Brand</div></div></div>
3353      </div>
3354
3355      <!-- 5. Ryno Strategic Solutions. AI Transformation -->
3356      <div class="tm-slide">
3357        <div class="tm-slide-header">
3358          <div class="tm-logo-mark tm-logo-mark--colored"><img src="/assets/customer-logos/rynoss.webp" width="161" height="64" alt="Ryno Strategic Solutions" decoding="async" loading="lazy"></div>
3359          <div class="tm-tag">AI Transformation</div>
3360        </div>
3361        <div class="tm-system">
3361Home services marketing intelligence, built on AWS.</div>
3362        <hr class="tm-divider">
3363        <blockquote data-copy-id="s2.body_4">Ryno's internal team had already tried and failed to reach production quality on AI call analysis. Armakuni's PoC was production-ready in under two weeks of a four-week window.</blockquote>
3364        <div class="tm-footer"><div><div class="tm-role">AI Transformation · Home Services Marketing Intelligence</div></div></div>
3365      </div>
3366
3367      <!-- 6. Santander. Engineering Transformation -->
3368      <div class="tm-slide">
3369        <div class="tm-slide-header">
3370          <div class="tm-logo-mark tm-logo-mark--colored"><img src="/assets/armakuni-com/homepage/santander.webp" width="278" height="69" alt="Santander" decoding="async" loading="lazy"></div>
3371          <div class="tm-tag">Engineering Transformation</div>
3372        </div>
3373        <div class="tm-system">Global retail and commercial banking, engineered the AK Way.</div>
3374        <hr class="tm-divider">
3375        <blockquote data-copy-id="s2.body_5">Santander transformed its engineering teams through "The Engineering Way." Everything as code, automated testing, and a high-velocity cloud-native delivery force built on the AK Way.</blockquote>
3376        <div class="tm-footer"><div><div class="tm-role">Financial Services · Global Banking</div></div></div>
3377      </div>
3378
3379      <!-- 7. Hyundai Glovis. Pods -->
3380      <div class="tm-slide">
3381        <div class="tm-slide-header">
3382          <div class="tm-logo-mark tm-logo-mark--colored"><img src="/assets/customer-logos/hyundai-glovis.webp" width="237" height="64" alt="Hyundai Glovis" decoding="async" loading="lazy"></div>
3383          <div class="tm-tag">Pods</div>
3384        </div>
3385        <div class="tm-system">Real-time vehicle-tracking platform for finished-vehicle logistics.</div>
3386        <hr class="tm-divider">
3387        <blockquote data-copy-id="s2.body_6">45% increase in on-time vehicle deliveries, replacing a reactive model where delays were only discovered after they'd already cost the customer.</blockquote>
3388        <div class="tm-footer"><div><div class="tm-role">Pods · Automotive Logistics</div></div></div>
3389      </div>
3390
3391        </div>
3392      </div>
3393    </div>
3394  </div>
3395</section>
3396
3397<!-- SECTION 4: OFFERINGS - icon-tile-row (design-system.html component #56)
3398     7 offerings, each with a Gemini-rendered 3D isometric illustration -->
3399<section data-philosopher="krehel" class="itr-section" id="offerings" data-design-system-component="icon-tile-row" data-copy-section="s3">
3400  <div class="wrap">
3401    <div class="itr-head">
3402      <div>
3403        <span class="eyebrow reveal" data-copy-id="s3.eyebrow">What we build</span>
3404        <h2 class="reveal" data-char-glow="" data-copy-id="s3.h2">Seven ways we turn tomorrow's technology<br>into today's unfair advantage.</h2>
3405      </div>
3406    </div>
3407    <div class="itr-container reveal" data-delay="1">
3408      <div class="itr-grid" data-cols="4">
3409        <a href="/offerings/modernization-with-ai" class="itr-tile" data-offering-theme="blue">
3410          <div class="itr-img"><img src="/illustrations/armakuni-homepage-2026/offering-01-modernization.webp" width="480" height="480" alt="Modernization with AI - legacy systems transforming into cloud-native modules" decoding="async" loading="lazy" srcset="/illustrations/armakuni-homepage-2026/offering-01-modernization-320w.webp 320w, /illustrations/armakuni-homepage-2026/offering-01-modernization.webp 480w" sizes="242px"></div>
3411          <div class="itr-name">Modernization with AI</div>
3412          <p class="itr-desc" data-copy-id="s3.body_0">The engineering foundation that makes AI modernization actually work. Not faster ways to generate technical debt.</p>
3413        </a>
3414        <a href="/offerings/gen-ai-and-agentic-ai" class="itr-tile" data-offering-theme="pink">
3415          <div class="itr-img"><img src="/illustrations/armakuni-homepage-2026/offering-02-genai.webp" width="480" height="480" alt="AI Transformation - central AI core with orbiting agent nodes" decoding="async" loading="lazy" srcset="/illustrations/armakuni-homepage-2026/offering-02-genai-320w.webp 320w, /illustrations/armaku
3415ni-homepage-2026/offering-02-genai.webp 480w" sizes="242px"></div>
3416          <div class="itr-name">AI Transformation</div>
3417          <p class="itr-desc" data-copy-id="s3.body_1">From curious about AI to shipping it in production. PUSH qualifies the right bets. Gen AI Delivery Lab builds them.</p>
3418        </a>
3419        <a href="/offerings/amazon-connect" class="itr-tile" data-offering-theme="cyan">
3420          <div class="itr-img"><img src="/illustrations/armakuni-homepage-2026/offering-03-connect.webp" width="480" height="480" alt="Connect Customer - contact-centre hub with sentiment and waveform panels" decoding="async" loading="lazy" srcset="/illustrations/armakuni-homepage-2026/offering-03-connect-320w.webp 320w, /illustrations/armakuni-homepage-2026/offering-03-connect.webp 480w" sizes="242px"></div>
3421          <div class="itr-name">Connect Customer</div>
3422          <p class="itr-desc" data-copy-id="s3.body_2">40,000+ calls analyzed daily. Automated sentiment. Real-time coaching. Contact centres rebuilt with intelligence built in.</p>
3423        </a>
3424        <a href="/offerings/migration" class="itr-tile" data-offering-theme="orange">
3425          <div class="itr-img"><img src="/illustrations/armakuni-homepage-2026/offering-04-migration.webp" width="480" height="480" alt="Migration with Agentic AI - servers migrating to cloud via agent-coordinated pipeline" decoding="async" loading="lazy" srcset="/illustrations/armakuni-homepage-2026/offering-04-migration-320w.webp 320w, /illustrations/armakuni-homepage-2026/offering-04-migration.webp 480w" sizes="242px"></div>
3426          <div class="itr-name">Migration with Agentic AI</div>
3427          <p class="itr-desc" data-copy-id="s3.body_3">Agentic tooling with fixed scope and fixed price. Legacy to AWS, with disaster recovery built in.</p>
3428        </a>
3429        <a href="/offerings/app-dev-pods" class="itr-tile" data-offering-theme="green">
3430          <div class="itr-img"><img src="/illustrations/armakuni-homepage-2026/offering-05-pods.webp" width="480" height="480" alt="App &amp; Product Dev with PODs - engineering team collaborating around shared code" decoding="async" loading="lazy" srcset="/illustrations/armakuni-homepage-2026/offering-05-pods-320w.webp 320w, /illustrations/armakuni-homepage-2026/offering-05-pods.webp 480w" sizes="242px"></div>
3431          <div class="itr-name">App &amp; Product Dev with PODs</div>
3432          <p class="itr-desc" data-copy-id="s3.body_4">Named engineers in your repos, your standups, your deploys. When we leave, your team runs everything we built.</p>
3433        </a>
3434        <a href="/offerings/data-engineering" class="itr-tile" data-offering-theme="deep-blue">
3435          <div class="itr-img"><img src="/illustrations/armakuni-homepage-2026/offering-06-data.webp" width="480" height="480" alt="Data Engineering - data pipeline flowing through AWS processing hub to analytics" decoding="async" loading="lazy" srcset="/illustrations/armakuni-homepage-2026/offering-06-data-320w.webp 320w, /illustrations/armakuni-homepage-2026/offering-06-data.webp 480w" sizes="242px"></div>
3436          <div class="itr-name">Data Engineering</div>
3437          <p class="itr-desc" data-copy-id="s3.body_5">Cloud-native platforms on AWS that turn data into decisions. For clinicians, traders, policy makers.</p>
3438        </a>
3439        <a href="/offerings/managed-services" class="itr-tile" data-offering-theme="coral">
3440          <div class="itr-img"><img src="/illustrations/armakuni-homepage-2026/offering-07-managed.webp" width="480" height="480" alt="Managed Services - central monitoring dashboard with operational pods orbit" decoding="async" loading="lazy" srcset="/illustrations/armakuni-homepage-2026/offering-07-managed-320w.webp 320w, /illustrations/armakuni-homepage-2026/offering-07-managed.webp 480w" sizes="242px"></div>
3441          <div class="itr-name">Managed Services</div>
3442          <p class="itr-desc" data-copy-id="s3.body_6">AI-powered managed operations. Dedicated PODs, not ticket queues. The same engineers who built it keep running it.</p>
3443        </a>
3444        <a href="/contact" class="itr-tile itr-tile--cta" data-offering-theme="cta" aria-label="Talk to a senior architect. Book a 30-minute review" style="justify-content:center; align-items:flex-start;
3444 background:linear-gradient(160deg, rgba(45,98,255,0.22) 0%, rgba(0,155,229,0.16) 50%, rgba(123,198,255,0.10) 100%); border:1.5px solid var(--accent-bright); box-shadow:0 0 0 1px rgba(123,198,255,0.18) inset, 0 18px 48px -22px rgba(45,98,255,0.55);">
3445          <div class="itr-cta-eyebrow" style="font-size:10.5px; text-transform:uppercase; letter-spacing:0.18em; color:var(--accent-bright); font-family:var(--f-m); margin-bottom:8px;">Talk to us</div>
3446          <div class="itr-img" style="aspect-ratio:1/1; background:radial-gradient(circle at center, rgba(123,198,255,0.30), rgba(45,98,255,0.10) 60%, transparent 82%); display:flex; align-items:center; justify-content:center; border:1px dashed rgba(123,198,255,0.45); border-radius:14px;">
3447            <!-- Whiteboard + conversation glyph: a frosted board with a cyan diagonal
3448                 sketch line and a small accent dot. matches the "sketch a fix live"
3449                 promise without leaning on AWS-orange. -->
3450            <svg viewBox="0 0 56 56" width="64" height="64" fill="none" aria-hidden="true">
3451              <rect x="9" y="13" width="38" height="26" rx="3" stroke="var(--accent-bright)" stroke-width="1.6" fill="rgba(123,198,255,0.08)"></rect>
3452              <path d="M14 30 Q22 19, 30 24 T44 19" stroke="var(--accent-bright)" stroke-width="1.8" stroke-linecap="round" fill="none"></path>
3453              <circle cx="44" cy="19" r="2.2" fill="var(--accent-bright)"></circle>
3454              <line x1="22" y1="39" x2="22" y2="44" stroke="var(--accent-bright)" stroke-width="1.4" opacity="0.6"></line>
3455              <line x1="34" y1="39" x2="34" y2="44" stroke="var(--accent-bright)" stroke-width="1.4" opacity="0.6"></line>
3456              <line x1="18" y1="44" x2="38" y2="44" stroke="var(--accent-bright)" stroke-width="1.4" opacity="0.6"></line>
3457            </svg>
3458          </div>
3459          <div class="itr-name" style="color:var(--accent-bright);">Sketch a fix, live.</div>
3460          <p class="itr-desc" data-copy-id="s3.body_7">Bring your toughest AWS or AI problem to a 30-minute call with a senior architect. We diagram the fix on screen, send you the canvas, and tell you whether we should be the team that ships it.</p>
3461          <div class="itr-meta" style="color:var(--accent-bright); font-weight:500;">Book the architect →</div>
3462        </a>
3463      </div>
3464    </div>
3465  </div>
3466</section>
3467
3468<!-- SECTION 5: HORIZONTAL TIMELINE - compact, "just show" -->
3469<section class="timeline-section-h" id="timeline" data-design-system-component="timeline-horizontal" data-copy-section="s4">
3470  <div class="wrap">
3471    <div class="eyebrow-wrap"><span class="eyebrow reveal" data-copy-id="s4.eyebrow">Thirteen years of AWS delivery</span></div>
3472    <h2 class="reveal" data-char-glow="" data-copy-id="s4.h2">Three AWS eras. We've shipped through all of them.</h2>
3473    <div class="timeline-track" id="timelineTrackH">
3474      <div class="timeline-line"><div class="timeline-line-fill" id="tlLineFill"></div></div>
3475      <div class="t-era reveal" data-era="0" data-delay="1">
3476        <div class="t-era-dot"></div>
3477        <div class="t-era-year">2012</div>
3478        <div class="t-era-headline">Comic Relief. Live BBC. GBP 100M in donations. Zero downtime.</div>
3479        <div class="t-era-note">4 engineers · 500 tx/sec · the beginning</div>
3480      </div>
3481      <div class="t-era reveal" data-era="1" data-delay="2">
3482        <div class="t-era-dot"></div>
3483        <div class="t-era-year">2018</div>
3484        <div class="t-era-headline">First Team Topologies Solution Partner worldwide.</div>
3485        <div class="t-era-note">Matthew Skelton picked us for the work, not the book</div>
3486      </div>
3487      <div class="t-era reveal" data-era="2" data-delay="3">
3488        <div class="t-era-dot"></div>
3489        <div class="t-era-year">2023</div>
3490        <div class="t-era-headline">
3490AWS Premier Tier Partner. 100+ successful deliveries on AWS.</div>
3491        <div class="t-era-note">11 years of discipline, recognized at the top tier</div>
3492      </div>
3493      <div class="t-era reveal" data-era="3" data-delay="4">
3494        <div class="t-era-dot"></div>
3495        <div class="t-era-year">2026</div>
3496        <div class="t-era-headline">AWS Premier. 9 competencies. 1,300+ engineers. 9 verticals.</div>
3497        <div class="t-era-note">Agentic AI Specialization · 1,300+ engineers across three offices</div>
3498      </div>
3499    </div>
3500  </div>
3501</section>
3502
3503<!-- SECTION 6: HOW WE WORK. The AK Way, four named loops + named IP per step -->
3504<section class="process-section" id="process" data-design-system-component="process-flow" data-philosopher="kowalski" data-copy-section="s5">
3505  <div class="wrap">
3506    <div class="process-head">
3507      <span class="eyebrow reveal" data-copy-id="s5.eyebrow">The AK Way</span>
3508      <h2 class="reveal" data-char-glow="" data-copy-id="s5.h2">Four loops. One discipline. <br>Everything we ship runs on it.</h2>
3509    </div>
3510    <div class="process-flow" id="processFlow">
3511      <div class="process-step reveal" data-step-index="0">
3512        <div class="process-step-dot"></div>
3513        <h3 data-copy-id="s5.sub_0">Qualify the right bets.</h3>
3514        <p data-copy-id="s5.body_0"><strong>PUSH</strong> qualifies AI initiatives. <strong>Compass</strong> does it for modernization portfolios. Both produce a CFO-ready model.</p>
3515        <div class="process-step-metric">50% cost cuts · 80% faster processing</div>
3516      </div>
3517      <div class="process-step reveal" data-step-index="1" data-delay="1">
3518        <div class="process-step-dot"></div>
3519        <h3 data-copy-id="s5.sub_1">Get the foundation honest.</h3>
3520        <p data-copy-id="s5.body_1"><strong>PULL</strong> aligns data strategy. <strong>Axiom</strong> ships the semantic layer so agents call definitions, not tables.</p>
3521        <div class="process-step-metric">dbt + Knowledge Bases · your IAM</div>
3522      </div>
3523      <div class="process-step reveal" data-step-index="2" data-delay="2">
3524        <div class="process-step-dot"></div>
3525        <h3 data-copy-id="s5.sub_2">Build alongside, not instead of.</h3>
3526        <p data-copy-id="s5.body_2"><strong>Evolve</strong> ships AK Way practices first, then agents modernize in priority order. Named pods. Fixed scope. Fixed price.</p>
3527        <div class="process-step-metric">Same repos · same standups · same accountability</div>
3528      </div>
3529      <div class="process-step reveal" data-step-index="3" data-delay="3">
3530        <div class="process-step-dot"></div>
3531        <h3 data-copy-id="s5.sub_3">Hand over everything.</h3>
3532        <p data-copy-id="s5.body_3">Your team runs what we built, because they built it alongside us. Knowledge transfer every sprint, not a phase at the end.</p>
3533        <div class="process-step-metric">Your AWS account · your IAM · your team</div>
3534      </div>
3535    </div>
3536  </div>
3537</section>
3538
3539<!-- SECTION 7: INDUSTRIES - illustration-dominant tall cards (Retool pattern) -->
3540<section data-philosopher="tompkins" class="industries-section" id="industries" data-design-system-component="industry-illus-carousel" data-copy-section="s6">
3541  <div class="wrap">
3542    <div class="industries-head">
3543      <div>
3544        <span class="eyebrow reveal" data-copy-id="s6.eyebrow">Where we ship</span>
3545        <h2 class="reveal" data-char-glow="" data-copy-id="s6.h2">Engineering discipline applied<br>across nine industries.</h2>
3546      </div>
3547      <div class="industries-nav reveal" data-delay="1">
3548        <button class="ind-arrow-btn" id="indPrev" aria-label="Previous industries">←</button>
3549        <button class="ind-arrow-btn" id="indNext" aria-label="Next industries">→</button>
3550      </div>
3551    </div>
3552  </div>
3553  <div class="horizontal-scroll reveal" data-delay="1" id="industriesScroll">
3554    <a href="/industries/financial-services" class="ind-card" data-offering-theme="blue">
3555      <img src="/illustrations/armakuni-homepage-2026/industry-financial.webp" width="576" height="768" alt="Financial Services - 3D glass bank pillar with regulator and product rail
3555s converging" class="ind-card-img" decoding="async" loading="lazy" srcset="/illustrations/armakuni-homepage-2026/industry-financial-320w.webp 320w, /illustrations/armakuni-homepage-2026/industry-financial.webp 576w" sizes="292px">
3556      <div class="ind-card-shade"></div>
3557      <div class="ind-card-arrow">→</div>
3558      <div class="ind-card-content">
3559        <span class="ind-card-meta">Santander · JP Morgan · HSBC</span>
3560        <div class="ind-card-name">Financial Services</div>
3561        <p class="ind-card-hook" data-copy-id="s6.body_0">Banks that ship like startups. 40% faster TTM. 50% lower infra cost.</p>
3562      </div>
3563    </a>
3564    <a href="/industries/healthcare" class="ind-card" data-offering-theme="deep-blue">
3565      <img src="/illustrations/armakuni-homepage-2026/industry-healthcare.webp" width="576" height="768" alt="Healthcare - 3D glass medical cross with HIPAA-aligned workload migration ribbon" class="ind-card-img" decoding="async" loading="lazy" srcset="/illustrations/armakuni-homepage-2026/industry-healthcare-320w.webp 320w, /illustrations/armakuni-homepage-2026/industry-healthcare.webp 576w" sizes="292px">
3566      <div class="ind-card-shade"></div>
3567      <div class="ind-card-arrow">→</div>
3568      <div class="ind-card-content">
3569        <span class="ind-card-meta">NHS Wales · 1Team · Identity verification</span>
3570        <div class="ind-card-name">Healthcare</div>
3571        <p class="ind-card-hook" data-copy-id="s6.body_1">Data that keeps up with decisions. Days to 2 minutes. 90% more accurate.</p>
3572      </div>
3573    </a>
3574    <a href="/industries/manufacturing" class="ind-card" data-offering-theme="orange">
3575      <img src="/illustrations/armakuni-homepage-2026/industry-manufacturing.webp" width="576" height="768" alt="Manufacturing - 3D glass factory chimney with supply-chain telemetry pods" class="ind-card-img" decoding="async" loading="lazy">
3576      <div class="ind-card-shade"></div>
3577      <div class="ind-card-arrow">→</div>
3578      <div class="ind-card-content">
3579        <span class="ind-card-meta">Renesas · Hyundai Glovis</span>
3580        <div class="ind-card-name">Manufacturing</div>
3581        <p class="ind-card-hook" data-copy-id="s6.body_2">Precision that scales. Order processing cut in half. 70% data sync uplift.</p>
3582      </div>
3583    </a>
3584    <a href="/industries/media-entertainment" class="ind-card" data-offering-theme="pink">
3585      <img src="/illustrations/armakuni-homepage-2026/industry-media.webp" width="576" height="768" alt="Media and Entertainment - 3D glass broadcast tower with live event spike" class="ind-card-img" decoding="async" loading="lazy">
3586      <div class="ind-card-shade"></div>
3587      <div class="ind-card-arrow">→</div>
3588      <div class="ind-card-content">
3589        <span class="ind-card-meta">Red Bull · News UK · Comic Relief</span>
3590        <div class="ind-card-name">Media &amp; Entertainment</div>
3591        <p class="ind-card-hook" data-copy-id="s6.body_3">Live, at scale, without fear. 1,500+ events a year. 80% less overhead.</p>
3592      </div>
3593    </a>
3594    <a href="/industries/saas-isv" class="ind-card" data-offering-theme="cyan">
3595      <img src="/illustrations/armakuni-homepage-2026/industry-saas.webp" width="576" height="768" alt="SaaS and ISV - 3D glass cloud platform with API modules and data veins" class="ind-card-img" decoding="async" loading="lazy">
3596      <div class="ind-card-shade"></div>
3597      <div class="ind-card-arrow">→</div>
3598      <div class="ind-card-content">
3599        <span class="ind-card-meta">Sweet Analytics</span>
3600        <div class="ind-card-name">SaaS &amp; ISV</div>
3601        <p class="ind-card-hook" data-copy-id="s6.body_4">Legacy out, AWS in. 5 months end-to-end. $1.5M saved a year.</p>
3602      </div>
3603    </a>
3604    <a href="/industries/telecom" class="ind-card" data-offering-theme="blue">
3605      <img src="/illustrations/armakuni-homepage-2026/industry-telecom.webp" width="576" height="768" alt="Telecom - 3D glass satellite dish migrating from legacy switch to AWS" class="ind-card-img" decoding="async" loading="lazy">
3606      <div class="ind-card-shade"></div>
3607      <div class="ind-card-arrow">→</div>
3608      <div class="ind-card-content">
3609        <span class="ind-card-meta">One of the largest cinema networks in the U.S. · A regulated Medicare insurance enrollment and engagement company · A US-based employee benefits technology company</span>
3610        <div class="ind-card-name">Telecom</div>
3611        <p class="ind-card-hook" data-copy-id="s6.body_5">Voice operations on Amazon Connect. Real-time AI. Compliance built in.</p>
3612      </div>
3613    </a>
3614    <a href="/industries/public-sector" class="ind-card" data-offering-theme="green">
3615      <img src="/illustrations/armakuni-homepage-2026/industry-public.webp" width="576" height="768" alt="Public Sector - 3D glass civic dome with voice-first AI access arcs" class="ind-card-img" decoding="async" loading="lazy">
3616      <div class="ind-card-shade"></div>
3617      <div class="ind-card-arrow">→</div>
3618      <div class="ind-card-content">
3619        <span class="ind-card-meta">Latin American hyperlocal social marketplace and community platform · Voice-first AI</span>
3620        <div class="ind-card-name">Public Sector</div>
3621        <p class="ind-card-hook" data-copy-id="s6.body_6">Voice-first AI for citizens who don't fill in web forms. Accessible by default, audited by the regulator.</p>
3622      </div>
3623    </a>
3624    <a href="/industries/retail-ecommerce" class="ind-card" data-offering-theme="orange">
3625      <img src="/illustrations/armakuni-homepage-2026/industry-retail.webp" width="576" height="768" alt="Retail and E-commerce - 3D glass fulfilment hub with real-time recommendation rays" class="ind-card-img" decoding="async" loading="lazy">
3626      <div class="ind-card-shade"></div>
3627      <div class="ind-card-arrow">→</div>
3628      <div class="ind-card-content">
3629        <span class="ind-card-meta">Leading smart kitchen appliance brand, United States · SMS campaign automation platform for e-commerce and restaurant brands</span>
3630        <div class="ind-card-name">Retail &amp; E-commerce</div>
3631        <p class="ind-card-hook" data-copy-id="s6.body_7">Real-time campaigns. Item-level recommendations. Multi-channel fulfilment.</p>
3632      </div>
3633    </a>
3634    <a href="/industries/private-equity-vc" class="ind-card" data-offering-theme="coral">
3635      <img src="/illustrations/armakuni-homepage-2026/industry-pe-vc.webp" width="576" height="768" alt="Private Equity and VC - 3D glass portfolio slab with stacked asset cubes and KPI dashboards" class="ind-card-img" decoding="async" loading="lazy">
3636      <div class="ind-card-shade"></div>
3637      <div class="ind-card-arrow">→</div>
3638      <div class="ind-card-content">
3639        <span class="ind-card-meta">A leading global consumer appliances company · Leading insurance broker management system provider in Canada</span>
3640        <div class="ind-card-name">Private Equity &amp; VC</div>
3641        <p class="ind-card-hook" data-copy-id="s6.body_8">Portfolio engineering maturity. Diligence to value creation. Fixed scope, board-ready.</p>
3642      </div>
3643    </a>
3644  </div>
3645</section>
3646
3647<!-- SECTION 8: CREDENTIALS (1 line + badges + AWS partnership strip) -->
3648<section class="credentials-section" id="credentials" data-copy-section="s7">
3649  <div class="wrap">
3650
3651    <!-- Headline -->
3652    <div class="cred-headline reveal" data-char-glow="">Fixed scope. Fixed price. Your team owns everything we build.</div>
3653
3654    <!-- Stats -->
3655    <div class="cred-stats reveal" data-delay="1">
3656      <div class="cred-stat">
3657        <div class="cred-stat-num">2012</div>
3658        <div class="cred-stat-label">Founded year</div>
3659      </div>
3660      <div class="cred-stat">
3661        <div class="cred-stat-num">1,300+</div>
3662        <div class="cred-stat-label">Engineers</div>
3663      </div>
3664      <div class="cred-stat">
3665        <div class="cred-stat-num">300+</div>
3666        <div class="cred-stat-label">AWS certifications</div>
3667      </div>
3668    </div>
3669
3670    <!-- Main: left = live badge display, right = tabbed list -->
3671    <div class="cred-main">
3672
3673      <!-- Left: shows the badge currently in focus in the list -->
3674      <div class="cred-badge-display reveal" data-delay="1">
3675        <!-- Populated at runtime by the badge list below. The AWS badges are
3676             SVG, so there is no WebP variant to offer; the <picture>/<source>
3677             that used to wrap this only ever received an empty srcset. -->
3678        <img class="cred-badge-display-img" src="" alt="" loading="eager" decoding="async">
3679      </div>
3680
3681      <div class="cred-tabs-panel reveal" data-delay="2">
3682        <div class="cred-tabs" role="tablist">
3683          <button class="cred-tab active" role="tab" data-tab="competencies" aria-controls="cred-pane-competencies">Competencies</button>
3684          <button class="cred-tab" role="tab" data-tab="sdp" aria-controls="cred-pane-sdp">SDP</button>
3685        </div>
3686
3687        <!-- Competencies (11 badges) -->
3688        <div class="cred-tab-pane active" id="cred-pane-competencies" role="tabpanel">
3689          <div class="cred-badge-list">
3690            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/migration-competency-orange.svg" data-badge-srcset="" data-badge-alt="AWS Migration and Modernization Competency">
3691              <img src="/assets/aws-badges/migration-competency-orange.svg" width="176" height="176" alt="AWS Migration and Modernization Competency" loading="lazy" decoding="async">
3692              <span class="cred-badge-name">Migration and Modernization Competency</span>
3693            </div>
3694            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/ai-services-competency.svg" data-badge-srcset="" data-badge-alt="AWS AI Services Competency">
3695              <img src="/assets/aws-badges/ai-services-competency.svg" width="176" height="176" alt="AWS AI Services Competency" loading="lazy" decoding="async">
3696              <span class="cred-badge-name">AI Services Competency</span>
3697            </div>
3698            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/data-analytics-consulting-competency.svg" data-badge-srcset="" data-badge-alt="AWS Data and Analytics Consulting Competency">
3699              <img src="/assets/aws-badges/data-analytics-consulting-competency.svg" width="176" height="176" alt="AWS Data and Analytics Consulting Competency" loading="lazy" decoding="async">
3700              <span class="cred-badge-name">Data &amp; Analytics Consulting Competency</span>
3701            </div>
3702            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/devops-consulting-competency.svg" data-badge-srcset="" data-badge-alt="AWS DevOps Consulting Competency">
3703              <img src="/assets/aws-badges/devops-consulting-competency.svg" width="176" height="176" alt="AWS DevOps Consulting Competency" loading="lazy" decoding="async">
3704              <span class="cred-badge-name">DevOps Consulting Competency</span>
3705            </div>
3706            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/saas-consulting-competency.svg" data-badge-srcset="" data-badge-alt="AWS SaaS Consulting Competency">
3707              <img src="/assets/aws-badges/saas-consulting-competency.svg" width="176" height="176" alt="AWS SaaS Consulting Competency" loading="lazy" decoding="async">
3708              <span class="cred-badge-name">SaaS Consulting Competency</span>
3709            </div>
3710            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/resilience-services-competency.svg" data-badge-srcset="" data-badge-alt="AWS Resilience Services Competency">
3711              <img src="/assets/aws-badges/resilience-services-competency.svg" width="176" height="176" alt="AWS Resilience Services Competency" loading="lazy" decoding="async">
3712              <span class="cred-badge-name">Resilience Services Competency</span>
3713            </div>
3714            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/migration-and-modernization-services.svg" data-badge-srcset="" data-badge-alt="AWS Migration and Modernization Services">
3715              <img src="/assets/aws-badges/migration-and-modernization-services.svg" width="176" height="176" alt="AWS Migration and Modernization Services" loading="lazy" decoding="async">
3716              <span class="cred-badge-name">Migration and Modernization Consulting Competency</span>
3717            </div>
3718            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/small-and-medium-business-services-competency.svg" data-badge-srcset="" data-badge-alt="AWS Small and Medium Business Services Competency">
3719              <img src="/assets/aws-badges/small-and-medium-business-services-competency.svg" width="176" height="176" alt="AWS Small and Medium Business Services Competency" loading="lazy" decoding="async">
3720              <span class="cred-badge-name">Small and Medium Business Services Competency</span>
3721            </div>
3722            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/supply-chain-services-competency.svg" data-badge-srcset="" data-badge-alt="AWS Supply Chain Services Competency">
3723              <img src="/assets/aws-badges/supply-chain-services-competency.svg" width="176" height="176" alt="AWS Supply Chain Services Competency" loading="lazy" decoding="async">
3724              <span class="cred-badge-name">Supply Chain Services Competency</span>
3725            </div>
3726            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/healthcare-consulting-competency.svg" data-badge-srcset="" data-badge-alt="AWS Healthcare Consulting Competency">
3727              <img src="/assets/aws-badges/healthcare-consulting-competency.svg" width="176" height="176" alt="AWS Healthcare Consulting Competency" loading="lazy" decoding="async">
3728              <span class="cred-badge-name">Healthcare Consulting Competency</span>
3729            </div>
3730            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/advertising-and-marketing-technology-services-competency.svg" data-badge-srcset="" data-badge-alt="AWS Advertising and Marketing Technology Competency">
3731              <img src="/assets/aws-badges/advertising-and-marketing-technology-services-competency.svg" width="176" height="176" alt="AWS Advertising and Marketing Technology Competency" loading="lazy" decoding="async">
3732              <span class="cred-badge-name">Advertising and Marketing Technology Services Competency</span>
3733            </div>
3734          </div>
3735        </div>
3736
3737        <!-- SDP (16 badges) -->
3738        <div class="cred-tab-pane" id="cred-pane-sdp" role="tabpanel">
3739          <div class="cred-badge-list">
3740            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/amazon-connect-delivery.svg" data-badge-srcset="" data-badge-alt="Amazon Connect Service Delivery">
3741              <img src="/assets/aws-badges/amazon-connect-delivery.svg" width="176" height="176" alt="Amazon Connect Service Delivery" loading="lazy" decoding="async">
3742              <span class="cred-badge-name">Amazon Connect Delivery</span>
3743            </div>
3744            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/aws-lambda-delivery.svg" data-badge-srcset="" data-badge-alt="AWS Lambda Service Delivery">
3745              <img src="/assets/aws-badges/aws-lambda-delivery.svg" width="176" height="176" alt="AWS Lambda Service Delivery" loading="lazy" decoding="async">
3746              <span class="cred-badge-name">AWS Lambda Delivery</span>
3747            </div>
3748            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/amazon-ecs-delivery.svg" data-badge-srcset="" data-badge-alt="Amazon ECS Service Delivery">
3749              <img src="/assets/aws-badges/amazon-ecs-delivery.svg" width="176" height="176" alt="Amazon ECS Service Delivery" loading="lazy" decoding="async">
3750              <span class="cred-badge-name">Amazon ECS Delivery</span>
3751            </div>
3752            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/amazon-eks-delivery.svg" data-badge-srcset="" data-badge-alt="Amazon EKS Service Delivery">
3753              <img src="/assets/aws-badges/amazon-eks-delivery.svg" width="176" height="176" alt="Amazon EKS Service Delivery" loading="lazy" decoding="async">
3754              <span class="cred-badge-name">Amazon EKS Delivery</span>
3755            </div>
3756            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/aws-glue-delivery.svg" data-badge-srcset="" data-badge-alt="AWS Glue Service Delivery">
3757              <img src="/assets/aws-badges/aws-glue-delivery.svg" width="176" height="176" alt="AWS Glue Service Delivery" loading="lazy" decoding="async">
3758              <span class="cred-badge-name">AWS Glue Delivery</span>
3759            </div>
3760            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/amazon-rds-delivery.svg" data-badge-srcset="" data-badge-alt="Amazon RDS Service Delivery">
3761              <img src="/assets/aws-badges/amazon-rds-delivery.svg" width="176" height="176" alt="Amazon RDS Service Delivery" loading="lazy" decoding="async">
3762              <span class="cred-badge-name">Amazon RDS Delivery</span>
3763            </div>
3764            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/amazon-dynamodb-delivery.svg" data-badge-srcset="" data-badge-alt="Amazon DynamoDB Service Delivery">
3765              <img src="/assets/aws-badges/amazon-dynamodb-delivery.svg" width="176" height="178" alt="Amazon DynamoDB Service Delivery" loading="lazy" decoding="async">
3766              <span class="cred-badge-name">Amazon DynamoDB Delivery</span>
3767            </div>
3768            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/amazon-cloudfront-delivery.svg" data-badge-srcset="" data-badge-alt="Amazon CloudFront Service Delivery">
3769              <img src="/assets/aws-badges/amazon-cloudfront-delivery.svg" width="176" height="176" alt="Amazon CloudFront Service Delivery" loading="lazy" decoding="async">
3770              <span class="cred-badge-name">Amazon CloudFront Delivery</span>
3771            </div>
3772            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/amazon-api-gateway-delivery.svg" data-badge-srcset="" data-badge-alt="Amazon API Gateway Service Delivery">
3773              <img src="/assets/aws-badges/amazon-api-gateway-delivery.svg" width="176" height="176" alt="Amazon API Gateway Service Delivery" loading="lazy" decoding="async">
3774              <span class="cred-badge-name">Amazon API Gateway Delivery</span>
3775            </div>
3776            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/amazon-opensearch-service-deliver.svg" data-badge-srcset="" data-badge-alt="Amazon OpenSearch Service Delivery">
3777              <img src="/assets/aws-badges/amazon-opensearch-service-deliver.svg" width="176" height="176" alt="Amazon OpenSearch Service Delivery" loading="lazy" decoding="async">
3778              <span class="cred-badge-name">Amazon OpenSearch Service Delivery</span>
3779            </div>
3780            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/aws-cloudformation-delivery.svg" data-badge-srcset="" data-badge-alt="AWS CloudFormation Service Delivery">
3781              <img src="/assets/aws-badges/aws-cloudformation-delivery.svg" width="176" height="178" alt="AWS CloudFormation Service Delivery" loading="lazy" decoding="async">
3782              <span class="cred-badge-name">AWS CloudFormation Delivery</span>
3783            </div>
3784            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/aws-config-delivery.svg" data-badge-srcset="" data-badge-alt="AWS Config Service Delivery">
3785              <img src="/assets/aws-badges/aws-config-delivery.svg" width="176" height="176" alt="AWS Config Service Delivery" loading="lazy" decoding="async">
3786              <span class="cred-badge-name">AWS Config Delivery</span>
3787            </div>
3788            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/aws-control-tower-delivery.svg" data-badge-srcset="" data-badge-alt="AWS Control Tower Service Delivery">
3789              <img src="/assets/aws-badges/aws-control-tower-delivery.svg" width="176" height="176" alt="AWS Control Tower Service Delivery" loading="lazy" decoding="async">
3790              <span class="cred-badge-name">AWS Control Tower Delivery</span>
3791            </div>
3792            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/aws-graviton-delivery.svg" data-badge-srcset="" data-badge-alt="AWS Graviton Service Delivery">
3793              <img src="/assets/aws-badges/aws-graviton-delivery.svg" width="176" height="176" alt="AWS Graviton Service Delivery" loading="lazy" decoding="async">
3794              <span class="cred-badge-name">AWS Graviton Delivery</span>
3795            </div>
3796            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/aws-systems-manager-delivery.svg" data-badge-srcset="" data-badge-alt="AWS Systems Manager Service Delivery">
3797              <img src="/assets/aws-badges/aws-systems-manager-delivery.svg" width="176" height="176" alt="AWS Systems Manager Service Delivery" loading="lazy" decoding="async">
3798              <span class="cred-badge-name">AWS Systems Manager Delivery</span>
3799            </div>
3800            <div class="cred-badge-item" data-badge-src="/assets/aws-badges/aws-waf-delivery.svg" data-badge-srcset="" data-badge-alt="AWS WAF Service Delivery">
3801              <img src="/assets/aws-badges/aws-waf-delivery.svg" width="176" height="176" alt="AWS WAF Service Delivery" loading="lazy" decoding="async">
3802              <span class="cred-badge-name">AWS WAF Delivery</span>
3803            </div>
3804          </div>
3805        </div>
3806      </div>
3807    </div>
3808
3809    <!-- Bottom strip -->
3810    <div class="cred-bottom-strip reveal">
3811      <div class="cred-bottom-item">
3812        <div class="cred-bottom-icon">
3813          <img src="/assets/icons/globe.svg" alt="" width="33" height="33" loading="lazy" decoding="async">
3814        </div>
3815        <div class="cred-bottom-label">First Team Topologies<br>Solution Partner Worldwide</div>
3816      </div>
3817      <div class="cred-bottom-item">
3818        <div class="cred-bottom-icon">
3819          <img src="/assets/icons/ai.svg" alt="" width="32" height="32" loading="lazy" decoding="async">
3820        </div>
3821        <div class="cred-bottom-label">AWS Agentic AI<br>specialization</div>
3822      </div>
3823      <div class="cred-bottom-item">
3824        <div class="cred-bottom-icon">
3825          <img src="/assets/icons/document.svg" alt="" width="33" height="33" loading="lazy" decoding="async">
3826        </div>
3827        <div class="cred-bottom-label">AWS Strategic Collaboration<br>Agreement · 2024</div>
3828      </div>
3829    </div>
3830
3831  </div>
3832</section>
3833
3834<!-- SECTION 9: INSIGHTS -->
3835<section class="insights-section" id="insights" data-copy-section="s8">
3836  <div class="wrap">
3837    <div class="insights-head">
3838      <div>
3839        <span class="eyebrow reveal" data-copy-id="s8.eyebrow">Insights</span>
3840        <h2 class="reveal" data-char-glow="" data-copy-id="s8.h2">From our engineers to yours.</h2>
3841      </div>
3842      <a href="/insights" class="insights-all-link reveal" data-delay="1">View all insights <span class="arr">→</span></a>
3843    </div>
3844    <!-- AKWriter:insights start -->
3845    <div class="blog-grid">
3846      <a href="../../../projects/insights-2026/build/amazon-q-in-quicksight-for-smarter-business-insights.html" class="card-blog reveal" data-delay="1" data-cat="data">
3847        <div class="blog-thumb"><img class="blog-thumb-img" src="/assets/armakuni-com/insights/amazon-q-quicksight-1.webp" alt="Amazon Q in QuickSight for Delivering Smarter Business Insights" loading="lazy" decoding="async" width="800" height="395" srcset="/assets/armakuni-com/insights/amazon-q-quicksight-1-480w.webp 480w, /assets/armakuni-com/insights/amazon-q-quicksight-1.webp 800w" sizes="(max-width: 640px) 90vw, (max-width: 1024px) 93vw, 60vw"><span class="blog-category">Data</span></div>
3848        <div class="blog-content">
3849          <div class="blog-meta"><span>5 min read · Jan 2026</span></div>
3850          <div class="blog-title">Amazon Q in QuickSight for Delivering Smarter Business Insights</div>
3851          <p class="blog-excerpt">Decision makers globally lose up to 30% of their working time gathering data, preparing reports or waiting on technical teams. That is nearly one and a half days every week spent not deciding but searching.</p>
3852          <span class="blog-read-more">Read More</span>
3853        </div>
3854      </a>
3855      <a href="../../../projects/insights-2026/build/how-agentcore-will-redefine-the-future-of-ai-on-aws.html" class="card-blog reveal" data-delay="2" data-cat="agentic-ai">
3856        <div class="blog-thumb"><img class="blog-thumb-img" src="/assets/armakuni-com/insights/agent-core-bedrock.webp" alt="How Agent Core Will Redefine the Future of AI on AWS" loading="lazy" decoding="async" width="800" height="427" srcset="/assets/armakuni-com/insights/agent-core-bedrock-480w.webp 480w, /assets/armakuni-com/insights/agent-core-bedrock.webp 800w" sizes="(max-width: 640px) 90vw, (max-width: 1024px) 93vw, 60vw"><span class="blog-category">Agentic AI</span></div>
3857        <div class="blog-content">
3858          <div class="blog-meta"><span>5 min read · Jan 2026</span></div>
3859          <div class="blog-title">How Agent Core Will Redefine the Future of AI on AWS</div>
3860          <p class="blog-excerpt">
3860Enterprise AI has moved past experimentation. Bedrock AgentCore turns governed, audited agents into the new default deployment shape on AWS.</p>
3861          <span class="blog-read-more">Read More</span>
3862        </div>
3863      </a>
3864      <a href="../../../projects/insights-2026/build/working-with-amazon-connect-for-modern-voice-ai.html" class="card-blog reveal" data-delay="3" data-cat="connect-customer">
3865        <div class="blog-thumb"><img class="blog-thumb-img" src="/assets/armakuni-com/insights/amazon-connect-blog.webp" alt="Working With Amazon Connect for Modern Voice AI" loading="lazy" decoding="async" width="800" height="499" srcset="/assets/armakuni-com/insights/amazon-connect-blog-480w.webp 480w, /assets/armakuni-com/insights/amazon-connect-blog.webp 800w" sizes="(max-width: 640px) 90vw, (max-width: 1024px) 93vw, 60vw"><span class="blog-category">Connect Customer</span></div>
3866        <div class="blog-content">
3867          <div class="blog-meta"><span>7 min read · Dec 2025</span></div>
3868          <div class="blog-title">Working With Amazon Connect for Modern Voice AI</div>
3869          <p class="blog-excerpt">Learn how Amazon Connect, AgentCore, and Nova 2 Sonic simplify real-time voice AI by reducing state management, SIP complexity, and operational overhead compared to older Twilio and Chime SDK patterns.</p>
3870          <span class="blog-read-more">Read More</span>
3871        </div>
3872      </a>
3873      <a href="../../../projects/insights-2026/build/armakuni-achieves-the-aws-agentic-ai-specialization.html" class="card-blog reveal" data-delay="4" data-cat="news">
3874        <div class="blog-thumb"><img class="blog-thumb-img" src="/assets/armakuni-com/insights/generated/armakuni-achieves-the-aws-agentic-ai-specialization.webp" alt="Armakuni Achieves the AWS Agentic AI Specialization" loading="lazy" decoding="async" width="800" height="450" srcset="/assets/armakuni-com/insights/generated/armakuni-achieves-the-aws-agentic-ai-specialization-480w.webp 480w, /assets/armakuni-com/insights/generated/armakuni-achieves-the-aws-agentic-ai-specialization.webp 800w" sizes="(max-width: 640px) 90vw, (max-width: 1024px) 93vw, 56vw"><span class="blog-category">News</span></div>
3875        <div class="blog-content">
3876          <div class="blog-meta"><span>3 min read · Jan 2026</span></div>
3877          <div class="blog-title">Armakuni Achieves the AWS Agentic AI Specialization</div>
3878          <p class="blog-excerpt">North America, 21 January 2026, Armakuni is proud to share that we have earned the AWS AI Specialization in Agentic AI, a newly introduced specialization within the AWS AI Competency program.</p>
3879          <span class="blog-read-more">Read More</span>
3880        </div>
3881      </a>
3882    </div>
3883    <!-- AKWriter:insights end -->
3884  </div>
3885</section>
3886
3887<!-- SECTION 10: CTA -->
3888<section class="cta-section" id="cta" data-design-system-component="cta-particle" data-philosopher="tompkins" data-copy-section="s9">
3889  <canvas class="cta-particle-canvas" id="ctaCanvas" aria-hidden="true"></canvas>
3890  <div class="cta-inner">
3891    <span class="eyebrow reveal" data-copy-id="s9.eyebrow">The engineering partner for the AI era</span>
3892    <h2 class="reveal" data-char-glow="" data-copy-id="s9.h2">Build your unfair advantage.</h2>
3893    <p class="lead reveal" data-delay="1" data-copy-id="s9.lead">We've been turning tomorrow into today since 2012. Book a 30-minute architecture review. Bring your toughest problem. We'll sketch a fix live.</p>
3894    <div class="cta-actions reveal" data-delay="2">
3895      <a href="/contact" class="btn btn-glow-pulse" data-copy-id="s9.cta_0">Start Building <span class="arr">→</span></a>
3896    </div>
3897  </div>
3898</section>
3899
3900<!-- FOOTER -->
3901<!-- AKWriter:footer start -->
3902<footer class="site-footer">
3903  <div class="wrap">
3904    <div class="footer-grid">
3905      <div class="footer-brand-col">
3906        <a class="footer-brand" href="/" aria-label="Armakuni home">
3907          <img class="footer-brand-mark" src="/assets/AK%20White%20Logo.webp" width="320" height="52" alt="Armakuni" decoding="async" loading="lazy">
3908        </a>
3909        <p class="footer-tagline">AWS Premier Partner. The engineering partner for the AI era. 1,300+ engineers shipping on AWS since 2012.</p>
3910      </div>
3911      <div class="footer-col">
3912        <div class="footer-col-heading">Services</div>
3913        <ul>
3914          <li><a href="/offerings/modernization-with-ai">Modernization with AI</a></li>
3915          <li><a href="/offerings/gen-ai-and-agentic-ai">AI Transformation</a></li>
3916          <li><a href="/offerings/amazon-connect">Connect Customer</a></li>
3917          <li><a href="/offerings/data-engineering">Data Engineering</a></li>
3918          <li><a href="/offerings/managed-services">Managed Services</a></li>
3919          <li><a href="/offerings/app-dev-pods">Application Development Pods</a></li>
3920          <li><a href="/offerings/migration">Migration</a></li>
3921        </ul>
3922      </div>
3923      <div class="footer-col">
3924        <div class="footer-col-heading">Industries</div>
3925        <ul>
3926          <li><a href="/industries/financial-services">Financial Services</a></li>
3927          <li><a href="/industries/healthcare">Healthcare</a></li>
3928          <li><a href="/industries/public-sector">Public Sector</a></li>
3929          <li><a href="/industries/manufacturing">Manufacturing</a></li>
3930          <li><a href="/industries/media-entertainment">Media &amp; Entertainment</a></li>
3931          <li><a href="/industries/saas-isv">SaaS &amp; ISV</a></li>
3932          <li><a href="/industries/retail-ecommerce">Retail &amp; E-commerce</a></li>
3933          <li><a href="/industries/private-equity-vc">Private Equity &amp; VC</a></li>
3934          <li><a href="/industries/telecom">Telecom</a></li>
3935        </ul>
3936      </div>
3937      <div class="footer-col">
3938        <div class="footer-col-heading">Company</div>
3939        <ul>
3940          <li><a href="/about">About</a></li>
3941          <li><a href="/insights">Insights</a></li>
3942          <li><a href="/case-studies">Case Studies</a></li>
3943          <li><a href="/contact">Contact</a></li>
3944        </ul>
3945      </div>
3946      <div class="footer-col footer-col-offices">
3947        <div class="footer-col-heading">Offices</div>
3948        <ul>
3949          <li class="footer-office">
3950            <div class="footer-office-city">London</div>
3951            <div class="footer-office-addr">International House<br>64 Nile St, London N1 7SR, United Kingdom</div>
3952            <div class="footer-office-phone">+44 (0)207 459 4330</div>
3953          </li>
3954          <li class="footer-office">
3955            <div class="footer-office-city">Saint Cloud, FL</div>
3956            <div class="footer-office-addr">2880 Cypress Grove Ct.<br>FL 34772, United States</div>
3957            <div class="footer-office-phone">+1 (321) 335-4237</div>
3958          </li>
3959          <li class="footer-office">
3960            <div class="footer-office-city">Ahmedabad</div>
3961            <div class="footer-office-addr">Office 601-611 Binori B Sq-2<br>380054, India</div>
3962            <div class="footer-office-phone">+91 2717 442 744</div>
3963          </li>
3964        </ul>
3965      </div>
3966    </div>
3967    <div class="footer-bottom">
3968      <span class="footer-copyright">&copy; 2026 Armakuni Ltd. Registered in England and Wales no. 08104921. All rights reserved.</span>
3969      <nav class="footer-legal-nav" aria-label="Legal">
3970        <a class="footer-bottom-link" href="/privacy-policy">Privacy Policy</a>
3971        <a class="footer-bottom-link" href="/modern-slavery">Modern Slavery</a>
3972        <a class="footer-bottom-link" href="/carbon-footprint">Carbon Footprint</a>
3973        <a class="footer-bottom-link" href="mailto:[email protected]">[email protected]</a>
3974      </nav>
3975    </div>
3976  </div>
3977</footer>
3978<!-- AKWriter:footer end -->
3979
3980<script>
3981document.addEventListener('DOMContentLoaded', () => {
3982  requestAnimationFrame(() => document.body.classList.add('loaded'));
3983
3984  /* ---- REVEAL (IntersectionObserver + CSS) ---- */
3985  const revealObs = new IntersectionObserver((entries) => {
3986    entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); revealObs.unobserve(e.target); } });
3987  }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
3988  document.querySelectorAll('.reveal').forEach(el => revealObs.observe(el));
3989
3990  /* ---- MOUSE GLOW ---- */
3991  const glow = document.getElementById('mouseGlow');
3992  if (glow && window.matchMedia('(hover: hover)').matches) {
3993    document.addEventListener('mousemove', (e) => { glow.style.left = e.clientX + 'px'; glow.style.top = e.clientY + 'px'; });
3994  }
3995
3996  /* Char glow: canonical version lives in the GSAP block below (pipe-delimited line breaks, word-preserving) */
3997
3998  /* ---- TRUST STRIP + LOGO MARQUEE: duplicate content for seamless loop ---- */
3999  ['trustTrack', 'logoTrack'].forEach(id => {
4000    const track = document.getElementById(id);
4001    if (!track) return;
4002    track.innerHTML = track.innerHTML + track.innerHTML;
4003  });
4004
4005  /* ---- TESTIMONIAL CAROUSEL (canonical from design-system.html)
4006         Track-translate pattern: drives a transform on .tm-track instead of
4007         scrollTo() on the rail. Auto-generates dots from slide count, clamps
4008         idx to [0, maxIdx] so first/last cards always reach the edge cleanly,
4009         and disables prev/next at boundaries. Supports keyboard + swipe. */
4010  (function initTmCarousel() {
4011    var section = document.querySelector('section.tm-sec');
4012    if (!section) return;
4013    var track = section.querySelector('#tmTrack') || section.querySelector('.tm-track');
4014    var viewport = section.querySelector('.tm-viewport');
4015    var prev = section.querySelector('#tmPrev');
4016    var next = section.querySelector('#tmNext');
4017    if (!track || !viewport || !prev || !next) return;
4018    var slides = Array.prototype.filter.call(track.children, function (el) {
4019      return el.classList && el.classList.contains('tm-slide');
4020    });
4021    if (!slides.length) return;
4022
4023    var idx = 0;
4024
4025    function step() {
4026      var card = slides[0];
4027      var gap = parseFloat(getComputedStyle(track).gap) || 24;
4028      return card.getBoundingClientRect().width + gap;
4029    }
4030    function maxIdx() {
4031      var paddingX =
4032        parseFloat(getComputedStyle(viewport).paddingLeft) +
4033        parseFloat(getComputedStyle(viewport).paddingRight);
4034      var visibleW = viewport.clientWidth - paddingX;
4035      var s = step();
4036      if (s <= 0) return 0;
4037      var visibleCount = Math.max(1, Math.floor((visibleW + 24) / s));
4038      return Math.max(0, slides.length - visibleCount);
4039    }
4040    function render() {
4041      var s = step();
4042      track.style.transform = 'translateX(' + (-idx * s) + 'px)';
4043      slides.forEach(function (sl, i) { sl.classList.toggle('active', i === idx); });
4044    }
4045    function goTo(n) {
4046      var count = maxIdx() + 1;
4047      idx = ((n % count) + count) % count;
4048      render();
4049    }
4050    // Mobile fix (discovered 2026-05-22): tapping an arrow button at the
4051    // bottom of the viewport caused the page to scroll DOWN by ~450px,
4052    // leaving the carousel stranded above the visible window. Root cause:
4053    // when the button receives focus on tap, the browser's default
4054    // "scroll the focused control to a comfortable position" kicks in.
4055    //
4056    // Two-layer defence:
4057    //  1. mousedown.preventDefault() prevents the pointer from giving
4058    //     focus to the button at all — keyboard tab nav still works.
4059    //  2. After the carousel updates, capture+restore scrollY in a
4060    //     deferred rAF in case any layout shift still nudges the page.
4061    function preventClickFocus(btn) {
4062      btn.addEventListener('mousedown', function (e) { e.preventDefault(); });
4063      btn.addEventListener('touchstart', function () {
4064        // No-op handler so iOS treats the button as interactive without
4065        // moving the viewport. Combined with mousedown.preventDefault on
4066        // the synthesized click, focus stays elsewhere.
4067      }, { passive: true });
4068    }
4069    function navClick(delta) {
4070      var y = window.scrollY;
4071      goTo(idx + delta);
4072      requestAnimationFrame(function () {
4073        if (Math.abs(window.scrollY - y) > 1) window.scrollTo(0, y);
4074      });
4075    }
4076    [prev, next].forEach(preventClickFocus);
4077    prev.addEventListener('click', function () { navClick(-1); });
4078    next.addEventListener('click', function () { navClick(1); });
4079
4080    // Keyboard nav (when section receives focus)
4081    section.tabIndex = -1;
4082    section.addEventListener('keydown', function (e) {
4083      if (e.key === 'ArrowLeft')  { e.preventDefault(); goTo(idx - 1); }
4084      if (e.key === 'ArrowRight') { e.preventDefault(); goTo(idx + 1); }
4085    });
4086
4087    // Touch swipe — live drag feedback + threshold commit
4088    var startX = 0, startY = 0, dx = 0, dragging = false, locked = false;
4089    track.addEventListener('touchstart', function (e) {
4090      startX = e.touches[0].clientX;
4091      startY = e.touches[0].clientY;
4092      dx = 0; dragging = true; locked = false;
4093      track.style.transition = 'none';
4094    }, { passive: true });
4095    track.addEventListener('touchmove', function (e) {
4096      if (!dragging) return;
4097      var x = e.touches[0].clientX;
4098      var y = e.touches[0].clientY;
4099      dx = x - startX;
4100      var dy = y - startY;
4101      if (!locked) {
4102        if (Math.abs(dy) > Math.abs(dx) + 6) { dragging = false; track.style.transition = ''; render(); return; }
4103        if (Math.abs(dx) > 4) locked = true;
4104      }
4105      if (locked) {
4106        var s = step();
4107        track.style.transform = 'translateX(' + (-idx * s + dx) + 'px)';
4108      }
4109    }, { passive: true });
4110    function commitSwipe() {
4111      if (!dragging) return;
4112      dragging = false;
4113      track.style.transition = '';
4114      var threshold = Math.min(80, step() * 0.25);
4115      if (Math.abs(dx) > threshold) goTo(idx + (dx < 0 ? 1 : -1));
4116      else render();
4117    }
4118    track.addEventListener('touchend', commitSwipe);
4119    track.addEventListener('touchcancel', commitSwipe);
4120
4121    // Re-render on resize (debounced via rAF)
4122    var resizeRaf = 0;
4123    window.addEventListener('resize', function () {
4124      if (resizeRaf) cancelAnimationFrame(resizeRaf);
4125      resizeRaf = requestAnimationFrame(render);
4126    }, { passive: true });
4127
4128    render();
4129  })();
4130
4131  /* icon-tile-row tiles rely on plain hover/transition; no JS-driven parallax needed */
4132
4133  /* ---- INDUSTRY CAROUSEL arrow nav + edge auto-scroll ----
4134     When the cursor enters the leftmost or rightmost EDGE_PX zone of the rail,
4135     start a smooth continuous scroll in that direction. Speed scales with how
4136     deep the cursor sits in the edge zone. Touch devices (`hover: none`) skip
4137     this entirely so swipe still works naturally. */
4138  const indScroll = document.getElementById('industriesScroll');
4139  const indPrev = document.getElementById('indPrev');
4140  const indNext = document.getElementById('indNext');
4141  if (indScroll && indPrev && indNext) {
4142    function indStep() {
4143      const c = indScroll.querySelector('.ind-card');
4144      return c ? c.offsetWidth + 16 : 300;
4145    }
4146    function indMaxScroll() { return indScroll.scrollWidth - indScroll.clientWidth; }
4147    function updateIndArrows() {
4148      const max = indMaxScroll();
4149      indPrev.disabled = indScroll.scrollLeft <= 2;
4150      indNext.disabled = indScroll.scrollLeft >= max - 2;
4151    }
4152    indPrev.addEventListener('click', () => indScroll.scrollBy({ left: -indStep() * 2, behavior: 'smooth' }));
4153    indNext.addEventListener('click', () => indScroll.scrollBy({ left: indStep() * 2, behavior: 'smooth' }));
4154    indScroll.addEventListener('scroll', updateIndArrows, { passive: true });
4155    window.addEventListener('resize', updateIndArrows);
4156    updateIndArrows();
4157
4158    // Edge-driven auto-scroll on hover-capable devices.
4159    // Toggles `.edge-scrolling` class to suspend scroll-snap so the per-frame
4160    // scrollLeft assignment isn't rubber-banded back to a snap point.
4161    const supportsHover = window.matchMedia('(hover: hover)').matches;
4162    if (supportsHover) {
4163      const EDGE_PX = 140;
4164      const MAX_PX_PER_FRAME = 18;
4165      let edgeRaf = 0;
4166      let edgeVelocity = 0;
4167      function setEdgeActive(active) {
4168        indScroll.classList.toggle('edge-scrolling', active);
4169      }
4170      function tickEdgeScroll() {
4171        if (edgeVelocity === 0) { edgeRaf = 0; setEdgeActive(false); return; }
4172        const max = indMaxScroll();
4173        const next = Math.max(0, Math.min(max, indScroll.scrollLeft + edgeVelocity));
4174        if (next === indScroll.scrollLeft) {
4175          edgeVelocity = 0; edgeRaf = 0; setEdgeActive(false); return;
4176        }
4177        indScroll.scrollLeft = next;
4178        edgeRaf = requestAnimationFrame(tickEdgeScroll);
4179      }
4180      indScroll.addEventListener('mousemove', (e) => {
4181        const rect = indScroll.getBoundingClientRect();
4182        const x = e.clientX - rect.left;
4183        const w = rect.width;
4184        let v = 0;
4185        if (x < EDGE_PX) {
4186          const depth = (EDGE_PX - x) / EDGE_PX;
4187          v = -Math.round(MAX_PX_PER_FRAME * depth);
4188        } else if (x > w - EDGE_PX) {
4189          const depth = (x - (w - EDGE_PX)) / EDGE_PX;
4190          v = Math.round(MAX_PX_PER_FRAME * depth);
4191        }
4192        edgeVelocity = v;
4193        if (v !== 0) {
4194          setEdgeActive(true);
4195          if (!edgeRaf) edgeRaf = requestAnimationFrame(tickEdgeScroll);
4196        } else if (edgeRaf === 0) {
4197          setEdgeActive(false);
4198        }
4199      });
4200      indScroll.addEventListener('mouseleave', () => {
4201        edgeVelocity = 0;
4202        setEdgeActive(false);
4203      });
4204    }
4205  }
4206
4207  /* ---- HORIZONTAL TIMELINE: era dots activate on intersection ---- */
4208  const eras = document.querySelectorAll('.t-era');
4209  const tlFill = document.getElementById('tlLineFill');
4210  if (eras.length && tlFill) {
4211    let activated = 0;
4212    const eraObs = new IntersectionObserver((entries) => {
4213      entries.forEach(e => {
4214        if (!e.isIntersecting) return;
4215        e.target.classList.add('active');
4216        activated = Math.max(activated, parseInt(e.target.dataset.era) + 1);
4217        const pct = Math.min(100, (activated / eras.length) * 100);
4218        tlFill.style.width = pct + '%';
4219      });
4220    }, { threshold: 0.5 });
4221    eras.forEach(e => eraObs.observe(e));
4222  }
4223
4224  /* CTA canvas particle animation lives in the canonical GSAP block below */
4225});
4226
4227/* ---- GSAP: canonical character glow + scroll progress + section triggers + CTA particles ---- */
4228window.addEventListener('load', () => {
4229  if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') return;
4230  gsap.registerPlugin(ScrollTrigger);
4231
4232  /* Scroll progress bar */
4233  gsap.to('#scrollProgress', {
4234    width: '100%', ease: 'none',
4235    scrollTrigger: { trigger: 'body', start: 'top top', end: 'bottom bottom', scrub: true }
4236  });
4237
4238  /* Character glow animation - canonical implementation from design-system.html.
4239     Pipe-delimited line breaks. Word-preserving splits. GSAP stagger + onComplete settle. */
4240  document.querySelectorAll('[data-char-glow]').forEach((el) => {
4241    if (el.dataset.gsapInit) return;
4242    el.dataset.gsapInit = '1';
4243    const lines = el.innerHTML.replace(/<br\s*\/?>/gi,'|').replace(/<[^>]+>/g,'').replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&quot;/g,'"').replace(/&#0*39;/g,"'").replace(/&nbsp;/g,'\u00a0').replace(/&amp;/g,'&').trim().split('|');
4244    el.innerHTML = '';
4245    lines.forEach((line, li) => {
4246      if (li > 0) el.appendChild(document.createElement('br'));
4247      const words = line.trim().split(/\s+/);
4248      words.forEach((word, wi) => {
4249        for (let ci = 0; ci < word.length; ci++) {
4250          const span = document.createElement('span');
4251          span.className = 'char';
4252          span.textContent = word[ci];
4253          el.appendChild(span);
4254        }
4255        if (wi < words.length - 1) el.appendChild(document.createTextNode(' '));
4256      });
4257    });
4258    const chars = el.querySelectorAll('.char');
4259    gsap.set(chars, { opacity: 0.2, color: 'var(--accent-bright)' });
4260    ScrollTrigger.create({
4261      trigger: el,
4262      start: 'top 95%',
4263      once: true,
4264      onEnter() {
4265        const bright = (getComputedStyle(document.body).getPropertyValue('--accent-bright').trim() || '#7bc6ff');
4266        gsap.to(chars, {
4267          opacity: 1, color: 'var(--text)',
4268          textShadow: '0 0 12px ' + bright + '80',
4269          duration: 0.4, stagger: 0.02, ease: 'power2.out',
4270          onComplete() {
4271            gsap.to(chars, { textShadow: '0 0 0px transparent', duration: 0.6, stagger: 0.015, ease: 'power1.out' });
4272          }
4273        });
4274      }
4275    });
4276  });
4277
4278  /* Process steps - activate each as it scrolls into view (canonical pattern) */
4279  document.querySelectorAll('.process-step').forEach((step, i) => {
4280    ScrollTrigger.create({
4281      trigger: step, start: 'top 80%', end: 'bottom 20%',
4282      onEnter: () => step.classList.add('active'),
4283      onEnterBack: () => step.classList.add('active'),
4284    });
4285  });
4286
4287  /* Nav subtle darken on scroll (canonical) */
4288  const nav = document.querySelector('.nav');
4289  window.addEventListener('scroll', () => {
4290    if (nav) nav.style.background = window.scrollY > 100 ? 'rgba(8,12,20,0.88)' : 'rgba(8,12,20,0.68)';
4291  }, { passive: true });
4292
4293  /* CTA Particle Canvas - canonical edge-converge implementation from design-system.html */
4294  const ctaCanvas = document.getElementById('ctaCanvas');
4295  if (ctaCanvas && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
4296    const ctx = ctaCanvas.getContext('2d');
4297    const particles = [];
4298    const PARTICLE_COUNT = 600;
4299    function resizeCtaCanvas() {
4300      const r = ctaCanvas.parentElement.getBoundingClientRect();
4301      ctaCanvas.width = r.width; ctaCanvas.height = r.height;
4302    }
4303    resizeCtaCanvas();
4304    window.addEventListener('resize', resizeCtaCanvas);
4305    for (let pi = 0; pi < PARTICLE_COUNT; pi++) {
4306      const edge = Math.random() * 4 | 0;
4307      let px, py;
4308      if (edge === 0) { px = Math.random(); py = 0; }
4309      else if (edge === 1) { px = 1; py = Math.random(); }
4310      else if (edge === 2) { px = Math.random(); py = 1; }
4311      else { px = 0; py = Math.random(); }
4312      particles.push({
4313        x: px, y: py,
4314        tx: 0.4 + Math.random() * 0.2, ty: 0.4 + Math.random() * 0.2,
4315        speed: 0.0003 + Math.random() * 0.0008,
4316        size: 0.5 + Math.random() * 1.5,
4317        opacity: 0.05 + Math.random() * 0.2
4318      });
4319    }
4320    function drawCta() {
4321      ctx.clearRect(0, 0, ctaCanvas.width, ctaCanvas.height);
4322      const accentHex = (getComputedStyle(document.body).getPropertyValue('--accent').trim() || '#2d62ff');
4323      const r = parseInt(accentHex.slice(1,3),16), g = parseInt(accentHex.slice(3,5),16), b = parseInt(accentHex.slice(5,7),16);
4324      for (let i = 0; i < particles.length; i++) {
4325        const p = particles[i];
4326        p.x += (p.tx - p.x) * p.speed;
4327        p.y += (p.ty - p.y) * p.speed;
4328        const dist = Math.hypot(p.x - p.tx, p.y - p.ty);
4329        if (dist < 0.01) {
4330          const edge = Math.random() * 4 | 0;
4331          if (edge === 0) { p.x = Math.random(); p.y = 0; }
4332          else if (edge === 1) { p.x = 1; p.y = Math.random(); }
4333          else if (edge === 2) { p.x = Math.random(); p.y = 1; }
4334          else { p.x = 0; p.y = Math.random(); }
4335        }
4336        ctx.beginPath();
4337        ctx.arc(p.x * ctaCanvas.width, p.y * ctaCanvas.height, p.size, 0, Math.PI * 2);
4338        ctx.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + p.opacity + ')';
4339        ctx.fill();
4340      }
4341      requestAnimationFrame(drawCta);
4342    }
4343    /* cta-particles-fix-2026-05-17 */
4344    (function(){
4345      var fired = false;
4346      function fire(){ if (fired) return; fired = true; drawCta(); }
4347      if ('IntersectionObserver' in window) {
4348        var io = new IntersectionObserver(function(entries){
4349          entries.forEach(function(e){ if (e.isIntersecting) fire(); });
4350        }, { threshold: 0.05 });
4351        io.observe(ctaCanvas.parentElement);
4352      } else {
4353        fire();
4354      }
4355      if (typeof ScrollTrigger !== 'undefined') {
4356        ScrollTrigger.create({
4357          trigger: ctaCanvas.parentElement,
4358          start: 'top bottom', end: 'bottom top',
4359          onEnter: fire, onEnterBack: fire
4360        });
4361      }
4362    })();
4363  }
4364
4365});
4366
4367
4368
4369/* ---- HERO BG: custom mouse-reactive GLSL shader (modal.com-style gradient mesh).
4370   Domain-warped FBM noise. Mouse position warps the field + adds a soft glow
4371   at the cursor. Blue-only palette. Runs at ~0.1ms/frame on M-class GPUs. ---- */
4372window.addEventListener('load', () => {
4373  const REDUCED = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
4374  const canvas = document.getElementById('heroFluidInk');
4375  if (!canvas) return;
4376  const gl = canvas.getContext('webgl', { antialias: false, premultipliedAlpha: false })
4377         || canvas.getContext('experimental-webgl');
4378  if (!gl) return;
4379
4380  // Pause the rAF draw loop when the hero scrolls out of view. Saves
4381  // ~0.1ms per frame * 60fps continuously while the user is reading
4382  // anything below the fold. Local override of requestAnimationFrame
4383  // inside this IIFE only — does not touch window.requestAnimationFrame
4384  // so other site animations (GSAP, ScrollTrigger) are unaffected.
4385  let __heroVisible = true;
4386  const __hero = canvas.closest('.hero') || canvas.parentElement;
4387  if (__hero && typeof IntersectionObserver === 'function') {
4388    new IntersectionObserver((entries) => {
4389      __heroVisible = entries[0].isIntersecting;
4390    }, { threshold: 0 }).observe(__hero);
4391  }
4392  const __raf = window.requestAnimationFrame.bind(window);
4393  function requestAnimationFrame(cb) {
4394    return __raf(function (t) {
4395      if (!__heroVisible) { requestAnimationFrame(cb); return; }
4396      cb(t);
4397    });
4398  }
4399
4400  const DPR = Math.min(window.devicePixelRatio || 1, 1.5);
4401  const host = canvas.parentElement;
4402
4403  const vertSrc = 'attribute vec2 a_pos; void main(){ gl_Position = vec4(a_pos, 0.0, 1.0); }';
4404  const fragSrc = `
4405    precision highp float;
4406    uniform vec2  u_res;
4407    uniform float u_time;
4408    uniform vec2  u_mouse;   /* normalized 0..1, y flipped to GL */
4409    uniform float u_mActive;
4410
4411    float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
4412    float noise(vec2 p){
4413      vec2 i = floor(p), f = fract(p);
4414      vec2 u = f*f*(3.0-2.0*f);
4415      return mix(
4416        mix(hash(i), hash(i+vec2(1.0,0.0)), u.x),
4417        mix(hash(i+vec2(0.0,1.0)), hash(i+vec2(1.0,1.0)), u.x),
4418      u.y);
4419    }
4420    float fbm(vec2 p){
4421      float v = 0.0, a = 0.5;
4422      for (int i = 0; i < 5; i++){ v += a * noise(p); p *= 2.05; a *= 0.5; }
4423      return v;
4424    }
4425
4426    void main(){
4427      vec2 uv = gl_FragCoord.xy / u_res.xy;
4428      vec2 p  = uv;
4429      p.x *= u_res.x / u_res.y;
4430
4431      float t = u_time * 0.06;
4432
4433      /* Mouse-biased domain warp. The warp vectors are offset by the cursor,
4434         so moving the mouse shifts the visible mesh. */
4435      vec2 md = uv - u_mouse;
4436      vec2 warp1 = vec2(
4437        fbm(p + vec2(t, 0.0) + md * 1.2),
4438        fbm(p + vec2(0.0, t) + md * 1.2)
4439      );
4440      vec2 warp2 = vec2(
4441        fbm(p + warp1 * 1.6 + vec2(t * 0.7, 0.0)),
4442        fbm(p + warp1 * 1.6 + vec2(0.0, t * 0.9))
4443      );
4444      float d = fbm(p + warp2 * 2.2);
4445
4446      /* Soft glow at cursor. Active only when the mouse has moved inside.
4447         Tuned dim: tighter falloff (5.5), lower intensity (0.22). */
4448      float mDist = length(md * vec2(u_res.x / u_res.y, 1.0));
4449      float mouseGlow = exp(-mDist * 5.5) * 0.22 * u_mActive;
4450      d += mouseGlow;
4451
4452      /* Brand palette - deep navy → mid blue → bright cyan */
4453      vec3 cDark  = vec3(0.015, 0.030, 0.075);
4454      vec3 cMid   = vec3(0.115, 0.260, 0.700);
4455      vec3 cHi    = vec3(0.480, 0.780, 1.000);
4456
4457      vec3 col = mix(cDark, cMid, smoothstep(0.30, 0.72, d));
4458      col = mix(col, cHi, smoothstep(0.72, 0.96, d) * 0.70);
4459
4460      /* Left-edge attenuation so the headline area stays dark for text readability. */
4461      float leftFade = smoothstep(0.00, 0.42, uv.x);
4462      col *= 0.25 + leftFade * 0.75;
4463
4464      /* Slight bottom vignette to help content card settle */
4465      col *= smoothstep(0.0, 0.18, uv.y);
4466
4467      gl_FragColor = vec4(col, 1.0);
4468    }
4469  `;
4470
4471  function compile(type, src) {
4472    const s = gl.createShader(type);
4473    gl.shaderSource(s, src);
4474    gl.compileShader(s);
4475    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
4476      console.error('shader compile', gl.getShaderInfoLog(s));
4477      return null;
4478    }
4479    return s;
4480  }
4481  const vs = compile(gl.VERTEX_SHADER, vertSrc);
4482  const fs = compile(gl.FRAGMENT_SHADER, fragSrc);
4483  if (!vs || !fs) return;
4484  const prog = gl.createProgram();
4485  gl.attachShader(prog, vs); gl.attachShader(prog, fs); gl.linkProgram(prog);
4486  if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
4487    console.error('program link', gl.getProgramInfoLog(prog));
4488    return;
4489  }
4490  gl.useProgram(prog);
4491
4492  const buf = gl.createBuffer();
4493  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
4494  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,  1,-1, -1, 1,  -1, 1,  1,-1,  1, 1]), gl.STATIC_DRAW);
4495  const aPos = gl.getAttribLocation(prog, 'a_pos');
4496  gl.enableVertexAttribArray(aPos);
4497  gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
4498
4499  const uRes    = gl.getUniformLocation(prog, 'u_res');
4500  const uTime   = gl.getUniformLocation(prog, 'u_time');
4501  const uMouse  = gl.getUniformLocation(prog, 'u_mouse');
4502  const uMActive = gl.getUniformLocation(prog, 'u_mActive');
4503
4504  function resize() {
4505    const r = host.getBoundingClientRect();
4506    canvas.width  = Math.max(320, Math.floor(r.width  * DPR));
4507    canvas.height = Math.max(240, Math.floor(r.height * DPR));
4508    canvas.style.width  = r.width  + 'px';
4509    canvas.style.height = r.height + 'px';
4510    gl.viewport(0, 0, canvas.width, canvas.height);
4511  }
4512  resize();
4513  new ResizeObserver(resize).observe(host);
4514
4515  /* Mouse tracking. Listen on document so events fire even over UI layers.
4516     Translate to hero-local normalized coords. */
4517  let tmx = 0.7, tmy = 0.45, mx = 0.7, my = 0.45, mA = 0.0;
4518  const onMove = (e) => {
4519    const r = host.getBoundingClientRect();
4520    tmx = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width));
4521    tmy = Math.max(0, Math.min(1, 1.0 - (e.clientY - r.top) / r.height)); /* flip to GL */
4522    mA = 1.0;
4523  };
4524  document.addEventListener('mousemove', onMove, { passive: true });
4525  document.addEventListener('touchmove', (e) => { if (e.touches[0]) onMove(e.touches[0]); }, { passive: true });
4526
4527  const start = performance.now();
4528  function draw() {
4529    const t = (performance.now() - start) * 0.001;
4530    mx += (tmx - mx) * 0.06;
4531    my += (tmy - my) * 0.06;
4532    gl.uniform2f(uRes, canvas.width, canvas.height);
4533    gl.uniform1f(uTime, REDUCED ? 0 : t);
4534    gl.uniform2f(uMouse, mx, my);
4535    gl.uniform1f(uMActive, mA);
4536    gl.drawArrays(gl.TRIANGLES, 0, 6);
4537    if (!REDUCED) requestAnimationFrame(draw);
4538  }
4539  draw();
4540});
4541
4542</script>
4542
4543<!-- AKWriter:nav-toggle-js -->
4544<script>
4545(function(){
4546  var toggle=document.querySelector('.nav-mobile-toggle');
4547  if(toggle){
4548    toggle.addEventListener('click',function(){
4549      var nav=toggle.closest('nav');
4550      var open=nav.getAttribute('data-open')==='true';
4551      nav.setAttribute('data-open',open?'false':'true');
4552      toggle.setAttribute('aria-expanded',open?'false':'true');
4553    });
4554  }
4555  document.querySelectorAll('.nav-dd-trigger').forEach(function(btn){
4556    btn.addEventListener('click',function(e){
4557      if(window.matchMedia('(max-width: 880px)').matches){
4558        e.preventDefault();
4559        var dd=btn.closest('.nav-dd');
4560        var open=dd.getAttribute('data-open')==='true';
4561        dd.setAttribute('data-open',open?'false':'true');
4562        btn.setAttribute('aria-expanded',open?'false':'true');
4563      }
4564    });
4565  });
4566
4567  /* Remember which top-nav menu (Services / Solutions / Industries) a link was
4568     clicked from, so the destination page highlights THAT menu as active even
4569     when the destination's own page-type classification would otherwise pick
4570     a different one (e.g. a Solutions card whose only link is the parent
4571     offering page, which is also reachable from Services). Session-scoped:
4572     read once on load then cleared, so it only affects the page you actually
4573     navigated to and doesn't leak into later unrelated navigation. */
4574  try {
4575    document.querySelectorAll('.nav-dd[data-nav-key] .nav-dd-panel a[href]').forEach(function(link){
4576      link.addEventListener('click', function(){
4577        var key = link.closest('.nav-dd[data-nav-key]').getAttribute('data-nav-key');
4578        try { sessionStorage.setItem('akNavSource', key); } catch(e) {}
4579      });
4580    });
4581    var sourceKey = sessionStorage.getItem('akNavSource');
4582    if (sourceKey) {
4583      sessionStorage.removeItem('akNavSource');
4584      var target = document.querySelector('.nav-dd[data-nav-key="' + sourceKey + '"]');
4585      if (target && !target.classList.contains('is-active')) {
4586        document.querySelectorAll('.nav-dd.is-active').forEach(function(dd){ dd.classList.remove('is-active'); });
4587        target.classList.add('is-active');
4588      }
4589    }
4590  } catch(e) {}
4591})();
4592</script>
4592
4593
4594
4595<script>
4596// Credentials — synced badge display + tab switcher
4597(function() {
4598  var displayImg = document.querySelector('.cred-badge-display-img');
4599  if (!displayImg) return;
4600
4601  function setActive(item) {
4602    if (!item) return;
4603    document.querySelectorAll('.cred-badge-item').forEach(function(el) { el.classList.remove('cred-badge-item--active'); });
4604    item.classList.add('cred-badge-item--active');
4605    displayImg.style.opacity = '0';
4606    displayImg.style.transform = 'scale(0.92)';
4607    setTimeout(function() {
4608      displayImg.src = item.getAttribute('data-badge-src') || '';
4609      displayImg.alt = item.getAttribute('data-badge-alt') || '';
4610      displayImg.style.opacity = '1';
4611      displayImg.style.transform = 'scale(1)';
4612    }, 120);
4613  }
4614
4615  // Init: show first badge of active tab
4616  var activePane = document.querySelector('.cred-tab-pane.active');
4617  if (activePane) setActive(activePane.querySelector('.cred-badge-item'));
4618
4619  // Hover → show that badge
4620  document.querySelectorAll('.cred-badge-item').forEach(function(item) {
4621    item.addEventListener('mouseenter', function() { setActive(this); });
4622  });
4623
4624  // Scroll → show first item entering the viewport of the list
4625  document.querySelectorAll('.cred-badge-list').forEach(function(list) {
4626    list.addEventListener('scroll', function() {
4627      var items = list.querySelectorAll('.cred-badge-item');
4628      var listRect = list.getBoundingClientRect();
4629      for (var i = 0; i < items.length; i++) {
4630        var r = items[i].getBoundingClientRect();
4631        if (r.bottom > listRect.top + 8) { setActive(items[i]); break; }
4632      }
4633    }, { passive: true });
4634  });
4635
4636  // Tab switch → show first badge of new tab
4637  document.querySelectorAll('.cred-tab').forEach(function(tab) {
4638    tab.addEventListener('click', function() {
4639      var target = this.getAttribute('data-tab');
4640      document.querySelectorAll('.cred-tab').forEach(function(t) { t.classList.remove('active'); });
4641      document.querySelectorAll('.cred-tab-pane').forEach(function(p) { p.classList.remove('active'); });
4642      this.classList.add('active');
4643      var pane = document.getElementById('cred-pane-' + target);
4644      if (pane) {
4645        pane.classList.add('active');
4646        var list = pane.querySelector('.cred-badge-list');
4647        if (list) list.scrollTop = 0;
4648        setActive(pane.querySelector('.cred-badge-item'));
4649      }
4650    });
4651  });
4652})();
4653</script>
4653
4654<!-- AKWriter:consent start -->
4655<div id="ak-consent" role="dialog" aria-labelledby="ak-consent-t" aria-describedby="ak-consent-d">
4656  <div class="ak-consent-in">
4657    <div class="ak-consent-copy">
4658      <strong id="ak-consent-t">Cookies on armakuni.com</strong>
4659      <span id="ak-consent-d">We use essential cookies to run the site. With your permission we also use analytics cookies to understand which pages are useful, and advertising cookies to measure our LinkedIn campaigns. See our <a href="/cookie-policy">cookie policy</a> and <a href="/privacy-policy">privacy policy</a>.</span>
4660    </div>
4661    <div class="ak-consent-actions">
4662      <button type="button" class="ak-consent-btn" data-link data-ak-consent="settings" aria-expanded="false" aria-controls="ak-consent-detail">Settings</button>
4663      <button type="button" class="ak-consent-btn" data-ak-consent="reject">Reject all</button>
4664      <button type="button" class="ak-consent-btn" data-primary data-ak-consent="accept">Accept all</button>
4665    </div>
4666    <div class="ak-consent-detail" id="ak-consent-detail">
4667      <div class="ak-consent-row">
4668        <input type="checkbox" id="ak-c-ess" checked disabled>
4669        <div><b>Essential</b><span>Required for the site to work. Always on, no consent needed.</span></div>
4670      </div>
4671      <div class="ak-consent-row">
4672        <input type="checkbox" id="ak-c-analytics">
4673        <div><b>Analytics</b><span>Google Analytics 4 (_ga, _ga_&lt;id&gt;). Which pages get read, and how people arrive.</span></div>
4674      </div>
4675      <div class="ak-consent-row">
4676        <input type="checkbox" id="ak-c-ads">
4677        <div><b>Advertising</b><span>LinkedIn Insight Tag (bcookie, li_sugr, UserMatchHistory). Measures LinkedIn campaigns.</span></div>
4678      </div>
4679      <div class="ak-consent-actions" style="margin-top:10px">
4680        <button type="button" class="ak-consent-btn" data-primary data-ak-consent="save">Save choices</button>
4681      </div>
4682    </div>
4683  </div>
4684</div>
4685<style>
4686#ak-consent{position:fixed;left:0;right:0;bottom:0;z-index:1300;display:none;padding:16px 20px;background:rgba(5,5,12,0.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--border-hover,rgba(255,255,255,0.14));font-family:var(--font-body,'Inter',sans-serif);color:var(--text,#ebf1fb)}
4687#ak-consent[data-open="1"]{display:block}
4688.ak-consent-in{max-width:1180px;margin:0 auto;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
4689.ak-consent-copy{flex:1 1 420px;min-width:280px;font-size:13px;line-height:1.55;color:var(--text-secondary,rgba(235,241,251,0.72))}
4690.ak-consent-copy strong{display:block;font-weight:500;color:var(--text,#ebf1fb);margin-bottom:3px}
4691.ak-consent-copy a{color:var(--color-bright,#7bc6ff);text-decoration:underline;text-underline-offset:2px}
4692.ak-consent-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
4693.ak-consent-btn{font:inherit;font-size:13px;line-height:1;cursor:pointer;padding:11px 18px;border-radius:var(--radius-sm,10px);border:1px solid var(--border-hover,rgba(255,255,255,0.14));background:transparent;color:var(--text,#ebf1fb);transition:border-color .2s,background-color .2s}
4694.ak-consent-btn:hover{border-color:var(--color-cyan,#009be5);background:rgba(255,255,255,0.04)}
4695.ak-consent-btn:focus-visible{outline:2px solid var(--color-bright,#7bc6ff);outline-offset:2px}
4696.ak-consent-btn[data-primary]{background:var(--color-cyan,#009be5);border-color:var(--color-cyan,#009be5);color:#05050c;font-weight:500}
4697.ak-consent-btn[data-primary]:hover{background:var(--color-bright,#7bc6ff);border-color:var(--color-bright,#7bc6ff)}
4698.ak-consent-btn[data-link]{border-color:transparent;padding:11px 10px;color:var(--text-muted,rgba(235,241,251,0.55));text-decoration:underline;text-underline-offset:2px}
4699.ak-consent-btn[data-link]:hover{background:transparent;color:var(--text,#ebf1fb);border-color:transparent}
4700.ak-consent-detail{display:none;flex:1 1 100%;margin-top:4px;padding-top:14px;border-top:1px solid var(--border,rgba(255,255,255,0.04))}
4701.ak-consent-detail[data-open="1"]{display:block}
4702.ak-consent-row{display:flex;gap:12px;align-items:flex-start;padding:9px 0;font-size:13px;line-height:1.5}
4703.ak-consent-row input{margin-top:3px;width:15px;height:15px;flex:0 0 auto;accent-color:var(--color-cyan,#009be5)}
4704.ak-consent-row b{display:block;font-weight:500;color:var(--text,#ebf1fb)}
4705.ak-consent-row span{color:var(--text-muted,rgba(235,241,251,0.55));font-size:12px}
4706/* 44px min touch target on mobile — WCAG 2.5.8 only asks for 24px, but Ap
4706ple
4707   HIG and Material both specify 44/48, and at 11px padding these came out 37px. */
4708@media (max-width:640px){#ak-consent{padding:14px 16px}.ak-consent-actions{width:100%}.ak-consent-btn{flex:1 1 auto;text-align:center;min-height:44px}}
4709@media (prefers-reduced-motion:reduce){.ak-consent-btn{transition:none}}
4710</style>
4711<script>
4712(function(){
4713  var KEY='ak_consent_v1',VER='v1';
4714  var el=document.getElementById('ak-consent');
4715  if(!el)return;
4716  var detail=document.getElementById('ak-consent-detail');
4717  var cbA=document.getElementById('ak-c-analytics'),cbD=document.getElementById('ak-c-ads');
4718  /* The banner is position:fixed and reserves no layout space. At <=640px its
4719     action buttons stack full-width and it grows from 117px to 217px tall, deep
4720     enough to sit over a page's bottom-most CTA and swallow the tap (measured:
4721     banner y627-844 vs RSVP button y724-772 at 390px wide). Reserve its height
4722     as page padding while it is open, and match scroll-padding so anchor jumps
4723     like #rsvp do not land underneath it.
4724
4725     Applied as inline style rather than a stylesheet rule on purpose. A global
4726     body padding-bottom rule shipped to every page would sit after all four
4727     stylesheet links and silently win the cascade against any future body
4728     padding rule in base.css. Clearing to an empty string removes the
4729     declaration outright, so a closed banner leaves no footprint at all.
4730
4731     Height changes with viewport width and when the Settings panel expands, so
4732     re-measure on every state change and on resize/orientationchange rather
4733     than hardcoding a value. */
4734  function syncHeight(){
4735    var h=el.getAttribute('data-open')==='1'?el.offsetHeight+'px':'';
4736    document.body.style.paddingBottom=h;
4737    document.documentElement.style.scrollPaddingBottom=h;
4738  }
4739  function save(analytics,ads){
4740    /* Only a version stamp, two booleans and a timestamp. Nothing identifying
4741       is ever stored here or pushed to the dataLayer. */
4742    try{localStorage.setItem(KEY,JSON.stringify({v:VER,analytics:!!analytics,ads:!!ads,ts:Date.now()}));}catch(e){console.warn('[Consent] Failed to persist choice; it will not survive a reload.');}
4743    if(typeof gtag==='function'){
4744      gtag('consent','update',{
4745        analytics_storage:analytics?'granted':'denied',
4746        ad_storage:ads?'granted':'denied',
4747        ad_user_data:ads?'granted':'denied',
4748        ad_personalization:ads?'granted':'denied'
4749      });
4750    }
4751    (window.dataLayer=window.dataLayer||[]).push({event:'ak_consent_update',consent_analytics:!!analytics,consent_ads:!!ads});
4752    if(analytics&&typeof window.__akClarityLoad==='function')window.__akClarityLoad();
4753    el.removeAttribute('data-open');
4754    syncHeight();
4755  }
4756  el.addEventListener('click',function(e){
4757    var btn=e.target.closest('[data-ak-consent]');
4758    if(!btn)return;
4759    var a=btn.getAttribute('data-ak-consent');
4760    if(a==='accept')save(true,true);
4761    else if(a==='reject')save(false,false);
4762    else if(a==='save')save(cbA.checked,cbD.checked);
4763    else if(a==='settings'){
4764      var open=detail.getAttribute('data-open')==='1';
4765      if(open)detail.removeAttribute('data-open');else detail.setAttribute('data-open','1');
4766      btn.setAttribute('aria-expanded',open?'false':'true');
4767      syncHeight();
4768    }
4769  });
4770  var stored=null;
4771  try{stored=JSON.parse(localStorage.getItem(KEY)||'null');}catch(e){}
4772  if(!stored||stored.v!==VER)el.setAttribute('data-open','1');
4773  /* Measure once now, then again after layout settles. A first-paint reading
4774     is taken before webfonts swap in and under-reports the height by ~20px,
4775     which would leave the page short of the space it needs to reserve. */
4776  syncHeight();
4777  requestAnimationFrame(syncHeight);
4778  window.addEventListener('load',syncHeight);
4779  if(document.fonts&&document.fonts.ready)document.fonts.ready.then(syncHeight).cat
4779ch(function(){});
4780  window.addEventListener('resize',syncHeight);
4781  window.addEventListener('orientationchange',syncHeight);
4782})();
4783</script>
4783
4784<!-- AKWriter:consent end -->
4785</body></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.