UNLOCK \u2014 The 17 Cs of Human Flourishing | Professor Mohamed A. Imam<\/title>\r\n<meta name=\"description\" content=\"UNLOCK: The Smallest True Thing \u2014 a surgeon's 17 practices for a life that holds in the digital age. By Professor Mohamed A. Imam, Director of Research and Development, NHS.\">\r\n<meta name=\"author\" content=\"Professor Mohamed A. Imam\">\r\n<meta property=\"og:title\" content=\"UNLOCK \u2014 The 17 Cs of Human Flourishing\">\r\n<meta property=\"og:description\" content=\"A surgeon's 17 practices for a life that holds. Written between scans, during immunotherapy, with the urgency of someone who knows time is not guaranteed.\">\r\n<meta property=\"og:type\" content=\"website\">\r\n<meta property=\"og:url\" content=\"https:\/\/unlock17cs.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Cormorant:ital,wght@1,400;1,600&family=Jost:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n TOKENS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n:root {\r\n --ink: #12100e;\r\n --ink-mid: #3a3530;\r\n --ink-light: #6b6158;\r\n --cream: #f6f1e9;\r\n --cream-2: #ede6d8;\r\n --cream-3: #e4dccb;\r\n --gold: #c8a84b;\r\n --gold-light: #f0e4bc;\r\n --gold-warm: #d4a843;\r\n --navy: #0d1e3c;\r\n --navy-mid: #152847;\r\n --white: #fefdfb;\r\n\r\n --serif: 'Cormorant Garamond', Georgia, serif;\r\n --italic: 'Cormorant', Georgia, serif;\r\n --sans: 'Jost', sans-serif;\r\n\r\n --ease: cubic-bezier(.4,0,.2,1);\r\n --t: all .4s var(--ease);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESET\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\nhtml { scroll-behavior: smooth; font-size: 16px; }\r\nbody {\r\n font-family: var(--serif);\r\n background: var(--cream);\r\n color: var(--ink);\r\n overflow-x: hidden;\r\n -webkit-font-smoothing: antialiased;\r\n}\r\nimg { display: block; max-width: 100%; }\r\na { color: inherit; text-decoration: none; }\r\nbutton, input, textarea, select {\r\n font-family: inherit;\r\n outline: none;\r\n border: none;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n NAV\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.nav {\r\n position: fixed; top: 0; left: 0; right: 0; z-index: 200;\r\n display: flex; align-items: center; justify-content: space-between;\r\n padding: 0 clamp(20px,5vw,72px);\r\n height: 72px;\r\n background: rgba(246,241,233,.96);\r\n backdrop-filter: blur(20px);\r\n border-bottom: 1px solid rgba(18,16,14,.07);\r\n transition: box-shadow .3s;\r\n}\r\n.nav.scrolled { box-shadow: 0 2px 24px rgba(18,16,14,.08); }\r\n\r\n.nav-brand { display: flex; align-items: baseline; gap: 10px; }\r\n.nav-title {\r\n font-family: var(--serif); font-size: 22px; font-weight: 700;\r\n color: var(--ink); letter-spacing: -.5px; line-height: 1;\r\n}\r\n.nav-sep { color: var(--gold); font-size: 20px; }\r\n.nav-sub {\r\n font-family: var(--sans); font-size: 11px; font-weight: 500;\r\n color: var(--gold); letter-spacing: 2px; text-transform: uppercase;\r\n}\r\n\r\n.nav-links {\r\n display: flex; gap: 2px; list-style: none; align-items: center;\r\n}\r\n.nav-links a {\r\n font-family: var(--sans); font-size: 12px; font-weight: 400;\r\n color: var(--ink-light); padding: 7px 14px; border-radius: 3px;\r\n letter-spacing: .3px; transition: var(--t);\r\n}\r\n.nav-links a:hover { color: var(--ink); background: rgba(18,16,14,.05); }\r\n.nav-cta {\r\n background: var(--navy) !important;\r\n color: var(--cream) !important;\r\n font-weight: 500 !important;\r\n margin-left: 10px;\r\n}\r\n.nav-cta:hover { background: var(--gold-warm) !important; color: var(--ink) !important; }\r\n\r\n.nav-hamburger {\r\n display: none; flex-direction: column; gap: 5px;\r\n background: none; cursor: pointer; padding: 4px;\r\n}\r\n.nav-hamburger span {\r\n display: block; width: 24px; height: 2px;\r\n background: var(--ink); border-radius: 2px; transition: var(--t);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n HERO\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.hero {\r\n min-height: 100vh;\r\n background: var(--navy);\r\n display: grid;\r\n grid-template-columns: 1fr 420px;\r\n gap: 0;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.hero-bg {\r\n position: absolute; inset: 0;\r\n background:\r\n radial-gradient(ellipse 70% 60% at 60% 40%, rgba(200,168,75,.07) 0%, transparent 65%),\r\n radial-gradient(ellipse 30% 70% at 5% 70%, rgba(246,241,233,.03) 0%, transparent 55%);\r\n}\r\n\r\n\/* Fine horizontal rule texture *\/\r\n.hero-bg::after {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background: repeating-linear-gradient(\r\n 0deg,\r\n transparent 0px, transparent 28px,\r\n rgba(200,168,75,.015) 28px, rgba(200,168,75,.015) 29px\r\n );\r\n}\r\n\r\n.hero-content {\r\n position: relative; z-index: 2;\r\n padding: 140px clamp(24px,5vw,80px) 80px;\r\n display: flex; flex-direction: column; justify-content: center;\r\n max-width: 760px;\r\n}\r\n\r\n.hero-eyebrow {\r\n display: flex; align-items: center; gap: 16px;\r\n margin-bottom: 40px;\r\n}\r\n.hero-eyebrow-line { width: 48px; height: 1px; background: var(--gold); }\r\n.hero-eyebrow-text {\r\n font-family: var(--sans); font-size: 11px; font-weight: 600;\r\n color: var(--gold); letter-spacing: 3px; text-transform: uppercase;\r\n}\r\n\r\n.hero-title {\r\n font-family: var(--serif);\r\n font-size: clamp(76px,11vw,148px);\r\n font-weight: 700;\r\n color: var(--gold);\r\n line-height: .86;\r\n letter-spacing: -5px;\r\n margin-bottom: 24px;\r\n}\r\n\r\n.hero-subtitle {\r\n font-family: var(--italic);\r\n font-size: clamp(18px,2.2vw,24px);\r\n font-weight: 400;\r\n color: rgba(246,241,233,.5);\r\n line-height: 1.55;\r\n letter-spacing: .2px;\r\n margin-bottom: 48px;\r\n max-width: 520px;\r\n}\r\n\r\n.hero-quote {\r\n border-left: 2px solid var(--gold);\r\n padding: 18px 24px;\r\n margin-bottom: 52px;\r\n background: rgba(200,168,75,.06);\r\n border-radius: 0 3px 3px 0;\r\n max-width: 500px;\r\n}\r\n.hero-quote p {\r\n font-family: var(--serif);\r\n font-size: clamp(16px,1.9vw,20px);\r\n font-style: italic;\r\n color: rgba(246,241,233,.8);\r\n line-height: 1.7;\r\n}\r\n\r\n.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }\r\n\r\n.btn {\r\n display: inline-flex; align-items: center; gap: 10px;\r\n font-family: var(--sans); font-size: 12px; font-weight: 600;\r\n letter-spacing: 1px; text-transform: uppercase;\r\n padding: 14px 30px; border-radius: 2px; cursor: pointer;\r\n transition: var(--t); border: none;\r\n}\r\n.btn-gold {\r\n background: var(--gold); color: var(--ink);\r\n}\r\n.btn-gold:hover {\r\n background: var(--gold-warm);\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 28px rgba(200,168,75,.35);\r\n}\r\n.btn-ghost {\r\n background: transparent; color: rgba(246,241,233,.6);\r\n border: 1px solid rgba(246,241,233,.2);\r\n}\r\n.btn-ghost:hover { color: var(--gold); border-color: var(--gold); }\r\n.btn-dark {\r\n background: var(--ink); color: var(--cream);\r\n}\r\n.btn-dark:hover { background: var(--navy-mid); }\r\n\r\n\/* Hero right \u2014 book visual *\/\r\n.hero-visual {\r\n position: relative; z-index: 2;\r\n display: flex; flex-direction: column;\r\n align-items: center; justify-content: center;\r\n padding: 120px 48px 80px;\r\n}\r\n\r\n.book-wrap {\r\n position: relative;\r\n animation: float 7s ease-in-out infinite;\r\n}\r\n@keyframes float {\r\n 0%,100% { transform: translateY(0) rotate(-2.5deg); }\r\n 50% { transform: translateY(-18px) rotate(-1.5deg); }\r\n}\r\n\r\n.book {\r\n width: clamp(200px,22vw,280px);\r\n aspect-ratio: 2\/3;\r\n background: linear-gradient(155deg,#1e3a6e 0%,#0c1f3f 55%,#07132a 100%);\r\n border-radius: 3px 8px 8px 3px;\r\n border-left: 6px solid var(--gold);\r\n padding: clamp(24px,5%,40px) clamp(18px,4%,28px);\r\n display: flex; flex-direction: column; justify-content: space-between;\r\n box-shadow:\r\n -10px 10px 0 rgba(0,0,0,.5),\r\n -20px 20px 0 rgba(0,0,0,.22),\r\n 0 40px 100px rgba(0,0,0,.65),\r\n inset 2px 0 0 rgba(200,168,75,.12);\r\n position: relative; overflow: hidden;\r\n}\r\n.book::before {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background: repeating-linear-gradient(\r\n 180deg,\r\n transparent 0,transparent 5px,\r\n rgba(200,168,75,.02) 5px,rgba(200,168,75,.02) 6px\r\n );\r\n}\r\n\r\n.book-top { position: relative; }\r\n.book-series {\r\n font-family: var(--sans); font-size: 9px; font-weight: 600;\r\n color: rgba(200,168,75,.7); letter-spacing: 3px; text-transform: uppercase;\r\n margin-bottom: 12px;\r\n}\r\n.book-name {\r\n font-family: var(--serif); font-size: clamp(48px,8vw,72px);\r\n font-weight: 700; color: var(--gold);\r\n line-height: .88; letter-spacing: -3px;\r\n}\r\n\r\n.book-divider {\r\n width: 32px; height: 1px;\r\n background: rgba(200,168,75,.45); margin: 14px 0;\r\n}\r\n.book-strapline {\r\n font-family: var(--sans); font-size: 7.5px; font-weight: 300;\r\n color: rgba(246,241,233,.4); letter-spacing: 1.2px;\r\n text-transform: uppercase; line-height: 1.8;\r\n}\r\n\r\n.book-author {\r\n font-family: var(--serif); font-size: 12px; font-weight: 500;\r\n font-style: italic; color: rgba(246,241,233,.5);\r\n}\r\n\r\n.hero-book-caption {\r\n font-family: var(--serif); font-size: 14px; font-style: italic;\r\n color: rgba(246,241,233,.3); text-align: center;\r\n margin-top: 28px; line-height: 1.7; max-width: 220px;\r\n}\r\n\r\n\/* Stats strip *\/\r\n.hero-stats {\r\n position: relative; z-index: 2;\r\n grid-column: 1 \/ -1;\r\n display: flex; border-top: 1px solid rgba(246,241,233,.08);\r\n}\r\n.stat {\r\n flex: 1; padding: 22px 28px;\r\n border-right: 1px solid rgba(246,241,233,.08);\r\n text-align: center;\r\n}\r\n.stat:last-child { border-right: none; }\r\n.stat-n {\r\n font-family: var(--serif); font-size: 36px; font-weight: 300;\r\n color: var(--gold); line-height: 1; letter-spacing: -1px;\r\n display: block; margin-bottom: 4px;\r\n}\r\n.stat-l {\r\n font-family: var(--sans); font-size: 9px; font-weight: 500;\r\n color: rgba(246,241,233,.35); letter-spacing: 2px; text-transform: uppercase;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTIONS \u2014 SHARED\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nsection { padding: clamp(72px,10vw,128px) clamp(24px,5vw,72px); }\r\n.inner { max-width: 1200px; margin: 0 auto; }\r\n.inner-narrow { max-width: 800px; margin: 0 auto; }\r\n\r\n.section-label {\r\n display: flex; align-items: center; gap: 14px; margin-bottom: 24px;\r\n}\r\n.section-label-line { width: 32px; height: 1px; background: var(--gold); }\r\n.section-label-text {\r\n font-family: var(--sans); font-size: 10px; font-weight: 600;\r\n color: var(--gold); letter-spacing: 3px; text-transform: uppercase;\r\n}\r\n\r\n.section-h2 {\r\n font-family: var(--serif);\r\n font-size: clamp(34px,5vw,58px);\r\n font-weight: 400; line-height: 1.08; letter-spacing: -1.5px;\r\n margin-bottom: 28px;\r\n}\r\n\r\n\/* Reveal on scroll *\/\r\n.reveal {\r\n opacity: 0; transform: translateY(30px);\r\n transition: opacity .7s var(--ease), transform .7s var(--ease);\r\n}\r\n.reveal.visible { opacity: 1; transform: none; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n STORY\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.story-section { background: var(--cream); }\r\n.story-grid {\r\n display: grid; grid-template-columns: 280px 1fr;\r\n gap: 80px; align-items: start;\r\n}\r\n\r\n.story-numbers { position: sticky; top: 100px; }\r\n.story-stat { border-top: 1px solid rgba(18,16,14,.1); padding: 20px 0; }\r\n.story-stat .n {\r\n font-family: var(--serif); font-size: 56px; font-weight: 300;\r\n color: var(--gold); line-height: 1; letter-spacing: -2px; display: block;\r\n}\r\n.story-stat .l {\r\n font-family: var(--sans); font-size: 9px; font-weight: 500;\r\n color: var(--ink-light); letter-spacing: 2px; text-transform: uppercase;\r\n}\r\n\r\n.story-text h2 {\r\n font-family: var(--serif); font-size: clamp(30px,4vw,48px);\r\n font-weight: 400; font-style: italic;\r\n line-height: 1.18; letter-spacing: -1px;\r\n margin-bottom: 32px; color: var(--ink);\r\n}\r\n.story-text p {\r\n font-family: var(--serif); font-size: 18px; font-weight: 300;\r\n color: var(--ink-mid); line-height: 1.95; margin-bottom: 22px;\r\n}\r\n.story-text p strong { font-weight: 600; color: var(--ink); }\r\n.story-text p em { font-style: italic; color: var(--ink); }\r\n\r\n.story-pull {\r\n background: var(--navy);\r\n padding: 36px 40px; margin: 40px 0; border-radius: 3px;\r\n position: relative;\r\n}\r\n.story-pull::before {\r\n content: '\\201C';\r\n position: absolute; top: 12px; left: 28px;\r\n font-family: var(--serif); font-size: 88px; font-weight: 700;\r\n color: var(--gold); opacity: .25; line-height: 1;\r\n}\r\n.story-pull p {\r\n font-family: var(--serif); font-size: clamp(19px,2.4vw,26px);\r\n font-style: italic; color: var(--cream); line-height: 1.65;\r\n position: relative; margin: 0; letter-spacing: -.2px;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n FRAMEWORK\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.framework-section { background: var(--cream-2); }\r\n\r\n.parts-intro {\r\n display: grid; grid-template-columns: 1fr 2fr;\r\n gap: 64px; margin-bottom: 64px; align-items: start;\r\n}\r\n.parts-intro-body p {\r\n font-family: var(--serif); font-size: 22px; font-weight: 300;\r\n color: var(--ink-mid); line-height: 1.9; margin-bottom: 14px;\r\n}\r\n\r\n.cs-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }\r\n\r\n.part-header {\r\n grid-column: 1\/-1;\r\n background: var(--navy);\r\n padding: 18px 28px;\r\n margin-top: 24px; margin-bottom: 2px;\r\n border-radius: 3px 3px 0 0;\r\n display: flex; align-items: center; gap: 20px;\r\n}\r\n.part-header:first-of-type { margin-top: 0; }\r\n.part-num {\r\n font-family: var(--sans); font-size: 9px; font-weight: 700;\r\n color: var(--gold); letter-spacing: 3px; text-transform: uppercase;\r\n border: 1px solid rgba(200,168,75,.3); padding: 4px 10px; border-radius: 2px;\r\n flex-shrink: 0;\r\n}\r\n.part-title {\r\n font-family: var(--serif); font-size: 22px; font-weight: 400; font-style: italic;\r\n color: var(--cream);\r\n}\r\n\r\n.c-card {\r\n background: var(--white); padding: 26px 22px;\r\n border: 1px solid rgba(18,16,14,.07);\r\n transition: var(--t); cursor: default; position: relative; overflow: hidden;\r\n}\r\n.c-card::after {\r\n content: ''; position: absolute; bottom: 0; left: 0; right: 0;\r\n height: 2px; background: var(--gold);\r\n transform: scaleX(0) translateX(-50%);\r\n transition: transform .4s var(--ease);\r\n transform-origin: center;\r\n}\r\n.c-card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 14px 44px rgba(18,16,14,.1);\r\n border-color: transparent;\r\n}\r\n.c-card:hover::after { transform: scaleX(1) translateX(0); }\r\n\r\n.c-num {\r\n font-family: var(--sans); font-size: 9px; font-weight: 600;\r\n color: var(--gold); letter-spacing: 2.5px; text-transform: uppercase;\r\n margin-bottom: 8px;\r\n}\r\n.c-name {\r\n font-family: var(--serif); font-size: 23px; font-weight: 600;\r\n color: var(--ink); margin-bottom: 8px; letter-spacing: -.2px;\r\n}\r\n.c-def {\r\n font-family: var(--serif); font-size: 16px; font-style: italic;\r\n font-weight: 300; color: var(--ink-light); line-height: 1.7;\r\n}\r\n\r\n.c-card-note {\r\n background: var(--gold-light);\r\n border: 1px dashed rgba(200,168,75,.4);\r\n display: flex; align-items: center; padding: 20px 22px;\r\n}\r\n.c-card-note p {\r\n font-family: var(--serif); font-size: 17px; font-style: italic;\r\n color: var(--ink-mid); line-height: 1.7;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n C INDEX\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.cindex-section { background: var(--navy); }\r\n.cindex-section .section-label-line,\r\n.cindex-section .section-h2 { color: var(--cream); }\r\n.cindex-intro {\r\n font-family: var(--serif); font-size: 18px; font-style: italic;\r\n font-weight: 300; color: rgba(246,241,233,.55);\r\n line-height: 1.8; max-width: 600px; margin-bottom: 48px;\r\n}\r\n\r\n.cindex-shell {\r\n background: rgba(246,241,233,.04);\r\n border: 1px solid rgba(246,241,233,.1);\r\n border-radius: 6px; padding: clamp(28px,5%,52px);\r\n}\r\n\r\n.progress-bar {\r\n height: 3px; background: rgba(246,241,233,.1);\r\n border-radius: 2px; margin-bottom: 44px; overflow: hidden;\r\n}\r\n.progress-fill {\r\n height: 100%; background: var(--gold);\r\n width: 0; transition: width .5s var(--ease); border-radius: 2px;\r\n}\r\n\r\n.q-panel { display: none; animation: qfade .4s var(--ease); }\r\n.q-panel.active { display: block; }\r\n@keyframes qfade {\r\n from { opacity:0; transform:translateX(16px); }\r\n to { opacity:1; transform:none; }\r\n}\r\n\r\n.q-step {\r\n font-family: var(--sans); font-size: 10px; font-weight: 600;\r\n color: var(--gold); letter-spacing: 3px; text-transform: uppercase;\r\n margin-bottom: 10px;\r\n}\r\n.q-c {\r\n font-family: var(--serif); font-size: 30px; font-weight: 600;\r\n color: var(--cream); margin-bottom: 10px; letter-spacing: -.5px;\r\n}\r\n.q-stmt {\r\n font-family: var(--serif); font-size: 19px; font-style: italic;\r\n font-weight: 300; color: rgba(246,241,233,.68);\r\n line-height: 1.72; margin-bottom: 34px;\r\n}\r\n\r\n.score-btns { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }\r\n.score-btn {\r\n width: 58px; height: 58px;\r\n background: rgba(246,241,233,.06);\r\n border: 1px solid rgba(246,241,233,.14);\r\n border-radius: 4px; font-family: var(--serif);\r\n font-size: 22px; font-weight: 600;\r\n color: rgba(246,241,233,.45);\r\n cursor: pointer; transition: var(--t);\r\n display: flex; align-items: center; justify-content: center;\r\n}\r\n.score-btn:hover { background: rgba(200,168,75,.18); border-color: var(--gold); color: var(--gold); }\r\n.score-btn.selected { background: var(--gold); border-color: var(--gold); color: var(--ink); }\r\n.score-btn.flash { border-color: var(--gold) !important; }\r\n\r\n.score-legend {\r\n display: flex; justify-content: space-between; margin-bottom: 36px;\r\n}\r\n.score-legend span {\r\n font-family: var(--sans); font-size: 9px;\r\n color: rgba(246,241,233,.3); letter-spacing: 1px; text-transform: uppercase;\r\n}\r\n\r\n.q-nav { display: flex; align-items: center; gap: 12px; }\r\n.btn-prev {\r\n background: rgba(246,241,233,.08); color: rgba(246,241,233,.5);\r\n font-size: 11px; padding: 12px 22px;\r\n}\r\n.btn-prev:hover { background: rgba(246,241,233,.13); }\r\n.btn-next { font-size: 11px; padding: 12px 22px; }\r\n.q-count {\r\n font-family: var(--sans); font-size: 11px;\r\n color: rgba(246,241,233,.28); margin-left: auto;\r\n}\r\n\r\n\/* Results *\/\r\n.results-panel { display: none; }\r\n.results-panel.show { display: block; animation: qfade .5s var(--ease); }\r\n.results-headline {\r\n font-family: var(--serif); font-size: clamp(22px,3.5vw,36px);\r\n font-style: italic; font-weight: 400;\r\n color: var(--cream); margin-bottom: 36px; line-height: 1.4;\r\n}\r\n.results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 36px; }\r\n.r-row { display: flex; align-items: center; gap: 12px; }\r\n.r-label {\r\n font-family: var(--sans); font-size: 9.5px; font-weight: 500;\r\n color: rgba(246,241,233,.45); letter-spacing: 1px; text-transform: uppercase;\r\n width: 108px; flex-shrink: 0;\r\n}\r\n.r-track { flex: 1; height: 5px; background: rgba(246,241,233,.08); border-radius: 3px; overflow: hidden; }\r\n.r-fill { height: 100%; background: var(--gold); border-radius: 3px; width: 0; transition: width .9s var(--ease); }\r\n.r-score {\r\n font-family: var(--serif); font-size: 15px; font-weight: 600;\r\n color: var(--gold); width: 18px; text-align: right; flex-shrink: 0;\r\n}\r\n\r\n.email-capture {\r\n background: rgba(246,241,233,.06);\r\n border: 1px solid rgba(200,168,75,.22);\r\n border-radius: 4px; padding: 32px; margin-bottom: 24px;\r\n}\r\n.email-capture h3 {\r\n font-family: var(--serif); font-size: 24px; font-weight: 600;\r\n color: var(--cream); margin-bottom: 8px;\r\n}\r\n.email-capture p {\r\n font-family: var(--serif); font-size: 15px; font-style: italic;\r\n font-weight: 300; color: rgba(246,241,233,.5);\r\n margin-bottom: 20px; line-height: 1.65;\r\n}\r\n.email-row { display: flex; gap: 10px; }\r\n.email-input {\r\n flex: 1;\r\n background: rgba(246,241,233,.09);\r\n border: 1px solid rgba(246,241,233,.14);\r\n border-radius: 2px; padding: 13px 16px;\r\n font-family: var(--serif); font-size: 16px; color: var(--cream);\r\n transition: var(--t);\r\n}\r\n.email-input::placeholder { color: rgba(246,241,233,.28); }\r\n.email-input:focus { border-color: var(--gold); background: rgba(246,241,233,.12); }\r\n.btn-restart {\r\n background: none; font-family: var(--sans); font-size: 11px;\r\n color: rgba(246,241,233,.28); cursor: pointer; letter-spacing: 1px;\r\n text-transform: uppercase; padding: 8px 0; text-decoration: underline;\r\n transition: var(--t);\r\n}\r\n.btn-restart:hover { color: var(--gold); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n AUTHOR\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.author-section { background: var(--cream); }\r\n.author-grid { display: grid; grid-template-columns: 360px 1fr; gap: 80px; align-items: start; }\r\n\r\n.author-portrait {\r\n position: sticky; top: 100px;\r\n}\r\n.portrait-img {\r\n width: 100%; aspect-ratio: 3\/4;\r\n background: var(--cream-3);\r\n border-radius: 3px;\r\n overflow: hidden; border: 1px solid rgba(18,16,14,.1);\r\n display: flex; align-items: center; justify-content: center;\r\n margin-bottom: 16px;\r\n}\r\n.portrait-img img {\r\n width: 100%;\r\n height: 100%;\r\n display: block;\r\n object-fit: cover;\r\n object-position: center top;\r\n}\r\n\/* \u2500\u2500 WEBMASTER NOTE: Replace the placeholder below with <img decoding=\"async\" src=\"photo.jpg\" alt=\"Professor Mohamed A. Imam\"> \u2500\u2500 *\/\r\n.portrait-placeholder {\r\n display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px;\r\n text-align: center;\r\n}\r\n.portrait-initials {\r\n width: 90px; height: 90px; background: var(--navy);\r\n border-radius: 50%; display: flex; align-items: center; justify-content: center;\r\n font-family: var(--serif); font-size: 32px; font-weight: 700; color: var(--gold);\r\n}\r\n.portrait-placeholder p {\r\n font-family: var(--sans); font-size: 10px;\r\n color: rgba(18,16,14,.3); letter-spacing: 1.5px; text-transform: uppercase;\r\n line-height: 1.6;\r\n}\r\n\r\n.author-creds { display: flex; flex-direction: column; gap: 8px; }\r\n.cred {\r\n display: flex; align-items: flex-start; gap: 12px;\r\n padding: 11px 14px; background: var(--cream-2); border-radius: 2px;\r\n}\r\n.cred-dot { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; flex-shrink: 0; margin-top: 7px; }\r\n.cred-text { font-family: var(--sans); font-size: 11px; color: var(--ink-mid); line-height: 1.5; }\r\n\r\n.author-bio h2 { color: var(--ink); }\r\n.author-role {\r\n font-family: var(--serif); font-size: 18px; font-style: italic;\r\n font-weight: 300; color: var(--gold-warm); margin-bottom: 32px;\r\n}\r\n.author-bio p {\r\n font-family: var(--serif); font-size: 18px; font-weight: 300;\r\n color: var(--ink-mid); line-height: 1.95; margin-bottom: 22px;\r\n}\r\n.author-bio p strong { font-weight: 600; color: var(--ink); }\r\n\r\n.dedication {\r\n background: var(--navy); padding: 32px 36px;\r\n border-radius: 3px; margin: 36px 0;\r\n}\r\n.dedication p {\r\n font-family: var(--serif); font-size: 15px; font-style: italic;\r\n font-weight: 300; color: rgba(246,241,233,.65);\r\n line-height: 2.1; margin: 0;\r\n}\r\n.dedication p strong { color: var(--gold); font-weight: 400; }\r\n\r\n.author-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }\r\n.author-link {\r\n font-family: var(--sans); font-size: 11px; font-weight: 500;\r\n color: var(--ink); letter-spacing: 1px; text-transform: uppercase;\r\n padding: 10px 18px; border: 1px solid rgba(18,16,14,.2);\r\n border-radius: 2px; transition: var(--t);\r\n}\r\n.author-link:hover { border-color: var(--gold); color: var(--gold); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n FRAMEWORKS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.frameworks-section { background: var(--cream-2); }\r\n.frameworks-intro {\r\n display: grid; grid-template-columns: 1fr 2fr; gap: 64px; margin-bottom: 52px;\r\n}\r\n.frameworks-intro p {\r\n font-family: var(--serif); font-size: 20px; font-weight: 300;\r\n color: var(--ink-mid); line-height: 1.9; margin-bottom: 14px;\r\n}\r\n\r\n.fw-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; }\r\n.fw-card {\r\n background: var(--white); padding: 22px 18px;\r\n border: 1px solid rgba(18,16,14,.06); transition: var(--t); cursor: default;\r\n}\r\n.fw-card:hover { background: var(--navy); border-color: var(--navy); }\r\n.fw-card:hover .fw-c { color: rgba(246,241,233,.4); }\r\n.fw-card:hover .fw-name { color: var(--gold); }\r\n.fw-card:hover .fw-desc { color: rgba(246,241,233,.55); }\r\n\r\n.fw-c {\r\n font-family: var(--sans); font-size: 9px; font-weight: 600;\r\n color: var(--gold); letter-spacing: 2px; text-transform: uppercase;\r\n margin-bottom: 8px; transition: var(--t);\r\n}\r\n.fw-name {\r\n font-family: var(--serif); font-size: 15px; font-weight: 600;\r\n color: var(--ink); line-height: 1.3; margin-bottom: 8px; transition: var(--t);\r\n}\r\n.fw-desc {\r\n font-family: var(--serif); font-size: 16px; font-style: italic;\r\n font-weight: 300; color: var(--ink-light); line-height: 1.7; transition: var(--t);\r\n}\r\n.fw-attr {\r\n font-family: var(--sans); font-size: 9px; color: var(--ink-light);\r\n letter-spacing: 1px; text-transform: uppercase;\r\n margin-top: 36px; text-align: right; opacity: .5;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n PRESS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.press-section { background: var(--cream); }\r\n.press-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; }\r\n\r\n.press-body p {\r\n font-family: var(--serif); font-size: 17px; font-weight: 300;\r\n color: var(--ink-mid); line-height: 1.9; margin-bottom: 20px;\r\n}\r\n.press-body p strong { font-weight: 600; color: var(--ink); }\r\n\r\n.comps { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0; }\r\n.comp {\r\n font-family: var(--serif); font-size: 14px; font-style: italic;\r\n color: var(--ink); background: var(--cream-2);\r\n border: 1px solid rgba(18,16,14,.12);\r\n padding: 8px 18px; border-radius: 2px; transition: var(--t);\r\n}\r\n.comp:hover { background: var(--ink); color: var(--gold); border-color: var(--ink); }\r\n\r\n.press-downloads { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }\r\n.dl-item {\r\n display: flex; align-items: center; gap: 16px;\r\n padding: 14px 18px; background: var(--cream-2);\r\n border: 1px solid rgba(18,16,14,.08);\r\n border-radius: 3px; transition: var(--t); cursor: pointer;\r\n}\r\n.dl-item:hover { border-color: var(--gold); background: var(--white); }\r\n.dl-icon { font-size: 20px; }\r\n.dl-name { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--ink); }\r\n.dl-sub { font-family: var(--sans); font-size: 10px; color: var(--ink-light); letter-spacing: 1px; text-transform: uppercase; }\r\n\r\n.press-form {\r\n background: var(--navy); border-radius: 6px; padding: 40px 36px;\r\n position: sticky; top: 90px;\r\n}\r\n.press-form h3 {\r\n font-family: var(--serif); font-size: 26px; font-weight: 400; font-style: italic;\r\n color: var(--cream); margin-bottom: 22px;\r\n}\r\n.form-field { margin-bottom: 14px; }\r\n.form-field label {\r\n display: block; font-family: var(--sans); font-size: 9px; font-weight: 600;\r\n color: var(--gold); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px;\r\n}\r\n.form-field input,\r\n.form-field textarea,\r\n.form-field select {\r\n width: 100%; background: rgba(246,241,233,.07);\r\n border: 1px solid rgba(246,241,233,.13); border-radius: 2px;\r\n padding: 11px 14px; font-family: var(--serif); font-size: 15px;\r\n color: var(--cream); transition: var(--t);\r\n}\r\n.form-field input:focus,\r\n.form-field textarea:focus,\r\n.form-field select:focus { border-color: var(--gold); }\r\n.form-field input::placeholder,\r\n.form-field textarea::placeholder { color: rgba(246,241,233,.25); }\r\n.form-field textarea { resize: vertical; min-height: 90px; }\r\n.form-field select { color: rgba(246,241,233,.7); }\r\n.form-field select option { background: var(--navy); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n NEWSLETTER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.newsletter-section {\r\n background: var(--gold-light);\r\n border-top: 1px solid rgba(200,168,75,.3);\r\n border-bottom: 1px solid rgba(200,168,75,.3);\r\n padding: clamp(64px,8vw,100px) clamp(24px,5vw,72px);\r\n}\r\n.newsletter-inner { max-width: 700px; margin: 0 auto; text-align: center; }\r\n.newsletter-inner h2 {\r\n font-family: var(--serif); font-size: clamp(28px,4vw,44px);\r\n font-weight: 400; font-style: italic; color: var(--ink);\r\n margin-bottom: 16px; letter-spacing: -1px; line-height: 1.2;\r\n}\r\n.newsletter-inner p {\r\n font-family: var(--serif); font-size: 17px; font-weight: 300;\r\n color: var(--ink-mid); line-height: 1.85; margin-bottom: 36px;\r\n}\r\n.newsletter-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }\r\n.newsletter-input {\r\n flex: 1; background: var(--white);\r\n border: 1px solid rgba(18,16,14,.15); border-radius: 2px;\r\n padding: 14px 18px; font-family: var(--serif); font-size: 16px; color: var(--ink);\r\n transition: var(--t);\r\n}\r\n.newsletter-input:focus { border-color: var(--ink); }\r\n.newsletter-input::placeholder { color: rgba(18,16,14,.3); }\r\n.newsletter-note {\r\n font-family: var(--sans); font-size: 10px; color: rgba(18,16,14,.35);\r\n letter-spacing: .5px; margin-top: 14px;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n FOOTER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfooter {\r\n background: var(--ink);\r\n padding: 64px clamp(24px,5vw,72px) 36px;\r\n}\r\n.footer-grid {\r\n max-width: 1200px; margin: 0 auto;\r\n display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;\r\n gap: 48px; padding-bottom: 48px;\r\n border-bottom: 1px solid rgba(246,241,233,.08);\r\n margin-bottom: 32px;\r\n}\r\n.footer-brand-name {\r\n font-family: var(--serif); font-size: 36px; font-weight: 700;\r\n color: var(--gold); letter-spacing: -1px; margin-bottom: 6px;\r\n}\r\n.footer-brand-sub {\r\n font-family: var(--sans); font-size: 9px; font-weight: 400;\r\n color: rgba(246,241,233,.3); letter-spacing: 2px; text-transform: uppercase;\r\n margin-bottom: 20px;\r\n}\r\n.footer-tagline {\r\n font-family: var(--serif); font-size: 14px; font-style: italic; font-weight: 300;\r\n color: rgba(246,241,233,.3); line-height: 1.75; max-width: 280px;\r\n}\r\n.footer-social { display: flex; gap: 10px; margin-top: 24px; }\r\n.social-btn {\r\n font-family: var(--sans); font-size: 9px; font-weight: 600;\r\n color: rgba(246,241,233,.4); letter-spacing: 1.5px; text-transform: uppercase;\r\n padding: 7px 12px; border: 1px solid rgba(246,241,233,.12);\r\n border-radius: 2px; transition: var(--t);\r\n}\r\n.social-btn:hover { color: var(--gold); border-color: var(--gold); }\r\n\r\n.footer-col h4 {\r\n font-family: var(--sans); font-size: 9px; font-weight: 600;\r\n color: var(--gold); letter-spacing: 2.5px; text-transform: uppercase;\r\n margin-bottom: 16px;\r\n}\r\n.footer-col ul { list-style: none; }\r\n.footer-col li { margin-bottom: 10px; }\r\n.footer-col a {\r\n font-family: var(--serif); font-size: 15px; font-weight: 300;\r\n color: rgba(246,241,233,.38); transition: var(--t);\r\n}\r\n.footer-col a:hover { color: var(--gold); }\r\n\r\n.footer-bottom {\r\n max-width: 1200px; margin: 0 auto;\r\n display: flex; justify-content: space-between; align-items: center;\r\n flex-wrap: wrap; gap: 12px;\r\n}\r\n.footer-bottom p {\r\n font-family: var(--sans); font-size: 11px;\r\n color: rgba(246,241,233,.22); letter-spacing: .3px;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESPONSIVE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media (max-width:1100px) {\r\n .hero { grid-template-columns: 1fr; }\r\n .hero-visual { display: none; }\r\n .hero-stats { grid-column: 1; }\r\n .story-grid { grid-template-columns: 1fr; }\r\n .story-numbers { position: static; display: flex; flex-wrap: wrap; gap: 0; }\r\n .story-stat { flex: 1 1 150px; }\r\n .author-grid { grid-template-columns: 1fr; }\r\n .author-portrait { position: static; }\r\n .press-grid { grid-template-columns: 1fr; }\r\n .frameworks-intro { grid-template-columns: 1fr; }\r\n .parts-intro { grid-template-columns: 1fr; }\r\n .footer-grid { grid-template-columns: 1fr 1fr; }\r\n}\r\n@media (max-width:768px) {\r\n .nav-links { display: none; }\r\n .nav-hamburger { display: flex; }\r\n .nav-links.open {\r\n display: flex; flex-direction: column;\r\n position: absolute; top: 72px; left: 0; right: 0;\r\n background: rgba(246,241,233,.98);\r\n backdrop-filter: blur(20px);\r\n padding: 20px; gap: 4px;\r\n border-bottom: 1px solid rgba(18,16,14,.08);\r\n }\r\n .nav-links.open a { font-size: 18px; padding: 12px 10px; }\r\n .nav-title { font-size: 20px; }\r\n .nav-sub { font-size: 12px; }\r\n .cs-grid { grid-template-columns: 1fr; }\r\n .cs-grid > * { min-width: 0; }\r\n .cs-grid > [style*=\"grid-column\"] { grid-column: auto !important; }\r\n .part-header { flex-direction: column; align-items: flex-start; padding: 20px 22px; gap: 10px; }\r\n .part-title { font-size: 18px; line-height: 1.35; }\r\n .c-card, .c-card-note { width: 100%; }\r\n .fw-grid { grid-template-columns: 1fr; }\r\n .hero-stats { flex-wrap: wrap; }\r\n .stat { flex: 1 1 45%; }\r\n .email-row { flex-direction: column; }\r\n .newsletter-form { flex-direction: column; }\r\n .results-grid { grid-template-columns: 1fr; }\r\n .footer-grid { grid-template-columns: 1fr; }\r\n .parts-intro-body p { font-size: 18px; line-height: 1.8; }\r\n .frameworks-intro p { font-size: 17px; line-height: 1.8; }\r\n .c-def { font-size: 18px; line-height: 1.75; }\r\n .fw-desc { font-size: 17px; line-height: 1.75; }\r\n}\r\n@media (max-width:480px) {\r\n .cs-grid { grid-template-columns: 1fr; }\r\n .fw-grid { grid-template-columns: 1fr; }\r\n .inner { width: min(100% - 32px, 1400px); }\r\n .part-header { margin-top: 18px; }\r\n .c-name { font-size: 19px; }\r\n .c-def { font-size: 17px; }\r\n .fw-name { font-size: 18px; line-height: 1.4; }\r\n .fw-desc { font-size: 16px; }\r\n .portrait-img { aspect-ratio: auto; }\r\n .score-btn { width: 50px; height: 50px; font-size: 18px; }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n\r\n<nav class=\"nav\" id=\"main-nav\">\r\n <a href=\"#hero\" class=\"nav-brand\">\r\n <span class=\"nav-title\">UNLOCK<\/span>\r\n <span class=\"nav-sep\">\u00b7<\/span>\r\n <span class=\"nav-sub\">The 17 Cs<\/span>\r\n <\/a>\r\n <ul class=\"nav-links\" id=\"nav-links\">\r\n <li><a href=\"#framework\">The 17 Cs<\/a><\/li>\r\n <li><a href=\"#cindex\">C Index<\/a><\/li>\r\n <li><a href=\"#author\">The Author<\/a><\/li>\r\n <li><a href=\"#frameworks\">20 Frameworks<\/a><\/li>\r\n <li><a href=\"#press\">Publishers<\/a><\/li>\r\n <li><a href=\"#newsletter\" class=\"nav-cta\">Register Interest<\/a><\/li>\r\n <\/ul>\r\n <button class=\"nav-hamburger\" id=\"hamburger\" aria-label=\"Menu\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n<\/nav>\r\n\r\n\r\n<section class=\"hero\" id=\"hero\">\r\n <div class=\"hero-bg\"><\/div>\r\n\r\n <div class=\"hero-content\">\r\n <div class=\"hero-eyebrow\">\r\n <div class=\"hero-eyebrow-line\"><\/div>\r\n <span class=\"hero-eyebrow-text\">Forthcoming 2026 \u2014 Register Your Interest<\/span>\r\n <\/div>\r\n <h1 class=\"hero-title\">UN<br>LOCK<\/h1>\r\n <p class=\"hero-subtitle\">The Smallest True Thing<br>A Surgeon's 17 Practices for a Life That Holds<\/p>\r\n <div class=\"hero-quote\">\r\n <p>\"Written between scans, during immunotherapy, with the urgency of someone who knows time is not guaranteed.\"<\/p>\r\n <\/div>\r\n <div class=\"hero-actions\">\r\n <a href=\"#cindex\" class=\"btn btn-gold\">Take the C Index \u2192<\/a>\r\n <a href=\"#framework\" class=\"btn btn-ghost\">Explore the Framework<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-visual\">\r\n <div class=\"book-wrap\">\r\n <div class=\"book\">\r\n <div class=\"book-top\">\r\n <div class=\"book-series\">The 17 Cs<\/div>\r\n <div class=\"book-name\">UN<br>LOCK<\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"book-divider\"><\/div>\r\n <div class=\"book-strapline\">The Smallest True Thing<br>A Surgeon's 17 Practices<br>for a Life That Holds<\/div>\r\n <\/div>\r\n <div class=\"book-author\">Professor Mohamed A. Imam<\/div>\r\n <\/div>\r\n <\/div>\r\n <p class=\"hero-book-caption\">A memoir. A framework.<br>A practical guide for the age of distraction.<\/p>\r\n <\/div>\r\n\r\n <div class=\"hero-stats\">\r\n <div class=\"stat\"><span class=\"stat-n\">30<\/span><span class=\"stat-l\">Years in Medicine<\/span><\/div>\r\n <div class=\"stat\"><span class=\"stat-n\">17<\/span><span class=\"stat-l\">Capacities<\/span><\/div>\r\n <div class=\"stat\"><span class=\"stat-n\">20<\/span><span class=\"stat-l\">Original Frameworks<\/span><\/div>\r\n <div class=\"stat\"><span class=\"stat-n\">150<sup style=\"font-size:.55em\">+<\/sup><\/span><span class=\"stat-l\">Publications<\/span><\/div>\r\n <div class=\"stat\"><span class=\"stat-n\">1<\/span><span class=\"stat-l\">Promise Kept<\/span><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"story-section\" id=\"story\">\r\n <div class=\"inner\">\r\n <div class=\"story-grid\">\r\n <div class=\"story-numbers reveal\">\r\n <div class=\"story-stat\"><span class=\"n\">2016<\/span><span class=\"l\">Mother Ragaa<\/span><\/div>\r\n <div class=\"story-stat\"><span class=\"n\">2023<\/span><span class=\"l\">Brother Ali<\/span><\/div>\r\n <div class=\"story-stat\"><span class=\"n\">2024<\/span><span class=\"l\">Father Abdelnabi<\/span><\/div>\r\n <div class=\"story-stat\"><span class=\"n\">2024<\/span><span class=\"l\">The Diagnosis<\/span><\/div>\r\n <\/div>\r\n <div class=\"story-text reveal\">\r\n <h2>When the surgeon becomes the patient, everything becomes clear.<\/h2>\r\n <p>The report had my name at the top. Not a patient's name. Mine. Kidney cancer. A nephrectomy required. Lung involvement to be investigated. I had been a consultant orthopaedic surgeon for fifteen years, a professor, the <strong>Director of Research and Development at an NHS Foundation Trust<\/strong>. I had read sentences like this thousands of times on other people's documents. I had never been the subject of one.<\/p>\r\n <p>In that silence, I thought about a twelve-year-old boy in Ismailia, Egypt, who had made a promise. He had just finished reading a book his mother placed in his hands \u2014 and he had understood, with the clarity that children sometimes achieve before life complicates everything, that one day he would write a book that did for others what that book had done for him.<\/p>\r\n <p>Then he went on with life. Medicine. Surgery. A PhD. Five countries. <strong>Fellowships at Balgrist, the Mayo Clinic, Stanford, and the Steadman Clinic.<\/strong> A professorship at forty. 150 publications. 10 patents. Three losses in eight years. And then the scan.<\/p>\r\n <div class=\"story-pull\">\r\n <p>Skill is not the same as legacy. Impact is not the same as presence. A life spent fixing others cannot repair the one you have not yet lived.<\/p>\r\n <\/div>\r\n <p>I reached for my notebooks. I gathered thirty years of lessons from patients, teachers, failures, and grief. This is that book \u2014 finished between treatments, written with the urgency of someone who knows time is not guaranteed. It is not theory. It is a life \u2014 mine \u2014 laid open, in the hope that it helps you live yours more fully.<\/p>\r\n <div style=\"margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;\">\r\n <a href=\"#cindex\" class=\"btn btn-dark\">Take the C Index \u2192<\/a>\r\n <a href=\"#author\" class=\"btn\" style=\"border:1px solid rgba(18,16,14,.2);color:var(--ink);\">Meet the Author<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"framework-section\" id=\"framework\">\r\n <div class=\"inner\">\r\n <div class=\"section-label reveal\">\r\n <div class=\"section-label-line\"><\/div>\r\n <span class=\"section-label-text\">The Framework<\/span>\r\n <\/div>\r\n <div class=\"parts-intro reveal\">\r\n <div><h2 class=\"section-h2\">The 17 Cs<\/h2><\/div>\r\n <div class=\"parts-intro-body\">\r\n <p>Seventeen trainable capacities for human flourishing in the digital age. Each is a practice \u2014 not a personality trait. Each chapter has a Practice Kit with field drills you can begin today.<\/p>\r\n <p>Three parts, each building on the last: a floor that holds, a structure worth building, an architecture that lasts.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"cs-grid\">\r\n \r\n <div class=\"part-header reveal\">\r\n <span class=\"part-num\">Part I<\/span>\r\n <span class=\"part-title\">Stabilise \u2014 The Inner Foundation<\/span>\r\n <\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C1<\/div><div class=\"c-name\">Consciousness<\/div><div class=\"c-def\">Win back your attention. Build the ground you stand on.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C2<\/div><div class=\"c-name\">Clarity<\/div><div class=\"c-def\">Separate signal from noise. See what is actually true.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C3<\/div><div class=\"c-name\">Curiosity<\/div><div class=\"c-def\">Stay teachable. Ask the question nobody else is asking.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C4<\/div><div class=\"c-name\">Courage<\/div><div class=\"c-def\">Move while afraid. Re-order your loyalties.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C5<\/div><div class=\"c-name\">Confidence<\/div><div class=\"c-def\">Self-trust built from evidence, not applause.<\/div><\/div>\r\n <div class=\"c-card-note reveal\"><p>Five Cs form the floor on which everything else rests. Without the floor, nothing above it holds.<\/p><\/div>\r\n\r\n \r\n <div class=\"part-header reveal\">\r\n <span class=\"part-num\">Part II<\/span>\r\n <span class=\"part-title\">Outer Expansion \u2014 Creation<\/span>\r\n <\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C6<\/div><div class=\"c-name\">Creativity<\/div><div class=\"c-def\">See beyond the obvious. Build something better.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C7<\/div><div class=\"c-name\">Commitment<\/div><div class=\"c-def\">Stay loyal to a meaningful promise.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C8<\/div><div class=\"c-name\">Consistency<\/div><div class=\"c-def\">Show up. The smallest true thing, again and again.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C9<\/div><div class=\"c-name\">Compassion<\/div><div class=\"c-def\">See the full person before judging the behaviour.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C10<\/div><div class=\"c-name\">Connection<\/div><div class=\"c-def\">Turn toward. Choose depth over dopamine.<\/div><\/div>\r\n <div class=\"c-card-note reveal\"><p>Once the floor holds \u2014 what will you build? These five Cs are the materials.<\/p><\/div>\r\n\r\n \r\n <div class=\"part-header reveal\">\r\n <span class=\"part-num\">Part III<\/span>\r\n <span class=\"part-title\">Life Architecture \u2014 Integration<\/span>\r\n <\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C11<\/div><div class=\"c-name\">Character<\/div><div class=\"c-def\">Who you are when it costs you.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C12<\/div><div class=\"c-name\">Contribution<\/div><div class=\"c-def\">Turn work into meaning. Give something lasting.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C13<\/div><div class=\"c-name\">Control<\/div><div class=\"c-def\">Own the space between stimulus and response.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C14<\/div><div class=\"c-name\">Calibration<\/div><div class=\"c-def\">Adjust before you break. Trust reality.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C15<\/div><div class=\"c-name\">Compounding Effect<\/div><div class=\"c-def\">Tiny moves. Right direction. Long enough.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C16<\/div><div class=\"c-name\">Calmness<\/div><div class=\"c-def\">Release what you cannot control. Keep what matters.<\/div><\/div>\r\n <div class=\"c-card reveal\" style=\"grid-column:span 2\"><div class=\"c-num\">C17<\/div><div class=\"c-name\">Choice<\/div><div class=\"c-def\">The hinge on every door. Live by values, not default. This is the last C and the first one you practise every morning. It is the integration of everything that came before it.<\/div><\/div>\r\n <div class=\"c-card-note reveal\"><p>Where values become structure. Where change becomes sustainable.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"cindex-section\" id=\"cindex\">\r\n <div class=\"inner\">\r\n <div class=\"section-label\">\r\n <div class=\"section-label-line\"><\/div>\r\n <span class=\"section-label-text\">The C Index<\/span>\r\n <\/div>\r\n <h2 class=\"section-h2\" style=\"color:var(--cream)\">Where are you right now?<\/h2>\r\n <p class=\"cindex-intro\">Score yourself honestly on each C. Five minutes. No right answers \u2014 only useful information. Enter your email at the end to receive your full results as a PDF.<\/p>\r\n\r\n <div class=\"cindex-shell\">\r\n <div class=\"progress-bar\"><div class=\"progress-fill\" id=\"prog\"><\/div><\/div>\r\n <div id=\"q-container\"><\/div>\r\n <div class=\"results-panel\" id=\"results\">\r\n <p class=\"results-headline\" id=\"r-headline\"><\/p>\r\n <div class=\"results-grid\" id=\"r-chart\"><\/div>\r\n <div class=\"email-capture\">\r\n <h3>Receive your full PDF report<\/h3>\r\n <p>Your personalised C Index \u2014 scores, analysis, and the chapters that matter most for where you are right now.<\/p>\r\n <div class=\"email-row\">\r\n \r\n <input type=\"email\" class=\"email-input\" placeholder=\"your@email.com\" id=\"result-email\">\r\n <button class=\"btn btn-gold\" onclick=\"handleResultEmail()\">Send My Report<\/button>\r\n <\/div>\r\n <\/div>\r\n <button class=\"btn-restart\" id=\"restart-btn\">Start again \u21ba<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"author-section\" id=\"author\">\r\n <div class=\"inner\">\r\n <div class=\"section-label reveal\">\r\n <div class=\"section-label-line\"><\/div>\r\n <span class=\"section-label-text\">The Author<\/span>\r\n <\/div>\r\n <div class=\"author-grid\">\r\n <div class=\"reveal\">\r\n <div class=\"author-portrait\">\r\n <div class=\"portrait-img\">\r\n <img decoding=\"async\" src=\"https:\/\/unlock17cs.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-20-at-12.22.52-AM.jpeg\" alt=\"Professor Mohamed A. Imam\" loading=\"lazy\">\r\n <\/div>\r\n <div class=\"author-creds\">\r\n <div class=\"cred\"><div class=\"cred-dot\"><\/div><span class=\"cred-text\">Director of Research & Development \u2014 Ashford & St Peter's NHS Foundation Trust<\/span><\/div>\r\n <div class=\"cred\"><div class=\"cred-dot\"><\/div><span class=\"cred-text\">Clinical Lead for Trauma Surgery \u2014 Rowley Bristow Orthopaedic Centre, Surrey<\/span><\/div>\r\n <div class=\"cred\"><div class=\"cred-dot\"><\/div><span class=\"cred-text\">Professor & Medical Director \u2014 Smart Health Centre, University of East London<\/span><\/div>\r\n <div class=\"cred\"><div class=\"cred-dot\"><\/div><span class=\"cred-text\">150+ peer-reviewed publications \u00b7 5 edited textbooks \u00b7 10+ surgical patents<\/span><\/div>\r\n <div class=\"cred\"><div class=\"cred-dot\"><\/div><span class=\"cred-text\">SICOT Pioneer Award 2025 \u00b7 NHS Leadership Award 2017 \u00b7 AAOS International Scholar<\/span><\/div>\r\n <div class=\"cred\"><div class=\"cred-dot\"><\/div><span class=\"cred-text\">Fellowships: Balgrist (Zurich) \u00b7 Mayo Clinic \u00b7 Stanford \u00b7 Steadman Clinic<\/span><\/div>\r\n <div class=\"cred\"><div class=\"cred-dot\"><\/div><span class=\"cred-text\">Oxford Executive Leadership \u00b7 Stanford Machine Learning Specialization<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"author-bio reveal\">\r\n <h2 class=\"section-h2\">Professor Mohamed A. Imam<\/h2>\r\n <p class=\"author-role\">Surgeon \u00b7 Scientist \u00b7 Innovator \u00b7 Director \u00b7 Author<\/p>\r\n <p>At twelve years old, in a house in Ismailia, Egypt, a boy read a book his mother placed in his hands and made a quiet promise: one day he would write a book that did for others what that book had done for him. <strong>This is that book. Thirty years later than promised. Written between immunotherapy treatments. Finished with the urgency of someone who knows time is not guaranteed.<\/strong><\/p>\r\n <p>Professor Imam is the Director of Research and Development at Ashford and St Peter's NHS Foundation Trust \u2014 a board-level NHS leadership appointment \u2014 and concurrently the Clinical Lead for Trauma Surgery at the Rowley Bristow Orthopaedic Centre and Professor and Medical Director at the Smart Health Centre, University of East London. He holds a PhD in orthopaedic science, an Executive Leadership Diploma from Oxford University's Sa\u00efd Business School, and a Machine Learning Specialization from Stanford University School of Medicine.<\/p>\r\n <p>He trained at Balgrist University Orthopaedic Centre in Zurich under Professor Christian Gerber \u2014 pioneer of modern shoulder surgery \u2014 and undertook fellowships at the Mayo Clinic, Stanford University, the Steadman Clinic, and Oxford University Hospitals. He is the founder of the OrthoGlobe Collaborative and the creator of TheArmDoc patient education platform.<\/p>\r\n <p>In 2016 he lost his mother Ragaa to breast cancer. In 2023 he lost his brother Ali at forty \u2014 Ali's last act on earth was kindness to a stranger. In 2024 he lost his father Abdelnabi. Months later came his own kidney cancer diagnosis. He became, for the first time, the patient rather than the surgeon. <em>UNLOCK<\/em> was written in that space.<\/p>\r\n\r\n <div class=\"dedication\">\r\n <p>\r\n <strong>For Mum.<\/strong> Ragaa \u2014 who kept the light on and the door open, always.<br>\r\n <strong>For Dad.<\/strong> Abdelnabi \u2014 who walked twenty kilometres to school so I would not have to.<br>\r\n <strong>For Ali.<\/strong> His last act on earth was kindness. That is everything.<br>\r\n <em>For Dalia, Yusef and Layla \u2014 the reason this had to be finished.<\/em>\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"author-links\">\r\n <a href=\"https:\/\/moimam.co.uk\" class=\"author-link\" target=\"_blank\">moimam.co.uk<\/a>\r\n <a href=\"https:\/\/thearmdoc.co.uk\" class=\"author-link\" target=\"_blank\">thearmdoc.co.uk<\/a>\r\n <a href=\"https:\/\/www.ashfordstpeters.nhs.uk\/professor-mohamed-a-imam\" class=\"author-link\" target=\"_blank\">NHS Bio<\/a>\r\n \r\n <a href=\"https:\/\/www.linkedin.com\/in\/mohamed-a-imam-64a0b94a\/\" class=\"author-link\" target=\"_blank\">LinkedIn<\/a>\r\n <a href=\"https:\/\/x.com\/MoAImam\" class=\"author-link\" target=\"_blank\">X \/ Twitter<\/a>\r\n <a href=\"https:\/\/www.facebook.com\/thearmdoc\" class=\"author-link\" target=\"_blank\">Facebook<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"frameworks-section\" id=\"frameworks\">\r\n <div class=\"inner\">\r\n <div class=\"section-label reveal\">\r\n <div class=\"section-label-line\"><\/div>\r\n <span class=\"section-label-text\">Intellectual Framework<\/span>\r\n <\/div>\r\n <div class=\"frameworks-intro reveal\">\r\n <div><h2 class=\"section-h2\">20 Original Frameworks<\/h2><\/div>\r\n <div>\r\n <p>UNLOCK contains twenty original named frameworks \u2014 working models developed from thirty years of clinical practice and personal experience. They appear in boxed sections throughout the book, where they emerge from the stories that generated them.<\/p>\r\n <p>They are not academic theories. They are patterns observed consistently enough to name, so that you can reach for the name when the pattern appears in your own life.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"fw-grid\">\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C1<\/div><div class=\"fw-name\">Presence Debt Framework<\/div><div class=\"fw-desc\">Every hour of half-presence accumulates a debt that cannot be repaid by occasional full presence.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C1<\/div><div class=\"fw-name\">Oscillation Imperative<\/div><div class=\"fw-desc\">Recovery is not time stolen from performance. It is the phase in which the next performance is created.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C1<\/div><div class=\"fw-name\">Coherence Gap<\/div><div class=\"fw-desc\">The distance between the self you display and the self you actually inhabit \u2014 now monetised by platforms that profit from maintaining it.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C2<\/div><div class=\"fw-name\">Clarity Tax<\/div><div class=\"fw-desc\">Every time we choose the comfortable narrative over the accurate one, we pay a deferred cost.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C2<\/div><div class=\"fw-name\">Coconut-Caramel Framework<\/div><div class=\"fw-desc\">Every complex situation requires both firm clarity and warm nuance. The skill is knowing which the moment needs. <em>*Joint attribution: Dr Yasser ElSherbini<\/em><\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C3<\/div><div class=\"fw-name\">Second Question Framework<\/div><div class=\"fw-desc\">The most important information in any exchange lives in what emerges when you ask one more question.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C4<\/div><div class=\"fw-name\">Permission Fallacy<\/div><div class=\"fw-desc\">We wait for conditions that give permission to act courageously \u2014 but those conditions are established by fear itself.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C5<\/div><div class=\"fw-name\">Borrowed Confidence Model<\/div><div class=\"fw-desc\">Confidence is sometimes lent by someone who sees a future version of you before you can. The debt is repaid forward, not back.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C5<\/div><div class=\"fw-name\">Stripped Confidence Principle<\/div><div class=\"fw-desc\">The confidence that remains when all performance scaffolding is removed is the only form that holds under adverse conditions.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C6<\/div><div class=\"fw-name\">Friction-Innovation Framework<\/div><div class=\"fw-desc\">Genuine innovation begins not with inspiration but with the honest, sustained observation of what is not working well enough.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C7<\/div><div class=\"fw-name\">Two-Self Framework<\/div><div class=\"fw-desc\">The Planner makes commitments. The Doer must honour them. Sustainable commitment requires designing for the Doer.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C8<\/div><div class=\"fw-name\">Reliability Premium<\/div><div class=\"fw-desc\">Consistency generates disproportionate value compared to occasional exceptional performance.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C9<\/div><div class=\"fw-name\">Precision Compassion Framework<\/div><div class=\"fw-desc\">The most effective compassion is specifically calibrated to what this person, in this moment, actually needs.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C10<\/div><div class=\"fw-name\">Bid Economy<\/div><div class=\"fw-desc\">Every relationship is sustained or eroded by thousands of small bids for connection and their responses.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C11<\/div><div class=\"fw-name\">Character Rehearsal Framework<\/div><div class=\"fw-desc\">Character is not a trait that arrives in critical moments \u2014 it is a skill rehearsed in ordinary ones.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C12<\/div><div class=\"fw-name\">Living Legacy Equation<\/div><div class=\"fw-desc\">Impact \u00d7 Presence = Legacy. Zero in either produces zero legacy, regardless of how large the other is.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C13<\/div><div class=\"fw-name\">Adversarial Environment Framework<\/div><div class=\"fw-desc\">The digital information environment is an intentionally designed system optimised for the extraction of attention.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C14<\/div><div class=\"fw-name\">Wind Tunnel Protocol<\/div><div class=\"fw-desc\">Regular, structured, honest engagement with real feedback \u2014 before crisis forces it \u2014 keeps the gap between intention and reality manageable.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C15<\/div><div class=\"fw-name\">Compounding Character Formula<\/div><div class=\"fw-desc\">The 17 Cs multiply each other. Growth is multiplicative, not additive. Starting anywhere is better than starting nowhere.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C16<\/div><div class=\"fw-name\">Optimal Caring Zone<\/div><div class=\"fw-desc\">For every domain there is a level of caring that produces peak performance. Too little: apathy. Too much: paralysis.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C17<\/div><div class=\"fw-name\">Two Horizons of Choice<\/div><div class=\"fw-desc\">Every significant choice operates on the immediate horizon (what does this give me now?) and the generative horizon (what person is this making me?).<\/div><\/div>\r\n <\/div>\r\n <p class=\"fw-attr reveal\">* Coconut-Caramel Framework: joint attribution with Dr Yasser ElSherbini \u00b7 Full reference index with use cases in the book's Appendix<\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"press-section\" id=\"press\">\r\n <div class=\"inner\">\r\n <div class=\"section-label reveal\">\r\n <div class=\"section-label-line\"><\/div>\r\n <span class=\"section-label-text\">For Publishers & Media<\/span>\r\n <\/div>\r\n <div class=\"press-grid\">\r\n <div class=\"press-body reveal\">\r\n <h2 class=\"section-h2\">The Publishing Case for UNLOCK<\/h2>\r\n <p>UNLOCK occupies a precise and currently unoccupied intersection in the nonfiction market. It carries the emotional authority of a cancer memoir, the practical architecture of a behaviour-change framework, and the intellectual rigour of a professor of digital health who works with AI in clinical medicine every day. <strong>No single book currently holds all three positions at once.<\/strong><\/p>\r\n <p><strong>The three closest comparables:<\/strong><\/p>\r\n <div class=\"comps\">\r\n <span class=\"comp\">When Breath Becomes Air<\/span>\r\n <span class=\"comp\">Atomic Habits<\/span>\r\n <span class=\"comp\">Man's Search for Meaning<\/span>\r\n <span class=\"comp\">Stolen Focus<\/span>\r\n <span class=\"comp\">Being Mortal<\/span>\r\n <span class=\"comp\">Grit<\/span>\r\n <\/div>\r\n <p>The author is the Director of Research and Development at Ashford and St Peter's NHS Foundation Trust \u2014 an NHS board appointment. His full credentials are publicly and independently verifiable. His combined social following of 115,000 (LinkedIn 20k, Facebook 78k, X 17k) is a medically-engaged, professional audience built over a decade \u2014 not a vanity metric. He is one of the most reviewed consultant surgeons in the UK, with 700+ verified patient reviews and a 5.0\/5 rating on Top Doctors.<\/p>\r\n <p><strong>Word count:<\/strong> ~45,000 words \u00b7 <strong>Format:<\/strong> Narrative nonfiction \/ practical framework \u00b7 <strong>Status:<\/strong> Complete manuscript, available immediately.<\/p>\r\n\r\n <div class=\"press-downloads\">\r\n \r\n <div class=\"dl-item\" onclick=\"alert('PDF available on request \u2014 use the contact form')\">\r\n <span class=\"dl-icon\">\ud83d\udcc4<\/span>\r\n <div>\r\n <div class=\"dl-name\">One-Page Book Summary<\/div>\r\n <div class=\"dl-sub\">PDF \u00b7 Available on request<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"dl-item\" onclick=\"alert('Biography available on request \u2014 use the contact form')\">\r\n <span class=\"dl-icon\">\ud83d\udc64<\/span>\r\n <div>\r\n <div class=\"dl-name\">Author Biography<\/div>\r\n <div class=\"dl-sub\">Short (300w) & Long (700w) \u00b7 Available on request<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"dl-item\" onclick=\"alert('Sample chapters available on request \u2014 use the contact form')\">\r\n <span class=\"dl-icon\">\ud83d\udcd6<\/span>\r\n <div>\r\n <div class=\"dl-name\">Sample Chapters<\/div>\r\n <div class=\"dl-sub\">Introduction + C1 \u00b7 Available on request<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"reveal\">\r\n <div class=\"press-form\">\r\n <h3>Publisher & Media Enquiries<\/h3>\r\n \r\n <div class=\"form-field\">\r\n <label>Name & Organisation<\/label>\r\n <input type=\"text\" placeholder=\"Name \u00b7 Publisher \/ Agency \/ Media Outlet\">\r\n <\/div>\r\n <div class=\"form-field\">\r\n <label>Email Address<\/label>\r\n <input type=\"email\" placeholder=\"your@email.com\">\r\n <\/div>\r\n <div class=\"form-field\">\r\n <label>Enquiry Type<\/label>\r\n <select>\r\n <option value=\"\">Select type\u2026<\/option>\r\n <option>Literary Agent \u2014 Representation<\/option>\r\n <option>Publisher \u2014 Acquisition Interest<\/option>\r\n <option>Journalist \/ Book Reviewer<\/option>\r\n <option>Podcast \/ Broadcast Media<\/option>\r\n <option>Speaking Engagement<\/option>\r\n <option>Corporate \/ NHS Training<\/option>\r\n <option>Other<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-field\">\r\n <label>Message<\/label>\r\n <textarea placeholder=\"Tell me about your interest in UNLOCK\u2026\"><\/textarea>\r\n <\/div>\r\n <button class=\"btn btn-gold\" style=\"width:100%;justify-content:center;\" onclick=\"handlePressForm()\">Send Enquiry \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"newsletter-section\" id=\"newsletter\">\r\n <div class=\"newsletter-inner reveal\">\r\n <h2>One C. Every Month. Straight from the Author.<\/h2>\r\n <p>A personal essay on one capacity each month \u2014 a clinical story, a framework, a single practice drill. The same voice as the book, before the book is published. Join the people working through the framework now.<\/p>\r\n \r\n <div class=\"newsletter-form\">\r\n <input type=\"email\" class=\"newsletter-input\" placeholder=\"your@email.com\" id=\"newsletter-email\">\r\n <button class=\"btn btn-dark\" onclick=\"handleNewsletter()\">Subscribe \u2192<\/button>\r\n <\/div>\r\n <p class=\"newsletter-note\">No spam. One email per month. Unsubscribe at any time.<\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<footer>\r\n <div class=\"footer-grid\">\r\n <div>\r\n <div class=\"footer-brand-name\">UNLOCK<\/div>\r\n <div class=\"footer-brand-sub\">unlock17cs.com<\/div>\r\n <p class=\"footer-tagline\">\"You do not need perfect conditions. You need to make the next true move in the only moment actually available \u2014 which is this one.\"<\/p>\r\n <div class=\"footer-social\">\r\n \r\n <a href=\"https:\/\/www.linkedin.com\/in\/mohamed-a-imam-64a0b94a\/\" class=\"social-btn\" target=\"_blank\">LinkedIn<\/a>\r\n <a href=\"https:\/\/www.facebook.com\/thearmdoc\" class=\"social-btn\" target=\"_blank\">Facebook<\/a>\r\n <a href=\"https:\/\/x.com\/MoAImam\" class=\"social-btn\" target=\"_blank\">X \/ Twitter<\/a>\r\n <a href=\"https:\/\/www.instagram.com\/the_arm_doc\/\" class=\"social-btn\" target=\"_blank\">Instagram<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h4>The Book<\/h4>\r\n <ul>\r\n <li><a href=\"#story\">The Story<\/a><\/li>\r\n <li><a href=\"#framework\">The 17 Cs<\/a><\/li>\r\n <li><a href=\"#cindex\">The C Index<\/a><\/li>\r\n <li><a href=\"#frameworks\">20 Frameworks<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h4>The Author<\/h4>\r\n <ul>\r\n <li><a href=\"#author\">Biography<\/a><\/li>\r\n <li><a href=\"https:\/\/moimam.co.uk\" target=\"_blank\">moimam.co.uk<\/a><\/li>\r\n <li><a href=\"https:\/\/thearmdoc.co.uk\" target=\"_blank\">thearmdoc.co.uk<\/a><\/li>\r\n <li><a href=\"https:\/\/www.ashfordstpeters.nhs.uk\/professor-mohamed-a-imam\" target=\"_blank\">NHS Profile<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h4>Contact<\/h4>\r\n <ul>\r\n <li><a href=\"#press\">Publishers & Media<\/a><\/li>\r\n <li><a href=\"#newsletter\">Newsletter<\/a><\/li>\r\n <li><a href=\"#cindex\">C Index<\/a><\/li>\r\n <li><a href=\"mailto:info@unlock17cs.com\">info@unlock17cs.com<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-bottom\">\r\n <p>\u00a9 2026 Professor Mohamed A. Imam \u00b7 unlock17cs.com \u00b7 All rights reserved.<\/p>\r\n <p>A memoir. A framework. A practical guide for the age of distraction.<\/p>\r\n <\/div>\r\n<\/footer>\r\n\r\n\r\n<script>\r\n\/\/ \u2500\u2500 NAV \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst nav = document.getElementById('main-nav');\r\nconst ham = document.getElementById('hamburger');\r\nconst links = document.getElementById('nav-links');\r\n\r\nwindow.addEventListener('scroll', () => {\r\n nav.classList.toggle('scrolled', window.scrollY > 60);\r\n});\r\nham.addEventListener('click', () => {\r\n links.classList.toggle('open');\r\n});\r\n\r\n\/\/ \u2500\u2500 SCROLL REVEALS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst obs = new IntersectionObserver(entries => {\r\n entries.forEach(e => { if(e.isIntersecting) e.target.classList.add('visible'); });\r\n}, { threshold: 0.08, rootMargin: '0px 0px -48px 0px' });\r\n\r\ndocument.querySelectorAll('.reveal').forEach((el,i) => {\r\n el.style.transitionDelay = `${(i % 5) * 60}ms`;\r\n obs.observe(el);\r\n});\r\n\r\n\/\/ C-card stagger\r\ndocument.querySelectorAll('.c-card,.fw-card').forEach((c,i) => {\r\n c.style.transitionDelay = `${(i % 4) * 50}ms`;\r\n});\r\n\r\n\/\/ \u2500\u2500 C INDEX \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst Cs = [\r\n {c:'C1',name:'Consciousness',q:'I notice where my attention is going and can bring it back deliberately, without drama.'},\r\n {c:'C2',name:'Clarity',q:'Under pressure, I can separate the facts of a situation from the story I am telling myself about it.'},\r\n {c:'C3',name:'Curiosity',q:'When I feel threatened or challenged, my first instinct is to ask questions rather than defend my position.'},\r\n {c:'C4',name:'Courage',q:'I regularly take small actions that feel honest and slightly uncomfortable \u2014 without waiting until I am unafraid.'},\r\n {c:'C5',name:'Confidence',q:'I trust my own judgment because it is based on evidence from my actual behaviour, not on external approval.'},\r\n {c:'C6',name:'Creativity',q:'I make and share new things \u2014 I am not primarily a consumer of other people\\'s work.'},\r\n {c:'C7',name:'Commitment',q:'I stay with important work after the initial excitement fades, even when progress is slow.'},\r\n {c:'C8',name:'Consistency',q:'My most important habits survive my worst days \u2014 not perfectly, but recognisably.'},\r\n {c:'C9',name:'Compassion',q:'When someone I care about is struggling, my first response is to understand \u2014 not to fix, dismiss, or compete.'},\r\n {c:'C10',name:'Connection',q:'I notice and respond to small moments when people around me reach out for attention or recognition.'},\r\n {c:'C11',name:'Character',q:'I act in line with my values even when it costs me comfort, money, or approval.'},\r\n {c:'C12',name:'Contribution',q:'I give time, skill, or energy regularly to something larger than my own advancement.'},\r\n {c:'C13',name:'Control',q:'In hard moments, I regulate my own reactions before trying to manage anything outside me.'},\r\n {c:'C14',name:'Calibration',q:'I seek feedback and adjust course \u2014 I do not wait for a crisis to learn something is wrong.'},\r\n {c:'C15',name:'Compounding Effect',q:'I protect my small daily gains and take seriously the small daily slips. I understand they are the same size.'},\r\n {c:'C16',name:'Calmness',q:'I can identify what genuinely deserves my concern and release what does not, without guilt.'},\r\n {c:'C17',name:'Choice',q:'My most recent significant decisions reflect my values, not my fears or other people\\'s expectations.'}\r\n];\r\n\r\nlet cur = 0;\r\nconst scores = new Array(17).fill(null);\r\nconst qCont = document.getElementById('q-container');\r\nconst resPan = document.getElementById('results');\r\nconst prog = document.getElementById('prog');\r\n\r\nfunction renderQ(idx) {\r\n qCont.innerHTML = '';\r\n const d = Cs[idx];\r\n const panel = document.createElement('div');\r\n panel.className = 'q-panel active';\r\n panel.innerHTML = `\r\n <div class=\"q-step\">${d.c} \u00b7 Question ${idx+1} of 17<\/div>\r\n <div class=\"q-c\">${d.name}<\/div>\r\n <p class=\"q-stmt\">${d.q}<\/p>\r\n <div class=\"score-btns\">\r\n ${[1,2,3,4,5].map(n=>`<button class=\"score-btn${scores[idx]===n?' selected':''}\" data-v=\"${n}\">${n}<\/button>`).join('')}\r\n <\/div>\r\n <div class=\"score-legend\"><span>Rarely true<\/span><span>Consistently true<\/span><\/div>\r\n <div class=\"q-nav\">\r\n <button class=\"btn btn-prev q-back\" ${idx===0?'style=\"opacity:0;pointer-events:none\"':''}>\u2190 Back<\/button>\r\n <button class=\"btn btn-next btn-gold q-fwd\">${idx===16?'See results \u2192':'Next \u2192'}<\/button>\r\n <span class=\"q-count\">${idx+1} \/ 17<\/span>\r\n <\/div>`;\r\n qCont.appendChild(panel);\r\n prog.style.width = `${(idx\/17)*100}%`;\r\n\r\n panel.querySelectorAll('.score-btn').forEach(b => {\r\n b.addEventListener('click', () => {\r\n scores[idx] = +b.dataset.v;\r\n panel.querySelectorAll('.score-btn').forEach(x=>x.classList.remove('selected'));\r\n b.classList.add('selected');\r\n });\r\n });\r\n panel.querySelector('.q-back').addEventListener('click', () => { if(idx>0){cur--;renderQ(cur);} });\r\n panel.querySelector('.q-fwd').addEventListener('click', () => {\r\n if(scores[idx]===null){\r\n panel.querySelectorAll('.score-btn').forEach(b=>{\r\n b.classList.add('flash');\r\n setTimeout(()=>b.classList.remove('flash'),500);\r\n }); return;\r\n }\r\n if(idx<16){cur++;renderQ(cur);}\r\n else showResults();\r\n });\r\n}\r\n\r\nfunction showResults() {\r\n qCont.style.display = 'none';\r\n resPan.classList.add('show');\r\n prog.style.width = '100%';\r\n const total = scores.reduce((a,b)=>a+b,0);\r\n const avg = (total\/17).toFixed(1);\r\n let hl = total>=68\r\n ? `Strong foundations \u2014 ${avg}\/5 average. Deepen what already works.`\r\n : total>=34\r\n ? `Honest middle ground \u2014 ${avg}\/5. Work chapter by chapter on the largest gaps.`\r\n : `Starting point \u2014 ${avg}\/5. Begin with Part I. The floor comes first.`;\r\n document.getElementById('r-headline').textContent = hl;\r\n\r\n const ranked = Cs.map((d,i)=>({...d,score:scores[i]||1})).sort((a,b)=>a.score-b.score);\r\n const chart = document.getElementById('r-chart');\r\n chart.innerHTML = ranked.map(d=>`\r\n <div class=\"r-row\">\r\n <span class=\"r-label\">${d.name}<\/span>\r\n <div class=\"r-track\"><div class=\"r-fill\" data-w=\"${(d.score\/5)*100}%\"><\/div><\/div>\r\n <span class=\"r-score\">${d.score}<\/span>\r\n <\/div>`).join('');\r\n setTimeout(()=>{ chart.querySelectorAll('.r-fill').forEach(f=>{f.style.width=f.dataset.w;}); },100);\r\n document.getElementById('restart-btn').addEventListener('click',restart);\r\n}\r\n\r\nfunction restart() {\r\n scores.fill(null); cur=0;\r\n resPan.classList.remove('show');\r\n qCont.style.display='';\r\n renderQ(0);\r\n}\r\n\r\nrenderQ(0);\r\n\r\n\/\/ \u2500\u2500 FORM HANDLERS (WEBMASTER: replace with real integrations) \u2500\u2500\r\nfunction handleResultEmail() {\r\n const e = document.getElementById('result-email').value;\r\n if(!e||!e.includes('@')){ alert('Please enter a valid email address.'); return; }\r\n \/\/ WEBMASTER: POST to your email service here (ConvertKit, Mailchimp, etc.)\r\n alert('Thank you! Your C Index report will arrive in your inbox shortly.');\r\n}\r\nfunction handleNewsletter() {\r\n const e = document.getElementById('newsletter-email').value;\r\n if(!e||!e.includes('@')){ alert('Please enter a valid email address.'); return; }\r\n \/\/ WEBMASTER: POST to your email service here\r\n alert('Thank you for subscribing. Welcome to the 17 Cs community.');\r\n}\r\nfunction handlePressForm() {\r\n \/\/ WEBMASTER: Replace with Formspree, Netlify Forms, or your backend\r\n alert('Thank you for your enquiry. Professor Imam\\'s team will be in touch within 48 hours.');\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>UNLOCK \u2014 The 17 Cs of Human Flourishing | Professor Mohamed A. Imam UNLOCK \u00b7 The 17 Cs The 17 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/unlock17cs.com\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unlock17cs.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/unlock17cs.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/unlock17cs.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unlock17cs.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":40,"href":"https:\/\/unlock17cs.com\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":57,"href":"https:\/\/unlock17cs.com\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/57"}],"wp:attachment":[{"href":"https:\/\/unlock17cs.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nUNLOCK \u2014 The 17 Cs of Human Flourishing | Professor Mohamed A. Imam<\/title>\r\n<meta name=\"description\" content=\"UNLOCK: The Smallest True Thing \u2014 a surgeon's 17 practices for a life that holds in the digital age. By Professor Mohamed A. Imam, Director of Research and Development, NHS.\">\r\n<meta name=\"author\" content=\"Professor Mohamed A. Imam\">\r\n<meta property=\"og:title\" content=\"UNLOCK \u2014 The 17 Cs of Human Flourishing\">\r\n<meta property=\"og:description\" content=\"A surgeon's 17 practices for a life that holds. Written between scans, during immunotherapy, with the urgency of someone who knows time is not guaranteed.\">\r\n<meta property=\"og:type\" content=\"website\">\r\n<meta property=\"og:url\" content=\"https:\/\/unlock17cs.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Cormorant:ital,wght@1,400;1,600&family=Jost:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n TOKENS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n:root {\r\n --ink: #12100e;\r\n --ink-mid: #3a3530;\r\n --ink-light: #6b6158;\r\n --cream: #f6f1e9;\r\n --cream-2: #ede6d8;\r\n --cream-3: #e4dccb;\r\n --gold: #c8a84b;\r\n --gold-light: #f0e4bc;\r\n --gold-warm: #d4a843;\r\n --navy: #0d1e3c;\r\n --navy-mid: #152847;\r\n --white: #fefdfb;\r\n\r\n --serif: 'Cormorant Garamond', Georgia, serif;\r\n --italic: 'Cormorant', Georgia, serif;\r\n --sans: 'Jost', sans-serif;\r\n\r\n --ease: cubic-bezier(.4,0,.2,1);\r\n --t: all .4s var(--ease);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESET\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\nhtml { scroll-behavior: smooth; font-size: 16px; }\r\nbody {\r\n font-family: var(--serif);\r\n background: var(--cream);\r\n color: var(--ink);\r\n overflow-x: hidden;\r\n -webkit-font-smoothing: antialiased;\r\n}\r\nimg { display: block; max-width: 100%; }\r\na { color: inherit; text-decoration: none; }\r\nbutton, input, textarea, select {\r\n font-family: inherit;\r\n outline: none;\r\n border: none;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n NAV\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.nav {\r\n position: fixed; top: 0; left: 0; right: 0; z-index: 200;\r\n display: flex; align-items: center; justify-content: space-between;\r\n padding: 0 clamp(20px,5vw,72px);\r\n height: 72px;\r\n background: rgba(246,241,233,.96);\r\n backdrop-filter: blur(20px);\r\n border-bottom: 1px solid rgba(18,16,14,.07);\r\n transition: box-shadow .3s;\r\n}\r\n.nav.scrolled { box-shadow: 0 2px 24px rgba(18,16,14,.08); }\r\n\r\n.nav-brand { display: flex; align-items: baseline; gap: 10px; }\r\n.nav-title {\r\n font-family: var(--serif); font-size: 22px; font-weight: 700;\r\n color: var(--ink); letter-spacing: -.5px; line-height: 1;\r\n}\r\n.nav-sep { color: var(--gold); font-size: 20px; }\r\n.nav-sub {\r\n font-family: var(--sans); font-size: 11px; font-weight: 500;\r\n color: var(--gold); letter-spacing: 2px; text-transform: uppercase;\r\n}\r\n\r\n.nav-links {\r\n display: flex; gap: 2px; list-style: none; align-items: center;\r\n}\r\n.nav-links a {\r\n font-family: var(--sans); font-size: 12px; font-weight: 400;\r\n color: var(--ink-light); padding: 7px 14px; border-radius: 3px;\r\n letter-spacing: .3px; transition: var(--t);\r\n}\r\n.nav-links a:hover { color: var(--ink); background: rgba(18,16,14,.05); }\r\n.nav-cta {\r\n background: var(--navy) !important;\r\n color: var(--cream) !important;\r\n font-weight: 500 !important;\r\n margin-left: 10px;\r\n}\r\n.nav-cta:hover { background: var(--gold-warm) !important; color: var(--ink) !important; }\r\n\r\n.nav-hamburger {\r\n display: none; flex-direction: column; gap: 5px;\r\n background: none; cursor: pointer; padding: 4px;\r\n}\r\n.nav-hamburger span {\r\n display: block; width: 24px; height: 2px;\r\n background: var(--ink); border-radius: 2px; transition: var(--t);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n HERO\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.hero {\r\n min-height: 100vh;\r\n background: var(--navy);\r\n display: grid;\r\n grid-template-columns: 1fr 420px;\r\n gap: 0;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.hero-bg {\r\n position: absolute; inset: 0;\r\n background:\r\n radial-gradient(ellipse 70% 60% at 60% 40%, rgba(200,168,75,.07) 0%, transparent 65%),\r\n radial-gradient(ellipse 30% 70% at 5% 70%, rgba(246,241,233,.03) 0%, transparent 55%);\r\n}\r\n\r\n\/* Fine horizontal rule texture *\/\r\n.hero-bg::after {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background: repeating-linear-gradient(\r\n 0deg,\r\n transparent 0px, transparent 28px,\r\n rgba(200,168,75,.015) 28px, rgba(200,168,75,.015) 29px\r\n );\r\n}\r\n\r\n.hero-content {\r\n position: relative; z-index: 2;\r\n padding: 140px clamp(24px,5vw,80px) 80px;\r\n display: flex; flex-direction: column; justify-content: center;\r\n max-width: 760px;\r\n}\r\n\r\n.hero-eyebrow {\r\n display: flex; align-items: center; gap: 16px;\r\n margin-bottom: 40px;\r\n}\r\n.hero-eyebrow-line { width: 48px; height: 1px; background: var(--gold); }\r\n.hero-eyebrow-text {\r\n font-family: var(--sans); font-size: 11px; font-weight: 600;\r\n color: var(--gold); letter-spacing: 3px; text-transform: uppercase;\r\n}\r\n\r\n.hero-title {\r\n font-family: var(--serif);\r\n font-size: clamp(76px,11vw,148px);\r\n font-weight: 700;\r\n color: var(--gold);\r\n line-height: .86;\r\n letter-spacing: -5px;\r\n margin-bottom: 24px;\r\n}\r\n\r\n.hero-subtitle {\r\n font-family: var(--italic);\r\n font-size: clamp(18px,2.2vw,24px);\r\n font-weight: 400;\r\n color: rgba(246,241,233,.5);\r\n line-height: 1.55;\r\n letter-spacing: .2px;\r\n margin-bottom: 48px;\r\n max-width: 520px;\r\n}\r\n\r\n.hero-quote {\r\n border-left: 2px solid var(--gold);\r\n padding: 18px 24px;\r\n margin-bottom: 52px;\r\n background: rgba(200,168,75,.06);\r\n border-radius: 0 3px 3px 0;\r\n max-width: 500px;\r\n}\r\n.hero-quote p {\r\n font-family: var(--serif);\r\n font-size: clamp(16px,1.9vw,20px);\r\n font-style: italic;\r\n color: rgba(246,241,233,.8);\r\n line-height: 1.7;\r\n}\r\n\r\n.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }\r\n\r\n.btn {\r\n display: inline-flex; align-items: center; gap: 10px;\r\n font-family: var(--sans); font-size: 12px; font-weight: 600;\r\n letter-spacing: 1px; text-transform: uppercase;\r\n padding: 14px 30px; border-radius: 2px; cursor: pointer;\r\n transition: var(--t); border: none;\r\n}\r\n.btn-gold {\r\n background: var(--gold); color: var(--ink);\r\n}\r\n.btn-gold:hover {\r\n background: var(--gold-warm);\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 28px rgba(200,168,75,.35);\r\n}\r\n.btn-ghost {\r\n background: transparent; color: rgba(246,241,233,.6);\r\n border: 1px solid rgba(246,241,233,.2);\r\n}\r\n.btn-ghost:hover { color: var(--gold); border-color: var(--gold); }\r\n.btn-dark {\r\n background: var(--ink); color: var(--cream);\r\n}\r\n.btn-dark:hover { background: var(--navy-mid); }\r\n\r\n\/* Hero right \u2014 book visual *\/\r\n.hero-visual {\r\n position: relative; z-index: 2;\r\n display: flex; flex-direction: column;\r\n align-items: center; justify-content: center;\r\n padding: 120px 48px 80px;\r\n}\r\n\r\n.book-wrap {\r\n position: relative;\r\n animation: float 7s ease-in-out infinite;\r\n}\r\n@keyframes float {\r\n 0%,100% { transform: translateY(0) rotate(-2.5deg); }\r\n 50% { transform: translateY(-18px) rotate(-1.5deg); }\r\n}\r\n\r\n.book {\r\n width: clamp(200px,22vw,280px);\r\n aspect-ratio: 2\/3;\r\n background: linear-gradient(155deg,#1e3a6e 0%,#0c1f3f 55%,#07132a 100%);\r\n border-radius: 3px 8px 8px 3px;\r\n border-left: 6px solid var(--gold);\r\n padding: clamp(24px,5%,40px) clamp(18px,4%,28px);\r\n display: flex; flex-direction: column; justify-content: space-between;\r\n box-shadow:\r\n -10px 10px 0 rgba(0,0,0,.5),\r\n -20px 20px 0 rgba(0,0,0,.22),\r\n 0 40px 100px rgba(0,0,0,.65),\r\n inset 2px 0 0 rgba(200,168,75,.12);\r\n position: relative; overflow: hidden;\r\n}\r\n.book::before {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background: repeating-linear-gradient(\r\n 180deg,\r\n transparent 0,transparent 5px,\r\n rgba(200,168,75,.02) 5px,rgba(200,168,75,.02) 6px\r\n );\r\n}\r\n\r\n.book-top { position: relative; }\r\n.book-series {\r\n font-family: var(--sans); font-size: 9px; font-weight: 600;\r\n color: rgba(200,168,75,.7); letter-spacing: 3px; text-transform: uppercase;\r\n margin-bottom: 12px;\r\n}\r\n.book-name {\r\n font-family: var(--serif); font-size: clamp(48px,8vw,72px);\r\n font-weight: 700; color: var(--gold);\r\n line-height: .88; letter-spacing: -3px;\r\n}\r\n\r\n.book-divider {\r\n width: 32px; height: 1px;\r\n background: rgba(200,168,75,.45); margin: 14px 0;\r\n}\r\n.book-strapline {\r\n font-family: var(--sans); font-size: 7.5px; font-weight: 300;\r\n color: rgba(246,241,233,.4); letter-spacing: 1.2px;\r\n text-transform: uppercase; line-height: 1.8;\r\n}\r\n\r\n.book-author {\r\n font-family: var(--serif); font-size: 12px; font-weight: 500;\r\n font-style: italic; color: rgba(246,241,233,.5);\r\n}\r\n\r\n.hero-book-caption {\r\n font-family: var(--serif); font-size: 14px; font-style: italic;\r\n color: rgba(246,241,233,.3); text-align: center;\r\n margin-top: 28px; line-height: 1.7; max-width: 220px;\r\n}\r\n\r\n\/* Stats strip *\/\r\n.hero-stats {\r\n position: relative; z-index: 2;\r\n grid-column: 1 \/ -1;\r\n display: flex; border-top: 1px solid rgba(246,241,233,.08);\r\n}\r\n.stat {\r\n flex: 1; padding: 22px 28px;\r\n border-right: 1px solid rgba(246,241,233,.08);\r\n text-align: center;\r\n}\r\n.stat:last-child { border-right: none; }\r\n.stat-n {\r\n font-family: var(--serif); font-size: 36px; font-weight: 300;\r\n color: var(--gold); line-height: 1; letter-spacing: -1px;\r\n display: block; margin-bottom: 4px;\r\n}\r\n.stat-l {\r\n font-family: var(--sans); font-size: 9px; font-weight: 500;\r\n color: rgba(246,241,233,.35); letter-spacing: 2px; text-transform: uppercase;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTIONS \u2014 SHARED\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nsection { padding: clamp(72px,10vw,128px) clamp(24px,5vw,72px); }\r\n.inner { max-width: 1200px; margin: 0 auto; }\r\n.inner-narrow { max-width: 800px; margin: 0 auto; }\r\n\r\n.section-label {\r\n display: flex; align-items: center; gap: 14px; margin-bottom: 24px;\r\n}\r\n.section-label-line { width: 32px; height: 1px; background: var(--gold); }\r\n.section-label-text {\r\n font-family: var(--sans); font-size: 10px; font-weight: 600;\r\n color: var(--gold); letter-spacing: 3px; text-transform: uppercase;\r\n}\r\n\r\n.section-h2 {\r\n font-family: var(--serif);\r\n font-size: clamp(34px,5vw,58px);\r\n font-weight: 400; line-height: 1.08; letter-spacing: -1.5px;\r\n margin-bottom: 28px;\r\n}\r\n\r\n\/* Reveal on scroll *\/\r\n.reveal {\r\n opacity: 0; transform: translateY(30px);\r\n transition: opacity .7s var(--ease), transform .7s var(--ease);\r\n}\r\n.reveal.visible { opacity: 1; transform: none; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n STORY\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.story-section { background: var(--cream); }\r\n.story-grid {\r\n display: grid; grid-template-columns: 280px 1fr;\r\n gap: 80px; align-items: start;\r\n}\r\n\r\n.story-numbers { position: sticky; top: 100px; }\r\n.story-stat { border-top: 1px solid rgba(18,16,14,.1); padding: 20px 0; }\r\n.story-stat .n {\r\n font-family: var(--serif); font-size: 56px; font-weight: 300;\r\n color: var(--gold); line-height: 1; letter-spacing: -2px; display: block;\r\n}\r\n.story-stat .l {\r\n font-family: var(--sans); font-size: 9px; font-weight: 500;\r\n color: var(--ink-light); letter-spacing: 2px; text-transform: uppercase;\r\n}\r\n\r\n.story-text h2 {\r\n font-family: var(--serif); font-size: clamp(30px,4vw,48px);\r\n font-weight: 400; font-style: italic;\r\n line-height: 1.18; letter-spacing: -1px;\r\n margin-bottom: 32px; color: var(--ink);\r\n}\r\n.story-text p {\r\n font-family: var(--serif); font-size: 18px; font-weight: 300;\r\n color: var(--ink-mid); line-height: 1.95; margin-bottom: 22px;\r\n}\r\n.story-text p strong { font-weight: 600; color: var(--ink); }\r\n.story-text p em { font-style: italic; color: var(--ink); }\r\n\r\n.story-pull {\r\n background: var(--navy);\r\n padding: 36px 40px; margin: 40px 0; border-radius: 3px;\r\n position: relative;\r\n}\r\n.story-pull::before {\r\n content: '\\201C';\r\n position: absolute; top: 12px; left: 28px;\r\n font-family: var(--serif); font-size: 88px; font-weight: 700;\r\n color: var(--gold); opacity: .25; line-height: 1;\r\n}\r\n.story-pull p {\r\n font-family: var(--serif); font-size: clamp(19px,2.4vw,26px);\r\n font-style: italic; color: var(--cream); line-height: 1.65;\r\n position: relative; margin: 0; letter-spacing: -.2px;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n FRAMEWORK\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.framework-section { background: var(--cream-2); }\r\n\r\n.parts-intro {\r\n display: grid; grid-template-columns: 1fr 2fr;\r\n gap: 64px; margin-bottom: 64px; align-items: start;\r\n}\r\n.parts-intro-body p {\r\n font-family: var(--serif); font-size: 22px; font-weight: 300;\r\n color: var(--ink-mid); line-height: 1.9; margin-bottom: 14px;\r\n}\r\n\r\n.cs-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }\r\n\r\n.part-header {\r\n grid-column: 1\/-1;\r\n background: var(--navy);\r\n padding: 18px 28px;\r\n margin-top: 24px; margin-bottom: 2px;\r\n border-radius: 3px 3px 0 0;\r\n display: flex; align-items: center; gap: 20px;\r\n}\r\n.part-header:first-of-type { margin-top: 0; }\r\n.part-num {\r\n font-family: var(--sans); font-size: 9px; font-weight: 700;\r\n color: var(--gold); letter-spacing: 3px; text-transform: uppercase;\r\n border: 1px solid rgba(200,168,75,.3); padding: 4px 10px; border-radius: 2px;\r\n flex-shrink: 0;\r\n}\r\n.part-title {\r\n font-family: var(--serif); font-size: 22px; font-weight: 400; font-style: italic;\r\n color: var(--cream);\r\n}\r\n\r\n.c-card {\r\n background: var(--white); padding: 26px 22px;\r\n border: 1px solid rgba(18,16,14,.07);\r\n transition: var(--t); cursor: default; position: relative; overflow: hidden;\r\n}\r\n.c-card::after {\r\n content: ''; position: absolute; bottom: 0; left: 0; right: 0;\r\n height: 2px; background: var(--gold);\r\n transform: scaleX(0) translateX(-50%);\r\n transition: transform .4s var(--ease);\r\n transform-origin: center;\r\n}\r\n.c-card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 14px 44px rgba(18,16,14,.1);\r\n border-color: transparent;\r\n}\r\n.c-card:hover::after { transform: scaleX(1) translateX(0); }\r\n\r\n.c-num {\r\n font-family: var(--sans); font-size: 9px; font-weight: 600;\r\n color: var(--gold); letter-spacing: 2.5px; text-transform: uppercase;\r\n margin-bottom: 8px;\r\n}\r\n.c-name {\r\n font-family: var(--serif); font-size: 23px; font-weight: 600;\r\n color: var(--ink); margin-bottom: 8px; letter-spacing: -.2px;\r\n}\r\n.c-def {\r\n font-family: var(--serif); font-size: 16px; font-style: italic;\r\n font-weight: 300; color: var(--ink-light); line-height: 1.7;\r\n}\r\n\r\n.c-card-note {\r\n background: var(--gold-light);\r\n border: 1px dashed rgba(200,168,75,.4);\r\n display: flex; align-items: center; padding: 20px 22px;\r\n}\r\n.c-card-note p {\r\n font-family: var(--serif); font-size: 17px; font-style: italic;\r\n color: var(--ink-mid); line-height: 1.7;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n C INDEX\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.cindex-section { background: var(--navy); }\r\n.cindex-section .section-label-line,\r\n.cindex-section .section-h2 { color: var(--cream); }\r\n.cindex-intro {\r\n font-family: var(--serif); font-size: 18px; font-style: italic;\r\n font-weight: 300; color: rgba(246,241,233,.55);\r\n line-height: 1.8; max-width: 600px; margin-bottom: 48px;\r\n}\r\n\r\n.cindex-shell {\r\n background: rgba(246,241,233,.04);\r\n border: 1px solid rgba(246,241,233,.1);\r\n border-radius: 6px; padding: clamp(28px,5%,52px);\r\n}\r\n\r\n.progress-bar {\r\n height: 3px; background: rgba(246,241,233,.1);\r\n border-radius: 2px; margin-bottom: 44px; overflow: hidden;\r\n}\r\n.progress-fill {\r\n height: 100%; background: var(--gold);\r\n width: 0; transition: width .5s var(--ease); border-radius: 2px;\r\n}\r\n\r\n.q-panel { display: none; animation: qfade .4s var(--ease); }\r\n.q-panel.active { display: block; }\r\n@keyframes qfade {\r\n from { opacity:0; transform:translateX(16px); }\r\n to { opacity:1; transform:none; }\r\n}\r\n\r\n.q-step {\r\n font-family: var(--sans); font-size: 10px; font-weight: 600;\r\n color: var(--gold); letter-spacing: 3px; text-transform: uppercase;\r\n margin-bottom: 10px;\r\n}\r\n.q-c {\r\n font-family: var(--serif); font-size: 30px; font-weight: 600;\r\n color: var(--cream); margin-bottom: 10px; letter-spacing: -.5px;\r\n}\r\n.q-stmt {\r\n font-family: var(--serif); font-size: 19px; font-style: italic;\r\n font-weight: 300; color: rgba(246,241,233,.68);\r\n line-height: 1.72; margin-bottom: 34px;\r\n}\r\n\r\n.score-btns { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }\r\n.score-btn {\r\n width: 58px; height: 58px;\r\n background: rgba(246,241,233,.06);\r\n border: 1px solid rgba(246,241,233,.14);\r\n border-radius: 4px; font-family: var(--serif);\r\n font-size: 22px; font-weight: 600;\r\n color: rgba(246,241,233,.45);\r\n cursor: pointer; transition: var(--t);\r\n display: flex; align-items: center; justify-content: center;\r\n}\r\n.score-btn:hover { background: rgba(200,168,75,.18); border-color: var(--gold); color: var(--gold); }\r\n.score-btn.selected { background: var(--gold); border-color: var(--gold); color: var(--ink); }\r\n.score-btn.flash { border-color: var(--gold) !important; }\r\n\r\n.score-legend {\r\n display: flex; justify-content: space-between; margin-bottom: 36px;\r\n}\r\n.score-legend span {\r\n font-family: var(--sans); font-size: 9px;\r\n color: rgba(246,241,233,.3); letter-spacing: 1px; text-transform: uppercase;\r\n}\r\n\r\n.q-nav { display: flex; align-items: center; gap: 12px; }\r\n.btn-prev {\r\n background: rgba(246,241,233,.08); color: rgba(246,241,233,.5);\r\n font-size: 11px; padding: 12px 22px;\r\n}\r\n.btn-prev:hover { background: rgba(246,241,233,.13); }\r\n.btn-next { font-size: 11px; padding: 12px 22px; }\r\n.q-count {\r\n font-family: var(--sans); font-size: 11px;\r\n color: rgba(246,241,233,.28); margin-left: auto;\r\n}\r\n\r\n\/* Results *\/\r\n.results-panel { display: none; }\r\n.results-panel.show { display: block; animation: qfade .5s var(--ease); }\r\n.results-headline {\r\n font-family: var(--serif); font-size: clamp(22px,3.5vw,36px);\r\n font-style: italic; font-weight: 400;\r\n color: var(--cream); margin-bottom: 36px; line-height: 1.4;\r\n}\r\n.results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 36px; }\r\n.r-row { display: flex; align-items: center; gap: 12px; }\r\n.r-label {\r\n font-family: var(--sans); font-size: 9.5px; font-weight: 500;\r\n color: rgba(246,241,233,.45); letter-spacing: 1px; text-transform: uppercase;\r\n width: 108px; flex-shrink: 0;\r\n}\r\n.r-track { flex: 1; height: 5px; background: rgba(246,241,233,.08); border-radius: 3px; overflow: hidden; }\r\n.r-fill { height: 100%; background: var(--gold); border-radius: 3px; width: 0; transition: width .9s var(--ease); }\r\n.r-score {\r\n font-family: var(--serif); font-size: 15px; font-weight: 600;\r\n color: var(--gold); width: 18px; text-align: right; flex-shrink: 0;\r\n}\r\n\r\n.email-capture {\r\n background: rgba(246,241,233,.06);\r\n border: 1px solid rgba(200,168,75,.22);\r\n border-radius: 4px; padding: 32px; margin-bottom: 24px;\r\n}\r\n.email-capture h3 {\r\n font-family: var(--serif); font-size: 24px; font-weight: 600;\r\n color: var(--cream); margin-bottom: 8px;\r\n}\r\n.email-capture p {\r\n font-family: var(--serif); font-size: 15px; font-style: italic;\r\n font-weight: 300; color: rgba(246,241,233,.5);\r\n margin-bottom: 20px; line-height: 1.65;\r\n}\r\n.email-row { display: flex; gap: 10px; }\r\n.email-input {\r\n flex: 1;\r\n background: rgba(246,241,233,.09);\r\n border: 1px solid rgba(246,241,233,.14);\r\n border-radius: 2px; padding: 13px 16px;\r\n font-family: var(--serif); font-size: 16px; color: var(--cream);\r\n transition: var(--t);\r\n}\r\n.email-input::placeholder { color: rgba(246,241,233,.28); }\r\n.email-input:focus { border-color: var(--gold); background: rgba(246,241,233,.12); }\r\n.btn-restart {\r\n background: none; font-family: var(--sans); font-size: 11px;\r\n color: rgba(246,241,233,.28); cursor: pointer; letter-spacing: 1px;\r\n text-transform: uppercase; padding: 8px 0; text-decoration: underline;\r\n transition: var(--t);\r\n}\r\n.btn-restart:hover { color: var(--gold); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n AUTHOR\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.author-section { background: var(--cream); }\r\n.author-grid { display: grid; grid-template-columns: 360px 1fr; gap: 80px; align-items: start; }\r\n\r\n.author-portrait {\r\n position: sticky; top: 100px;\r\n}\r\n.portrait-img {\r\n width: 100%; aspect-ratio: 3\/4;\r\n background: var(--cream-3);\r\n border-radius: 3px;\r\n overflow: hidden; border: 1px solid rgba(18,16,14,.1);\r\n display: flex; align-items: center; justify-content: center;\r\n margin-bottom: 16px;\r\n}\r\n.portrait-img img {\r\n width: 100%;\r\n height: 100%;\r\n display: block;\r\n object-fit: cover;\r\n object-position: center top;\r\n}\r\n\/* \u2500\u2500 WEBMASTER NOTE: Replace the placeholder below with <img decoding=\"async\" src=\"photo.jpg\" alt=\"Professor Mohamed A. Imam\"> \u2500\u2500 *\/\r\n.portrait-placeholder {\r\n display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px;\r\n text-align: center;\r\n}\r\n.portrait-initials {\r\n width: 90px; height: 90px; background: var(--navy);\r\n border-radius: 50%; display: flex; align-items: center; justify-content: center;\r\n font-family: var(--serif); font-size: 32px; font-weight: 700; color: var(--gold);\r\n}\r\n.portrait-placeholder p {\r\n font-family: var(--sans); font-size: 10px;\r\n color: rgba(18,16,14,.3); letter-spacing: 1.5px; text-transform: uppercase;\r\n line-height: 1.6;\r\n}\r\n\r\n.author-creds { display: flex; flex-direction: column; gap: 8px; }\r\n.cred {\r\n display: flex; align-items: flex-start; gap: 12px;\r\n padding: 11px 14px; background: var(--cream-2); border-radius: 2px;\r\n}\r\n.cred-dot { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; flex-shrink: 0; margin-top: 7px; }\r\n.cred-text { font-family: var(--sans); font-size: 11px; color: var(--ink-mid); line-height: 1.5; }\r\n\r\n.author-bio h2 { color: var(--ink); }\r\n.author-role {\r\n font-family: var(--serif); font-size: 18px; font-style: italic;\r\n font-weight: 300; color: var(--gold-warm); margin-bottom: 32px;\r\n}\r\n.author-bio p {\r\n font-family: var(--serif); font-size: 18px; font-weight: 300;\r\n color: var(--ink-mid); line-height: 1.95; margin-bottom: 22px;\r\n}\r\n.author-bio p strong { font-weight: 600; color: var(--ink); }\r\n\r\n.dedication {\r\n background: var(--navy); padding: 32px 36px;\r\n border-radius: 3px; margin: 36px 0;\r\n}\r\n.dedication p {\r\n font-family: var(--serif); font-size: 15px; font-style: italic;\r\n font-weight: 300; color: rgba(246,241,233,.65);\r\n line-height: 2.1; margin: 0;\r\n}\r\n.dedication p strong { color: var(--gold); font-weight: 400; }\r\n\r\n.author-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }\r\n.author-link {\r\n font-family: var(--sans); font-size: 11px; font-weight: 500;\r\n color: var(--ink); letter-spacing: 1px; text-transform: uppercase;\r\n padding: 10px 18px; border: 1px solid rgba(18,16,14,.2);\r\n border-radius: 2px; transition: var(--t);\r\n}\r\n.author-link:hover { border-color: var(--gold); color: var(--gold); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n FRAMEWORKS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.frameworks-section { background: var(--cream-2); }\r\n.frameworks-intro {\r\n display: grid; grid-template-columns: 1fr 2fr; gap: 64px; margin-bottom: 52px;\r\n}\r\n.frameworks-intro p {\r\n font-family: var(--serif); font-size: 20px; font-weight: 300;\r\n color: var(--ink-mid); line-height: 1.9; margin-bottom: 14px;\r\n}\r\n\r\n.fw-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; }\r\n.fw-card {\r\n background: var(--white); padding: 22px 18px;\r\n border: 1px solid rgba(18,16,14,.06); transition: var(--t); cursor: default;\r\n}\r\n.fw-card:hover { background: var(--navy); border-color: var(--navy); }\r\n.fw-card:hover .fw-c { color: rgba(246,241,233,.4); }\r\n.fw-card:hover .fw-name { color: var(--gold); }\r\n.fw-card:hover .fw-desc { color: rgba(246,241,233,.55); }\r\n\r\n.fw-c {\r\n font-family: var(--sans); font-size: 9px; font-weight: 600;\r\n color: var(--gold); letter-spacing: 2px; text-transform: uppercase;\r\n margin-bottom: 8px; transition: var(--t);\r\n}\r\n.fw-name {\r\n font-family: var(--serif); font-size: 15px; font-weight: 600;\r\n color: var(--ink); line-height: 1.3; margin-bottom: 8px; transition: var(--t);\r\n}\r\n.fw-desc {\r\n font-family: var(--serif); font-size: 16px; font-style: italic;\r\n font-weight: 300; color: var(--ink-light); line-height: 1.7; transition: var(--t);\r\n}\r\n.fw-attr {\r\n font-family: var(--sans); font-size: 9px; color: var(--ink-light);\r\n letter-spacing: 1px; text-transform: uppercase;\r\n margin-top: 36px; text-align: right; opacity: .5;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n PRESS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.press-section { background: var(--cream); }\r\n.press-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; }\r\n\r\n.press-body p {\r\n font-family: var(--serif); font-size: 17px; font-weight: 300;\r\n color: var(--ink-mid); line-height: 1.9; margin-bottom: 20px;\r\n}\r\n.press-body p strong { font-weight: 600; color: var(--ink); }\r\n\r\n.comps { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0; }\r\n.comp {\r\n font-family: var(--serif); font-size: 14px; font-style: italic;\r\n color: var(--ink); background: var(--cream-2);\r\n border: 1px solid rgba(18,16,14,.12);\r\n padding: 8px 18px; border-radius: 2px; transition: var(--t);\r\n}\r\n.comp:hover { background: var(--ink); color: var(--gold); border-color: var(--ink); }\r\n\r\n.press-downloads { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }\r\n.dl-item {\r\n display: flex; align-items: center; gap: 16px;\r\n padding: 14px 18px; background: var(--cream-2);\r\n border: 1px solid rgba(18,16,14,.08);\r\n border-radius: 3px; transition: var(--t); cursor: pointer;\r\n}\r\n.dl-item:hover { border-color: var(--gold); background: var(--white); }\r\n.dl-icon { font-size: 20px; }\r\n.dl-name { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--ink); }\r\n.dl-sub { font-family: var(--sans); font-size: 10px; color: var(--ink-light); letter-spacing: 1px; text-transform: uppercase; }\r\n\r\n.press-form {\r\n background: var(--navy); border-radius: 6px; padding: 40px 36px;\r\n position: sticky; top: 90px;\r\n}\r\n.press-form h3 {\r\n font-family: var(--serif); font-size: 26px; font-weight: 400; font-style: italic;\r\n color: var(--cream); margin-bottom: 22px;\r\n}\r\n.form-field { margin-bottom: 14px; }\r\n.form-field label {\r\n display: block; font-family: var(--sans); font-size: 9px; font-weight: 600;\r\n color: var(--gold); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px;\r\n}\r\n.form-field input,\r\n.form-field textarea,\r\n.form-field select {\r\n width: 100%; background: rgba(246,241,233,.07);\r\n border: 1px solid rgba(246,241,233,.13); border-radius: 2px;\r\n padding: 11px 14px; font-family: var(--serif); font-size: 15px;\r\n color: var(--cream); transition: var(--t);\r\n}\r\n.form-field input:focus,\r\n.form-field textarea:focus,\r\n.form-field select:focus { border-color: var(--gold); }\r\n.form-field input::placeholder,\r\n.form-field textarea::placeholder { color: rgba(246,241,233,.25); }\r\n.form-field textarea { resize: vertical; min-height: 90px; }\r\n.form-field select { color: rgba(246,241,233,.7); }\r\n.form-field select option { background: var(--navy); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n NEWSLETTER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.newsletter-section {\r\n background: var(--gold-light);\r\n border-top: 1px solid rgba(200,168,75,.3);\r\n border-bottom: 1px solid rgba(200,168,75,.3);\r\n padding: clamp(64px,8vw,100px) clamp(24px,5vw,72px);\r\n}\r\n.newsletter-inner { max-width: 700px; margin: 0 auto; text-align: center; }\r\n.newsletter-inner h2 {\r\n font-family: var(--serif); font-size: clamp(28px,4vw,44px);\r\n font-weight: 400; font-style: italic; color: var(--ink);\r\n margin-bottom: 16px; letter-spacing: -1px; line-height: 1.2;\r\n}\r\n.newsletter-inner p {\r\n font-family: var(--serif); font-size: 17px; font-weight: 300;\r\n color: var(--ink-mid); line-height: 1.85; margin-bottom: 36px;\r\n}\r\n.newsletter-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }\r\n.newsletter-input {\r\n flex: 1; background: var(--white);\r\n border: 1px solid rgba(18,16,14,.15); border-radius: 2px;\r\n padding: 14px 18px; font-family: var(--serif); font-size: 16px; color: var(--ink);\r\n transition: var(--t);\r\n}\r\n.newsletter-input:focus { border-color: var(--ink); }\r\n.newsletter-input::placeholder { color: rgba(18,16,14,.3); }\r\n.newsletter-note {\r\n font-family: var(--sans); font-size: 10px; color: rgba(18,16,14,.35);\r\n letter-spacing: .5px; margin-top: 14px;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n FOOTER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfooter {\r\n background: var(--ink);\r\n padding: 64px clamp(24px,5vw,72px) 36px;\r\n}\r\n.footer-grid {\r\n max-width: 1200px; margin: 0 auto;\r\n display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;\r\n gap: 48px; padding-bottom: 48px;\r\n border-bottom: 1px solid rgba(246,241,233,.08);\r\n margin-bottom: 32px;\r\n}\r\n.footer-brand-name {\r\n font-family: var(--serif); font-size: 36px; font-weight: 700;\r\n color: var(--gold); letter-spacing: -1px; margin-bottom: 6px;\r\n}\r\n.footer-brand-sub {\r\n font-family: var(--sans); font-size: 9px; font-weight: 400;\r\n color: rgba(246,241,233,.3); letter-spacing: 2px; text-transform: uppercase;\r\n margin-bottom: 20px;\r\n}\r\n.footer-tagline {\r\n font-family: var(--serif); font-size: 14px; font-style: italic; font-weight: 300;\r\n color: rgba(246,241,233,.3); line-height: 1.75; max-width: 280px;\r\n}\r\n.footer-social { display: flex; gap: 10px; margin-top: 24px; }\r\n.social-btn {\r\n font-family: var(--sans); font-size: 9px; font-weight: 600;\r\n color: rgba(246,241,233,.4); letter-spacing: 1.5px; text-transform: uppercase;\r\n padding: 7px 12px; border: 1px solid rgba(246,241,233,.12);\r\n border-radius: 2px; transition: var(--t);\r\n}\r\n.social-btn:hover { color: var(--gold); border-color: var(--gold); }\r\n\r\n.footer-col h4 {\r\n font-family: var(--sans); font-size: 9px; font-weight: 600;\r\n color: var(--gold); letter-spacing: 2.5px; text-transform: uppercase;\r\n margin-bottom: 16px;\r\n}\r\n.footer-col ul { list-style: none; }\r\n.footer-col li { margin-bottom: 10px; }\r\n.footer-col a {\r\n font-family: var(--serif); font-size: 15px; font-weight: 300;\r\n color: rgba(246,241,233,.38); transition: var(--t);\r\n}\r\n.footer-col a:hover { color: var(--gold); }\r\n\r\n.footer-bottom {\r\n max-width: 1200px; margin: 0 auto;\r\n display: flex; justify-content: space-between; align-items: center;\r\n flex-wrap: wrap; gap: 12px;\r\n}\r\n.footer-bottom p {\r\n font-family: var(--sans); font-size: 11px;\r\n color: rgba(246,241,233,.22); letter-spacing: .3px;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESPONSIVE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media (max-width:1100px) {\r\n .hero { grid-template-columns: 1fr; }\r\n .hero-visual { display: none; }\r\n .hero-stats { grid-column: 1; }\r\n .story-grid { grid-template-columns: 1fr; }\r\n .story-numbers { position: static; display: flex; flex-wrap: wrap; gap: 0; }\r\n .story-stat { flex: 1 1 150px; }\r\n .author-grid { grid-template-columns: 1fr; }\r\n .author-portrait { position: static; }\r\n .press-grid { grid-template-columns: 1fr; }\r\n .frameworks-intro { grid-template-columns: 1fr; }\r\n .parts-intro { grid-template-columns: 1fr; }\r\n .footer-grid { grid-template-columns: 1fr 1fr; }\r\n}\r\n@media (max-width:768px) {\r\n .nav-links { display: none; }\r\n .nav-hamburger { display: flex; }\r\n .nav-links.open {\r\n display: flex; flex-direction: column;\r\n position: absolute; top: 72px; left: 0; right: 0;\r\n background: rgba(246,241,233,.98);\r\n backdrop-filter: blur(20px);\r\n padding: 20px; gap: 4px;\r\n border-bottom: 1px solid rgba(18,16,14,.08);\r\n }\r\n .nav-links.open a { font-size: 18px; padding: 12px 10px; }\r\n .nav-title { font-size: 20px; }\r\n .nav-sub { font-size: 12px; }\r\n .cs-grid { grid-template-columns: 1fr; }\r\n .cs-grid > * { min-width: 0; }\r\n .cs-grid > [style*=\"grid-column\"] { grid-column: auto !important; }\r\n .part-header { flex-direction: column; align-items: flex-start; padding: 20px 22px; gap: 10px; }\r\n .part-title { font-size: 18px; line-height: 1.35; }\r\n .c-card, .c-card-note { width: 100%; }\r\n .fw-grid { grid-template-columns: 1fr; }\r\n .hero-stats { flex-wrap: wrap; }\r\n .stat { flex: 1 1 45%; }\r\n .email-row { flex-direction: column; }\r\n .newsletter-form { flex-direction: column; }\r\n .results-grid { grid-template-columns: 1fr; }\r\n .footer-grid { grid-template-columns: 1fr; }\r\n .parts-intro-body p { font-size: 18px; line-height: 1.8; }\r\n .frameworks-intro p { font-size: 17px; line-height: 1.8; }\r\n .c-def { font-size: 18px; line-height: 1.75; }\r\n .fw-desc { font-size: 17px; line-height: 1.75; }\r\n}\r\n@media (max-width:480px) {\r\n .cs-grid { grid-template-columns: 1fr; }\r\n .fw-grid { grid-template-columns: 1fr; }\r\n .inner { width: min(100% - 32px, 1400px); }\r\n .part-header { margin-top: 18px; }\r\n .c-name { font-size: 19px; }\r\n .c-def { font-size: 17px; }\r\n .fw-name { font-size: 18px; line-height: 1.4; }\r\n .fw-desc { font-size: 16px; }\r\n .portrait-img { aspect-ratio: auto; }\r\n .score-btn { width: 50px; height: 50px; font-size: 18px; }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n\r\n<nav class=\"nav\" id=\"main-nav\">\r\n <a href=\"#hero\" class=\"nav-brand\">\r\n <span class=\"nav-title\">UNLOCK<\/span>\r\n <span class=\"nav-sep\">\u00b7<\/span>\r\n <span class=\"nav-sub\">The 17 Cs<\/span>\r\n <\/a>\r\n <ul class=\"nav-links\" id=\"nav-links\">\r\n <li><a href=\"#framework\">The 17 Cs<\/a><\/li>\r\n <li><a href=\"#cindex\">C Index<\/a><\/li>\r\n <li><a href=\"#author\">The Author<\/a><\/li>\r\n <li><a href=\"#frameworks\">20 Frameworks<\/a><\/li>\r\n <li><a href=\"#press\">Publishers<\/a><\/li>\r\n <li><a href=\"#newsletter\" class=\"nav-cta\">Register Interest<\/a><\/li>\r\n <\/ul>\r\n <button class=\"nav-hamburger\" id=\"hamburger\" aria-label=\"Menu\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n<\/nav>\r\n\r\n\r\n<section class=\"hero\" id=\"hero\">\r\n <div class=\"hero-bg\"><\/div>\r\n\r\n <div class=\"hero-content\">\r\n <div class=\"hero-eyebrow\">\r\n <div class=\"hero-eyebrow-line\"><\/div>\r\n <span class=\"hero-eyebrow-text\">Forthcoming 2026 \u2014 Register Your Interest<\/span>\r\n <\/div>\r\n <h1 class=\"hero-title\">UN<br>LOCK<\/h1>\r\n <p class=\"hero-subtitle\">The Smallest True Thing<br>A Surgeon's 17 Practices for a Life That Holds<\/p>\r\n <div class=\"hero-quote\">\r\n <p>\"Written between scans, during immunotherapy, with the urgency of someone who knows time is not guaranteed.\"<\/p>\r\n <\/div>\r\n <div class=\"hero-actions\">\r\n <a href=\"#cindex\" class=\"btn btn-gold\">Take the C Index \u2192<\/a>\r\n <a href=\"#framework\" class=\"btn btn-ghost\">Explore the Framework<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-visual\">\r\n <div class=\"book-wrap\">\r\n <div class=\"book\">\r\n <div class=\"book-top\">\r\n <div class=\"book-series\">The 17 Cs<\/div>\r\n <div class=\"book-name\">UN<br>LOCK<\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"book-divider\"><\/div>\r\n <div class=\"book-strapline\">The Smallest True Thing<br>A Surgeon's 17 Practices<br>for a Life That Holds<\/div>\r\n <\/div>\r\n <div class=\"book-author\">Professor Mohamed A. Imam<\/div>\r\n <\/div>\r\n <\/div>\r\n <p class=\"hero-book-caption\">A memoir. A framework.<br>A practical guide for the age of distraction.<\/p>\r\n <\/div>\r\n\r\n <div class=\"hero-stats\">\r\n <div class=\"stat\"><span class=\"stat-n\">30<\/span><span class=\"stat-l\">Years in Medicine<\/span><\/div>\r\n <div class=\"stat\"><span class=\"stat-n\">17<\/span><span class=\"stat-l\">Capacities<\/span><\/div>\r\n <div class=\"stat\"><span class=\"stat-n\">20<\/span><span class=\"stat-l\">Original Frameworks<\/span><\/div>\r\n <div class=\"stat\"><span class=\"stat-n\">150<sup style=\"font-size:.55em\">+<\/sup><\/span><span class=\"stat-l\">Publications<\/span><\/div>\r\n <div class=\"stat\"><span class=\"stat-n\">1<\/span><span class=\"stat-l\">Promise Kept<\/span><\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"story-section\" id=\"story\">\r\n <div class=\"inner\">\r\n <div class=\"story-grid\">\r\n <div class=\"story-numbers reveal\">\r\n <div class=\"story-stat\"><span class=\"n\">2016<\/span><span class=\"l\">Mother Ragaa<\/span><\/div>\r\n <div class=\"story-stat\"><span class=\"n\">2023<\/span><span class=\"l\">Brother Ali<\/span><\/div>\r\n <div class=\"story-stat\"><span class=\"n\">2024<\/span><span class=\"l\">Father Abdelnabi<\/span><\/div>\r\n <div class=\"story-stat\"><span class=\"n\">2024<\/span><span class=\"l\">The Diagnosis<\/span><\/div>\r\n <\/div>\r\n <div class=\"story-text reveal\">\r\n <h2>When the surgeon becomes the patient, everything becomes clear.<\/h2>\r\n <p>The report had my name at the top. Not a patient's name. Mine. Kidney cancer. A nephrectomy required. Lung involvement to be investigated. I had been a consultant orthopaedic surgeon for fifteen years, a professor, the <strong>Director of Research and Development at an NHS Foundation Trust<\/strong>. I had read sentences like this thousands of times on other people's documents. I had never been the subject of one.<\/p>\r\n <p>In that silence, I thought about a twelve-year-old boy in Ismailia, Egypt, who had made a promise. He had just finished reading a book his mother placed in his hands \u2014 and he had understood, with the clarity that children sometimes achieve before life complicates everything, that one day he would write a book that did for others what that book had done for him.<\/p>\r\n <p>Then he went on with life. Medicine. Surgery. A PhD. Five countries. <strong>Fellowships at Balgrist, the Mayo Clinic, Stanford, and the Steadman Clinic.<\/strong> A professorship at forty. 150 publications. 10 patents. Three losses in eight years. And then the scan.<\/p>\r\n <div class=\"story-pull\">\r\n <p>Skill is not the same as legacy. Impact is not the same as presence. A life spent fixing others cannot repair the one you have not yet lived.<\/p>\r\n <\/div>\r\n <p>I reached for my notebooks. I gathered thirty years of lessons from patients, teachers, failures, and grief. This is that book \u2014 finished between treatments, written with the urgency of someone who knows time is not guaranteed. It is not theory. It is a life \u2014 mine \u2014 laid open, in the hope that it helps you live yours more fully.<\/p>\r\n <div style=\"margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;\">\r\n <a href=\"#cindex\" class=\"btn btn-dark\">Take the C Index \u2192<\/a>\r\n <a href=\"#author\" class=\"btn\" style=\"border:1px solid rgba(18,16,14,.2);color:var(--ink);\">Meet the Author<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"framework-section\" id=\"framework\">\r\n <div class=\"inner\">\r\n <div class=\"section-label reveal\">\r\n <div class=\"section-label-line\"><\/div>\r\n <span class=\"section-label-text\">The Framework<\/span>\r\n <\/div>\r\n <div class=\"parts-intro reveal\">\r\n <div><h2 class=\"section-h2\">The 17 Cs<\/h2><\/div>\r\n <div class=\"parts-intro-body\">\r\n <p>Seventeen trainable capacities for human flourishing in the digital age. Each is a practice \u2014 not a personality trait. Each chapter has a Practice Kit with field drills you can begin today.<\/p>\r\n <p>Three parts, each building on the last: a floor that holds, a structure worth building, an architecture that lasts.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"cs-grid\">\r\n \r\n <div class=\"part-header reveal\">\r\n <span class=\"part-num\">Part I<\/span>\r\n <span class=\"part-title\">Stabilise \u2014 The Inner Foundation<\/span>\r\n <\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C1<\/div><div class=\"c-name\">Consciousness<\/div><div class=\"c-def\">Win back your attention. Build the ground you stand on.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C2<\/div><div class=\"c-name\">Clarity<\/div><div class=\"c-def\">Separate signal from noise. See what is actually true.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C3<\/div><div class=\"c-name\">Curiosity<\/div><div class=\"c-def\">Stay teachable. Ask the question nobody else is asking.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C4<\/div><div class=\"c-name\">Courage<\/div><div class=\"c-def\">Move while afraid. Re-order your loyalties.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C5<\/div><div class=\"c-name\">Confidence<\/div><div class=\"c-def\">Self-trust built from evidence, not applause.<\/div><\/div>\r\n <div class=\"c-card-note reveal\"><p>Five Cs form the floor on which everything else rests. Without the floor, nothing above it holds.<\/p><\/div>\r\n\r\n \r\n <div class=\"part-header reveal\">\r\n <span class=\"part-num\">Part II<\/span>\r\n <span class=\"part-title\">Outer Expansion \u2014 Creation<\/span>\r\n <\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C6<\/div><div class=\"c-name\">Creativity<\/div><div class=\"c-def\">See beyond the obvious. Build something better.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C7<\/div><div class=\"c-name\">Commitment<\/div><div class=\"c-def\">Stay loyal to a meaningful promise.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C8<\/div><div class=\"c-name\">Consistency<\/div><div class=\"c-def\">Show up. The smallest true thing, again and again.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C9<\/div><div class=\"c-name\">Compassion<\/div><div class=\"c-def\">See the full person before judging the behaviour.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C10<\/div><div class=\"c-name\">Connection<\/div><div class=\"c-def\">Turn toward. Choose depth over dopamine.<\/div><\/div>\r\n <div class=\"c-card-note reveal\"><p>Once the floor holds \u2014 what will you build? These five Cs are the materials.<\/p><\/div>\r\n\r\n \r\n <div class=\"part-header reveal\">\r\n <span class=\"part-num\">Part III<\/span>\r\n <span class=\"part-title\">Life Architecture \u2014 Integration<\/span>\r\n <\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C11<\/div><div class=\"c-name\">Character<\/div><div class=\"c-def\">Who you are when it costs you.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C12<\/div><div class=\"c-name\">Contribution<\/div><div class=\"c-def\">Turn work into meaning. Give something lasting.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C13<\/div><div class=\"c-name\">Control<\/div><div class=\"c-def\">Own the space between stimulus and response.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C14<\/div><div class=\"c-name\">Calibration<\/div><div class=\"c-def\">Adjust before you break. Trust reality.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C15<\/div><div class=\"c-name\">Compounding Effect<\/div><div class=\"c-def\">Tiny moves. Right direction. Long enough.<\/div><\/div>\r\n <div class=\"c-card reveal\"><div class=\"c-num\">C16<\/div><div class=\"c-name\">Calmness<\/div><div class=\"c-def\">Release what you cannot control. Keep what matters.<\/div><\/div>\r\n <div class=\"c-card reveal\" style=\"grid-column:span 2\"><div class=\"c-num\">C17<\/div><div class=\"c-name\">Choice<\/div><div class=\"c-def\">The hinge on every door. Live by values, not default. This is the last C and the first one you practise every morning. It is the integration of everything that came before it.<\/div><\/div>\r\n <div class=\"c-card-note reveal\"><p>Where values become structure. Where change becomes sustainable.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"cindex-section\" id=\"cindex\">\r\n <div class=\"inner\">\r\n <div class=\"section-label\">\r\n <div class=\"section-label-line\"><\/div>\r\n <span class=\"section-label-text\">The C Index<\/span>\r\n <\/div>\r\n <h2 class=\"section-h2\" style=\"color:var(--cream)\">Where are you right now?<\/h2>\r\n <p class=\"cindex-intro\">Score yourself honestly on each C. Five minutes. No right answers \u2014 only useful information. Enter your email at the end to receive your full results as a PDF.<\/p>\r\n\r\n <div class=\"cindex-shell\">\r\n <div class=\"progress-bar\"><div class=\"progress-fill\" id=\"prog\"><\/div><\/div>\r\n <div id=\"q-container\"><\/div>\r\n <div class=\"results-panel\" id=\"results\">\r\n <p class=\"results-headline\" id=\"r-headline\"><\/p>\r\n <div class=\"results-grid\" id=\"r-chart\"><\/div>\r\n <div class=\"email-capture\">\r\n <h3>Receive your full PDF report<\/h3>\r\n <p>Your personalised C Index \u2014 scores, analysis, and the chapters that matter most for where you are right now.<\/p>\r\n <div class=\"email-row\">\r\n \r\n <input type=\"email\" class=\"email-input\" placeholder=\"your@email.com\" id=\"result-email\">\r\n <button class=\"btn btn-gold\" onclick=\"handleResultEmail()\">Send My Report<\/button>\r\n <\/div>\r\n <\/div>\r\n <button class=\"btn-restart\" id=\"restart-btn\">Start again \u21ba<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"author-section\" id=\"author\">\r\n <div class=\"inner\">\r\n <div class=\"section-label reveal\">\r\n <div class=\"section-label-line\"><\/div>\r\n <span class=\"section-label-text\">The Author<\/span>\r\n <\/div>\r\n <div class=\"author-grid\">\r\n <div class=\"reveal\">\r\n <div class=\"author-portrait\">\r\n <div class=\"portrait-img\">\r\n <img decoding=\"async\" src=\"https:\/\/unlock17cs.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-03-20-at-12.22.52-AM.jpeg\" alt=\"Professor Mohamed A. Imam\" loading=\"lazy\">\r\n <\/div>\r\n <div class=\"author-creds\">\r\n <div class=\"cred\"><div class=\"cred-dot\"><\/div><span class=\"cred-text\">Director of Research & Development \u2014 Ashford & St Peter's NHS Foundation Trust<\/span><\/div>\r\n <div class=\"cred\"><div class=\"cred-dot\"><\/div><span class=\"cred-text\">Clinical Lead for Trauma Surgery \u2014 Rowley Bristow Orthopaedic Centre, Surrey<\/span><\/div>\r\n <div class=\"cred\"><div class=\"cred-dot\"><\/div><span class=\"cred-text\">Professor & Medical Director \u2014 Smart Health Centre, University of East London<\/span><\/div>\r\n <div class=\"cred\"><div class=\"cred-dot\"><\/div><span class=\"cred-text\">150+ peer-reviewed publications \u00b7 5 edited textbooks \u00b7 10+ surgical patents<\/span><\/div>\r\n <div class=\"cred\"><div class=\"cred-dot\"><\/div><span class=\"cred-text\">SICOT Pioneer Award 2025 \u00b7 NHS Leadership Award 2017 \u00b7 AAOS International Scholar<\/span><\/div>\r\n <div class=\"cred\"><div class=\"cred-dot\"><\/div><span class=\"cred-text\">Fellowships: Balgrist (Zurich) \u00b7 Mayo Clinic \u00b7 Stanford \u00b7 Steadman Clinic<\/span><\/div>\r\n <div class=\"cred\"><div class=\"cred-dot\"><\/div><span class=\"cred-text\">Oxford Executive Leadership \u00b7 Stanford Machine Learning Specialization<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"author-bio reveal\">\r\n <h2 class=\"section-h2\">Professor Mohamed A. Imam<\/h2>\r\n <p class=\"author-role\">Surgeon \u00b7 Scientist \u00b7 Innovator \u00b7 Director \u00b7 Author<\/p>\r\n <p>At twelve years old, in a house in Ismailia, Egypt, a boy read a book his mother placed in his hands and made a quiet promise: one day he would write a book that did for others what that book had done for him. <strong>This is that book. Thirty years later than promised. Written between immunotherapy treatments. Finished with the urgency of someone who knows time is not guaranteed.<\/strong><\/p>\r\n <p>Professor Imam is the Director of Research and Development at Ashford and St Peter's NHS Foundation Trust \u2014 a board-level NHS leadership appointment \u2014 and concurrently the Clinical Lead for Trauma Surgery at the Rowley Bristow Orthopaedic Centre and Professor and Medical Director at the Smart Health Centre, University of East London. He holds a PhD in orthopaedic science, an Executive Leadership Diploma from Oxford University's Sa\u00efd Business School, and a Machine Learning Specialization from Stanford University School of Medicine.<\/p>\r\n <p>He trained at Balgrist University Orthopaedic Centre in Zurich under Professor Christian Gerber \u2014 pioneer of modern shoulder surgery \u2014 and undertook fellowships at the Mayo Clinic, Stanford University, the Steadman Clinic, and Oxford University Hospitals. He is the founder of the OrthoGlobe Collaborative and the creator of TheArmDoc patient education platform.<\/p>\r\n <p>In 2016 he lost his mother Ragaa to breast cancer. In 2023 he lost his brother Ali at forty \u2014 Ali's last act on earth was kindness to a stranger. In 2024 he lost his father Abdelnabi. Months later came his own kidney cancer diagnosis. He became, for the first time, the patient rather than the surgeon. <em>UNLOCK<\/em> was written in that space.<\/p>\r\n\r\n <div class=\"dedication\">\r\n <p>\r\n <strong>For Mum.<\/strong> Ragaa \u2014 who kept the light on and the door open, always.<br>\r\n <strong>For Dad.<\/strong> Abdelnabi \u2014 who walked twenty kilometres to school so I would not have to.<br>\r\n <strong>For Ali.<\/strong> His last act on earth was kindness. That is everything.<br>\r\n <em>For Dalia, Yusef and Layla \u2014 the reason this had to be finished.<\/em>\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"author-links\">\r\n <a href=\"https:\/\/moimam.co.uk\" class=\"author-link\" target=\"_blank\">moimam.co.uk<\/a>\r\n <a href=\"https:\/\/thearmdoc.co.uk\" class=\"author-link\" target=\"_blank\">thearmdoc.co.uk<\/a>\r\n <a href=\"https:\/\/www.ashfordstpeters.nhs.uk\/professor-mohamed-a-imam\" class=\"author-link\" target=\"_blank\">NHS Bio<\/a>\r\n \r\n <a href=\"https:\/\/www.linkedin.com\/in\/mohamed-a-imam-64a0b94a\/\" class=\"author-link\" target=\"_blank\">LinkedIn<\/a>\r\n <a href=\"https:\/\/x.com\/MoAImam\" class=\"author-link\" target=\"_blank\">X \/ Twitter<\/a>\r\n <a href=\"https:\/\/www.facebook.com\/thearmdoc\" class=\"author-link\" target=\"_blank\">Facebook<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"frameworks-section\" id=\"frameworks\">\r\n <div class=\"inner\">\r\n <div class=\"section-label reveal\">\r\n <div class=\"section-label-line\"><\/div>\r\n <span class=\"section-label-text\">Intellectual Framework<\/span>\r\n <\/div>\r\n <div class=\"frameworks-intro reveal\">\r\n <div><h2 class=\"section-h2\">20 Original Frameworks<\/h2><\/div>\r\n <div>\r\n <p>UNLOCK contains twenty original named frameworks \u2014 working models developed from thirty years of clinical practice and personal experience. They appear in boxed sections throughout the book, where they emerge from the stories that generated them.<\/p>\r\n <p>They are not academic theories. They are patterns observed consistently enough to name, so that you can reach for the name when the pattern appears in your own life.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"fw-grid\">\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C1<\/div><div class=\"fw-name\">Presence Debt Framework<\/div><div class=\"fw-desc\">Every hour of half-presence accumulates a debt that cannot be repaid by occasional full presence.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C1<\/div><div class=\"fw-name\">Oscillation Imperative<\/div><div class=\"fw-desc\">Recovery is not time stolen from performance. It is the phase in which the next performance is created.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C1<\/div><div class=\"fw-name\">Coherence Gap<\/div><div class=\"fw-desc\">The distance between the self you display and the self you actually inhabit \u2014 now monetised by platforms that profit from maintaining it.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C2<\/div><div class=\"fw-name\">Clarity Tax<\/div><div class=\"fw-desc\">Every time we choose the comfortable narrative over the accurate one, we pay a deferred cost.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C2<\/div><div class=\"fw-name\">Coconut-Caramel Framework<\/div><div class=\"fw-desc\">Every complex situation requires both firm clarity and warm nuance. The skill is knowing which the moment needs. <em>*Joint attribution: Dr Yasser ElSherbini<\/em><\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C3<\/div><div class=\"fw-name\">Second Question Framework<\/div><div class=\"fw-desc\">The most important information in any exchange lives in what emerges when you ask one more question.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C4<\/div><div class=\"fw-name\">Permission Fallacy<\/div><div class=\"fw-desc\">We wait for conditions that give permission to act courageously \u2014 but those conditions are established by fear itself.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C5<\/div><div class=\"fw-name\">Borrowed Confidence Model<\/div><div class=\"fw-desc\">Confidence is sometimes lent by someone who sees a future version of you before you can. The debt is repaid forward, not back.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C5<\/div><div class=\"fw-name\">Stripped Confidence Principle<\/div><div class=\"fw-desc\">The confidence that remains when all performance scaffolding is removed is the only form that holds under adverse conditions.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C6<\/div><div class=\"fw-name\">Friction-Innovation Framework<\/div><div class=\"fw-desc\">Genuine innovation begins not with inspiration but with the honest, sustained observation of what is not working well enough.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C7<\/div><div class=\"fw-name\">Two-Self Framework<\/div><div class=\"fw-desc\">The Planner makes commitments. The Doer must honour them. Sustainable commitment requires designing for the Doer.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C8<\/div><div class=\"fw-name\">Reliability Premium<\/div><div class=\"fw-desc\">Consistency generates disproportionate value compared to occasional exceptional performance.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C9<\/div><div class=\"fw-name\">Precision Compassion Framework<\/div><div class=\"fw-desc\">The most effective compassion is specifically calibrated to what this person, in this moment, actually needs.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C10<\/div><div class=\"fw-name\">Bid Economy<\/div><div class=\"fw-desc\">Every relationship is sustained or eroded by thousands of small bids for connection and their responses.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C11<\/div><div class=\"fw-name\">Character Rehearsal Framework<\/div><div class=\"fw-desc\">Character is not a trait that arrives in critical moments \u2014 it is a skill rehearsed in ordinary ones.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C12<\/div><div class=\"fw-name\">Living Legacy Equation<\/div><div class=\"fw-desc\">Impact \u00d7 Presence = Legacy. Zero in either produces zero legacy, regardless of how large the other is.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C13<\/div><div class=\"fw-name\">Adversarial Environment Framework<\/div><div class=\"fw-desc\">The digital information environment is an intentionally designed system optimised for the extraction of attention.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C14<\/div><div class=\"fw-name\">Wind Tunnel Protocol<\/div><div class=\"fw-desc\">Regular, structured, honest engagement with real feedback \u2014 before crisis forces it \u2014 keeps the gap between intention and reality manageable.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C15<\/div><div class=\"fw-name\">Compounding Character Formula<\/div><div class=\"fw-desc\">The 17 Cs multiply each other. Growth is multiplicative, not additive. Starting anywhere is better than starting nowhere.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C16<\/div><div class=\"fw-name\">Optimal Caring Zone<\/div><div class=\"fw-desc\">For every domain there is a level of caring that produces peak performance. Too little: apathy. Too much: paralysis.<\/div><\/div>\r\n <div class=\"fw-card reveal\"><div class=\"fw-c\">C17<\/div><div class=\"fw-name\">Two Horizons of Choice<\/div><div class=\"fw-desc\">Every significant choice operates on the immediate horizon (what does this give me now?) and the generative horizon (what person is this making me?).<\/div><\/div>\r\n <\/div>\r\n <p class=\"fw-attr reveal\">* Coconut-Caramel Framework: joint attribution with Dr Yasser ElSherbini \u00b7 Full reference index with use cases in the book's Appendix<\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"press-section\" id=\"press\">\r\n <div class=\"inner\">\r\n <div class=\"section-label reveal\">\r\n <div class=\"section-label-line\"><\/div>\r\n <span class=\"section-label-text\">For Publishers & Media<\/span>\r\n <\/div>\r\n <div class=\"press-grid\">\r\n <div class=\"press-body reveal\">\r\n <h2 class=\"section-h2\">The Publishing Case for UNLOCK<\/h2>\r\n <p>UNLOCK occupies a precise and currently unoccupied intersection in the nonfiction market. It carries the emotional authority of a cancer memoir, the practical architecture of a behaviour-change framework, and the intellectual rigour of a professor of digital health who works with AI in clinical medicine every day. <strong>No single book currently holds all three positions at once.<\/strong><\/p>\r\n <p><strong>The three closest comparables:<\/strong><\/p>\r\n <div class=\"comps\">\r\n <span class=\"comp\">When Breath Becomes Air<\/span>\r\n <span class=\"comp\">Atomic Habits<\/span>\r\n <span class=\"comp\">Man's Search for Meaning<\/span>\r\n <span class=\"comp\">Stolen Focus<\/span>\r\n <span class=\"comp\">Being Mortal<\/span>\r\n <span class=\"comp\">Grit<\/span>\r\n <\/div>\r\n <p>The author is the Director of Research and Development at Ashford and St Peter's NHS Foundation Trust \u2014 an NHS board appointment. His full credentials are publicly and independently verifiable. His combined social following of 115,000 (LinkedIn 20k, Facebook 78k, X 17k) is a medically-engaged, professional audience built over a decade \u2014 not a vanity metric. He is one of the most reviewed consultant surgeons in the UK, with 700+ verified patient reviews and a 5.0\/5 rating on Top Doctors.<\/p>\r\n <p><strong>Word count:<\/strong> ~45,000 words \u00b7 <strong>Format:<\/strong> Narrative nonfiction \/ practical framework \u00b7 <strong>Status:<\/strong> Complete manuscript, available immediately.<\/p>\r\n\r\n <div class=\"press-downloads\">\r\n \r\n <div class=\"dl-item\" onclick=\"alert('PDF available on request \u2014 use the contact form')\">\r\n <span class=\"dl-icon\">\ud83d\udcc4<\/span>\r\n <div>\r\n <div class=\"dl-name\">One-Page Book Summary<\/div>\r\n <div class=\"dl-sub\">PDF \u00b7 Available on request<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"dl-item\" onclick=\"alert('Biography available on request \u2014 use the contact form')\">\r\n <span class=\"dl-icon\">\ud83d\udc64<\/span>\r\n <div>\r\n <div class=\"dl-name\">Author Biography<\/div>\r\n <div class=\"dl-sub\">Short (300w) & Long (700w) \u00b7 Available on request<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"dl-item\" onclick=\"alert('Sample chapters available on request \u2014 use the contact form')\">\r\n <span class=\"dl-icon\">\ud83d\udcd6<\/span>\r\n <div>\r\n <div class=\"dl-name\">Sample Chapters<\/div>\r\n <div class=\"dl-sub\">Introduction + C1 \u00b7 Available on request<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"reveal\">\r\n <div class=\"press-form\">\r\n <h3>Publisher & Media Enquiries<\/h3>\r\n \r\n <div class=\"form-field\">\r\n <label>Name & Organisation<\/label>\r\n <input type=\"text\" placeholder=\"Name \u00b7 Publisher \/ Agency \/ Media Outlet\">\r\n <\/div>\r\n <div class=\"form-field\">\r\n <label>Email Address<\/label>\r\n <input type=\"email\" placeholder=\"your@email.com\">\r\n <\/div>\r\n <div class=\"form-field\">\r\n <label>Enquiry Type<\/label>\r\n <select>\r\n <option value=\"\">Select type\u2026<\/option>\r\n <option>Literary Agent \u2014 Representation<\/option>\r\n <option>Publisher \u2014 Acquisition Interest<\/option>\r\n <option>Journalist \/ Book Reviewer<\/option>\r\n <option>Podcast \/ Broadcast Media<\/option>\r\n <option>Speaking Engagement<\/option>\r\n <option>Corporate \/ NHS Training<\/option>\r\n <option>Other<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-field\">\r\n <label>Message<\/label>\r\n <textarea placeholder=\"Tell me about your interest in UNLOCK\u2026\"><\/textarea>\r\n <\/div>\r\n <button class=\"btn btn-gold\" style=\"width:100%;justify-content:center;\" onclick=\"handlePressForm()\">Send Enquiry \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"newsletter-section\" id=\"newsletter\">\r\n <div class=\"newsletter-inner reveal\">\r\n <h2>One C. Every Month. Straight from the Author.<\/h2>\r\n <p>A personal essay on one capacity each month \u2014 a clinical story, a framework, a single practice drill. The same voice as the book, before the book is published. Join the people working through the framework now.<\/p>\r\n \r\n <div class=\"newsletter-form\">\r\n <input type=\"email\" class=\"newsletter-input\" placeholder=\"your@email.com\" id=\"newsletter-email\">\r\n <button class=\"btn btn-dark\" onclick=\"handleNewsletter()\">Subscribe \u2192<\/button>\r\n <\/div>\r\n <p class=\"newsletter-note\">No spam. One email per month. Unsubscribe at any time.<\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<footer>\r\n <div class=\"footer-grid\">\r\n <div>\r\n <div class=\"footer-brand-name\">UNLOCK<\/div>\r\n <div class=\"footer-brand-sub\">unlock17cs.com<\/div>\r\n <p class=\"footer-tagline\">\"You do not need perfect conditions. You need to make the next true move in the only moment actually available \u2014 which is this one.\"<\/p>\r\n <div class=\"footer-social\">\r\n \r\n <a href=\"https:\/\/www.linkedin.com\/in\/mohamed-a-imam-64a0b94a\/\" class=\"social-btn\" target=\"_blank\">LinkedIn<\/a>\r\n <a href=\"https:\/\/www.facebook.com\/thearmdoc\" class=\"social-btn\" target=\"_blank\">Facebook<\/a>\r\n <a href=\"https:\/\/x.com\/MoAImam\" class=\"social-btn\" target=\"_blank\">X \/ Twitter<\/a>\r\n <a href=\"https:\/\/www.instagram.com\/the_arm_doc\/\" class=\"social-btn\" target=\"_blank\">Instagram<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h4>The Book<\/h4>\r\n <ul>\r\n <li><a href=\"#story\">The Story<\/a><\/li>\r\n <li><a href=\"#framework\">The 17 Cs<\/a><\/li>\r\n <li><a href=\"#cindex\">The C Index<\/a><\/li>\r\n <li><a href=\"#frameworks\">20 Frameworks<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h4>The Author<\/h4>\r\n <ul>\r\n <li><a href=\"#author\">Biography<\/a><\/li>\r\n <li><a href=\"https:\/\/moimam.co.uk\" target=\"_blank\">moimam.co.uk<\/a><\/li>\r\n <li><a href=\"https:\/\/thearmdoc.co.uk\" target=\"_blank\">thearmdoc.co.uk<\/a><\/li>\r\n <li><a href=\"https:\/\/www.ashfordstpeters.nhs.uk\/professor-mohamed-a-imam\" target=\"_blank\">NHS Profile<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h4>Contact<\/h4>\r\n <ul>\r\n <li><a href=\"#press\">Publishers & Media<\/a><\/li>\r\n <li><a href=\"#newsletter\">Newsletter<\/a><\/li>\r\n <li><a href=\"#cindex\">C Index<\/a><\/li>\r\n <li><a href=\"mailto:info@unlock17cs.com\">info@unlock17cs.com<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-bottom\">\r\n <p>\u00a9 2026 Professor Mohamed A. Imam \u00b7 unlock17cs.com \u00b7 All rights reserved.<\/p>\r\n <p>A memoir. A framework. A practical guide for the age of distraction.<\/p>\r\n <\/div>\r\n<\/footer>\r\n\r\n\r\n<script>\r\n\/\/ \u2500\u2500 NAV \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst nav = document.getElementById('main-nav');\r\nconst ham = document.getElementById('hamburger');\r\nconst links = document.getElementById('nav-links');\r\n\r\nwindow.addEventListener('scroll', () => {\r\n nav.classList.toggle('scrolled', window.scrollY > 60);\r\n});\r\nham.addEventListener('click', () => {\r\n links.classList.toggle('open');\r\n});\r\n\r\n\/\/ \u2500\u2500 SCROLL REVEALS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst obs = new IntersectionObserver(entries => {\r\n entries.forEach(e => { if(e.isIntersecting) e.target.classList.add('visible'); });\r\n}, { threshold: 0.08, rootMargin: '0px 0px -48px 0px' });\r\n\r\ndocument.querySelectorAll('.reveal').forEach((el,i) => {\r\n el.style.transitionDelay = `${(i % 5) * 60}ms`;\r\n obs.observe(el);\r\n});\r\n\r\n\/\/ C-card stagger\r\ndocument.querySelectorAll('.c-card,.fw-card').forEach((c,i) => {\r\n c.style.transitionDelay = `${(i % 4) * 50}ms`;\r\n});\r\n\r\n\/\/ \u2500\u2500 C INDEX \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst Cs = [\r\n {c:'C1',name:'Consciousness',q:'I notice where my attention is going and can bring it back deliberately, without drama.'},\r\n {c:'C2',name:'Clarity',q:'Under pressure, I can separate the facts of a situation from the story I am telling myself about it.'},\r\n {c:'C3',name:'Curiosity',q:'When I feel threatened or challenged, my first instinct is to ask questions rather than defend my position.'},\r\n {c:'C4',name:'Courage',q:'I regularly take small actions that feel honest and slightly uncomfortable \u2014 without waiting until I am unafraid.'},\r\n {c:'C5',name:'Confidence',q:'I trust my own judgment because it is based on evidence from my actual behaviour, not on external approval.'},\r\n {c:'C6',name:'Creativity',q:'I make and share new things \u2014 I am not primarily a consumer of other people\\'s work.'},\r\n {c:'C7',name:'Commitment',q:'I stay with important work after the initial excitement fades, even when progress is slow.'},\r\n {c:'C8',name:'Consistency',q:'My most important habits survive my worst days \u2014 not perfectly, but recognisably.'},\r\n {c:'C9',name:'Compassion',q:'When someone I care about is struggling, my first response is to understand \u2014 not to fix, dismiss, or compete.'},\r\n {c:'C10',name:'Connection',q:'I notice and respond to small moments when people around me reach out for attention or recognition.'},\r\n {c:'C11',name:'Character',q:'I act in line with my values even when it costs me comfort, money, or approval.'},\r\n {c:'C12',name:'Contribution',q:'I give time, skill, or energy regularly to something larger than my own advancement.'},\r\n {c:'C13',name:'Control',q:'In hard moments, I regulate my own reactions before trying to manage anything outside me.'},\r\n {c:'C14',name:'Calibration',q:'I seek feedback and adjust course \u2014 I do not wait for a crisis to learn something is wrong.'},\r\n {c:'C15',name:'Compounding Effect',q:'I protect my small daily gains and take seriously the small daily slips. I understand they are the same size.'},\r\n {c:'C16',name:'Calmness',q:'I can identify what genuinely deserves my concern and release what does not, without guilt.'},\r\n {c:'C17',name:'Choice',q:'My most recent significant decisions reflect my values, not my fears or other people\\'s expectations.'}\r\n];\r\n\r\nlet cur = 0;\r\nconst scores = new Array(17).fill(null);\r\nconst qCont = document.getElementById('q-container');\r\nconst resPan = document.getElementById('results');\r\nconst prog = document.getElementById('prog');\r\n\r\nfunction renderQ(idx) {\r\n qCont.innerHTML = '';\r\n const d = Cs[idx];\r\n const panel = document.createElement('div');\r\n panel.className = 'q-panel active';\r\n panel.innerHTML = `\r\n <div class=\"q-step\">${d.c} \u00b7 Question ${idx+1} of 17<\/div>\r\n <div class=\"q-c\">${d.name}<\/div>\r\n <p class=\"q-stmt\">${d.q}<\/p>\r\n <div class=\"score-btns\">\r\n ${[1,2,3,4,5].map(n=>`<button class=\"score-btn${scores[idx]===n?' selected':''}\" data-v=\"${n}\">${n}<\/button>`).join('')}\r\n <\/div>\r\n <div class=\"score-legend\"><span>Rarely true<\/span><span>Consistently true<\/span><\/div>\r\n <div class=\"q-nav\">\r\n <button class=\"btn btn-prev q-back\" ${idx===0?'style=\"opacity:0;pointer-events:none\"':''}>\u2190 Back<\/button>\r\n <button class=\"btn btn-next btn-gold q-fwd\">${idx===16?'See results \u2192':'Next \u2192'}<\/button>\r\n <span class=\"q-count\">${idx+1} \/ 17<\/span>\r\n <\/div>`;\r\n qCont.appendChild(panel);\r\n prog.style.width = `${(idx\/17)*100}%`;\r\n\r\n panel.querySelectorAll('.score-btn').forEach(b => {\r\n b.addEventListener('click', () => {\r\n scores[idx] = +b.dataset.v;\r\n panel.querySelectorAll('.score-btn').forEach(x=>x.classList.remove('selected'));\r\n b.classList.add('selected');\r\n });\r\n });\r\n panel.querySelector('.q-back').addEventListener('click', () => { if(idx>0){cur--;renderQ(cur);} });\r\n panel.querySelector('.q-fwd').addEventListener('click', () => {\r\n if(scores[idx]===null){\r\n panel.querySelectorAll('.score-btn').forEach(b=>{\r\n b.classList.add('flash');\r\n setTimeout(()=>b.classList.remove('flash'),500);\r\n }); return;\r\n }\r\n if(idx<16){cur++;renderQ(cur);}\r\n else showResults();\r\n });\r\n}\r\n\r\nfunction showResults() {\r\n qCont.style.display = 'none';\r\n resPan.classList.add('show');\r\n prog.style.width = '100%';\r\n const total = scores.reduce((a,b)=>a+b,0);\r\n const avg = (total\/17).toFixed(1);\r\n let hl = total>=68\r\n ? `Strong foundations \u2014 ${avg}\/5 average. Deepen what already works.`\r\n : total>=34\r\n ? `Honest middle ground \u2014 ${avg}\/5. Work chapter by chapter on the largest gaps.`\r\n : `Starting point \u2014 ${avg}\/5. Begin with Part I. The floor comes first.`;\r\n document.getElementById('r-headline').textContent = hl;\r\n\r\n const ranked = Cs.map((d,i)=>({...d,score:scores[i]||1})).sort((a,b)=>a.score-b.score);\r\n const chart = document.getElementById('r-chart');\r\n chart.innerHTML = ranked.map(d=>`\r\n <div class=\"r-row\">\r\n <span class=\"r-label\">${d.name}<\/span>\r\n <div class=\"r-track\"><div class=\"r-fill\" data-w=\"${(d.score\/5)*100}%\"><\/div><\/div>\r\n <span class=\"r-score\">${d.score}<\/span>\r\n <\/div>`).join('');\r\n setTimeout(()=>{ chart.querySelectorAll('.r-fill').forEach(f=>{f.style.width=f.dataset.w;}); },100);\r\n document.getElementById('restart-btn').addEventListener('click',restart);\r\n}\r\n\r\nfunction restart() {\r\n scores.fill(null); cur=0;\r\n resPan.classList.remove('show');\r\n qCont.style.display='';\r\n renderQ(0);\r\n}\r\n\r\nrenderQ(0);\r\n\r\n\/\/ \u2500\u2500 FORM HANDLERS (WEBMASTER: replace with real integrations) \u2500\u2500\r\nfunction handleResultEmail() {\r\n const e = document.getElementById('result-email').value;\r\n if(!e||!e.includes('@')){ alert('Please enter a valid email address.'); return; }\r\n \/\/ WEBMASTER: POST to your email service here (ConvertKit, Mailchimp, etc.)\r\n alert('Thank you! Your C Index report will arrive in your inbox shortly.');\r\n}\r\nfunction handleNewsletter() {\r\n const e = document.getElementById('newsletter-email').value;\r\n if(!e||!e.includes('@')){ alert('Please enter a valid email address.'); return; }\r\n \/\/ WEBMASTER: POST to your email service here\r\n alert('Thank you for subscribing. Welcome to the 17 Cs community.');\r\n}\r\nfunction handlePressForm() {\r\n \/\/ WEBMASTER: Replace with Formspree, Netlify Forms, or your backend\r\n alert('Thank you for your enquiry. Professor Imam\\'s team will be in touch within 48 hours.');\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>UNLOCK \u2014 The 17 Cs of Human Flourishing | Professor Mohamed A. Imam UNLOCK \u00b7 The 17 Cs The 17 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/unlock17cs.com\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unlock17cs.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/unlock17cs.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/unlock17cs.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unlock17cs.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":40,"href":"https:\/\/unlock17cs.com\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":57,"href":"https:\/\/unlock17cs.com\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/57"}],"wp:attachment":[{"href":"https:\/\/unlock17cs.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}