/* About page look: navy, champagne gold and teal; Cormorant Garamond headings */
.pg-about{--gold:#ffffff;--gold-l:#ffffff;--ink2:#0a45f0;--display:"Cormorant Garamond","Newsreader",Georgia,serif}
.pg-about h1,.pg-about h2,.pg-about h3{font-family:var(--display);font-weight:500;letter-spacing:-.005em}
.pg-about .eyebrow{color:var(--gold);letter-spacing:.24em;display:flex;align-items:center;gap:14px}
.pg-about .eyebrow:before{content:"";width:34px;height:1px;background:currentColor}
.pg-about .eyebrow.light{color:var(--gold-l)}
.ax-bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* hero */
.ax-hero{min-height:82vh;display:flex;align-items:center;padding:140px 0 120px;background:var(--ink2)}
.ax-hero:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,58,215,.88) 0%,rgba(8,58,215,.5) 50%,rgba(8,58,215,.08) 100%),linear-gradient(0deg,rgba(8,58,215,.4),transparent 45%)}
.ax-hero .wrap{position:relative;z-index:2;width:100%}
.ax-hero h1{font-size:clamp(2.6rem,5.6vw,4.9rem);line-height:1.04;max-width:13em;color:#fff}
.ax-hero .lead{font-family:var(--display);font-style:italic;font-size:clamp(1.3rem,2vw,1.65rem);color:var(--gold-l);max-width:30em;border-left:1px solid var(--gold);padding-left:22px;margin-top:1.4em}
.ax-scroll{position:absolute;z-index:2;left:50%;bottom:34px;width:1px;height:56px;background:linear-gradient(var(--gold),transparent);animation:axs 2.4s ease-in-out infinite}
@keyframes axs{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* bio */
.ax-bio{background:linear-gradient(180deg,#fbfaf7,#fff)}
.ax-bio h2{font-size:clamp(2.2rem,3.6vw,3.1rem)}
.ax-side{align-self:start;position:sticky;top:110px}
.ax-photo{margin:44px 0 0;position:relative}
.ax-photo:before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--gold);z-index:0}
.ax-photo img{position:relative;z-index:1;width:100%;aspect-ratio:4/3;object-fit:cover;filter:none}
.ax-photo.tall img{aspect-ratio:4/5}
.ax-text p:first-child{font-family:var(--display);font-size:1.6rem;line-height:1.4;color:#111418}
.ax-text p:first-child:first-letter{float:left;font-size:4.4em;line-height:.82;margin:.06em .1em 0 0;color:var(--gold)}
.ax-text p{color:#3a4350}
/* strengths band */
.ax-band{position:relative;overflow:hidden;background:var(--ink2)!important;padding:120px 0!important}
.ax-band:before{content:"";position:absolute;inset:0;z-index:1;background:rgba(8,58,215,.42)}
.ax-band .wrap{position:relative;z-index:2}
.ax-band .card{background:rgba(255,255,255,.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);border-top:2px solid var(--gold);padding:42px 34px}
.ax-band .card:hover{border-color:var(--gold);background:rgba(255,255,255,.1)}
.ax-band .card h3{color:#fff;font-size:1.75rem}
.ax-band .card p{color:#c4ccd6}
.ax-band .icon{color:var(--gold-l);width:46px;height:46px}
/* experience */
.ax-exp h2{font-size:clamp(2.2rem,3.6vw,3.1rem)}
.ax-exp .timeline{border-left:1px solid rgba(255,255,255,.45);padding-left:44px}
.ax-exp .role{padding:22px 26px 24px;margin-bottom:18px;border:1px solid transparent;transition:background .3s,border-color .3s,transform .3s}
.ax-exp .role:hover{background:#fbfaf7;border-color:var(--line);transform:translateX(4px)}
.ax-exp .role:before{left:-50px;top:30px;width:11px;height:11px;border-color:var(--gold);background:#fff}
.ax-exp .role.now{background:var(--ink2);border-color:var(--ink2)}
.ax-exp .role.now:before{background:var(--gold);box-shadow:0 0 0 6px rgba(255,255,255,.2)}
.ax-exp .role.now h3{color:#fff}.ax-exp .role.now .org{color:var(--gold-l)}.ax-exp .role.now p{color:#c4ccd6}
.ax-exp .role .when{color:var(--gold)}.ax-exp .role.now .when span{color:#9fb0c0;margin-left:8px}
.ax-exp .role h3{font-size:1.6rem}
/* education */
.ax-edu{position:relative;background:linear-gradient(rgba(8,58,215,.72),rgba(8,58,215,.8)),url(/img/insights-banner.jpg) center/cover fixed!important}
.ax-edu h2{color:#fff;font-size:clamp(2.2rem,3.6vw,3.1rem)}
.ax-edu .card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.22);padding:40px 32px}
.ax-edu .card:hover{border-color:var(--gold);background:rgba(255,255,255,.08)}
.ax-edu .card h3{color:#fff;font-size:1.7rem}.ax-edu .card p{color:#c4ccd6}
.ax-edu .textlink{color:#fff;border-color:var(--gold)}.ax-edu .textlink:hover{color:var(--gold-l)}
@media (max-width:900px){.ax-side{position:static}.ax-photo{margin-top:30px}.ax-photo.tall{display:none}.ax-hero{min-height:70vh;padding:100px 0 90px}.ax-edu{background-attachment:scroll!important}.ax-exp .timeline{padding-left:28px}.ax-exp .role{padding:18px}.ax-exp .role:before{left:-34px;top:26px}}
@media (prefers-reduced-motion:reduce){.ax-bgv{display:none}.ax-scroll{animation:none}}

/* Electric blue look: gold became white on dark backgrounds; on light backgrounds it reads as electric blue / pale blue */
.pg-about .eyebrow{color:#111418}.pg-about .eyebrow.light{color:#fff}
.ax-text p:first-child:first-letter{color:#111418}
.ax-exp .role .when{color:#111418}.ax-exp .role.now .when{color:#fff}.ax-exp .role:not(.now):before{border-color:#1a56ff}
.ax-photo:before,.figure:before{border-color:#cfdcff}
.card:hover{border-color:#cfdcff;border-top-color:#1a56ff}.cat:hover{border-color:#cfdcff}
.ax-band .card:hover,.ax-edu .card:hover,.investors .card:hover,.cta .card:hover{border-color:#fff}
.pillar li:before{background:#1a56ff}.note{border-left-color:#1a56ff}.textlink{border-color:#1a56ff}
.hero.photo .textlink,.ax-edu .textlink,.page-hero .textlink{border-color:#fff}
.nav nav a:not(.btn-sm):after{background:#1a56ff}
.role:before{border-color:#1a56ff}.timeline{border-left-color:#cfdcff}
.btn:hover,.btn-sm:hover{background:#fff;border-color:#1a56ff;color:#111418!important}
.bgv{filter:none}

/* More original colour (Oct 11): thinner blue layers over photos and videos; blue kept mainly behind the text, plus a soft shadow on the text */
.hero.photo:before,.page-hero.img:before,.ax-hero:before{background:linear-gradient(90deg,rgba(8,58,215,.62) 0%,rgba(8,58,215,.22) 45%,rgba(8,58,215,0) 75%),linear-gradient(0deg,rgba(8,58,215,.2),transparent 35%)}
.hero.photo h1,.hero.photo p,.page-hero h1,.page-hero p,.ax-hero h1,.ax-hero p,.ax-band h2,.ax-edu h2{text-shadow:0 2px 18px rgba(0,20,90,.45)}
.ax-band:before{background:rgba(8,58,215,.18)}
.ax-edu{background:linear-gradient(rgba(8,58,215,.45),rgba(8,58,215,.55)),url(/img/insights-banner.jpg) center/cover fixed!important}
.diff a img{opacity:1;filter:none}.diff a:hover img{opacity:1}
.diff .in,.diff a.ai .in{background:linear-gradient(0deg,rgba(8,58,215,.85) 0%,rgba(8,58,215,.35) 45%,rgba(8,58,215,0) 80%)}
@media (max-width:900px){.hero.photo:before,.page-hero.img:before,.ax-hero:before{background:rgba(8,58,215,.45)}}

/* Oct 11: About timeline line back in electric blue; Education section text all white */
.ax-exp .timeline,.pg-about .timeline{border-left:2px solid #1a56ff!important}
.ax-edu,.ax-edu h2,.ax-edu h3,.ax-edu p,.ax-edu .card p,.ax-edu a,.ax-edu .textlink,.pg-about .ax-edu .eyebrow{color:#fff!important}

/* Oct 11: first (current role) timeline dot matches the others: electric blue */
.ax-exp .role.now:before{background:#fff!important;border-color:#1a56ff!important;box-shadow:0 0 0 5px rgba(26,86,255,.18)}

/* Oct 11: education boxes are not links, so they keep the hover look at all times */
.ax-edu div.card,.ax-edu div.card:hover{border-color:#fff!important;background:rgba(255,255,255,.08)!important;box-shadow:0 14px 30px -18px rgba(8,58,215,.35)!important}
.ax-edu div.card.reveal.in,.ax-edu div.card.reveal.visible,.ax-edu div.card.reveal.is-visible,.ax-edu div.card:not(.reveal),.ax-edu div.card:hover{transform:translateY(-3px)!important}

/* Oct 11: education box text more legible: darker box behind it, bolder, larger text */
.ax-edu div.card,.ax-edu div.card:hover{background:rgba(6,16,46,.72)!important;backdrop-filter:blur(3px)}
.ax-edu div.card h3{color:#fff!important;font-weight:600!important;font-size:1.3rem!important;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.ax-edu div.card p{color:#fff!important;opacity:1!important;font-size:1rem!important;font-weight:500!important;text-shadow:0 1px 3px rgba(0,0,0,.5)}