@import url('https://fonts.googleapis.com/css2?family=Baloo+Chettan+2:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--paper:#eaf0ff;--muted:#aab9d7;--blue:#719cff;--line:#ffffff22;--bg:#080d23;font-family:'Baloo Chettan 2',Arial,sans-serif;color:var(--paper);background:var(--bg)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid #bfd1ff;outline-offset:6px}.skip{position:fixed;top:-80px;left:20px;z-index:20;padding:15px;background:#153575}.skip:focus{top:20px}.nav{position:fixed;z-index:10;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:22px 5%;background:linear-gradient(#080d23e8,#080d2300)}.brand{font-size:42px;line-height:1;font-weight:700;letter-spacing:-5px}.brand span{color:#8db2ff}.nav-caption{font-size:11px;letter-spacing:.21em;color:#b4c3e0}.nav-link{font-size:14px;border:1px solid #ffffff36;border-radius:30px;padding:11px 18px;backdrop-filter:blur(12px)}.nav-link span{margin-left:14px}.scenery{position:fixed;inset:0;pointer-events:none;overflow:hidden}canvas{width:100%;height:100%;display:block}.vignette{position:absolute;inset:0;background:linear-gradient(90deg,#080d23d9 0%,#080d2380 29%,transparent 57%),linear-gradient(0deg,#080d2380,transparent 22%)}.scene-label{position:absolute;left:71%;top:28%;transform:translate(-50%,-50%);text-align:center;font-family:'Baloo Chettan 2',Arial,sans-serif;letter-spacing:.19em;font-size:20px;white-space:nowrap;text-shadow:0 0 20px #bdd3ff;transition:opacity .2s}.scene-label span{display:block;font:10px 'Baloo Chettan 2',Arial,sans-serif;letter-spacing:.17em;margin-top:10px;color:#b5c8ef}.chapter{position:relative;min-height:135svh;display:flex;align-items:center;padding:130px 8%;}.copy{width:44%;max-width:590px;position:relative;z-index:2}.eyebrow{font-size:12px;letter-spacing:.19em;color:#91b4ff;margin:0 0 28px}h1,h2{font-family:'Baloo Chettan 2',Arial,sans-serif;font-size:clamp(44px,5.6vw,88px);line-height:1.07;letter-spacing:-.055em;font-weight:400;margin:0 0 28px}em{font-style:normal;color:#9bbaff}.lead{font-size:clamp(17px,1.5vw,21px);line-height:1.65;color:#c4d0e7;max-width:405px;margin:0 0 24px}.support{font-size:14px;line-height:1.8;color:var(--muted)}.opening{min-height:115svh;padding-top:115px}.scroll-cue{display:inline-flex;align-items:center;gap:16px;font-size:12px;letter-spacing:.045em;margin-top:32px;color:#d9e5ff}.scroll-line{height:45px;width:1px;background:linear-gradient(#9cbbff,transparent)}.coordinate{position:absolute;bottom:40px;left:8%;font-size:10px;letter-spacing:.2em;color:#8091b6}.chapters{position:fixed;right:25px;top:50%;transform:translateY(-50%);z-index:10;display:grid;gap:8px}.chapters a{display:flex;align-items:center;justify-content:center;width:36px;height:40px;font-size:11px;color:#7c8baa}.chapters a:after{content:'';width:4px;height:4px;border-radius:50%;background:currentColor;margin-left:8px}.chapters a[aria-current]{color:#eef4ff}.intelligence-picker{display:flex;gap:7px;flex-wrap:wrap;max-width:420px;margin-top:27px}.intelligence-picker button{background:#0f1a32d9;border:1px solid #ffffff26;color:#c0d0ef;font:12px 'Baloo Chettan 2',Arial,sans-serif;border-radius:22px;padding:11px 13px;cursor:pointer}.intelligence-picker button[aria-pressed=true]{background:#cadcff;color:#0c1c3f;border-color:#cadcff}.intelligence-detail{margin-top:24px;border-left:1px solid #83aaff;padding-left:18px;min-height:120px;max-width:410px}.intelligence-detail h3{font-size:17px;font-weight:500;margin:0 0 8px}.intelligence-detail p{font-size:15px;line-height:1.65;color:var(--muted);margin:0}.practice-list{margin-top:32px;max-width:400px}.practice-list div{display:flex;align-items:center;gap:20px;border-top:1px solid var(--line);padding:6px 0}.practice-list span{font-size:12px;color:#85a7e7}.practice-list p{font-size:16px;color:#c4d0e7}.outcome{min-height:110svh}.outcome-title{font-size:clamp(52px,7vw,110px)}.outcome-title span{color:#99b9ff}.return{display:inline-flex;gap:28px;align-items:center;margin-top:28px;padding-bottom:12px;border-bottom:1px solid #9dbbff80;font-size:14px}footer{position:absolute;bottom:28px;left:8%;right:8%;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#8fa3c9}.progress{position:fixed;bottom:0;left:0;right:0;height:2px;z-index:20;background:#ffffff0b}.progress div{height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:#9ebcff}
@media(min-width:1600px){.copy{max-width:650px}}@media(max-width:760px){.nav{padding:19px 6%}.nav-caption{display:none}.brand{font-size:35px}.nav-link{font-size:12px}.chapter{padding:110px 7% 70px;align-items:flex-end;min-height:130svh}.opening{min-height:110svh}.copy{width:100%;max-width:470px;background:linear-gradient(90deg,#080d23eb,#080d2350);border-radius:16px;padding:18px 10px 18px 0}.eyebrow{margin-bottom:18px;font-size:11px}h1,h2{font-size:clamp(42px,10vw,65px);margin-bottom:18px}.lead{font-size:17px;max-width:350px}.support{font-size:13px}.chapters{right:4px}.chapters a{width:29px}.chapters a span{display:none}.vignette{background:linear-gradient(0deg,#080d23bb 0%,transparent 72%)}.scene-label{left:54%;top:23%;font-size:16px}.scene-label span{font-size:9px}.coordinate{display:none}.intelligence-picker{max-width:350px;gap:6px}.intelligence-picker button{font-size:12px;padding:11px}.intelligence-detail{min-height:110px}.outcome{padding-bottom:140px}.outcome-title{font-size:clamp(51px,12vw,80px)}footer{left:7%;right:7%;font-size:11px;flex-direction:column;gap:8px}.scroll-cue{margin-top:13px}.practice-list{margin-top:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scene-label{transition:none}.chapter{min-height:100svh}}

/* Area icons and company footer */
.intelligence-picker button{display:inline-flex;align-items:center;gap:8px}.intelligence-picker img{width:24px;height:24px;object-fit:contain;filter:brightness(0) invert(1);opacity:.88}.intelligence-picker button[aria-pressed=true] img{filter:none;opacity:1}footer{align-items:flex-start;flex-wrap:wrap;line-height:1.8}footer p{margin:0;max-width:660px}footer a{text-decoration:underline;text-underline-offset:4px}footer a:hover{color:#eaf0ff}.footer-principle{font-size:15px;color:#c6d9ff;white-space:nowrap}.footer-principle span{margin-left:10px}@media(max-width:760px){.outcome{padding-bottom:210px}footer p{max-width:340px}.intelligence-picker img{width:21px;height:21px}}

/* Supplied 8i mark, original blue on a light surface. */
.brand{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;background:#edf3ff;border-radius:12px;line-height:0;letter-spacing:normal}.brand img{display:block;width:30px;height:auto}@media(max-width:760px){.brand{padding:7px 10px}.brand img{width:25px}}

/* Header icon and wordmark */
.brand{gap:11px;background:transparent;padding:0;border-radius:0}.brand img{filter:brightness(0) invert(1);width:29px}.brand .brand-wordmark{font-family:'Baloo Chettan 2',Arial,sans-serif;font-size:24px;font-weight:600;line-height:1.2;letter-spacing:-.04em;color:#eaf0ff}@media(max-width:760px){.brand{padding:0;gap:9px}.brand img{width:25px}.brand .brand-wordmark{font-size:21px}}

/* Rounded, compact brand typography from 8i.co.za. */
h1,h2{font-weight:700;letter-spacing:-.055em;line-height:1.04}
.brand .brand-wordmark{font-weight:800;font-size:27px;letter-spacing:-.055em;line-height:1.15}
.lead{font-weight:400;line-height:1.5}
.eyebrow{font-weight:700;letter-spacing:.15em}
.nav-caption{font-weight:600;letter-spacing:.15em}
.scene-label{font-weight:600;letter-spacing:.08em;font-size:23px}
.scene-label span{font-size:12px;font-weight:500;letter-spacing:.12em}
.intelligence-picker button{font-size:14px;font-weight:500;padding:9px 12px}
.intelligence-detail h3{font-size:20px;font-weight:600}
.intelligence-detail p{font-size:16px;line-height:1.5}
.outcome-title{font-weight:600;letter-spacing:-.065em}
@media(max-width:760px){.brand .brand-wordmark{font-size:24px}.scene-label{font-size:19px}.scene-label span{font-size:11px}.intelligence-picker button{font-size:13px;padding:9px 10px}}

/* Give rounded letterforms and the Ephraim lockup room to breathe. */
h1,h2{letter-spacing:-.025em;line-height:1.1}
h1{font-size:clamp(42px,5.1vw,78px);margin-bottom:28px}
.brand .brand-wordmark{letter-spacing:-.025em}
.opening .eyebrow{margin-bottom:24px}
.opening .support{margin-top:22px}
.opening .scroll-cue{margin-top:24px}
.scene-label{top:0;left:0;transform:translate(-50%,-100%);line-height:1.25;letter-spacing:.065em}
.scene-label span{margin-top:12px;line-height:1.4;letter-spacing:.1em}
@media(max-width:760px){h1{font-size:clamp(40px,9.2vw,60px)}.scene-label{top:0;left:0;font-size:18px}.scene-label span{font-size:10px;margin-top:8px}.opening .scroll-cue{margin-top:14px}}

/* Wider titles; retain the existing paragraph measure. */
@media(min-width:761px){.copy{width:53%;max-width:740px}h1,h2{max-width:100%}}

/* Lighter headline weight. */
h1,h2{font-weight:600}

/* Desktop chapter titles sit beside the numbered progress navigation. */
@media(min-width:761px){
  .chapters{right:28px;gap:6px;align-items:end}
  .chapters a{width:auto;min-width:154px;height:42px;justify-content:flex-end;gap:12px;padding:0 4px;font-size:12px}
  .chapters a:after{margin-left:0}
  .chapter-title{color:#8f9fbe;white-space:nowrap}
  .chapters a[aria-current] .chapter-title{color:#eef4ff}
  .chapter-number{min-width:18px;text-align:right}
}
@media(max-width:760px){.chapters .chapter-title{display:none}.chapters a span.chapter-number{display:inline}}

/* The connection chapter becomes a camera passage through all eight intelligences. */
.intelligence{min-height:340svh;align-items:flex-start}
.intelligence .copy{position:sticky;top:12vh;margin-top:22vh;padding-bottom:48px}
.intelligence-detail{position:relative;padding-top:8px}
.focus-count{display:block;margin-bottom:6px;color:#8eace7;font-size:12px;font-weight:600;letter-spacing:.12em}
.spatial-hint{display:flex;align-items:center;gap:12px;margin:5px 0 0;color:#8296bc;font-size:13px}
.spatial-hint span{display:block;width:36px;height:1px;background:linear-gradient(90deg,#9dbbff,transparent)}
.chapters:before{content:'';position:absolute;right:5px;top:23px;bottom:23px;width:1px;background:#8da8df22;z-index:-1}
@media(max-width:760px){
  .intelligence{min-height:300svh;align-items:flex-start}
  .intelligence .copy{top:11vh;margin-top:20vh;padding-bottom:36px}
  .intelligence-picker{max-width:330px}
  .spatial-hint{font-size:12px}
  .chapters:before{right:6px}
}
@media(prefers-reduced-motion:reduce){.intelligence{min-height:150svh}}

/* A soft veil keeps the side navigation legible over the moving scene. */
@media(min-width:761px){
  .chapters{right:0;padding:24px 30px 24px 84px;background:none;isolation:isolate}
  .chapters:after{content:'';position:absolute;top:50%;right:0;width:55vw;height:100vh;transform:translateY(-50%);background:radial-gradient(ellipse 95% 68% at 100% 50%,rgba(8,13,35,.84) 0%,rgba(8,13,35,.5) 36%,rgba(8,13,35,.16) 62%,rgba(8,13,35,0) 78%);pointer-events:none;z-index:0}
  .chapters a{position:relative;z-index:2}
  .chapters:before{right:32px;z-index:1}
}

/* Closing action beneath the 8i mark. */
.chapters{transition:opacity .28s ease}
.outcome-cta{position:absolute;z-index:3;left:66%;top:59%;width:min(330px,28vw);transform:translateX(-50%);padding:22px 0;color:#eaf1ff;border-top:1px solid #9dbbff66;border-bottom:1px solid #9dbbff33}
.outcome-cta span{display:block;margin-bottom:5px;color:#92a9d4;font-size:13px}
.outcome-cta strong{display:block;font-size:clamp(20px,2vw,29px);font-weight:600;line-height:1.25;letter-spacing:-.025em}
.outcome-cta b{display:flex;align-items:center;justify-content:space-between;margin-top:16px;color:#b9cefa;font-size:14px;font-weight:500}
.outcome-cta i{font-style:normal;font-size:18px;transition:transform .2s ease}
.outcome-cta:hover i{transform:translate(3px,-3px)}
@media(max-width:760px){.outcome-cta{left:50%;top:34%;width:86%;transform:translateX(-50%);padding:17px 0}.outcome-cta strong{font-size:22px}.outcome-cta span{font-size:12px}.outcome{padding-bottom:235px}}
@media(prefers-reduced-motion:reduce){.chapters,.outcome-cta i{transition:none}}

/* 0f0fed spectrum: every visual tone is a tint or shade of the brand blue. */
:root{
  --brand:#0f0fed;
  --brand-deep:#030312;
  --brand-ink:#06062a;
  --brand-night:#09094a;
  --brand-mid:#2424f0;
  --brand-soft:#8585f8;
  --brand-pale:#cacaFC;
  --paper:#f2f2ff;
  --muted:#aaaadc;
  --blue:#7777f6;
  --line:#bdbdff24;
  --bg:var(--brand-deep);
}
body{background:var(--brand-deep);overflow-x:hidden}
.skip{background:#10107a}
.nav{background:linear-gradient(#030312ed,#03031200)}
.nav-actions{display:flex;align-items:center;gap:10px}
.case-link{padding:11px 8px;color:#b8b8e8;font-size:14px;border-bottom:1px solid #7777f666}
.case-link:hover{color:#f2f2ff;border-color:#cacaFC}
.nav-link{border-color:#cacaFC38;color:#f2f2ff}
.vignette{background:linear-gradient(90deg,#030312df 0%,#0303128c 29%,transparent 57%),linear-gradient(0deg,#0303128c,transparent 22%)}
.scene-label{color:#f2f2ff;text-shadow:0 0 20px #a7a7ff}
.scene-label span{color:#bcbcf2}
.eyebrow{color:#9292fa}
em,.outcome-title span{color:#a3a3fb}
.lead{color:#ceceee}
.support,.intelligence-detail p{color:#aaaadc}
.scroll-cue{color:#e3e3ff}.scroll-line{background:linear-gradient(#9d9dfa,transparent)}
.coordinate,.spatial-hint{color:#8585b7}.spatial-hint span{background:linear-gradient(90deg,#9d9dfa,transparent)}
.chapters a{color:#7777aa}.chapters a[aria-current],.chapters a[aria-current] .chapter-title{color:#f2f2ff}.chapter-title{color:#8e8ebd}
.chapters:before{background:#9999f02a}
.intelligence-picker button{background:#08083cdd;border-color:#cacaFC28;color:#c7c7ef}
.intelligence-picker button[aria-pressed=true]{background:#d7d7ff;color:#080840;border-color:#d7d7ff}
.intelligence-detail{border-color:#8585f8}.focus-count,.practice-list span{color:#8c8cf4}.practice-list p{color:#ceceee}
.return{border-color:#9d9dfa80}.progress{background:#f2f2ff0b}.progress div{background:#a6a6fb}
.footer-principle{color:#cacaFC}footer{color:#9292bf}footer a:hover{color:#f2f2ff}
.brand .brand-wordmark{color:#f2f2ff}
.chapters:after{background:radial-gradient(ellipse 95% 68% at 100% 50%,rgba(3,3,18,.86) 0%,rgba(3,3,18,.52) 36%,rgba(3,3,18,.18) 62%,rgba(3,3,18,0) 78%)}
.outcome-cta{color:#f2f2ff;border-top-color:#9d9dfa66;border-bottom-color:#9d9dfa33}.outcome-cta span{color:#9898c8}.outcome-cta b{color:#cacaFC}
a:focus-visible,button:focus-visible{outline-color:#cacafc}
@media(max-width:760px){
  .case-link{display:none}
  .copy{background:linear-gradient(90deg,#030312ef,#03031258)}
  .vignette{background:linear-gradient(0deg,#030312c4 0%,transparent 72%)}
}

/* Iteration 28: apply the shared 8i brand system to the spatial home page. */
:root{
  --accent:#f6cd49;
  --accent-hover:#fae284;
  --accent-ink:#02020b;
}
.brand img{filter:none}
em,.outcome-title span{color:var(--accent)}
.case-link{color:var(--accent);border-bottom-color:#f6cd4966}
.case-link:hover{color:var(--accent-hover);border-color:var(--accent-hover)}
.nav-link:hover{border-color:#f6cd4980;color:var(--accent-hover)}
.chapters a[aria-current] .chapter-number{color:var(--accent)}
.chapters a[aria-current]:after{background:var(--accent);box-shadow:0 0 13px #f6cd4990}
.intelligence-picker button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 0 26px #f6cd4933}
.focus-count,.practice-list span{color:var(--accent)}
.intelligence-detail{border-color:#f6cd4973}
.return:hover{color:var(--accent-hover);border-color:#f6cd4980}
.outcome-cta{border-top-color:#f6cd498c;border-bottom-color:#f6cd493d}
.outcome-cta b{color:var(--accent)}
.outcome-cta:hover strong{color:var(--accent-hover)}
.progress div{background:var(--accent)}
@media(max-width:760px){.brand img{filter:none}.outcome-cta{border-top-color:#f6cd498c}}

/* Iteration 29: aligned tablet breakpoint and simplified phone composition. */
@media(max-width:900px){
  .nav{padding:19px 5%}
  .nav-caption,.case-link{display:none}
  .chapter{padding-left:6%;padding-right:6%}
  .copy{width:62%;max-width:520px}
  .chapters{right:7px;padding:16px 7px 16px 30px}
  .chapters a{width:36px;min-width:36px;padding:0;gap:0}
  .chapters .chapter-title{display:none}
  .chapters:before{right:11px}
  .chapters:after{width:30vw}
}
@media(max-width:760px){
  .nav{padding:16px 5%;background:linear-gradient(#030312f7 0%,#030312d6 64%,transparent)}
  .brand{gap:8px}.brand img{width:23px}.brand .brand-wordmark{font-size:22px}
  .nav-link{padding:8px 12px;font-size:11px;background:#0303128c}
  .nav-link span{margin-left:8px}
  .chapter{min-height:108svh;padding:92px 6% 102px;align-items:flex-end}
  .opening{min-height:100svh}
  .copy{width:100%;max-width:520px;padding:18px 10px 16px 0;background:linear-gradient(90deg,#030312f2 0%,#030312b8 72%,transparent 100%);border-radius:0}
  h1,h2{font-size:clamp(39px,11vw,54px);line-height:1.04;margin-bottom:17px}
  .lead{font-size:16px;line-height:1.45;margin-bottom:17px;max-width:330px}
  .support{font-size:12px;line-height:1.65;margin-top:14px!important}
  .eyebrow{font-size:10px;margin-bottom:14px;letter-spacing:.14em}
  .scroll-cue{margin-top:10px;font-size:11px}.scroll-line{height:30px}
  .chapters{left:50%;right:auto;top:auto;bottom:13px;transform:translateX(-50%);display:flex;gap:2px;padding:5px;background:#030312d9;border:1px solid #bdbdff24;border-radius:999px;backdrop-filter:blur(14px)}
  .chapters a{width:36px;min-width:36px;height:34px;padding:0;justify-content:center;gap:5px;border-radius:50%}
  .chapters a:after{width:3px;height:3px;margin:0}
  .chapters:before,.chapters:after{display:none}
  .intelligence{min-height:230svh;align-items:flex-start}
  .intelligence .copy{top:36vh;margin-top:48vh;padding-bottom:16px}
  .intelligence-picker,.spatial-hint{display:none}
  .intelligence-detail{min-height:96px;margin-top:15px;padding-top:3px;padding-left:14px}
  .intelligence-detail h3{font-size:18px;margin-bottom:5px}
  .intelligence-detail p{font-size:14px;line-height:1.42;max-width:310px}
  .focus-count{font-size:10px}
  .practice-list{margin-top:17px}.practice-list div{gap:14px;padding:3px 0}.practice-list p{font-size:14px}
  .outcome{min-height:112svh;padding-bottom:245px}
  .outcome-cta{top:28%;width:88%;padding:15px 0}
  .outcome-cta strong{font-size:20px}.outcome-cta b{margin-top:11px;font-size:12px}
  footer{bottom:24px;gap:5px;font-size:10px;line-height:1.55}
}
@media(max-width:430px){
  .brand .brand-wordmark{font-size:20px}
  .nav-link{padding:7px 10px}
  h1,h2{font-size:clamp(37px,10.7vw,46px)}
  .outcome-title{font-size:clamp(48px,15vw,66px)}
  .opening .coordinate{display:none}
}


/* Site-wide theme (sessionStorage 8i-theme; default = prefers-color-scheme) */
html[data-theme="light"]{color-scheme:light}
html[data-theme="light"] body{background:#f7f7ff;color:#030312}
html[data-theme="light"] .nav,html[data-theme="light"] header,html[data-theme="light"] .system-header{color:#0f0fed}
html[data-theme="light"] .brand .brand-wordmark,html[data-theme="light"] .brand span{color:#0f0fed}
html[data-theme="light"] .brand img.theme-brand-mark{filter:none}
html[data-theme="light"] a,html[data-theme="light"] .nav-link,html[data-theme="light"] .case-link{color:#0c0c78}
html[data-theme="light"] .lead,html[data-theme="light"] .support,html[data-theme="light"] p{color:#333368}
html[data-theme="light"] h1,html[data-theme="light"] h2,html[data-theme="light"] h3{color:#030312}
html[data-theme="light"] em{color:#0f0fed}