PageSourceSearch

https://frableconsulting.com/aiq

html frableconsulting.com collected 2026-10-04 18:32:22 UTC 35,805 bytes, 1,118 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="theme-color" content="#13110e">
6  <meta property="og:type" content="website">
7  <meta property="og:title" content="AIQ: AI Literacy for Leadership Teams — Frable Consulting">
8  <meta property="og:description" content="How well do you and your team know AI? AIQ is an executive AI literacy program that helps leaders and their teams move from confusion to confidence.">
9  <meta property="og:url" content="https://www.frableconsulting.com/aiq">
10  <meta property="og:site_name" content="Frable Consulting">
11  <meta name="twitter:card" content="summary_large_image">
12  <meta name="twitter:title" content="AIQ: AI Literacy for Leadership Teams — Frable Consulting">
13  <meta name="twitter:description" content="How well do you and your team know AI? AIQ is an executive AI literacy program that helps leaders and their teams move from confusion to confidence.">
14<meta name="viewport" content="width=device-width, initial-scale=1.0">
15<title>AIQ — Frable Consulting</title>
16<link rel="preconnect" href="https://fonts.googleapis.com">
17<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">
18<style>
19*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
20
21body {
22  --bg: #13110e;
23  --bg-2: #1a1710;
24  --bg-3: #201d15;
25  --rule: rgba(212,190,150,0.12);
26  --text-primary: #f0ead8;
27  --text-secondary: #8a7d65;
28  --text-muted: #4a4030;
29  --accent: #c8a96a;
30  --accent-dim: #7a6340;
31  --tag-color: #a07848;
32  background: #13110e;
33  color: #f0ead8;
34  font-family: 'DM Sans', sans-serif;
35  font-weight: 300;
36  -webkit-font-smoothing: antialiased;
37  line-height: 1.7;
38}
39
40/* NAV */
41nav {
42  position: fixed;
43  top: 0; left: 0; right: 0;
44  z-index: 100;
45  display: flex;
46  justify-content: space-between;
47  align-items: center;
48  padding: 1.75rem 3.5rem;
49  border-bottom: 1px solid var(--rule);
50  background: var(--bg);
51}
52
53.nav-logo {
54  font-family: 'DM Sans', sans-serif;
55  font-size: 0.7rem;
56  font-weight: 500;
57  letter-spacing: 0.2em;
58  text-transform: uppercase;
59  color: var(--text-primary);
60  text-decoration: none;
61}
62
63.nav-links {
64  display: flex;
65  gap: 2.5rem;
66  list-style: none;
67  align-items: center;
68}
69
70.nav-links a {
71  font-size: 0.7rem;
72  letter-spacing: 0.1em;
73  text-transform: uppercase;
74  color: var(--text-secondary);
75  text-decoration: none;
76  transition: color 0.2s;
77}
78
79.nav-links a:hover, .nav-links a.active { color: var(--text-primary); }
80.nav-links .nav-cta { color: var(--accent); border-bottom: 1px solid var(--accent-dim); padding-bottom: 1px; }
81
82/* MOBILE NAV */
83.nav-hamburger {
84  display: none;
85  flex-direction: column;
86  gap: 5px;
87  cursor: pointer;
88  padding: 4px;
89  background: none;
90  border: none;
91  min-width: 44px;
92  min-height: 44px;
93  justify-content: center;
94  align-items: center;
95}
96
97.nav-hamburger span {
98  display: block;
99  width: 22px;
100  height: 1px;
101  background: var(--text-secondary);
102  transition: all 0.3s;
103}
104
105.nav-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
106.nav-hamburger.open span:nth-child(2) { opacity: 0; }
107.nav-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
108
109.mobile-menu {
110  display: none;
111  position: fixed;
112  top: 0; left: 0; right: 0; bottom: 0;
113  background: var(--bg);
114  z-index: 99;
115  flex-direction: column;
116  justify-content: center;
117  align-items: center;
118  gap: 2.5rem;
119}
120
121.mobile-menu.open { display: flex; }
122
123.mobile-menu a {
124  font-size: 1.5rem;
125  font-family: 'Libre Baskerville', serif;
126  color: var(--text-primary);
127  text-decoration: none;
128  transition: color 0.2s;
129  min-height: 44px;
130  display: flex;
131  align-items: center;
132}
133
134.mobile-menu a:hover { color: var(--accent); }
135.mobile-menu .mobile-cta { color: var(--accent); }
136
137/* HERO */
138.hero {
139  min-height: 100vh;
140  display: flex;
141  flex-direction: column;
142  justify-content: flex-end;
143  padding: 8rem 3.5rem 6rem;
144  border-bottom: 1px solid var(--rule);
145  position: relative;
146}
147
148.hero-eyebrow {
149  font-size: 0.65rem;
150  letter-spacing: 0.25em;
151  text-transform: uppercase;
152  color: var(--tag-color);
153  margin-bottom: 2.5rem;
154  display: flex;
155  align-items: center;
156  gap: 1rem;
157}
158
159.hero-eyebrow::before {
160  content: '';
161  width: 24px;
162  height: 1px;
163  background: var(--tag-color);
164}
165
166.hero-headline {
167  font-family: 'Libre Baskerville', serif;
168  font-size: clamp(3.2rem, 6.5vw, 6rem);
169  font-weight: 400;
170  line-height: 1.1;
171  letter-spacing: -0.02em;
172  color: var(--text-primary);
173  max-width: 820px;
174  margin-bottom: 3rem;
175}
176
177.hero-headline em { font-style: italic; color: var(--accent); }
178
179.hero-sub {
180  font-size: 1rem;
181  color: var(--text-secondary);
182  max-width: 500px;
183  line-height: 1.85;
184  font-weight: 300;
185  margin-bottom: 3.5rem;
186}
187
188.cta-btn {
189  display: inline-flex;
190  align-items: center;
191  gap: 1rem;
192  color: var(--text-primary);
193  text-decoration: none;
194  font-size: 0.7rem;
195  letter-spacing: 0.18em;
196  text-transform: uppercase;
197  font-weight: 500;
198  border-bottom: 1px solid var(--rule);
199  padding-bottom: 0.75rem;
200  transition: gap 0.25s, color 0.25s, border-color 0.25s;
201  width: fit-content;
202  min-height: 44px;
203  align-items: flex-end;
204}
205
206.cta-btn:hover { gap: 1.5rem; color: var(--accent); border-color: var(--accent); }
207
208/* SECTIONS */
209.section {
210  padding: 7rem 3.5rem;
211  border-bottom: 1px solid var(--rule);
212}
213
214.section-label {
215  font-size: 0.6rem;
216  letter-spacing: 0.3em;
217  text-transform: uppercase;
218  color: var(--tag-color);
219  margin-bottom: 4rem;
220  display: flex;
221  align-items: center;
222  gap: 1rem;
223}
224
225.section-label::after {
226  content: '';
227  height: 1px;
228  flex: 0 0 32px;
229  background: var(--tag-color);
230}
231
232.hero-note {
233  margin-top: 1.5rem;
234  font-size: 0.75rem;
235  color: var(--text-muted);
236}
237
238.hero-note a {
239  color: var(--accent-dim);
240  text-decoration: none;
241  transition: color 0.2s;
242}
243
244.hero-note a:hover { color: var(--accent); }
245
246/* ASSESSMENT PLACEHOLDER */
247.assessment-section {
248  background: var(--bg-2);
249  border-bottom: 1px solid var(--rule);
250  padding: 7rem 3.5rem;
251}
252
253.assessment-inner {
254  max-width: 680px;
255  margin-left: auto;
256  margin-right: auto;
257  margin: 0 auto;
258  text-align: center;
259}
260
261.assessment-inner .section-label {
262  justify-content: center;
263}
264
265.assessment-inner .section-label::after { display: none; }
266.assessment-inner .section-label::before {
267  content: '';
268  height: 1px;
269  flex: 0 0 32px;
270  background: var(--tag-color);
271}
272
273.assessment-title {
274  font-family: 'Libre Baskerville', serif;
275  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
276  font-weight: 400;
277  line-height: 1.3;
278  color: var(--text-primary);
279  margin-bottom: 1.25rem;
280}
281
282.assessment-body {
283  font-size: 0.9rem;
284  color: var(--text-secondary);
285  line-height: 1.85;
286  margin-bottom: 3rem;
287  font-weight: 300;
288}
289
290.assessment-zones {
291  display: grid;
292  grid-template-columns: repeat(3, 1fr);
293  gap: 2px;
294  background: var(--rule);
295  margin-bottom: 3rem;
296}
297
298.zone {
299  padding: 2.25rem 1.75rem 2.5rem;
300  text-align: left;
301  position: relative;
302}
303
304.zone-red { background: linear-gradient(180deg, rgba(231,76,60,0.10), rgba(231,76,60,0.02) 60%), #191512; border-top: 2px solid #e74c3c; }
305.zone-yellow { background: linear-gradient(180deg, rgba(241,196,15,0.09), rgba(241,196,15,0.02) 60%), #191512; border-top: 2px solid #f1c40f; }
306.zone-green { background: linear-gradient(180deg, rgba(46,204,113,0.10), rgba(46,204,113,0.02) 60%), #191512; border-top: 2px solid #2ecc71; }
307
308.zone-dot {
309  width: 11px;
310  height: 11px;
311  border-radius: 50%;
312  margin: 0 0 1.1rem;
313}
314
315@media (max-width: 860px) {
316  .assessment-zones { grid-template-columns: 1fr; }
317  .zone { padding: 1.6rem 1.5rem 1.8rem; }
318  .zone-dot { float: left; margin: 0.3rem 0.8rem 0 0; }
319  .zone-desc { clear: none; }
320}
321
322.zone-red .zone-dot { background: #e74c3c; box-shadow: 0 0 8px rgba(231,76,60,0.5); }
323.zone-yellow .zone-dot { background: #f1c40f; box-shadow: 0 0 8px rgba(241,196,15,0.5); }
324.zone-green .zone-dot { background: #2ecc71; box-shadow: 0 0 8px rgba(46,204,113,0.5); }
325
326.zone-label {
327  font-size: 0.72rem;
328  letter-spacing: 0.2em;
329  text-transform: uppercase;
330  margin-bottom: 0.75rem;
331  font-weight: 500;
332}
333
334.zone-red .zone-label { color: #e74c3c; }
335.zone-yellow .zone-label { color: #f1c40f; }
336.zone-green .zone-label { color: #2ecc71; }
337
338.zone-desc {
339  font-size: 0.8rem;
340  color: #a89880;
341  line-height: 1.75;
342}
343
344.assessment-coming {
345  display: inline-flex;
346  align-items: center;
347  gap: 0.75rem;
348  padding: 1.25rem 2.5rem;
349  border: 1px solid var(--rule);
350  font-size: 0.7rem;
351  letter-spacing: 0.15em;
352  text-transform: uppercase;
353  color: var(--text-muted);
354  font-family: 'DM Sans', sans-serif;
355}
356
357.assessment-coming .dot {
358  width: 6px;
359  height: 6px;
360  border-radius: 50%;
361  background: var(--accent);
362  animation: pulse 2s ease-in-out infinite;
363}
364
365@keyframes pulse {
366  0%, 100% { opacity: 1; }
367  50% { opacity: 0.3; }
368}
369.problem-section { background: var(--bg-2); }
370
371.problem-layout {
372  display: grid;
373  grid-template-columns: 1fr 1fr;
374  gap: 8rem;
375  max-width: 1100px;
376  margin-left: auto;
377  margin-right: auto;
378  align-items: start;
379}
380
381.problem-left p {
382  font-size: 0.975rem;
383  line-height: 1.9;
384  color: var(--text-secondary);
385  margin-bottom: 1.5rem;
386  font-weight: 300;
387}
388
389.problem-left p strong { color: var(--text-primary); font-weight: 400; }
390
391.problem-aside blockquote {
392  font-family: 'Libre Baskerville', serif;
393  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
394  font-style: italic;
395  font-weight: 400;
396  line-height: 1.55;
397  color: var(--text-primary);
398  padding-left: 2rem;
399  border-left: 1px solid var(--accent);
400}
401
402/* FOUR DIMENSIONS */
403.dimensions-section { background: var(--bg); }
404
405.dimensions-intro {
406  max-width: 620px;
407  margin-left: auto;
408  margin-right: auto;
409  margin-bottom: 5rem;
410}
411
412.dimensions-intro p {
413  font-size: 0.975rem;
414  line-height: 1.9;
415  color: var(--text-secondary);
416  font-weight: 300;
417}
418
419.dimensions-grid {
420  display: grid;
421  grid-template-columns: 1fr 1fr;
422  gap: 2px;
423  background: var(--rule);
424  max-width: 1100px;
425  margin-left: auto;
426  margin-right: auto;
427}
428
429.dimension-card {
430  background: var(--bg);
431  padding: 3rem 3.5rem;
432  transition: background 0.3s;
433  position: relative;
434}
435
436.dimension-card:hover { background: var(--bg-2); }
437
438.dimension-icon {
439  margin-bottom: 1.5rem;
440  opacity: 0.9;
441  transition: opacity 0.3s;
442}
443
444.dimension-card:hover .dimension-icon { opacity: 1; }
445
446.dimension-number {
447  font-family: 'Libre Baskerville', serif;
448  font-size: 0.75rem;
449  color: var(--text-muted);
450  font-style: italic;
451  margin-bottom: 1.25rem;
452}
453
454.dimension-headline {
455  font-family: 'Libre Baskerville', serif;
456  font-size: 1.2rem;
457  font-weight: 400;
458  line-height: 1.4;
459  color: var(--text-primary);
460  margin-bottom: 0.75rem;
461}
462
463.dimension-question {
464  font-size: 0.8rem;
465  color: var(--accent);
466  font-style: italic;
467  margin-bottom: 1.25rem;
468  font-family: 'Libre Baskerville', serif;
469}
470
471.dimension-body {
472  font-size: 0.85rem;
473  color: var(--text-secondary);
474  line-height: 1.85;
475  font-weight: 300;
476}
477
478.dimension-signal {
479  margin-top: 1.25rem;
480  padding-top: 1.25rem;
481  border-top: 1px solid var(--rule);
482  font-size: 0.8rem;
483  color: #9a8c78;
484  line-height: 1.7;
485  font-style: italic;
486}
487
488/* GAP SECTION */
489.gap-section {
490  background: var(--bg-2);
491  padding: 7rem 3.5rem;
492  border-bottom: 1px solid var(--rule);
493}
494
495.gap-inner { max-width: 700px;
496  margin-left: auto;
497  margin-right: auto; }
498
499.gap-inner blockquote {
500  font-family: 'Libre Baskerville', serif;
501  font-size: clamp(1.25rem, 2vw, 1.7rem);
502  font-weight: 400;
503  font-style: italic;
504  line-height: 1.55;
505  color: var(--text-primary);
506  padding-left: 2rem;
507  border-left: 1px solid var(--accent);
508  margin-bottom: 1.5rem;
509}
510
511.gap-inner cite {
512  font-size: 0.65rem;
513  letter-spacing: 0.15em;
514  text-transform: uppercase;
515  color: var(--text-muted);
516  font-style: normal;
517  padding-left: 2rem;
518  display: block;
519}
520
521/* HOW IT RUNS */
522.how-section { background: var(--bg); }
523
524.how-layout {
525  display: grid;
526  grid-template-columns: 1fr 1fr;
527  gap: 7rem;
528  max-width: 1100px;
529  margin-left: auto;
530  margin-right: auto;
531}
532
533.how-left p {
534  font-size: 0.975rem;
535  line-height: 1.9;
536  color: var(--text-secondary);
537  margin-bottom: 1.5rem;
538  font-weight: 300;
539}
540
541.how-left p strong { color: var(--text-primary); font-weight: 400; }
542
543.how-phases { display: flex; flex-direction: column; }
544
545.how-phase {
546  padding: 1.75rem 0;
547  border-bottom: 1px solid var(--rule);
548  display: grid;
549  grid-template-columns: 1.5rem 1fr;
550  gap: 1.25rem;
551}
552
553.how-phase:first-child { padding-top: 0; }
554.how-phase:last-child { border-bottom: none; padding-bottom: 0; }
555
556.phase-marker {
557  font-family: 'Libre Baskerville', serif;
558  font-style: italic;
559  color: var(--accent);
560  font-size: 0.9rem;
561  line-height: 1.8;
562}
563
564.phase-content strong {
565  display: block;
566  font-size: 0.85rem;
567  font-weight: 500;
568  color: var(--text-primary);
569  margin-bottom: 0.35rem;
570}
571
572.phase-content p {
573  font-size: 0.825rem;
574  color: var(--text-secondary);
575  line-height: 1.8;
576  font-weight: 300;
577}
578
579/* GOVERNANCE LADDER */
580.ladder-section { background: var(--bg-2); }
581
582.ladder-intro {
583  max-width: 600px;
584  margin-bottom: 4rem;
585}
586
587.ladder-intro p {
588  font-size: 0.975rem;
589  line-height: 1.9;
590  color: var(--text-secondary);
591  font-weight: 300;
592}
593
594.ladder-grid {
595  display: grid;
596  grid-template-columns: repeat(4, 1fr);
597  gap: 2px;
598  background: var(--rule);
599  max-width: 1100px;
600  margin-left: auto;
601  margin-right: auto;
602}
603
604.ladder-step {
605  background: var(--bg-2);
606  padding: 2.5rem 2rem;
607  transition: background 0.3s;
608}
609
610.ladder-step:hover { background: var(--bg-3); }
611
612.ladder-num {
613  font-family: 'Libre Baskerville', serif;
614  font-size: 2rem;
615  font-weight: 400;
616  color: var(--text-muted);
617  line-height: 1;
618  margin-bottom: 1rem;
619  font-style: italic;
620}
621
622.ladder-title {
623  font-size: 0.85rem;
624  font-weight: 500;
625  color: var(--text-primary);
626  letter-spacing: 0.05em;
627  margin-bottom: 0.75rem;
628  text-transform: uppercase;
629  font-size: 0.7rem;
630  letter-spacing: 0.15em;
631}
632
633.ladder-desc {
634  font-size: 0.825rem;
635  color: var(--text-secondary);
636  line-height: 1.8;
637  font-weight: 300;
638}
639
640.ladder-prompt {
641  margin-top: 4rem;
642  padding-top: 3rem;
643  border-top: 1px solid var(--rule);
644  max-width: 680px;
645  margin-left: auto;
646  margin-right: auto;
647}
648
649.ladder-prompt p {
650  font-family: 'Libre Baskerville', serif;
651  font-size: 1.1rem;
652  font-style: italic;
653  color: var(--text-secondary);
654  line-height: 1.7;
655}
656
657/* CLOSE */
658.close-section {
659  background: var(--bg);
660  padding: 9rem 3.5rem;
661  border-bottom: none;
662}
663
664.close-inner { max-width: 620px;
665  margin-left: auto;
666  margin-right: auto; }
667
668.close-headline {
669  font-family: 'Libre Baskerville', serif;
670  font-size: clamp(2rem, 3vw, 2.75rem);
671  font-weight: 400;
672  line-height: 1.25;
673  color: var(--text-primary);
674  margin-bottom: 1.75rem;
675}
676
677.close-body {
678  font-size: 0.9rem;
679  color: var(--text-secondary);
680  line-height: 1.9;
681  margin-bottom: 2rem;
682  font-weight: 300;
683  max-width: 500px;
684}
685
686/* FOOTER */
687footer {
688  background: var(--bg);
689  border-top: 1px solid var(--rule);
690  padding: 2.5rem 3.5rem;
691  display: grid;
692  grid-template-columns: 1fr auto 1fr;
693  align-items: center;
694  gap: 2rem;
695}
696
697.footer-logo { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); }
698.footer-nav { display: flex; gap: 2rem; list-style: none; }
699
700.footer-nav a {
701  font-size: 0.65rem;
702  letter-spacing: 0.1em;
703  text-transform: uppercase;
704  color: var(--text-muted);
705  text-decoration: none;
706  transition: color 0.2s;
707  min-height: 44px;
708  display: flex;
709  align-items: center;
710}
711
712.footer-nav a:hover { color: var(--text-primary); }
713.footer-right { text-align: right; font-size: 0.65rem; color: var(--text-muted); }
714.footer-right a { color: var(--accent-dim); text-decoration: none; transition: color 0.2s; }
715.footer-right a:hover { color: var(--accent); }
716
717
718/* ANIMATIONS */
719@keyframes fadeUp {
720  from { opacity: 0; transform: translateY(20px); }
721  to { opacity: 1; transform: translateY(0); }
722}
723
724.hero-eyebrow { animation: fadeUp 0.5s ease 0.1s both; }
725.hero-headline { animation: fadeUp 0.7s ease 0.25s both; }
726.hero-sub { animation: fadeUp 0.7s ease 0.4s both; }
727.hero .cta-btn { animation: fadeUp 0.7s ease 0.55s both; }
728
729/* RESPONSIVE */
730@media (max-width: 860px) {
731  nav { padding: 1.25rem 1.5rem; }
732  .nav-links { display: none; }
733  .nav-hamburger { display: flex; }
734
735  .hero { padding: 0 1.5rem 4rem; min-height: 100svh; background: #13110e; }
736  .hero-headline { font-size: clamp(2.6rem, 11vw, 3.5rem); }
737  .section, .gap-section, .close-section { padding: 5rem 1.5rem; }
738
739  .problem-layout,
740  .how-layout { grid-template-columns: 1fr; gap: 3.5rem; }
741
742  .dimensions-grid,
743  .ladder-grid { grid-template-columns: 1fr; }
744
745  footer { grid-template-columns: 1fr; padding: 2rem 1.5rem; gap: 1.5rem; }
746  .footer-right { text-align: left; }
747  .footer-nav { flex-wrap: wrap; gap: 1rem; }
748
749  body {
750    background: #13110e;
751    --bg: #13110e;
752    --bg-2: #1a1710;
753    --bg-3: #201d15;
754    --text-primary: #f0ead8;
755    --text-secondary: #a89880;
756    --text-muted: #6a5a45;
757    --rule: rgba(212,190,150,0.18);
758    --tag-color: #c8a050;
759    --accent: #d4a93a;
760    --accent-dim: #a07030;
761  }
762
763  .footer-logo,
764  .footer-nav a,
765  .footer-right,
766  .hero-meta-left,
767  .hero-meta-right {
768    color: #8a7d65;
769  }
770
771  .footer-nav a:hover { color: #f0ead8; }
772  .footer-right a { color: #c8a050; }
773}
774</style>
775<script type="application/ld+json">
776{
777  "@context": "https://schema.org",
778  "@type": "Service",
779  "name": "AIQ: AI Literacy for Leadership Teams",
780  "provider": {"@type": "Organization", "name": "Frable Consulting"},
781  "description": "AIQ measures executive AI literacy across four dimensions: Conceptual, Strategic, Governance, and Operational. Designed for C-suite leaders and their teams.",
782  "url": "https://www.frableconsulting.com/aiq",
783  "serviceType": "AI Literacy Training"
784}
785</script>
785
786  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
787  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
788  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
789  <meta property="og:image" content="https://www.frableconsulting.com/og-image.png">
790  <meta property="og:image:width" content="1200">
791  <meta property="og:image:height" content="630">
792  <meta name="twitter:image" content="https://www.frableconsulting.com/og-image.png">
793  <style id="craft">
794  /* paper grain */
795  body::after{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.035;
796    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/><feColorMatrix type="saturate" values="0"/><feColorMatrix type="saturate" values="0"/></filter><rect width="160" height="160" filter="url(%23n)"/></svg>');}
797  /* gold thread */
798  #thread-track{position:fixed;top:0;bottom:0;left:22px;width:1px;background:rgba(200,169,106,.07);z-index:60;pointer-events:none}
799  #thread{width:1px;height:0;background:linear-gradient(to bottom,rgba(200,169,106,0) 0%,#c8a96a 30%,#c8a96a 100%)}
800  @media(max-width:900px){#thread-track{left:10px}}
801  /* CTA sheen */
802  .cta-btn,.btn,.submit-btn{position:relative;overflow:hidden}
803  .cta-btn::after,.btn::after,.submit-btn::after{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;
804    background:linear-gradient(105deg,transparent,rgba(255,236,200,.16),transparent);
805    transform:skewX(-18deg);transition:left .55s ease;pointer-events:none}
806  .cta-btn:hover::after,.btn:hover::after,.submit-btn:hover::after{left:125%}
807  @media(prefers-reduced-motion:reduce){
808    .cta-btn::after,.btn::after,.submit-btn::after{display:none}
809    #thread-track{display:none}
810  }
811  </style>
812</head>
813<body>
814
815<!-- MOBILE MENU -->
816<div class="mobile-menu" id="mobileMenu">
817  <a href='/'>Home</a>
818  <a href='/coaching'>Coaching</a>
819  <a href='/aiq'>AIQ</a>
820  <a href='/about'>About</a>
821  <a href='/thinking'>Thinking</a>
822  <a class='mobile-cta' href='/contact'>Contact →</a>
823</div>
824
825<!-- NAV -->
826<nav>
827  <a class='nav-logo' href='/'>Frable Consulting</a>
828  <ul class="nav-links">
829    <li><a href='/coaching'>Coaching</a></li>
830    <li><a class='active' href='/aiq'>AIQ</a></li>
831    <li><a href='/about'>About</a></li>
832    <li><a href='/thinking'>Thinking</a></li>
833    <li><a class='nav-cta' href='/contact'>Contact →</a></li>
834  </ul>
835  <button class="nav-hamburger" id="hamburger" onclick="toggleMenu()" aria-label="Menu">
836    <span></span><span></span><span></span>
837  </button>
838</nav>
839
840<!-- HERO -->
841<section class="hero" style="background:#13110e">
842  <div class="hero-eyebrow">AIQ: AI Literacy for Leadership Teams</div>
843  <h1 class="hero-headline">
844    How well do you and your team <em>know AI?</em>
845  </h1>
846  <p class="hero-sub">
847    Start with the free individual assessment, a short questionnaire that tells you where you stand. Team assessments are available through a full AIQ engagement.
848  </p>
849  <a class='cta-btn' href='/aiq-assessment'>Take the free assessment <span>→</span></a>
850  <p class="hero-note">Also available: a full AIQ engagement for leaders and their teams. <a href="#how-it-runs">Learn how it works →</a></p>
851</section>
852
853<!-- ASSESSMENT PLACEHOLDER -->
854<section class="assessment-section" id="aiq-assessment">
855  <div class="assessment-inner">
856    <div class="section-label">Free AIQ Literacy Assessment</div>
857    <h2 class="assessment-title">Find out where you stand in under 10 minutes.</h2>
858    <p class="assessment-body">
859      The free assessment measures your own AI literacy across four dimensions. You'll get a score, a zone, and a clear sense of where to focus first. Team assessments are available by request through a full AIQ engagement.
860    </p>
861    <div class="assessment-zones">
862      <div class="zone zone-red">
863        <div class="zone-dot"></div>
864        <div class="zone-label">Red</div>
865        <p class="zone-desc">Significant gaps. Start with the fundamentals.</p>
866      </div>
867      <div class="zone zone-yellow">
868        <div class="zone-dot"></div>
869        <div class="zone-label">Yellow</div>
870        <p class="zone-desc">Partial literacy. Solid in places, guessing in others.</p>
871      </div>
872      <div class="zone zone-green">
873        <div class="zone-dot"></div>
874        <div class="zone-label">Green</div>
875        <p class="zone-desc">Strong foundation. Ready to lead in AI strategy.</p>
876      </div>
877    </div>
878    <a class='cta-btn' href='/aiq-assessment'>Take the free assessment <span>→</span></a>
879  </div>
880</section>
881
882<!-- PROBLEM -->
883<section class="section problem-section">
884  <div class="section-label">The real problem</div>
885  <div class="problem-layout">
886    <div class="problem-left">
887      <p>
888        Leaders know they need AI. What they don't know is what that actually means for their organization: what to invest in, what to govern, what to stop doing, and what decisions can't wait.
889      </p>
890      <p>
891        AIQ is designed to bridge that gap. Not with a tech briefing, but with a <strong>structured process that meets your team where it is</strong> and builds toward decisions you can act on, from literacy through execution.
892      </p>
893    </div>
894    <div class="problem-aside">
895      <blockquote>
896        "Most teams are building the plane while flying it. AIQ gives you a moment to look at what you're actually building."
897      </blockquote>
898    </div>
899  </div>
900</section>
901
902<!-- FOUR DIMENSIONS -->
903<section class="section dimensions-section">
904  <div class="section-label">How AIQ works</div>
905  <div class="dimensions-intro">
906    <p style="font-family: 'Libre Baskerville', serif; font-size: clamp(1.3rem, 2vw, 1.6rem); color: var(--text-primary); font-weight: 400; line-height: 1.5; margin-bottom: 1rem;">AIQ measures executive AI literacy across four dimensions, assessed individually and as a team.</p>
907    <p>The gap between how a leader rates themselves and how their team perceives them is often where the real work begins.
907</p>
908  </div>
909  <div class="dimensions-grid">
910    <div class="dimension-card">
911      <div class="dimension-icon">
912        <!-- Conceptual: overlapping circles suggesting understanding/perspective -->
913        <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
914          <circle cx="18" cy="24" r="11" stroke="#c8a96a" stroke-width="1" fill="none" opacity="0.9"/>
915          <circle cx="30" cy="24" r="11" stroke="#c8a96a" stroke-width="1" fill="none" opacity="0.5"/>
916          <path d="M24 14.5 C27.5 17.5 27.5 30.5 24 33.5 C20.5 30.5 20.5 17.5 24 14.5Z" stroke="#c8a96a" stroke-width="1" fill="#c8a96a" fill-opacity="0.08"/>
917        </svg>
918      </div>
919      <div class="dimension-number">01</div>
920      <div class="dimension-headline">Conceptual Literacy</div>
921      <div class="dimension-question">Do you understand what AI actually is and isn't today?</div>
922      <p class="dimension-body">Understanding of LLM capabilities and limits. Awareness of hallucinations and reasoning boundaries. Clarity on augmentation vs. automation. The ability to distinguish hype from operational reality.</p>
923      <div class="dimension-signal">Can this leader speak about AI without oversimplifying or exaggerating?</div>
924    </div>
925    <div class="dimension-card">
926      <div class="dimension-icon">
927        <!-- Strategic: ascending lines suggesting trajectory and capital allocation -->
928        <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
929          <line x1="8" y1="38" x2="8" y2="28" stroke="#c8a96a" stroke-width="1" opacity="0.4"/>
930          <line x1="16" y1="38" x2="16" y2="22" stroke="#c8a96a" stroke-width="1" opacity="0.55"/>
931          <line x1="24" y1="38" x2="24" y2="16" stroke="#c8a96a" stroke-width="1" opacity="0.7"/>
932          <line x1="32" y1="38" x2="32" y2="10" stroke="#c8a96a" stroke-width="1" opacity="0.85"/>
933          <line x1="40" y1="38" x2="40" y2="6" stroke="#c8a96a" stroke-width="1.5" opacity="1"/>
934          <polyline points="8,28 16,22 24,16 32,10 40,6" stroke="#c8a96a" stroke-width="1" fill="none" opacity="0.4" stroke-dasharray="2 2"/>
935        </svg>
936      </div>
937      <div class="dimension-number">
93702</div>
938      <div class="dimension-headline">Strategic Literacy</div>
939      <div class="dimension-question">Can you allocate capital and attention effectively in an AI-shifting market?</div>
940      <p class="dimension-body">Ability to distinguish defensive vs. offensive AI plays. Understanding of portfolio balance across experimentation, efficiency, and differentiation. Competitive signal awareness. Capacity to see where differentiation shifts.</p>
941      <div class="dimension-signal">Is AI being treated as symbolic, tactical, or strategic?</div>
942    </div>
943    <div class="dimension-card">
944      <div class="dimension-icon">
945        <!-- Governance: concentric squares suggesting layers of oversight and control -->
946        <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
947          <rect x="6" y="6" width="36" height="36" stroke="#c8a96a" stroke-width="1" fill="none" opacity="0.3"/>
948          <rect x="13" y="13" width="22" height="22" stroke="#c8a96a" stroke-width="1" fill="none" opacity="0.55"/>
949          <rect x="20" y="20" width="8" height="8" stroke="#c8a96a" stroke-width="1" fill="#c8a96a" fill-opacity="0.2" opacity="1"/>
950          <line x1="24" y1="6" x2="24" y2="13" stroke="#c8a96a" stroke-width="1" opacity="0.4"/>
951          <line x1="24" y1="35" x2="24" y2="42" stroke="#c8a96a" stroke-width="1" opacity="0.4"/>
952          <line x1="6" y1="24" x2="13" y2="24" stroke="#c8a96a" stroke-width="1" opacity="0.4"/>
953          <line x1="35" y1="24" x2="42" y2="24" stroke="#c8a96a" stroke-width="1" opacity="0.4"/>
954        </svg>
955      </div>
956      <div class="dimension-number">03</div>
957      <div class="dimension-headline">Governance Literacy</div>
958      <div class="dimension-question">Can you steward AI risk at a board-accountable level?</div>
959      <p class="dimension-body">Awareness of data, IP, compliance, and hallucination risks. Clarity of ownership and accountability. Guardrail maturity: human-in-the-loop processes, audit trails, validation loops. Ability to explain AI risk exposure to a board.</p>
960      <div class="dimension-signal">Would this executive be credible answering AI governance questions under scrutiny?</div>
961    </div>
962    <div class="dimension-card">
963      <div class="dimension-icon">
964        <!-- Operational: interlocking gears/nodes suggesting systems and execution -->
965        <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
966          <circle cx="16" cy="16" r="7" stroke="#c8a96a" stroke-width="1" fill="none" opacity="0.9"/>
967          <circle cx="32" cy="32" r="7" stroke="#c8a96a" stroke-width="1" fill="none" opacity="0.9"/>
968          <circle cx="16" cy="16" r="2" fill="#c8a96a" opacity="0.6"/>
969          <circle cx="32" cy="32" r="2" fill="#c8a96a" opacity="0.6"/>
970          <line x1="21" y1="21" x2="27" y2="27" stroke="#c8a96a" stroke-width="1" opacity="0.5"/>
971          <circle cx="34" cy="14" r="4" stroke="#c8a96a" stroke-width="1" fill="none" opacity="0.5"/>
972          <circle cx="14" cy="34" r="4" stroke="#c8a96a" stroke-width="1" fill="none" opacity="0.5"/>
973          <line x1="30" y1="14" x2="23" y2="14" stroke="#c8a96a" stroke-width="0.75" opacity="0.3" stroke-dasharray="2 2"/>
974          <line x1="14" y1="30" x2="14" y2="23" stroke="#c8a96a" stroke-width="0.75" opacity="0.3" stroke-dasharray="2 2"/>
975        </svg>
976      </div>
977      <div class="dimension-number">04</div>
978      <div class="dimension-headline">Operational Literacy</div>
979      <div class="dimension-question">Can you implement and measure AI intelligently inside the business?</div>
980      <p class="dimension-body">Ability to move from pilot to production responsibly. Understanding of workflow vs. agent vs. multi-agent decisions. Clarity on where human-in-the-loop is required. Measuring ROI and validating outcomes.</p>
981      <div class="dimension-signal">Can this leader move from idea → pilot → validation → scale responsibly?</div>
982    </div>
983  </div>
984</section>
985
986<!-- GAP QUOTE -->
987<section class="gap-section">
988  <div class="gap-inner">
989    <blockquote>
990      The distance between how a leader rates their own AI literacy and how their team perceives them is often the most useful thing we measure.
991    </blockquote>
992    <cite>— Alex Durand, Founder, Frable Consulting</cite>
993  </div>
994</section>
995
996<!-- HOW IT RUNS -->
997<section class="section how-section" id="how-it-runs">
998  <div class="section-label">How it runs</div>
999  <div class="how-layout">
1000    <div class="how-left">
1001      <p>
1002        AIQ is built on a <strong>Stable Core / Flexible Ring</strong> model. The Stable Core covers AI fundamentals, the jagged frontier, risk basics, and governance. The Flexible Ring is configured for your organization: your industry, your tooling, your specific exposure. The result is a session that feels built for you, not delivered from a shelf.
1003      </p>
1004    </div>
1005    <div class="how-phases">
1006      <div class="how-phase">
1007        <div class="phase-marker">—</div>
1008        <div class="phase-content">
1009          <strong>Pre-work (1–2 weeks)</strong>
1010          <p>Individual AIQ inventory. Sponsor intake to understand org priorities, tooling, and constraints. Lightweight industry scan. Draft agenda built from results.</p>
1011        </div>
1012      </div>
1013      <div class="how-phase">
1014        <div class="phase-marker">—</div>
1015        <div class="phase-content">
1016          <strong>Live session (2–3 hours)</strong>
1017          <p>Stable core: AI fundamentals, the jagged frontier, performance and workforce implications, risk and governance basics. Flexible ring: your org's hotspots and coldspots, industry signals, investment mapping, the AI Drift Test™.</p>
1018        </div>
1019      </div>
1020      <div class="how-phase">
1021        <div class="phase-marker">—</div>
1022        <div class="phase-content">
1023          <strong>Commitments + Action Plan</strong>
1024          <p>The session closes with three 90-day commitments: one experiment to run, one governance weakness to address, one capability investment. Named owner. Metrics and review cadence.</p>
1025        </div>
1026      </div>
1027      <div class="how-phase">
1028        <div class="phase-marker">—</div>
1029        <div class="phase-content">
1030          <strong>30-day follow-through</strong>
1031          <p>Pilot one to two use cases. Validation and risk checks. Weekly trailblazer updates. Executive review and next steps.</p>
1032        </div>
1033      </div>
1034    </div>
1035  </div>
1036</section>
1037
1038<!-- CLOSE -->
1039<section class="close-section">
1040  <div class="close-inner">
1041    <h2 class="close-headline">Is your team ready to have this conversation?</h2>
1042    <p class="close-body">AIQ works best when at least one person in the room is willing to say what everyone else is privately thinking about AI. That's usually enough to get started.</p>
1043    <p class="close-body">The first step is a conversation about what your team actually needs, and whether AIQ is the right fit.</p>
1044    <a class='cta-btn' href='/contact'>Talk to us about AIQ <span>→</span></a>
1045  </div>
1046</section>
1047
1048<!-- FOOTER -->
1049<footer>
1050  <div class="footer-logo">© Frable Consulting LLC 2014–2026</div>
1051  <ul class="footer-nav">
1052    <li><a href='/coaching'>Coaching</a></li>
1053    <li><a href='/aiq'>AIQ</a></li>
1054    <li><a href='/about'>About</a></li>
1055    <li><a href='/thinking'>Thinking</a></li>
1056    <li><a href='/contact'>Contact</a></li>
1057  </ul>
1058  <div class="footer-right">
1059    Also writing at <a href="https://onsecondthoughtbyalex.substack.com">On Second Thought →</a>
1060  </div>
1061</footer>
1062
1063<script>
1064function toggleMenu() {
1065  document.getElementById('mobileMenu').classList.toggle('open');
1066  document.getElementById('hamburger').classList.toggle('open');
1067}
1068
1069</script>
vendor: 1 bytes, line 1069
1069
1070<script>
1071(function () {
1072  if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
1073  if (!('IntersectionObserver' in window)) return;
1074  var els = document.querySelectorAll('main section, body > section, footer');
1075  els.forEach(function (el) {
1076    el.style.opacity = '0';
1077    el.style.transform = 'translateY(12px)';
1078    el.style.transition = 'opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1)';
1079  });
1080  var io = new IntersectionObserver(function (entries) {
1081    entries.forEach(function (e) {
1082      if (e.isIntersecting) {
1083        e.target.style.opacity = '1';
1084        e.target.style.transform = 'none';
1085        io.unobserve(e.target);
1086      }
1087    });
1088  }, { threshold: 0.08 });
1089  els.forEach(function (el) { io.observe(el); });
1090})();
1091</script>
vendor: 1 bytes, line 1091
1091
1092<script>
1093(function () {
1094  var track = document.createElement('div'); track.id = 'thread-track';
1095  var fill = document.createElement('div'); fill.id = 'thread';
1096  track.appendChild(fill); document.body.appendChild(track);
1097  function draw() {
1098    var h = document.documentElement;
1099    var max = h.scrollHeight - h.clientHeight;
1100    fill.style.height = (max > 0 ? (h.scrollTop / max) * 100 : 0) + '%';
1101  }
1102  window.addEventListener('scroll', draw, { passive: true });
1103  window.addEventListener('resize', draw, { passive: true });
1104  draw();
1105  var seen = {};
1106  document.addEventListener('mouseover', function (e) {
1107    var a = e.target.closest ? e.target.closest('a[href]') : null;
1108    if (!a) return;
1109    var href = a.getAttribute('href');
1110    if (!href || /^(https?:|#|mailto:)/.test(href) || seen[href]) return;
1111    seen[href] = 1;
1112    var l = document.createElement('link'); l.rel = 'prefetch'; l.href = href;
1113    document.head.appendChild(l);
1114  }, { passive: true });
1115})();
1116</script>
1116
1117</body>
1118</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.