:root{--plate:transparent;--sand:#f1ebdd;--bg:#faf7f0;--ink:#3a2e2e;--mute:#7b6e6a;--rule:#e3dacb;--card:#fffdf8;--acc:#3a2e2e;--serif:'Fraunces',Georgia,serif;--sans:'Inter Tight',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;--gut:max(20px,calc((100% - 1120px)/2))}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
html{color-scheme:light}
html[data-theme=dark]{color-scheme:dark}
body{background:var(--bg);color:var(--ink);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}button{font:inherit;color:inherit;cursor:pointer}
.mono,kbd{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--bg);padding:8px;z-index:99}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--acc);transform-origin:0 50%;transform:scaleX(var(--sp,0));z-index:30}

.bar{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:16px;padding:12px var(--gut);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);transition:background .7s}
.mark{font:600 1.1rem var(--serif);text-decoration:none}
.lenses{display:flex;gap:6px;overflow-x:auto;flex:1;scrollbar-width:none}
.tools{display:flex;gap:10px;align-items:center}
.chip{border:1px solid var(--rule);background:transparent;border-radius:999px;padding:6px 12px;font:500 .78rem var(--sans);white-space:nowrap;transition:.2s}
.chip:hover,.chip[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
kbd{border:1px solid var(--rule);border-radius:4px;padding:0 5px;margin-left:4px;text-transform:none}
.dock{position:fixed;inset:auto var(--gut) 14px auto;z-index:20}
.dock .chip{background:var(--bg)}

.scene{position:relative;z-index:1;background:var(--bg);padding:140px 0 100px;overflow:clip;border-radius:36px 36px 0 0;margin-top:-36px;box-shadow:0 -24px 48px rgba(58,46,46,.08)}
.scene.sand{background:var(--sand)}
.wrap{width:min(1120px,100% - 40px);margin:0 auto}
h1{font:600 clamp(3.4rem,13vw,10rem)/.9 var(--serif);letter-spacing:-.035em;margin:20px 0 28px;position:relative;z-index:2}
.line{display:block;will-change:transform;transform:translateX(calc(var(--hp,0) * var(--dir,1) * 18vw))}
.l2{--dir:-1;margin-left:.6em}
h2{font:500 clamp(1.7rem,4vw,3.2rem)/1.12 var(--serif);letter-spacing:-.01em;max-width:22ch;margin:10px 0 36px}
.headline{font:500 clamp(1.1rem,2.4vw,1.5rem) var(--sans);max-width:40ch;position:relative;z-index:2}
.about{max-width:min(62ch,52vw);margin:18px 0 28px;color:var(--mute);position:relative;z-index:2}
.hero{position:sticky;top:0;z-index:0;background:var(--bg);border-radius:0;margin-top:0;box-shadow:none;min-height:100svh;padding-left:var(--gut);padding-right:var(--gut);display:flex;flex-direction:column;justify-content:center}
.scrollcue{margin-top:40px;position:relative;z-index:2}
.cta{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:2}
.btn{border:1px solid var(--ink);padding:12px 20px;text-decoration:none;background:transparent;font-weight:500;transition:.25s}
.btn:hover,.btn.solid{background:var(--ink);color:var(--bg)}
.btn.solid:hover{background:var(--acc);border-color:var(--acc);color:#fff}

/* proof */
.proof{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;border-top:1px solid var(--rule)}
.proof li{padding:28px 20px 28px 0;border-bottom:1px solid var(--rule)}
.proof b{display:block;font:600 clamp(3rem,7vw,5.2rem)/1 var(--serif);color:var(--ink);margin-bottom:10px;font-variant-numeric:tabular-nums}
.proof span{font-size:.9rem;color:var(--mute);display:block;max-width:26ch}

/* brands marquee, scrubbed by scroll */
.marquee{overflow:hidden;margin-top:20px;display:grid;gap:18px}
.brand{background:#fff;height:96px;min-width:200px;padding:0 28px;border:1px solid var(--rule);display:grid;place-items:center;transition:.3s}
.brand:hover{border-color:var(--acc)}
.brand img{height:48px;width:auto;max-width:160px;object-fit:contain;opacity:.95;transition:.3s}
.brand:hover img{opacity:1}
.wm{font:600 1.15rem var(--serif);letter-spacing:-.01em;text-align:center;line-height:1.1}
.wm small{display:block;font:400 .6rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-top:4px}

/* ledger */
.ledger-grid{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:start}
.rail{position:sticky;top:120px;padding:22px 0;border-top:2px solid var(--ink)}
.rail-dates{font:600 clamp(2.4rem,4vw,3.4rem)/1 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:10px;min-height:2.2em}
.lens-note{color:var(--mute);font-size:.9rem;min-height:1.4em}
.role{padding:30px 0;border-top:1px solid var(--rule);transition:opacity .4s}
.role.dim{opacity:.26}
.role .when{font:500 .78rem var(--mono);color:var(--mute);margin-bottom:6px;overflow:hidden}
.role .when>span{display:inline-block}
.role h3{font:500 1.6rem/1.2 var(--serif)}
.org{color:var(--ink);font-weight:600;margin:2px 0 8px}
.org small{color:var(--mute);font-weight:400}
.scope{color:var(--mute);max-width:64ch}
.scope.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.role:has(details[open]) .scope.clamp{display:block;-webkit-line-clamp:unset;line-clamp:none}
.top-claims{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.top-claims li{padding-left:16px;border-left:2px solid var(--rule);max-width:70ch}
.top-claims b{font-weight:600}
details{margin-top:14px}
summary{cursor:pointer;font:500 .78rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--mute);list-style:none}
summary::before{content:"+ "}details[open] summary::before{content:"– "}
.more{margin-top:12px;display:grid;gap:10px;list-style:none;padding:0}
.more li{font-size:.92rem;max-width:70ch}
.id{font:400 .66rem var(--mono);color:var(--mute);margin-left:6px}
.star{background:var(--card);border:1px solid var(--rule);padding:16px;margin-top:12px;font-size:.9rem;max-width:70ch}
.star h4{font:500 1.05rem var(--serif);margin-bottom:8px}
.star dt{font:500 .68rem var(--mono);text-transform:uppercase;color:var(--mute);margin-top:8px}
.star dd{margin:0}

/* horizontal pinned programmes */
.hs{height:calc(100vh + var(--travel,100vw));padding:0}
.hs-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:24px;padding-top:70px}
.hs-head h2{margin-bottom:0;max-width:30ch}
.hs-track{display:flex;gap:22px;padding:0 var(--gut);width:max-content;transform:translateX(calc(var(--hx,0) * -1px))}
.case{width:min(78vw,480px);height:min(56vh,480px);background:var(--card);border:1px solid var(--rule);padding:26px;display:flex;flex-direction:column;gap:10px;overflow:auto;clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%)}
.case h3{font:500 1.3rem/1.2 var(--serif)}
.case .out{font:500 1.02rem/1.4 var(--serif);color:var(--ink)}
.case dt{font:500 .68rem var(--mono);text-transform:uppercase;color:var(--mute);margin-top:6px}
.case dd{margin:0;font-size:.88rem}

/* skills & credentials */
.skill-group{display:grid;grid-template-columns:200px 1fr;gap:12px 32px;padding:18px 0;border-top:1px solid var(--rule)}.cred-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;margin-top:56px;padding-top:36px;border-top:2px solid var(--ink)}
.cred-grid h3{font:500 .78rem var(--mono);text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.cred-grid ul{padding:0;list-style:none;font-size:.9rem;display:grid;gap:6px}
.cred-grid li span{color:var(--mute)}

.contact h2{max-width:20ch}
.fine{margin-top:48px;max-width:70ch;text-transform:none;line-height:1.6}

dialog{border:1px solid var(--rule);background:var(--bg);color:var(--ink);width:min(680px,92vw);max-height:80vh;margin:10vh auto;padding:0;border-radius:10px}
dialog::backdrop{background:rgba(0,0,0,.5)}
dialog form{display:flex;gap:8px;padding:14px;border-bottom:1px solid var(--rule)}
#q{flex:1;font:inherit;font-size:1.05rem;background:transparent;border:0;color:inherit;outline:0}
#results{list-style:none;padding:0;overflow:auto;max-height:60vh}
#results li{padding:12px 16px;border-bottom:1px solid var(--rule);font-size:.9rem}
#results li small{display:block;color:var(--mute);font-family:var(--mono);font-size:.68rem;text-transform:uppercase}
mark{background:color-mix(in srgb,var(--acc) 30%,transparent);color:inherit}

/* reveals: masks wipe in, text rises */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1s cubic-bezier(.7,0,.2,1)}
.wipe.in{clip-path:inset(0 0 0 0)}

.no-motion *,.no-motion *::before{transition:none!important;animation:none!important}
.no-motion .line,.no-motion .giant{transform:none!important}
.no-motion .reveal{opacity:1;transform:none}.no-motion .wipe{clip-path:none}
.no-motion .hs{height:auto;padding:100px 0}.no-motion .hs-pin{position:static;height:auto}
.no-motion .hs-track{transform:none;width:auto;flex-wrap:wrap}.no-motion .case{height:auto}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:900px){.ledger-grid{grid-template-columns:1fr}.rail{display:none}.role .when{display:block}.skill-group{grid-template-columns:1fr}}
@media(max-width:720px){.mark,#counter{display:none}.hs{height:auto;padding:100px 0}.hs-pin{position:static;height:auto}.hs-track{transform:none;width:auto;overflow-x:auto;padding-bottom:12px}.case{flex:0 0 82vw;height:auto}}
@media print{.bar,.dock,.progress,.cta,.skip,dialog,.scrollcue,.marquee{display:none}body,body[data-theme=dark]{background:#fff;color:#000;--ink:#000;--mute:#444;--rule:#ccc;--card:#fff}.scene{padding:24px 0}details{display:block}details>*{display:block}summary{display:none}.reveal,.wipe{opacity:1;transform:none;clip-path:none}.role.dim{opacity:1}.hs{height:auto}.hs-pin{position:static;height:auto}.hs-track{transform:none;width:auto;flex-wrap:wrap}.case{height:auto}.giant{display:none}}

/* dark slab: contained, not a page-wide flip */
.slab{--ink:#faf7f0;--mute:#bcb0aa;--rule:#56494a;--acc:#ff6b35;--card:#463a3a;position:relative;overflow:hidden;background:#3a2e2e;color:var(--ink);border-radius:28px;padding:clamp(28px,5vw,64px)}
.slab .btn{border-color:#faf7f0}.slab .btn:hover,.slab .btn.solid{background:#faf7f0;color:#3a2e2e}.slab .btn.solid:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.slab .giant{position:absolute;right:-4%;top:-8%;font:400 min(70vw,620px)/.8 var(--serif);opacity:.07;color:#faf7f0;transform:translateY(calc(var(--gp,0) * 10vh));pointer-events:none}
.slab>*:not(.giant){position:relative}
/* brand tiles: logos are transparent PNG/SVG */
.brand{background:none;border:0;height:130px;min-width:230px;padding:0 28px;border-radius:0}
.brand img{height:84px;max-width:200px}
.brand[data-tier=lg]{min-width:290px}.brand[data-tier=lg] img{height:112px;max-width:250px}
.brand[data-tier=sm]{min-width:170px;opacity:.6}.brand[data-tier=sm] img{height:56px;max-width:120px}
/* recommendations */
.voices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:20px}
.voice{background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:18px}
.voice blockquote{font:400 1.12rem/1.55 var(--serif)}
.voice blockquote .pull{font:400 clamp(1.3rem,2.2vw,1.6rem)/1.3 var(--serif);letter-spacing:-.01em;text-wrap:pretty}   /* pull line: first sentence, kept to about 4 lines in main.js */
.voice figcaption{display:flex;gap:12px;align-items:center;color:var(--mute);margin-top:auto}
.voice figcaption img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.voice figcaption b{display:block;color:var(--ink);font:600 .8rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px}
.voice figcaption small{display:block;font:500 .75rem/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase}
/* quote lines rise from a mask as the card enters (lines are split in main.js) */
@media (prefers-reduced-motion:no-preference){
  :root:not(.no-motion) .voice .is-split .q-line{transform:translateY(105%);opacity:0;transition:transform .76s cubic-bezier(.19,1,.22,1),opacity .52s ease;transition-delay:calc(var(--i,0) * 60ms)}
  :root:not(.no-motion) .voice.in .is-split .q-line{transform:none;opacity:1}
}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.gallery figure{overflow:hidden;border-radius:14px}
.gallery img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;display:block;transition:transform .8s}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{font:400 .7rem var(--mono);color:var(--mute);padding:8px 2px}
@media(max-width:720px){.scene{border-radius:24px 24px 0 0;margin-top:-24px}.brand{min-width:200px;height:120px}.brand img{height:68px}.brand[data-tier=lg]{min-width:240px}.brand[data-tier=lg] img{height:92px}}

.case{height:min(72vh,580px)}
.case-photo{width:100%;height:170px;object-fit:cover;border-radius:10px;display:block;margin:-6px 0 4px}
.role-photo{margin:18px 0 0;max-width:720px}
.role-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;display:block}
.role-photo figcaption{font:400 .7rem var(--mono);color:var(--mute);padding:8px 2px;text-transform:uppercase;letter-spacing:.05em}

.case-photos{display:grid;gap:6px;margin:-6px 0 4px}
.case-photos.n2{grid-template-columns:1fr 1fr}
.case-photos img{width:100%;height:150px;object-fit:cover;border-radius:10px;display:block}
.voice blockquote p+p{margin-top:.8em}

/* ---------- dark mode ---------- */
:root[data-theme=dark]{--sand:#262626;--bg:#2e2e2e;--ink:#f4f1ea;--mute:#a8a39a;--rule:#444;--card:#383838;--acc:#ff6b35;--plate:#faf7f0}
:root[data-theme=dark] .slab{background:#242424;box-shadow:inset 0 0 0 1px #444;--card:#2e2e2e;--rule:#444}
:root[data-theme=dark] .scene{box-shadow:0 -24px 48px rgba(0,0,0,.35)}
/* logos are transparent PNG/SVG with dark artwork: in dark mode they sit on one light band (marquee) or a light plate (career rail), shown at full colour */
:root[data-theme=dark] .marquee{background:var(--plate);padding:26px 0;margin-top:28px}
:root[data-theme=dark] .rl>span{background:var(--plate);border-radius:12px;padding:8px 14px}
:root[data-theme=dark] .brand[data-tier=sm]{opacity:.7}
:root[data-theme=dark] .btn{border-color:var(--ink)}
:root[data-theme=dark] .btn.solid:hover{color:#14120f}
#themeBtn{display:inline-flex;align-items:center;gap:6px}
#themeBtn .ico{width:12px;height:12px;border-radius:50%;border:1.5px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
/* seamless switch: every colour eases while the theme class is on */
.theming,.theming *,.theming *::before,.theming *::after{transition:background-color .7s ease,color .7s ease,border-color .7s ease,box-shadow .7s ease,fill .7s ease,opacity .7s ease!important}

/* ---------- rail: logo cross-fade + odometer years ---------- */
.rail-logo{position:relative;height:96px;margin-bottom:18px;--enter:18px;--leave:-18px}
.rail-logo[data-dir=up]{--enter:-18px;--leave:18px}
.rl{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;opacity:0;transform:translateY(var(--enter)) scale(.97);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.rl.on{opacity:1;transform:none}
.rl.out{opacity:0;transform:translateY(var(--leave)) scale(.97)}
.rl>span{display:flex;align-items:center;padding:6px 0}
.rail-logo img{height:84px;max-width:230px;object-fit:contain;display:block}
.rl[data-slug=core] img{height:46px;max-width:150px}
.rail-dates{display:grid;justify-items:start;gap:0;margin-bottom:10px;font:600 clamp(2.4rem,4vw,3.4rem)/1 var(--serif);color:var(--ink)}
.odo-arrow{font-size:.45em;line-height:1.4;opacity:.55}
.odo{display:inline-grid;height:1em}
.odo>*{grid-area:1/1}
.odo-digits{display:inline-flex}
.odo .d{display:inline-block;width:.62em;height:1em;overflow:hidden;text-align:center}
.odo .s{display:flex;flex-direction:column;transition:transform .9s cubic-bezier(.2,.8,.2,1);will-change:transform}
.odo .s i{font-style:normal;height:1em;line-height:1}
.odo-now{opacity:0;transition:opacity .5s ease,transform .7s cubic-bezier(.2,.8,.2,1);transform:translateY(60%)}
.odo.is-now .odo-now{opacity:1;transform:none}
.odo.is-now .odo-digits{opacity:0;transition:opacity .4s}
.odo-digits{transition:opacity .5s .15s}
.no-motion .odo .s,.no-motion .rl{transition:none!important}

/* ---------- logos & photos ---------- */
.brand[data-slug=core] img{height:56px;max-width:152px}
.brand[data-slug=bcd] img{height:100px}
.brand[data-slug=noc] img{height:100px}
.brand[data-slug=atib] img{height:70px;max-width:200px}
.lede{color:var(--mute);max-width:56ch;margin:12px 0 0}
.case-photos.n1 img{height:190px;object-position:center 30%}

.voice .note{font:400 .68rem var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.06em;margin:-6px 0 0}

/* logo strip: two scroll-driven rows, logos close together */
.marquee{overflow:hidden;margin-top:28px;gap:6px;padding:10px 0}
.marquee .brand{min-width:0;height:104px;padding:0 20px}
.marquee .brand img{height:var(--h,72px);width:auto;max-width:none;object-fit:contain}
.marquee .brand[data-slug=mastercard]{--h:100px}.marquee .brand[data-slug=visa]{--h:38px}.marquee .brand[data-slug=idemia]{--h:54px}.marquee .brand[data-slug=tadawul]{--h:52px}
.marquee .brand[data-slug=regus]{--h:70px}.marquee .brand[data-slug=cheil]{--h:62px}.marquee .brand[data-slug=samsung]{--h:40px}.marquee .brand[data-slug=hp]{--h:72px}
.marquee .brand[data-slug=undp]{--h:88px}.marquee .brand[data-slug=unicef]{--h:76px}.marquee .brand[data-slug=moore]{--h:84px}
.marquee .brand[data-slug=core]{--h:46px}.marquee .brand[data-slug=noc]{--h:94px}.marquee .brand[data-slug=bcd]{--h:50px}.marquee .brand[data-slug=atib]{--h:66px}.marquee .brand[data-slug=hemfa]{--h:50px}
.rl>span{position:relative}
.rl .dk{display:block;position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;opacity:0}
:root[data-theme=dark] .rl .lt{opacity:0}:root[data-theme=dark] .rl .dk{opacity:1}
:root[data-theme=dark] .rl>span{background:none;padding:6px 0;border-radius:0}
.rail-logo img,.rl img{height:auto;max-height:84px}

/* ---------- mobile ---------- */
.lenses{min-width:0}
@media(max-width:720px){
  .bar{gap:8px;padding:10px 14px}
  .tools{gap:6px;flex:none}
  .chip{padding:6px 10px;font-size:.74rem}
  kbd,#themeBtn .lbl{display:none}
  .dock{inset:auto 12px 12px auto}.dock .chip{font-size:.7rem;padding:5px 10px}
  .scene{padding-top:96px;padding-bottom:64px}
  .hero{position:relative;min-height:0;justify-content:flex-start;padding-top:84px;padding-bottom:56px}
  #loc{margin-top:16px}
  h1{margin:8px 0 18px;font-size:clamp(3.2rem,16vw,5rem)}
  .line{transform:translateX(calc(var(--hp,0) * var(--dir,1) * 6vw))}
  .about,.headline{max-width:none}
  .about{margin:14px 0 22px}
  .scrollcue{display:none}
  .proof{grid-template-columns:1fr 1fr}
  .proof li{padding:20px 12px 20px 0}
  .proof b{font-size:clamp(2.4rem,12vw,3.4rem)}
  .proof span{font-size:.82rem}
  h2{max-width:none}
  /* logo strip: smaller logos, longer travel */
  .marquee{margin-top:18px;padding:6px 0}
  .marquee .brand{height:76px;padding:0 12px}
  .marquee .brand img{height:calc(var(--h,72px) * .64)}
  :root[data-theme=dark] .marquee{padding:16px 0;margin-top:18px}
  .hs-track{flex-direction:column;overflow:visible;gap:16px}
  .case{height:auto;flex:none;width:100%}
  .voices{grid-template-columns:1fr;grid-auto-rows:auto}
  .voice{padding:22px}
  .cred-grid{gap:22px}
}
.role-logo{display:none;margin-bottom:12px}
.role-logo>span{position:relative;display:inline-flex}
.role-logo img{height:auto;max-height:44px;max-width:150px;display:block}
.role-logo img[src$="core.png"]{max-height:30px}
.role-logo .dk{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;opacity:0}
:root[data-theme=dark] .role-logo .lt{opacity:0}:root[data-theme=dark] .role-logo .dk{opacity:1}
@media(max-width:900px){.role-logo{display:block}}

/* big years numeral beside the career heading */
#timeline .wrap:first-child{position:relative}

/* closing line */
.strive{font:500 clamp(2.4rem,8vw,6rem)/1 var(--serif);letter-spacing:-.02em;color:var(--acc);margin-top:64px}
.strive+.fine{margin-top:28px}
/* search: no heavy ring, clickable results, flash on arrival */
dialog,dialog:focus-visible,#q:focus-visible{outline:none}
#results li[data-i]{cursor:pointer;transition:background .2s}
#results li[data-i]:hover,#results li[data-i]:focus-visible{background:color-mix(in srgb,var(--ink) 7%,transparent);outline:none}
.flash{background:color-mix(in srgb,var(--acc) 16%,transparent)!important;box-shadow:0 0 0 2px var(--acc);border-radius:6px;transition:background .6s,box-shadow .6s}

/* claim codes stay in the data (search jumps use them) but are not shown */
.id{display:none}
/* hero headline: role, then specialisms */
.headline .h-role{display:block;font:600 clamp(1.5rem,3.2vw,2.3rem)/1.15 var(--sans);letter-spacing:-.01em;margin-bottom:8px}
.headline .h-sub{display:block;font:500 clamp(.95rem,1.7vw,1.15rem)/1.4 var(--sans);color:var(--mute)}
.headline .h-sub i{font-style:normal;margin:0 .45em;opacity:.55}
.headline{max-width:none}
/* one-line statements on wide screens */
.lede{max-width:none}
@media(min-width:900px){#brands h2{max-width:none;white-space:nowrap;font-size:clamp(1.7rem,3.3vw,2.6rem)}}
/* programmes: full, stacked, no horizontal scroll */
.cases{display:grid;gap:28px;margin-top:8px}
.cases .case{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"head dl";gap:20px 56px;width:auto;height:auto;overflow:visible;clip-path:none;padding:clamp(24px,4vw,44px);background:var(--card);border:1px solid var(--rule);border-radius:22px;align-items:start}
.cases .case.has-pic{grid-template-areas:"pic head" "pic dl"}
.case header{grid-area:head;display:grid;gap:14px;align-content:start}
.case header .mono{color:var(--mute);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.case h3{font:500 clamp(1.7rem,3vw,2.5rem)/1.1 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.case .out{font:400 1.12rem/1.5 var(--serif);color:var(--ink);padding-left:16px;border-left:3px solid var(--acc)}
.case dl{grid-area:dl;display:grid;gap:0;margin:0}
.case dl>div{padding:14px 0;border-top:1px solid var(--rule)}
.case dt{font:500 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:0 0 6px}
.case dd{margin:0;font-size:.96rem;line-height:1.6;max-width:64ch}
.case-pic{grid-area:pic;position:sticky;top:96px;margin:0;border-radius:16px;overflow:hidden;align-self:start;aspect-ratio:4/3;background:var(--sand)}
#cases h2{max-width:none}
.case-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.82) contrast(1.02);transition:transform 1.2s}
.case-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,color-mix(in srgb,var(--sand) 38%,transparent),color-mix(in srgb,var(--ink) 14%,transparent));mix-blend-mode:multiply;pointer-events:none}
.case:hover .case-pic img{transform:scale(1.03)}
:root[data-theme=dark] .case-pic img{filter:saturate(.8) brightness(.9) contrast(1.03)}
:root[data-theme=dark] .case-pic::after{mix-blend-mode:normal;background:linear-gradient(160deg,color-mix(in srgb,var(--bg) 25%,transparent),color-mix(in srgb,var(--bg) 40%,transparent))}
@media(max-width:900px){.cases .case,.cases .case.has-pic{grid-template-columns:1fr;grid-template-areas:"pic" "head" "dl"}.cases .case:not(.has-pic){grid-template-areas:"head" "dl"}.case-pic{position:relative;top:0;aspect-ratio:16/10}}
/* flagship spread: title beside a captioned 3:2 plate inside the margins, sticky title column, hairline rules, no card */
#caseFlag{margin:8px 0 72px}
.case.flag{display:block;width:auto;height:auto;overflow:visible;clip-path:none;padding:0;background:none;border:0;border-radius:0}
.flag-lead.has-plate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.4vw,64px);align-items:start;margin-top:clamp(44px,6vw,92px)}
.flag-lead.has-plate .flag-title{margin-top:0}
.flag-lead.has-plate h3{font-size:clamp(2.2rem,4.6vw,4.6rem)}
.flag-plate{margin:0}
/* the only file is soft at 800px wide, so the plate crops tight on the three central figures and stays at half width */
.flag-pic{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--sand)}
.flag-pic img{position:absolute;left:-35.8%;bottom:0;width:151%;height:auto;max-width:none;display:block;filter:sepia(.14) saturate(.9) contrast(1.03)}
:root[data-theme=dark] .flag-pic img{filter:sepia(.1) saturate(.85) brightness(.92) contrast(1.03)}
/* the flagship plate wipes up from the bottom once, slowly, while the photo settles; the class is added by script, so no script means no hiding */
@media (prefers-reduced-motion:no-preference){
  :root:not(.no-motion) .flag-pic.unveil{clip-path:inset(100% 0 0 0);transition:clip-path 2.4s cubic-bezier(.25,1,.5,1)}
  :root:not(.no-motion) .flag-pic.unveil img{transform:scale(1.06)}
  :root:not(.no-motion) .flag-pic.unveil.in{clip-path:inset(0 0 0 0)}
  :root:not(.no-motion) .flag-pic.unveil.in img{transform:none;transition:transform 2.4s cubic-bezier(.25,1,.5,1)}
}
.flag-plate figcaption{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:12px;padding-top:10px;border-top:1px solid var(--ink);font:500 .75rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.flag-plate figcaption span+span::before{content:"·";margin:0 .7em;color:var(--mute)}
/* label: title on its own line, details beneath, so a wrap never leaves a separator at the start of a line */
.flag-plate figcaption span:first-child{flex-basis:100%;color:var(--ink)}
.flag-plate figcaption span:nth-child(2)::before{content:none}
@media(max-width:900px){.flag-lead.has-plate{grid-template-columns:1fr;align-items:start}}
.flag-cols{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:40px clamp(40px,7vw,104px);align-items:start;margin-top:clamp(36px,5vw,64px);padding-top:28px;border-top:1px solid var(--ink)}
.flag header{grid-area:auto;position:sticky;top:96px;gap:28px}
.flag-body dl{grid-area:auto}
/* flagship title as an art label: giant hairline Fraunces across the full measure, a small wide-set label above */
.flag-title{display:grid;gap:clamp(16px,2vw,26px);margin-top:clamp(44px,6vw,92px)}
.flag-title>.mono{font:500 .75rem/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--label)}
.flag h3{font:200 clamp(2.4rem,7.6vw,7.4rem)/.96 var(--serif);font-optical-sizing:auto;letter-spacing:-.035em;color:var(--ink);max-width:14ch;text-wrap:balance;overflow-wrap:break-word}
.flag-lead+.flag-cols{margin-top:clamp(32px,4.4vw,60px)}
@media (prefers-reduced-motion:no-preference){
  :root:not(.no-motion) .flag-title.is-split .f-line{transform:translateY(105%);opacity:0;transition:transform .76s cubic-bezier(.19,1,.22,1),opacity .52s ease;transition-delay:calc(var(--i,0) * 80ms)}
  :root:not(.no-motion) .flag-title.in.is-split .f-line{transform:none;opacity:1}
}
.flag .flag-facts{grid-area:auto}
.flag-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.flag-facts>div{padding:14px 16px 14px 0}
.flag-facts>div+div{padding-left:16px;border-left:1px solid var(--rule)}
.flag-facts dt{font:500 .75rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:0 0 6px}
.flag-facts dd{margin:0;font:500 .95rem/1.35 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.flag-body{display:grid;gap:28px;max-width:46ch}
.flag-body dl>div:last-child{border-bottom:1px solid var(--rule)}
.flag-body dd{font-size:1rem}
@media(max-width:900px){.flag-cols{grid-template-columns:1fr}.flag header{position:static}.flag-body{max-width:none}}
@media(max-width:520px){.flag-facts{grid-template-columns:1fr}.flag-facts>div+div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}}
.ledger-grid{position:relative;z-index:1}

/* wide career logos: same width as Tadawul and HEMFA, tight crop */
.rail-logo{height:116px}
.rl[data-slug=almanara] img,.rl[data-slug=estishari] img,.rl[data-slug=bcd] img,.rl[data-slug=ucc] img{width:225px;height:auto;max-height:112px;max-width:225px;object-fit:contain}
.marquee .brand[data-slug=bcd] img{height:var(--h)}
.role-logo [data-slug=ucc] img,.role-logo [data-slug=almanara] img,.role-logo [data-slug=estishari] img,.role-logo [data-slug=bcd] img,.role-logo [data-slug=hemfa] img,.role-logo [data-slug=hemfa-academy] img{width:168px;max-width:168px;height:auto;max-height:none}
/* mobile: year flip stays visible, grey and subtle, in the free space on the right */
@media(max-width:900px){
  .ledger-grid>*{grid-area:1/1}
  .rail{display:block;position:static;align-self:stretch;padding:0;border:0;pointer-events:none;z-index:0}
  .rail-logo,#railOrg{display:none}
  .rail-dates{position:sticky;top:84px;width:max-content;margin:0 0 0 auto;justify-items:end;font-size:clamp(1.5rem,7vw,2.2rem);color:var(--mute);opacity:.5;min-height:0}
  #ledger{position:relative;z-index:1}
}

/* digital-card QR */
.slab>.qr{position:absolute;right:clamp(24px,5vw,64px);bottom:clamp(24px,5vw,56px);display:grid;gap:10px;justify-items:center;text-decoration:none;color:var(--ink);font:500 .72rem var(--mono);letter-spacing:.06em;text-transform:uppercase;z-index:2}
.qr img{width:148px;height:148px;border-radius:14px;background:#fff;padding:0;display:block}
.qr span{color:var(--mute);max-width:16ch;text-align:center;line-height:1.4}
@media(max-width:900px){.slab>.qr{position:static;margin-top:32px;justify-items:start}.qr span{text-align:left;max-width:none}}
@media print{.qr{position:static}}

/* breathing room under the hero buttons, taken from the top of the results section */
.hero{justify-content:flex-start;padding-top:104px;padding-bottom:150px}
#proof{padding-top:60px}
@media(max-width:720px){.hero{padding-bottom:96px}#proof{padding-top:48px}}

#brands{padding-top:96px;padding-bottom:96px}
@media(max-width:720px){#brands{padding-top:64px;padding-bottom:64px}}

/* button icons */
.btn .ico{width:1.05em;height:1.05em;margin-right:.55em;vertical-align:-.14em}
/* QR centred vertically on the right of the contact card, no caption */
.slab>.qr{top:50%;bottom:auto;transform:translateY(-50%);right:clamp(40px,9vw,140px)}
@media(max-width:900px){.slab>.qr{position:static;transform:none;margin-top:32px}}
/* no thin rule across the 30 */
#ledger>.role:first-child{border-top:0}
/* section content sits a little higher so space above and below the card content is balanced */
.scene{padding-top:96px;padding-bottom:116px}
.hero{padding-top:88px;padding-bottom:150px}
#proof{padding-top:72px}
#brands{padding-top:84px;padding-bottom:108px}
@media(max-width:720px){.scene{padding-top:72px;padding-bottom:72px}.hero{padding-top:84px;padding-bottom:96px}#proof{padding-top:48px}#brands{padding-top:56px;padding-bottom:64px}}

/* contact card: one left-aligned closing line, the Email and LinkedIn buttons side by side on the left */
.contact .slab{text-align:left;padding-top:clamp(40px,7vw,96px);padding-bottom:clamp(40px,7vw,96px)}
.contact .slab h2{font:400 clamp(2.2rem,5.6vw,4.6rem)/1.04 var(--serif);letter-spacing:-.02em;max-width:18ch;margin:14px 0 18px}
.contact .slab .about{max-width:none;margin:0 0 40px}
.contact .slab .cta{align-items:center;justify-content:flex-start;gap:12px}
.slab .btn.bronze,.slab .btn.bronze:hover{background:var(--bronze);border-color:var(--bronze);color:#fff}
.slab .btn.bronze:hover{background:var(--bronze-hi);border-color:var(--bronze-hi)}
:root[data-theme=dark] .slab .btn.bronze:hover{color:#fff}
.slab .giant{right:-14%}
.contact .footnote{margin:20px auto 0;max-width:none;font-size:.75rem;letter-spacing:0;line-height:1.5;color:var(--mute)}

@media(max-width:720px){
  .hero #loc{margin-top:-30vw}
  .headline .h-sub{display:flex;flex-wrap:wrap;gap:2px 16px}
  .headline .h-sub i{display:none}
}
@media(max-width:720px){.headline .h-sub{display:grid;gap:2px}.headline .h-sub>span{display:block}}


/* ---------- premium interaction layer (all of it switches off under .no-motion) ---------- */
.wrap>h2.reveal{transition-delay:.08s}.wrap>.lede.reveal{transition-delay:.16s}
/* numbered headings: the mono label fades in over .6s, then each line rises from its mask, 1.1s, 80ms apart (main.js splits them) */
@media (prefers-reduced-motion:no-preference){
  :root:not(.no-motion) h2.is-split{opacity:1;transform:none}
  :root:not(.no-motion) h2.is-split .h-line-mask{padding-bottom:.1em;margin-bottom:-.1em}
  :root:not(.no-motion) h2.is-split .h-line{transform:translateY(100%);transition:transform 1.1s cubic-bezier(.19,1,.22,1);transition-delay:calc(.6s + var(--i,0) * 80ms)}
  :root:not(.no-motion) h2.is-split.in .h-line{transform:none}
  :root:not(.no-motion) .wrap>.mono.reveal{transition:opacity .6s cubic-bezier(.23,1,.32,1),transform .8s cubic-bezier(.2,.7,.2,1),color .5s ease}
}

/* floating section index */
.fnav{position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:15;display:none;flex-direction:column;gap:10px}
@media(min-width:1280px){.fnav{display:flex}}
.fnav a{position:relative;display:block;text-decoration:none;font:500 .7rem var(--mono);letter-spacing:.06em;color:var(--mute);padding:3px 4px}
.fnav b{display:block;font-weight:500;opacity:.5;transform-origin:0 50%;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s}
.fnav span{position:absolute;left:100%;top:50%;margin-left:22px;padding:2px 9px;background:var(--bg);border:1px solid var(--rule);border-radius:999px;transform:translate(-6px,-50%);opacity:0;white-space:nowrap;text-transform:uppercase;pointer-events:none;transition:opacity .3s,transform .4s}
.fnav a:hover b,.fnav a:focus-visible b{opacity:1}
.fnav a:hover span,.fnav a:focus-visible span{opacity:1;transform:translate(0,-50%)}
.fnav a.on b{opacity:1;color:var(--ink);transform:scale(1.55);text-shadow:0 0 12px color-mix(in srgb,var(--acc) 65%,transparent)}
.fnav a.on{color:var(--ink)}
.no-motion .fnav a.on b{transform:none;text-shadow:none;font-weight:600}

/* custom cursor */
.cur-dot,.cur-ring{display:none;position:fixed;left:0;top:0;pointer-events:none;z-index:200;opacity:0;transition:opacity .25s}
.cursor-on .cur-dot,.cursor-on .cur-ring{display:block}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--acc)}
.cur-ring{width:34px;height:34px;margin:-17px 0 0 -17px}
.cur-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--acc);transform:scale(.7);opacity:.55;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s,background-color .3s,box-shadow .3s}
.cur-dot.vis,.cur-ring.vis{opacity:1}
.cur-dot.vis.hot{opacity:0}
.cur-ring.hot::before{transform:scale(1.9);opacity:1;border-color:transparent;background:color-mix(in srgb,var(--acc) 14%,transparent);box-shadow:0 0 26px color-mix(in srgb,var(--acc) 38%,transparent)}
.cur-ring.press::before{transform:scale(.55)}.cur-ring.hot.press::before{transform:scale(1.5)}
.cur-dot.off,.cur-ring.off{opacity:0!important}
.cursor-on,.cursor-on *{cursor:none!important}
.cursor-on dialog[open],.cursor-on dialog[open] *{cursor:auto!important}
.cursor-on dialog[open] :is(button,li[data-i]){cursor:pointer!important}

/* magnetic links: the individual `translate` property keeps their own transforms intact */
.btn,.mark,.qr{translate:var(--mx,0) var(--my,0);transition-property:translate,background-color,color,border-color;transition-duration:.3s;transition-timing-function:cubic-bezier(.2,.8,.2,1)}
.mark{display:inline-block}
.no-motion .btn,.no-motion .mark,.no-motion .qr{translate:none}

/* capability chips: evidence panel slides open under the group */
.skill-body{min-width:0}.skill-ev{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1),margin-top .5s cubic-bezier(.2,.8,.2,1)}
.skill-ev.open{grid-template-rows:1fr;margin-top:16px}
.ev-clip{overflow:hidden;min-height:0}
.ev-body{border-left:2px solid var(--acc);padding:2px 0 2px 18px;display:grid;gap:14px;max-width:72ch;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.ev-body.on{opacity:1;transform:none}
.ev-body ul{list-style:none;padding:0;display:grid;gap:14px}
.ev-body li{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 80ms + 60ms)}
.ev-body.on li{opacity:1;transform:none}
.ev-body li small{display:block;font:500 .66rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.ev-body p{font-size:.92rem;line-height:1.55}
.ev-kicker{margin:0}
.ev-none{color:var(--mute)}
.ev-link{background:none;border:0;padding:0;margin-top:6px;font:500 .76rem var(--mono);letter-spacing:.04em;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-align:left}
.ev-link:hover{color:var(--acc)}
.no-motion .skill-ev,.no-motion .ev-body,.no-motion .ev-body li{transition:none!important}
@media print{.fnav,.cur-dot,.cur-ring{display:none!important}.skill-ev{display:none}}


/* ---------- round 2 ---------- */
/* hero: name rises letter by letter, then the rest settles in */
.ch{display:inline-block;opacity:0;transform:translateY(.45em);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * 60ms + 150ms)}
.hero-in .ch{opacity:1;transform:none}
.hero>:is(#loc,.headline,.about,.cta,.scrollcue){opacity:0;transform:translateY(16px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.hero>.headline{transition-delay:.7s}.hero>.about{transition-delay:.85s}.hero>.cta{transition-delay:1s}.hero>.scrollcue{transition-delay:1.2s}.hero>#loc{transition-delay:.1s}
.hero-in>:is(#loc,.headline,.about,.cta,.scrollcue){opacity:1;transform:none}
.no-motion .ch,.no-motion .hero>:is(#loc,.headline,.about,.cta,.scrollcue){opacity:1;transform:none;transition:none!important}
.no-motion *::after{transition:none!important;animation:none!important}

/* ledger focus */
.ledger-focus .role.in:not(.is-focus):not(.dim){opacity:.5}

/* proof: a rule draws under each figure once it has counted */
.proof b{position:relative;padding-bottom:14px;margin-bottom:12px}
.proof b::after{content:"";position:absolute;left:0;bottom:0;width:48px;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s cubic-bezier(.2,.8,.2,1) 1.1s}
.proof li.in b::after{transform:none}
.no-motion .proof b::after{transform:none}

/* lens note */
.lens-note{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.lens-note.on{opacity:1;transform:none}

/* cursor: label, and a difference blend so it reads on light and dark surfaces */
.cur-dot,.cur-ring{mix-blend-mode:difference}
.cur-dot{background:#fff}
.cur-ring::before{border-color:#fff}
.cur-ring.hot::before{background:rgba(255,255,255,.2);box-shadow:0 0 26px rgba(255,255,255,.25)}
.cur-ring.hot.tagged::before{transform:scale(2.5)}
.cur-tag{position:absolute;inset:0;display:grid;place-items:center;font:500 .56rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .25s}
.cur-ring.hot .cur-tag{opacity:1}

/* floating index: ping on arrival, eyebrow lights up */
.fnav a::after{content:"";position:absolute;left:2px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;border:1px solid var(--acc);opacity:0;pointer-events:none}
.fnav a.ping::after{animation:ping .9s ease-out}
@keyframes ping{from{opacity:.8;transform:scale(.4)}to{opacity:0;transform:scale(2.1)}}
.wrap>.mono.reveal{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),color .5s ease}
.wrap>.mono.lit{color:var(--ink)}

/* case photos: parallax inside the frame (translate/scale are separate from the filter and hover zoom) */
.case-pic img{--sc:1.14;scale:var(--sc);translate:0 calc((var(--pp,.5) - .5) * -8%);transition:scale 1.2s}
.case:hover .case-pic img{--sc:1.2;transform:none}
.no-motion .case-pic img{translate:none;scale:1}.no-motion .case:hover .case-pic img{scale:1}

/* PCI logo: card header and proof figure, on a light plate in dark mode */
.case-logo{display:block;height:64px;width:auto;justify-self:start}
:root[data-theme=dark] .plate{background:var(--plate);border-radius:10px;padding:6px 12px}
.marquee .brand[data-slug=pci]{--h:78px}
@media print{.ch,.hero>*{opacity:1!important;transform:none!important}.lens-note{opacity:1}}


/* results: figures grouped under their employer logo (Regus | Tadawul | Cheil) */
.proof{grid-template-columns:2fr 1fr 2fr;gap:0 clamp(20px,3.5vw,56px);border-top:0;border-bottom:1px solid var(--rule)}
.proof .pgroup{padding:0;border:0}
.pg-items{list-style:none;padding:0;display:grid;grid-template-columns:repeat(var(--n,1),minmax(0,1fr));gap:0 24px}
.proof .pg-items>li{padding:24px 0 30px;border:0}
/* PCI badge sits above the "st" of 1st */
.sfx{position:relative;font-style:normal}
.pci-badge{position:absolute;left:50%;top:.02em;height:.4em;width:auto;translate:-50% 0;opacity:0;scale:.3;transition:opacity .5s ease .5s,scale .9s cubic-bezier(.3,1.5,.4,1) .5s}
.pci-badge.plate{padding:0}
:root[data-theme=dark] .pci-badge.plate{padding:2px;border-radius:50%}
.pci-fig.in .pci-badge{opacity:1;scale:1}
.no-motion .pci-badge{opacity:1;scale:1}
@media print{.pci-badge{opacity:1!important;scale:1!important}}
@media(max-width:900px){.proof{grid-template-columns:1fr}}
.pg-items b{font-size:clamp(2.6rem,5.2vw,4.4rem)}
.pci-badge{top:-.08em;height:.44em}
@media(max-width:720px){.pg-items b{font-size:clamp(2.4rem,12vw,3.4rem)}}

/* figures sit on plain paper, each group under its own hairline */
.proof .pgroup{position:relative;border-top:1px solid var(--rule)}
.proof .pg-items>li{padding:44px 0 48px}
.pci-badge,.case-logo{background:none;padding:0;border-radius:0}

/* one even five-column grid under a single continuous hairline; the lede sits above it */
.proof{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 clamp(16px,2.4vw,32px);border-top:1px solid var(--rule);margin-top:clamp(28px,3.5vw,44px)}
.proof .pgroup,.proof .pg-items{display:contents}
.proof .pgroup{border-top:0}
.pg-items b{font-size:clamp(2.4rem,4.4vw,3.8rem)}
@media(max-width:900px){
  .proof{grid-template-columns:repeat(2,minmax(0,1fr));border-top:0}
  .proof .pg-items>li{padding:28px 0 32px;border-top:1px solid var(--rule)}
}
@media(max-width:720px){.pg-items b{font-size:clamp(2.4rem,12vw,3.4rem)}}

/* PCI: a small monochrome mark beside the caption, so "1st" lines up with the other figures */
.pci-cap{display:flex!important;gap:10px;align-items:flex-start}
.pci-badge{position:static;translate:none;display:block;flex:none;height:26px;width:auto;margin:1px 0 0;filter:grayscale(1) brightness(.6)}
:root[data-theme=dark] .pci-badge{filter:grayscale(1) invert(1)}


/* ---------- phone experience ---------- */
/* section index: right-edge dots below the desktop breakpoint, label flashes on arrival */
@media(max-width:1279px){
  .fnav{display:flex;left:auto;right:3px;gap:6px}
  .fnav a{padding:7px 8px}
  .fnav b{font-size:0;width:0;height:0;overflow:hidden}
  .fnav a::before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:var(--mute);opacity:.45;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s,background-color .3s}
  .fnav a.on::before{transform:scale(1.9);opacity:1;background:var(--ink);box-shadow:0 0 10px color-mix(in srgb,var(--acc) 60%,transparent)}
  .fnav a::after{left:auto;right:5px;width:20px;height:20px;margin-top:-10px;margin-right:-7px}
  .fnav span{left:auto;right:100%;margin:0 6px 0 0;transform:translate(6px,-50%)}
  .fnav a.flash span{opacity:1;transform:translate(0,-50%)}
  .no-motion .fnav a.on::before{transform:none}
}
@media(min-width:1280px){.fnav a::before{display:none}}

/* touch: ripple + press scale */
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.28;transform:scale(0);pointer-events:none;animation:ripple .65s ease-out forwards}
@keyframes ripple{to{transform:scale(1);opacity:0}}
.no-motion .ripple{display:none}
@media(hover:none){
  .btn,.chip{position:relative;overflow:hidden}
  .dock .chip{position:static}
  .btn:active,.chip:active{transform:scale(.95)}
}
.btn,.mark,.qr{transition-property:translate,transform,background-color,color,border-color}
.no-motion .btn:active,.no-motion .chip:active{transform:none}

/* scroll motion that also runs on phones */
.no-motion .role .when>span{transform:none!important}
@media print{.role .when>span{transform:none!important}.scope.clamp{display:block;-webkit-line-clamp:unset;line-clamp:none}}
.proof .pgroup:nth-child(2) .reveal{transition-delay:.12s}.proof .pgroup:nth-child(3) .reveal{transition-delay:.24s}
@media(max-width:900px){
  .role.reveal{transform:translate3d(0,30px,0) scale(.98)}
  .role.reveal.in{transform:none}
  .no-motion .role.reveal{transform:none}
}
@media(max-width:720px){.hero>h1,.hero>#loc{transform:translate3d(0,calc(var(--hp,0) * -3vh),0)}}

/* programmes: swipe carousel on phones */
.cases-dots{display:none}
@media(max-width:720px){
  .cases{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:8px -20px 0;padding:0 20px 6px;scroll-padding-inline:20px;scrollbar-width:none;overscroll-behavior-x:contain}
  .cases::-webkit-scrollbar{display:none}
  .cases .case,.cases .case.has-pic{flex:0 0 86%;scroll-snap-align:center;min-width:0}
  .cases-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
  .cases-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--rule);transition:transform .3s,background-color .3s}
  .cases-dots button.on{background:var(--ink);transform:scale(1.5)}
}
@media print{.cases{display:grid;overflow:visible}.cases-dots{display:none}}


/* employer shown once: later roles at the same employer carry only their location */
.org-cont{margin:2px 0 8px}

/* logo band in dark mode: inset shadow gives it banks, and slow sheens drift across like water */
:root[data-theme=dark] .marquee{position:relative;box-shadow:inset 0 16px 24px -12px rgba(0,0,0,.5),inset 0 -16px 24px -12px rgba(0,0,0,.45),inset 0 2px 3px rgba(0,0,0,.28),inset 28px 0 28px -22px rgba(0,0,0,.22),inset -28px 0 28px -22px rgba(0,0,0,.22)}
:root[data-theme=dark] .marquee::before,:root[data-theme=dark] .marquee::after{content:"";position:absolute;top:0;bottom:0;left:0;pointer-events:none;z-index:0;will-change:transform}
:root[data-theme=dark] .marquee::before{width:42%;background:linear-gradient(100deg,transparent,rgba(40,90,110,.13) 50%,transparent);animation:river 12s linear infinite}
:root[data-theme=dark] .marquee::after{width:30%;background:linear-gradient(100deg,transparent,rgba(0,0,0,.09) 50%,transparent);animation:river 19s linear infinite -7s}
@keyframes river{from{transform:translateX(-110%)}to{transform:translateX(340%)}}

/* logo band: shadow from the top inner edge only, tighter */
:root[data-theme=dark] .marquee{box-shadow:inset 0 7px 7px -5px rgba(0,0,0,.45)}
/* hero: name, two-line lead and contact links */
:root{--moss:#1d5948;--bronze:#6b4a2b;--bronze-hi:#58391f}   /* bronze: the Email buttons */
.tools{margin-left:auto}
#timeline .lenses{flex-wrap:wrap;overflow:visible;margin:-12px 0 10px}
.fnav,.dock{transition:opacity .4s ease,visibility .4s}
.at-top .fnav,.at-top .dock{opacity:0;visibility:hidden}
.hero .about{font:400 1.25rem/1.45 var(--sans);color:var(--ink);max-width:min(36ch,46vw);margin:22px 0 30px}
.hero .cta{align-items:center;gap:12px 28px}
.hero .btn.solid,:root[data-theme=dark] .hero .btn.solid{background:var(--bronze);border-color:var(--bronze);color:#fff}
.hero .btn.solid:hover,:root[data-theme=dark] .hero .btn.solid:hover{background:var(--bronze-hi);border-color:var(--bronze-hi);color:#fff}
.tlink{background:none;border:0;padding:4px 0;font:500 .9rem var(--sans);color:var(--ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:4px;transition:text-decoration-color .2s}
.tlink:hover{text-decoration-color:currentColor}
@media(max-width:720px){.hero .about{max-width:none}}

/* career ledger + programmes: small labels in wide-tracked grotesque capitals, darker brown; body copy 16px+ at 7:1 or better.
   Numbered section labels (.wrap>.mono) keep the mono voice. */
:root{--label:#5a4a44}
:root[data-theme=dark]{--label:#d6cfc4}
#timeline .role .when,#timeline .org,#timeline .org small,#railOrg,#timeline summary,#timeline .star dt,#timeline .role-photo figcaption,.case dt,.case header>.mono,.flag-facts dt,.voice .note{font:500 .75rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
#timeline .org{font-weight:600;color:var(--ink)}
#timeline .org small{font-weight:500;margin-left:6px}
#timeline .org-cont small{margin-left:0}
#timeline .top-claims li,#timeline .more li,#timeline .star,.case dd{font-size:1rem}
#timeline .lens-note,#timeline .scope{font-size:1rem;color:var(--label)}

/* logo strip: every logo a flat silhouette in one warm grey at one opacity, at one visual size (main.js), in a grid ruled by
   horizontal hairlines only; moss on hover. Dark mode keeps its inset bank shadow and drifting sheens; logos sit above them. */
.marquee{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;padding:0;margin-top:28px;border-top:1px solid var(--rule)}
.marquee .brand{position:relative;z-index:1;min-width:0;height:128px;padding:0 18px;border:0;border-bottom:1px solid var(--rule)}
.marquee .brand>span{color:var(--mute);opacity:.9;transition:color .2s ease,opacity .2s ease}
.marquee .brand:hover>span{color:var(--moss);opacity:1}
.marquee .brand img{height:40px;max-width:100%;filter:grayscale(1)}
.marquee .brand .sil{position:relative;display:block;height:calc(var(--oh) * 1px);aspect-ratio:var(--ar);min-width:0;max-width:100%;background:currentColor;-webkit-mask:var(--sil) center/contain no-repeat;mask:var(--sil) center/contain no-repeat}
.marquee .brand .sil img{position:absolute;inset:0;width:100%;height:100%;max-width:none;opacity:0}
:root[data-theme=dark] .marquee{background:none;padding:0;margin-top:28px}
:root[data-theme=dark] .marquee .brand>span{color:var(--mute);opacity:.9}   /* the same warm grey, lifted by the dark theme's --mute */
:root[data-theme=dark] .marquee .brand:hover>span{color:#8fc2ad;opacity:1}
@media(max-width:900px){.marquee{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){
  .marquee,:root[data-theme=dark] .marquee{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}
  .marquee .brand{height:92px;padding:0 10px}
  .marquee .brand .sil{height:calc(var(--oh) * .9px)}
}
@media(prefers-reduced-motion:reduce){.marquee .brand>span{transition:none}}

/* opening, museum-style pairing: the name in display-cut Fraunces at regular weight, everything under it in plain upright grotesque.
   The role line drops to a quiet 400 so only the serif carries display weight. */
.hero h1{font-weight:400;font-variation-settings:"opsz" 144;letter-spacing:-.03em}
.headline .h-role{font:400 clamp(1.35rem,2.6vw,1.9rem)/1.2 var(--sans);letter-spacing:-.005em;color:var(--ink)}
.headline .h-sub{font:400 clamp(.95rem,1.5vw,1.05rem)/1.45 var(--sans);color:var(--label)}
.hero .about{font-weight:400;letter-spacing:0}

/* career timeline chart (career ledger header): who held the career, when. Hairline axis, one bar per employer, concurrent work
   stacked on lanes, current holders in moss. Bars draw in left to right as the chart scrolls into view. */
/* pinned under the top bar for the whole ledger, like the rail; the rail and the mobile year flip sit below it (--prov-h set in main.js) */
.prov{position:sticky;top:50px;z-index:5;margin-top:-8px;margin-bottom:36px;padding:14px 0 6px;background:var(--bg);box-shadow:0 10px 14px -12px color-mix(in srgb,var(--ink) 30%,transparent)}
#timeline .rail{top:calc(50px + var(--prov-h,0px) + 24px)}
.prov-cap{display:flex;align-items:baseline;gap:12px;min-height:1.5em;font:400 .95rem/1.5 var(--sans);color:var(--ink)}
.prov-k{font:500 .75rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.prov-bars{position:relative;list-style:none;padding:0;margin:12px 0 0;height:calc(var(--lanes,1) * 14px);border-bottom:1px solid var(--ink)}
.prov-bars li{position:absolute;left:var(--a);width:var(--w);bottom:calc(var(--l) * 14px + 3px);height:14px}
.prov-bars button{display:block;width:100%;height:100%;min-width:6px;padding:0;border:0;background:none;position:relative;color:transparent;font-size:0;overflow:hidden;white-space:nowrap}
.prov-bars button::before{content:"";position:absolute;left:0;right:1px;bottom:4px;height:5px;background:var(--label);opacity:.7;transform-origin:0 50%;transition:opacity .2s ease,background-color .2s ease}
.prov-bars button.now::before{background:var(--moss);opacity:1}
.prov-bars button:hover::before,.prov-bars button.on::before{background:var(--ink);opacity:1}
.prov-bars button.now:hover::before,.prov-bars button.now.on::before{background:var(--moss)}
.prov-bars button:focus-visible{outline:2px solid var(--moss);outline-offset:1px}
.prov-axis{position:relative;height:1.6em;margin-top:6px;font:500 .75rem/1.5 var(--sans);letter-spacing:.08em;color:var(--label)}
.prov-axis span{position:absolute;left:var(--a)}
.prov-axis .end{left:auto;right:0}
:root[data-theme=dark] .prov-bars button.now::before{background:#8fc2ad}
@media(max-width:720px){.prov{margin-bottom:28px}}
@media(max-width:900px){#timeline .rail-dates{top:calc(50px + var(--prov-h,0px) + 12px)}}
/* bars grow left to right from the first year to Now, scrubbed to the scroll (--g set in main.js only when motion is on) */
.prov-bars button::before{transform:scaleX(var(--g,1))}
.no-motion .prov-bars button::before{transform:none;transition:none!important}
@media print{.prov-bars button::before{transform:none!important}}
/* ledger opening: the outlined 30 takes its own right-hand column beside the heading and ends above the Provenance row;
   its scroll drift only rises, so it never crosses the chart. The chart sits straight on the page with just its baseline. */
.prov{box-shadow:none}
/* contact: small labels in a wide-tracked sans, set against the tall serif closing line */
.contact .slab>.mono,.contact .slab .about{font:500 .78rem/1.6 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--mute)}
.contact .slab>.mono{display:flex;align-items:center;gap:16px}
.contact .slab>.mono::after{content:"";width:48px;height:1px;background:currentColor;opacity:.5}
.contact .slab .about{color:var(--ink);margin-bottom:44px}
.contact .slab .btn{font:600 .78rem/1.2 var(--sans);letter-spacing:.24em;text-transform:uppercase;padding:16px 26px}
.contact .slab .btn .ico{margin-right:.9em}

/* contact signature: the outline draws itself once as the panel enters (main.js adds .in), then the ink fills in; 1.8s ease-out.
   Under reduced motion, Pause motion or print it is shown fully drawn. Cream to match the panel's text. */
.contact .sign-row{display:flex;flex-direction:column;align-items:flex-start;position:relative;z-index:1}   /* signature always under the closing line, clear of the QR card */
.contact .sign-row h2{margin-bottom:18px}
.sig{display:block;width:clamp(210px,26vw,340px);height:auto;margin:0 0 22px;color:var(--ink);overflow:visible}
.sig path{fill:currentColor;fill-opacity:1;stroke:currentColor;stroke-width:1.1px;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
@media(prefers-reduced-motion:no-preference){
  :root:not(.no-motion) .sig path{fill-opacity:0;stroke-dashoffset:1}
  :root:not(.no-motion) .sig.in path{fill-opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.8s cubic-bezier(.19,1,.22,1),fill-opacity .5s ease 1.3s}
}
@media(max-width:720px){.sig{width:min(260px,72%);margin:-4px 0 26px}}
@media print{.sig path{fill-opacity:1!important;stroke-dashoffset:0!important}}

/* hero contact links: the contact panel's Gmail and LinkedIn icons beside plain text links, no button boxes */
.hero .ilink{display:inline-flex;align-items:center;gap:.55em;font:500 1rem var(--sans);padding:6px 0}
.hero .ilink .ico{width:1.15em;height:1.15em;flex:none}

/* skills as a typeset index: plain grotesque, four to a line divided by thin middots, a moss underline on hover and a small
   count of the claims behind each. Group labels in the wide-tracked sans. */
.skill-group h3{font:500 .75rem/1.6 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--label);padding-top:5px}
/* set as running text: each skill takes its natural width and the line wraps like a paragraph; the middot hangs in the
   22px gutter left of each item, and the clip hides the ones that land at the start of a line */
.skill-list{list-style:none;padding:0;margin-left:-22px;display:flex;flex-wrap:wrap;row-gap:2px;clip-path:inset(-12px -12px -12px 22px)}
.skill-list li{position:relative;padding-left:22px;max-width:100%}
.skill-list li::before{content:"·";position:absolute;left:8px;top:5px;font:300 1.05rem/1.5 var(--sans);color:var(--label)}
.skill{background:none;border:0;padding:5px 0;text-align:left;font:400 1.05rem/1.5 var(--sans);color:var(--ink);transition:color .4s cubic-bezier(.25,1,.5,1)}
.skill>span{text-decoration:underline 1px;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color .4s cubic-bezier(.25,1,.5,1)}
.skill:hover>span,.skill:focus-visible>span{text-decoration-color:var(--moss)}
.skill[aria-expanded=true]{color:var(--moss)}
.skill[aria-expanded=true]>span{text-decoration-color:var(--moss);text-decoration-thickness:2px}
.skill-n{margin-left:4px;font:500 .75rem/1 var(--sans);letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--label);vertical-align:super}
:root[data-theme=dark] .skill:hover>span,:root[data-theme=dark] .skill:focus-visible>span,:root[data-theme=dark] .skill[aria-expanded=true]>span{text-decoration-color:#8fc2ad}
:root[data-theme=dark] .skill[aria-expanded=true]{color:#8fc2ad}
@media(max-width:900px){
  .skill-group h3{padding-top:0}
}
@media(max-width:600px){
  .skill{font-size:1rem}
}
@media(prefers-reduced-motion:reduce){.skill,.skill>span{transition:none}}
.no-motion .skill,.no-motion .skill>span{transition:none!important}

/* owner's adjustments (2026-10-15) */
/* section eyebrows ("01 — Verified results" ...) are hidden on every section; they stay in the markup for numbering and the heading reveal */
.eyebrow{display:none!important}
/* hero lead: two set lines (the break is in index.html) */
@media(min-width:721px){.hero .about{max-width:none;font-size:clamp(1.05rem,1.45vw,1.25rem)}}
/* flagship: label and title start level with the top of the photo; room under the last line so descenders (the g in Program) are not cut by the line mask */
.flag-lead.has-plate .flag-title{align-self:start}
.flag-title .f-line-mask{padding-bottom:.14em;margin-bottom:-.14em}
/* contact: the closing line set on three lines (breaks in index.html), and the QR card in the bottom right corner */
.contact .slab h2{max-width:none}
.contact .slab{position:relative}
.contact .slab>.qr{position:absolute;top:auto;bottom:clamp(28px,5vw,64px);right:clamp(28px,5vw,64px);transform:none;z-index:1}
.contact .slab>.qr img{width:clamp(104px,10vw,132px);height:auto}
@media(max-width:720px){.contact .slab>.qr{position:static;display:block;width:max-content;margin:32px 0 0 auto}}
/* phone: the hero lead wraps naturally; the contact line keeps its three set lines at a size that fits */
@media(max-width:720px){.hero .about br{display:none}.contact .slab h2{font-size:6.4vw}}
@media(max-width:720px){
  .hero{padding-top:72px}
  .hero>#loc{order:1;margin:0 0 4px}
  .hero>h1{order:2;margin:0 0 10px}
  .hero>.headline{order:3}.hero>.about{order:4}.hero>.cta{order:5}.hero>.scrollcue{order:6}   /* name first, then title, lead, links */
}
/* desktop hero (light and dark): the first screen is the hero alone; the next section starts below the fold */
@media(min-width:721px){
  .hero{justify-content:center;height:100svh;min-height:min-content;padding-bottom:60px}
}
/* hero name, part 1 "ink": an SVG copy of each line (built in main.js) traces its outline, the ink fills in, then the real letters
   take over underneath. Part 2 "pressure": main.js sets --w per letter from the cursor (or a slow wave on touch screens). */
.hero h1 .line{position:relative}
.ink-probe{display:inline-block;width:0;height:0;vertical-align:baseline}
.ink-line{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;transition:opacity .6s ease}
.ink-line text{fill:currentColor;fill-opacity:0;stroke:currentColor;stroke-width:1.2px;stroke-linejoin:round;stroke-dasharray:var(--dash);stroke-dashoffset:var(--dash)}
.hero h1.ink-go .ink-line text{stroke-dashoffset:0;fill-opacity:1;transition:stroke-dashoffset 2.2s cubic-bezier(.65,0,.35,1),fill-opacity .8s ease 1.7s}
.hero h1.ink-go .l2 .ink-line text{transition-delay:.3s,2s}
.hero h1.inking .ch{opacity:0!important;transform:none!important;transition:none!important}
.hero h1.inking.inked .ch{opacity:1!important;transition:opacity .6s ease!important}
.hero h1.inked .ink-line{opacity:0}
.hero h1.pressure .ch{font-variation-settings:"opsz" 144,"wght" var(--w,400)}
@media print{.ink-line{display:none}.hero h1 .ch{opacity:1!important}}

/* ---------- operational record console (hero) and the console style shared across the site ---------- */
:root{--panel:#fffdf8;--live:#3d7a5c;--dots:color-mix(in srgb,var(--ink) 13%,transparent)}
:root[data-theme=dark]{--panel:#292929;--live:#7fc4a0}
.chip-ev{display:inline-flex;gap:6px;border:1px solid var(--rule);background:var(--bg);padding:5px 9px;font:500 .66rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.chip-ev b{color:var(--bronze-ink,var(--bronze));font-weight:500}
:root{--bronze-ink:#8a5f36}:root[data-theme=dark]{--bronze-ink:#c49a6c}
/* framed panel with corner ticks */
.console{position:relative;z-index:2;border:1px solid var(--rule);background:var(--panel);box-shadow:0 30px 60px -42px rgba(0,0,0,.35)}
.console::before,.console::after{content:"";position:absolute;width:10px;height:10px;border:1px solid var(--ink);pointer-events:none}
.console::before{top:-5px;left:-5px;border-right:0;border-bottom:0}.console::after{bottom:-5px;right:-5px;border-left:0;border-top:0}
.con-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--rule)}
.con-live{display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.con-live i{width:7px;height:7px;border-radius:50%;background:var(--live);animation:conPulse 2s infinite}
@keyframes conPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 60%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.con-main{position:relative;overflow:hidden;padding:24px 20px 20px;min-height:236px;background-image:radial-gradient(var(--dots) 1px,transparent 1px);background-size:14px 14px;background-position:-7px -7px}
.con-main::after{content:"";position:absolute;left:0;right:0;height:60px;top:-60px;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--bronze-ink) 10%,transparent));animation:conScan 5s linear infinite;pointer-events:none}
@keyframes conScan{to{top:110%}}
.con-idx{display:flex;justify-content:space-between;gap:12px}
.con-val{font:400 clamp(3.6rem,6vw,5.8rem)/1 var(--serif);font-variation-settings:"opsz" 144;letter-spacing:-.03em;margin:16px 0 10px;min-height:1em}
.con-cap{font-size:1rem;line-height:1.45;max-width:34ch;min-height:2.9em}
.con-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.con-prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--bronze-ink)}
.con-swap{transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.con-swap.out{opacity:0;transform:translateY(-8px)}
.con-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule)}
.con-grid>div{padding:12px 14px;border-right:1px solid var(--rule)}.con-grid>div:last-child{border-right:0}
.con-grid b{display:block;font:400 1.6rem/1.2 var(--serif);font-variation-settings:"opsz" 72;margin-top:4px}
.con-foot{display:flex;justify-content:space-between;padding:10px 14px 6px;border-top:1px solid var(--rule)}
.con-ticks{display:flex;gap:2px;align-items:flex-end;height:34px;padding:0 14px 12px}
.con-ticks span{flex:1;height:var(--h);background:color-mix(in srgb,var(--ink) 22%,transparent);transform-origin:bottom;transform:scaleY(0);transition:transform .6s cubic-bezier(.2,.8,.2,1) calc(.6s + var(--i) * 25ms)}
.con-ticks span.now{background:var(--bronze-ink)}
.console.go .con-ticks span{transform:none}
.no-motion .con-main::after,.no-motion .con-live i{animation:none}
.no-motion .con-ticks span{transition:none}
@media(prefers-reduced-motion:reduce){.con-main::after,.con-live i{animation:none}}
/* placement: its own page after the hero, full content width. Wide screens get a landscape layout: the rotating result
   on the left, totals and the employers-over-time chart on the right; narrow screens keep the stacked panel. */
@media(min-width:1000px){.hero>h1{font-size:min(9rem,8.4vw)}}
@media(min-width:861px){
  .record .console{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr}
  .record .con-bar{grid-column:1/-1}
  .record .con-main{grid-column:1;grid-row:2/5;border-right:1px solid var(--rule);padding:32px 32px 30px}
  .record .con-val{font-size:clamp(4.6rem,8vw,8rem);margin:22px 0 14px}
  .record .con-cap{font-size:clamp(1.05rem,1.4vw,1.3rem);max-width:40ch}
  .record .con-grid{grid-column:2;grid-row:2;grid-template-columns:repeat(2,1fr);border-top:0}
  .record .con-grid>div{padding:18px 20px;border-bottom:1px solid var(--rule)}
  .record .con-grid>div:nth-child(2n){border-right:0}
  .record .con-grid b{font-size:2.2rem}
  .record .con-foot{grid-column:2;grid-row:3;border-top:0;padding:16px 20px 8px}
  .record .con-ticks{grid-column:2;grid-row:4;align-self:end;height:calc(var(--lanes,1) * 12px + 8px);margin:6px 20px 24px}
  .record .con-ticks span{bottom:calc(var(--l) * 12px + 4px);height:7px}
}
@media print{.console{box-shadow:none}.con-main::after{display:none}}
/* framed panel: hairline box with ink corner ticks (top-left, bottom-right), drawn as background layers so the element's own
   ::before/::after stay free; a .con-bar on top carries the mono label */
.frame{background:
  linear-gradient(var(--ink),var(--ink)) 0 0/12px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 0/1px 12px no-repeat,
  linear-gradient(var(--ink),var(--ink)) 100% 100%/12px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 100%/1px 12px no-repeat,
  linear-gradient(var(--rule),var(--rule)) 0 0/100% 1px no-repeat,linear-gradient(var(--rule),var(--rule)) 0 100%/100% 1px no-repeat,
  linear-gradient(var(--rule),var(--rule)) 0 0/1px 100% no-repeat,linear-gradient(var(--rule),var(--rule)) 100% 0/1px 100% no-repeat,
  var(--panel)}
.frame>.con-bar{margin:0}
/* results */
.proof-frame{margin-top:clamp(28px,3.5vw,44px)}
.proof-frame .proof{margin:0;border:0;padding:0 20px;background-image:radial-gradient(var(--dots) 1px,transparent 1px);background-size:14px 14px}
.proof-frame .pg-items>li{padding:30px 0 28px}
.proof-frame .pg-items .chip-ev{margin-top:14px;width:max-content;max-width:100%;flex-wrap:wrap}
.proof .pg-items>li{display:flex;flex-direction:column;align-items:flex-start}
@media(max-width:900px){.proof-frame .proof{padding:0 16px}}
/* logo wall */
.brand-frame{margin-top:28px;padding:0}
.brand-frame .marquee,:root[data-theme=dark] .brand-frame .marquee{margin:0;border-top:0}
.brand-frame .marquee .brand:nth-last-child(-n+6){border-bottom:0}
@media(max-width:900px){.brand-frame .marquee .brand:nth-last-child(-n+6){border-bottom:1px solid var(--rule)}.brand-frame .marquee .brand:nth-last-child(-n+3){border-bottom:0}}
/* career timeline chart */
.prov.frame{padding:12px 16px 8px;box-shadow:0 14px 20px -18px color-mix(in srgb,var(--ink) 40%,transparent)}
/* evidence IDs in the ledger, shown as small chips */
.role .id{display:inline-flex;font:500 .6rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bronze-ink);border:1px solid var(--rule);padding:2px 6px;margin-left:8px;vertical-align:2px;white-space:nowrap}
/* flagship: crop marks on the plate, facts strip framed */
.flag-plate .flag-pic{outline:1px solid var(--rule);outline-offset:6px}
.flag-facts{border:0}
.flag .flag-facts{background:
  linear-gradient(var(--ink),var(--ink)) 0 0/12px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 0/1px 12px no-repeat,
  linear-gradient(var(--ink),var(--ink)) 100% 100%/12px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 100%/1px 12px no-repeat,
  linear-gradient(var(--rule),var(--rule)) 0 0/100% 1px no-repeat,linear-gradient(var(--rule),var(--rule)) 0 100%/100% 1px no-repeat,
  linear-gradient(var(--rule),var(--rule)) 0 0/1px 100% no-repeat,linear-gradient(var(--rule),var(--rule)) 100% 0/1px 100% no-repeat,var(--panel)}
.flag .flag-facts>div:first-child{padding-left:16px}
/* quotes: square panels with a label bar */
.voice{border:0;border-radius:0;padding:0 24px 24px;background:
  linear-gradient(var(--ink),var(--ink)) 0 0/12px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 0/1px 12px no-repeat,
  linear-gradient(var(--ink),var(--ink)) 100% 100%/12px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 100%/1px 12px no-repeat,
  linear-gradient(var(--rule),var(--rule)) 0 0/100% 1px no-repeat,linear-gradient(var(--rule),var(--rule)) 0 100%/100% 1px no-repeat,
  linear-gradient(var(--rule),var(--rule)) 0 0/1px 100% no-repeat,linear-gradient(var(--rule),var(--rule)) 100% 0/1px 100% no-repeat,var(--panel)}
.voice>.con-bar{margin:0 -24px}
.voice figcaption img{border-radius:0;filter:grayscale(.2)}
@media(max-width:720px){.voice{padding:0 18px 20px}.voice>.con-bar{margin:0 -18px}}
/* skills and credentials */
.skills-frame{margin-top:8px}
.skills-frame #skillGrid{padding:0 20px}
.skills-frame .skill-group:first-child{border-top:0}
.skill-ev .ev-body{background-image:radial-gradient(var(--dots) 1px,transparent 1px);background-size:14px 14px;padding:14px 16px 14px 18px}
.creds-frame{margin-top:28px}
.creds-frame .cred-grid{margin:0;padding:22px 20px 24px;border-top:0}
@media(max-width:720px){.skills-frame #skillGrid{padding:0 14px}.creds-frame .cred-grid{padding:18px 14px 20px}}
/* contact: the same label bar across the top of the dark panel */
.slab-bar{margin:calc(-1 * clamp(40px,7vw,96px)) calc(-1 * clamp(28px,5vw,64px)) clamp(28px,4vw,48px);padding:14px clamp(28px,5vw,64px);position:relative;z-index:1}
.contact .slab{border-radius:0}
.proof .pg-items .chip-ev b{font:500 .66rem/1.3 var(--mono);letter-spacing:.08em;margin:0;display:inline}
.proof .pg-items .chip-ev{white-space:nowrap}

/* ===================== one type and style system (console language), applied last so it wins =====================
   Display: Fraunces 400 (headings, names, figures). Body: Inter Tight 400, strong 600.
   Label: IBM Plex Mono 500, .72rem, uppercase, .08em tracking, muted (every small label, tag, button, chip and axis).
   Shapes: square corners and 1px hairlines. Accent: bronze only; green is kept for the live status dot alone. */
:root{--label-font:500 .72rem/1.45 var(--mono);--label-track:.08em;--acc:var(--bronze-ink);--moss:var(--bronze-ink)}
:root[data-theme=dark]{--acc:var(--bronze-ink);--moss:var(--bronze-ink)}
.slab{--acc:#c49a6c}

/* labels */
.mono,kbd,.chip-ev,.role .id,.prov-k,.prov-axis,.prov-axis span,#timeline .role .when,#timeline .org small,#timeline summary,#timeline .star dt,
.flag-title>.mono,.flag-facts dt,.case dt,.case header>.mono,.flag-plate figcaption,.skill-group h3,.cred-grid h3,.voice .note,
.voice figcaption small,.lens-note,.contact .slab>.mono,.ev-kicker,.ev-body small,.footnote,.marquee .wm small,.rail-dates~*,#railOrg{
  font:var(--label-font);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--mute)}
#timeline .org,.voice figcaption b,.flag-plate figcaption span:first-child{font:var(--label-font);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--ink)}
.lens-note{text-transform:none;letter-spacing:0;font:400 .95rem/1.5 var(--sans)}
.footnote{text-transform:none;letter-spacing:.02em}

/* controls: chips, lenses, search, theme, pause, buttons, links all speak the label voice, square */
.chip,.btn,.contact .slab .btn,.dock .chip,#themeBtn,.ev-link,.skill-n,.tlink{border-radius:0}
.chip,.dock .chip,.btn,.contact .slab .btn,.ev-link{font:var(--label-font);letter-spacing:var(--label-track);text-transform:uppercase}
.chip{padding:7px 12px}
.btn,.contact .slab .btn{padding:14px 22px}
.hero .ilink{font:var(--label-font);letter-spacing:var(--label-track);text-transform:uppercase}
.skill-n{font:500 .62rem var(--mono);letter-spacing:.04em}
kbd{border-radius:0}

/* display */
h2,.voice blockquote .pull,.role h3,.case h3,.star h4,.flag h3,.contact .slab h2{font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 144}
h2{letter-spacing:-.015em}
.flag h3{letter-spacing:-.03em}
.role h3,.case h3{font-size:1.65rem;letter-spacing:-.01em}
.star h4{font-size:1.1rem}
.pg-items b,.con-grid b,.con-val,.rail-dates,.odo,.odo i,.odo-now,.odo-arrow,.flag-facts dd{font-weight:400}
.flag-facts dd{font:400 1.15rem/1.3 var(--serif);font-variation-settings:"opsz" 72}
.voice blockquote{font:400 1.05rem/1.6 var(--sans)}
.voice blockquote .pull{font-size:clamp(1.3rem,2vw,1.55rem);line-height:1.3}
.out,.flag-body .out{font:400 1.1rem/1.55 var(--sans)}

/* body */
b,strong,.top-claims b,.more b{font-weight:600}
.cred-grid ul{font:400 .95rem/1.55 var(--sans)}

/* shapes: sections stack with square edges and a hairline instead of rounded tops */
.scene{border-radius:0;margin-top:0;box-shadow:none;border-top:1px solid var(--rule)}
.hero{border-top:0}
:root[data-theme=dark] .scene{box-shadow:none}
@media(max-width:720px){.scene{border-radius:0;margin-top:0}}
.slab,.contact .slab,.case,.cases .case,.gallery figure,.case-pic,.skill-ev,.ev-body{border-radius:0}

/* accent: bronze for every highlight */
.marquee .brand:hover>span,:root[data-theme=dark] .marquee .brand:hover>span{color:var(--bronze-ink)}
.prov-bars button.now::before,:root[data-theme=dark] .prov-bars button.now::before,.prov-bars button.now:hover::before,.prov-bars button.now.on::before{background:var(--bronze-ink)}
.skill:hover>span,.skill:focus-visible>span,:root[data-theme=dark] .skill:hover>span,:root[data-theme=dark] .skill:focus-visible>span,
.skill[aria-expanded=true]>span,:root[data-theme=dark] .skill[aria-expanded=true]>span{text-decoration-color:var(--bronze-ink)}
.skill[aria-expanded=true],:root[data-theme=dark] .skill[aria-expanded=true]{color:var(--bronze-ink)}
.ev-body{border-left-color:var(--bronze-ink)}
.pg-items b::after,.proof .pg-items>li::after{background:var(--bronze-ink)}
.chip-ev b,.proof .pg-items .chip-ev b{font:inherit;letter-spacing:inherit;text-transform:inherit}
/* mid-size display text uses the font's automatic optical size (the poster cut stays on the hero name only) */
h2,.voice blockquote .pull,.role h3,.case h3,.star h4,.flag h3,.contact .slab h2,.flag-facts dd,.con-grid b{font-variation-settings:normal;font-optical-sizing:auto}
/* console chart: one bar per employer on a 1997 → now axis, concurrent work on its own lane, current employers in bronze */
.con-ticks{position:relative;display:block;height:calc(var(--lanes,1) * 7px + 6px);margin:2px 14px 14px;padding:0;border-bottom:1px solid var(--ink)}
.con-ticks span{position:absolute;left:var(--a);width:var(--w);bottom:calc(var(--l) * 7px + 3px);height:4px;flex:none;background:color-mix(in srgb,var(--ink) 45%,transparent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.2,.8,.2,1) calc(.6s + var(--i) * 60ms)}
.con-ticks span.now{background:var(--bronze-ink)}
.console.go .con-ticks span{transform:none}
.no-motion .con-ticks span{transform:none;transition:none}
/* career ledger: a claim's evidence ID shows when you point at the claim (or focus it), and all show once "more claims" is open */
/* the chip sits in the free space to the right of the claim, so showing it never moves the text */
.role .top-claims li{position:relative}
.role .top-claims .id{position:absolute;left:calc(100% + 14px);top:2px;margin:0;opacity:0;transition:opacity .25s ease;pointer-events:none}
.role .top-claims li:hover .id,.role .top-claims li:focus-within .id{opacity:1}
@media(max-width:1180px),(hover:none){.role .top-claims .id{display:none}}   /* no room beside the text, or touch: IDs appear under "more claims" */
/* career section: the lens tabs live in the pinned timeline panel; the panel has no shadow; even spacing above and below it */
#timeline .wrap>h2{margin-bottom:32px}
.prov.frame{box-shadow:none;margin-top:0;margin-bottom:40px}
.prov-lenses{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--rule)}
#timeline .prov-lenses .lenses{margin:0;flex-wrap:wrap;gap:6px}
.prov-lenses .lens-note{margin:0;min-height:0;flex:1 1 240px;font-size:.9rem}
.prov-lenses .lens-note:empty{display:none}
@media(max-width:720px){
  #timeline .prov-lenses .lenses{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%}
  .prov-lenses .lens-note{flex-basis:100%;font-size:.85rem}
}
/* results: the employer · role chip wraps inside its column */
.proof .pg-items .chip-ev{white-space:normal;max-width:100%;width:auto;line-height:1.5}
/* phone: tabs keep their full labels in a sideways-scrolling row; the pinned panel stays compact */
@media(max-width:720px){
  #timeline .prov-lenses .lenses .chip{flex:none}
  .prov-lenses .lens-note,.prov-cap .prov-k{display:none}
  .prov-lenses{padding-bottom:10px;margin-bottom:8px}
}

/* career section, pinned panel: sits a little below the top bar and keeps one shape in every tab
   (tabs on one row, the lens line on its own single line below) */
.prov.frame{top:74px}
#timeline .rail{top:calc(74px + var(--prov-h,0px) + 24px)}
@media(max-width:900px){#timeline .rail-dates{top:calc(74px + var(--prov-h,0px) + 12px)}}
.prov-lenses{flex-wrap:wrap}
#timeline .prov-lenses .lenses{flex-wrap:nowrap}
.prov-lenses .lens-note{flex:1 0 100%;opacity:1;transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.9rem;color:var(--mute)}
/* claims: the same rule in every tab: 3 visible, "+ N more claims" opens the rest; case stories open separately */
.claims{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.claims li{padding-left:16px;border-left:2px solid var(--rule);max-width:70ch}
.claims li b{font-weight:600}
.claims li.extra{display:none}
.role.expanded .claims li.extra:not([hidden]){display:block}
.role.expanded .scope.clamp{display:block;-webkit-line-clamp:unset;line-clamp:none}
.more-btn{display:block;background:none;border:0;padding:12px 0 0;cursor:pointer;font:var(--label-font);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--mute);transition:color .2s}
.more-btn:hover,.more-btn:focus-visible{color:var(--bronze-ink)}
.role details.stories{margin-top:10px}
.role.lens-none{opacity:.4;padding:14px 0}
.role.lens-none .claims,.role.lens-none .more-btn,.role.lens-none .stories,.role.lens-none .scope{display:none}
.role.lens-none h3{font-size:1.2rem}
@media print{.claims li.extra,.claims li[hidden]{display:block!important}.more-btn{display:none}}
/* quotes: round portraits; the last card spans the full width when it would sit alone */
.voice figcaption img,.voice figcaption img{border-radius:50%;object-fit:cover;filter:none}
.voices>.voice:last-child:nth-child(odd){grid-column:1/-1}
@media(min-width:721px){
  .voices>.voice:last-child:nth-child(odd){display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:48px;align-items:end}
  .voices>.voice:last-child:nth-child(odd)>.con-bar{grid-column:1/-1;align-self:start}
  .voices>.voice:last-child:nth-child(odd) blockquote{align-self:start}
  .voices>.voice:last-child:nth-child(odd) figcaption{margin-top:0;padding-bottom:4px}
}
/* the 24px gap above the pinned panel is filled with the page colour, so text scrolling underneath never shows through it */
.prov.frame::before{content:"";position:absolute;left:-1px;right:-1px;bottom:100%;height:26px;background:var(--bg);pointer-events:none}
.voices{grid-auto-rows:auto;align-items:stretch}   /* each row sizes to its content; cards side by side still match */
/* hero console: PCI badge beside the "1st" figure (moved from the retired results page) */
.con-badge{display:inline-block;height:.5em;width:auto;margin-left:.22em;vertical-align:.32em;filter:grayscale(1) brightness(.6)}
:root[data-theme=dark] .con-badge{filter:grayscale(1) invert(1)}
/* hero sphere (setupSphere in main.js): right side of the hero on wide screens; under the links on narrow ones */
.hero>.sphere{display:block;order:7;width:min(100%,420px);aspect-ratio:1;margin:24px auto 0;opacity:0;transition:opacity 1.6s ease .9s;pointer-events:none}
.hero.hero-in>.sphere{opacity:1}
@media(max-width:999px){.hero>.scrollcue{order:8}}
@media(min-width:1000px){
  .hero>.sphere{display:block;position:absolute;right:var(--gut);top:50%;margin:0;width:clamp(520px,54vw,860px);aspect-ratio:1;translate:0 -50%;opacity:0;transition:opacity 1.6s ease .9s;pointer-events:none}
  .hero.hero-in>.sphere{opacity:1}
  .hero>.about{max-width:min(46%,40rem)}
}
@media print{.sphere{display:none!important}}
/* results page: heading, then the console with the same gap other pages leave between heading and content */
.record .console{margin-top:clamp(28px,3.5vw,44px)}
/* the panel holds only the lens tabs and note now: no divider under them */
#prov .prov-lenses{padding-bottom:0;margin-bottom:0;border-bottom:0}
/* one continuous page (owner, 2026-10-19): a single background, no divider lines or tonal bands between sections, and the
   hero scrolls away with the content instead of staying pinned while the next section slides over it */
.scene,.scene.sand,:root[data-theme=dark] .scene.sand{background:var(--bg);border-top:0}
.hero{position:relative}
/* hero exit: as the page scrolls, the name splits (Mottasem left, Zoubi right) and the globe eases away with it, shrinking a
   little and fading; --hp is 0 at the top of the page and 1 once the hero has scrolled past (set in main.js) */
.hero.hero-in>.sphere{opacity:calc(1 - var(--hp,0) * .9);transform:scale(calc(1 - var(--hp,0) * .2))}
.hero>.sphere.settled{transition:none}
/* spacing between pages (owner, 2026-10-19): closer, so one page follows the next as the scroll carries them up, but still
   with a clear breath between them; the desktop hero keeps the first screen to itself */
.scene{padding-top:72px;padding-bottom:64px}
#brands{padding-top:72px;padding-bottom:64px}
.hero{padding-bottom:40px}
@media(max-width:720px){.scene,#brands{padding-top:52px;padding-bottom:44px}.hero{padding-bottom:28px}.hero>.sphere{margin-top:16px}}
/* phones: no floating year flip on the right; each employer's years sit under its logo instead */
.role-logo>.role-years{display:block;margin-top:8px;font:400 1.6rem/1.1 var(--serif);color:var(--mute);font-variant-numeric:tabular-nums}
@media(max-width:900px){.rail-dates{display:none}}
/* page titles stay pinned under the top bar while their page scrolls, like the flagship fact card, and leave with the page.
   --bar-h and each section's --head-h are measured in main.js (setupStickyHeads); anything else pinned in a section sits
   below its title. */
.scene>.wrap>h2,#brands>.wrap:first-child,#timeline>.wrap:first-child{position:sticky;top:var(--bar-h,50px);z-index:6;background:var(--bg);padding-top:14px;padding-bottom:14px;margin-top:-14px}
/* the title's background reaches across the whole page width, even when the title text is narrow */
.scene>.wrap>h2,#brands>.wrap:first-child,#timeline>.wrap:first-child{box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax)}
#brands>.wrap:first-child>h2,#timeline>.wrap:first-child>h2{position:static;padding:0;margin-top:revert}
#timeline .prov{top:calc(var(--bar-h,50px) + var(--head-h,0px))}
#timeline .rail{top:calc(var(--bar-h,50px) + var(--head-h,0px) + var(--prov-h,0px) + 24px)}
.flag header,.case-pic{top:calc(var(--bar-h,50px) + var(--head-h,0px) + 24px)}
@media(max-width:900px){#timeline .rail-dates{top:calc(var(--bar-h,50px) + var(--head-h,0px) + var(--prov-h,0px) + 12px)}}
/* landscape recommendation: the recommender sits in the middle of the card's height */
@media(min-width:721px){.voices>.voice:last-child:nth-child(odd) figcaption{align-self:center;padding-bottom:0}}
/* a pinned title lasts until the next page's title arrives: the space between pages lives inside the end of each page (not
   above the next one), so the title is pushed out only as the next title slides in under the bar */
.scene:not(.hero),#brands{padding-top:0;padding-bottom:0}
/* the gap is an empty spacer at the end of whatever holds the pinned title (a pinned title cannot use its container's padding) */
.scene:not(.hero){--gap:136px}
.scene:not(.hero)>.wrap:last-child:not(.frame):not(.ledger-grid)::after,#brands::after,#timeline::after{content:"";display:block;height:var(--gap)}
.hero{padding-bottom:112px}
@media(max-width:720px){.scene:not(.hero),#brands{padding-top:0;padding-bottom:0;--gap:96px}.hero{padding-bottom:72px}}
/* the title's own bottom margin would make it leave early; the gap moves to the content right below it */
.scene>.wrap>h2{margin-bottom:0}
.scene>.wrap>h2+*{margin-top:36px}
.record .console{margin-top:36px}
/* bigger globe (owner, 2026-10-19): its box reaches a little past the right margin so the sphere grows without nearing the name */
@media(min-width:1000px){.hero>.sphere{right:max(0px,calc(var(--gut) - 7vw))}}
.hero>.sphere{width:min(100%,520px)}
@media(min-width:1000px){.hero>.sphere{width:clamp(520px,54vw,860px)}}
/* a title's second sentence on its own line, smaller and half-toned */
.h2-sub{display:block;margin-top:.35em;font-size:.5em;line-height:1.3;color:var(--mute)}
/* the page before contact has no title after it to hand over to: its title leaves when its own content ends, so it never
   sits over the contact page */
#skills>.wrap:last-child::after{height:0}
#skills{padding-bottom:var(--gap)}
/* contact: QR code at the bottom centre of the panel; the large M sits a little further right */
@media(min-width:721px){.contact .slab>.qr{left:50%;right:auto;margin-left:calc(clamp(104px,10vw,132px) / -2)}}
@media(max-width:720px){.contact .slab>.qr{margin:32px auto 0}}
.slab .giant{right:-20%}
/* hero sits lower on desktop, so the name split on scroll stays in view longer */
@media(min-width:721px){.hero{padding-top:150px;padding-bottom:40px}}
/* career: content scrolling under the pinned lens panel disappears at the rail line, not in the gap below the panel */
#timeline .prov::after{content:"";position:absolute;left:-100vmax;right:-100vmax;top:100%;height:24px;background:var(--bg);pointer-events:none}
@media(min-width:1000px){.hero>.sphere{top:calc(50% + 40px)}}
/* results figure: tabular digits so changing figures never shift */
.con-val{font-variant-numeric:tabular-nums}
/* career: the lens note sits beside the tabs on the right; a thinner pinned panel */
@media(min-width:901px){
  .prov-lenses{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:24px}
  .prov-lenses .lens-note{justify-self:end;text-align:right;width:36ch;max-width:100%;font-size:.88rem;line-height:1.45;white-space:normal;overflow:visible;text-overflow:clip}
  .prov-lenses .lens-note,.prov-lenses .lens-note:empty{display:grid;align-content:center;min-height:2.9em;height:2.9em}   /* always two lines tall, so the stripe keeps one height on every tab */
  #timeline .prov{padding-top:18px;padding-bottom:18px}
}
/* contact: the same framed panel as every other card (hairline box, corner ticks, page colours) instead of a dark slab */
.contact .slab.frame{--ink:inherit;--mute:inherit;--rule:inherit;--card:inherit;--acc:inherit;color:var(--ink);box-shadow:none;border-radius:0}
.contact .slab.frame,:root[data-theme=dark] .contact .slab.frame{background:
  linear-gradient(var(--ink),var(--ink)) 0 0/12px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 0/1px 12px no-repeat,
  linear-gradient(var(--ink),var(--ink)) 100% 100%/12px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 100%/1px 12px no-repeat,
  linear-gradient(var(--rule),var(--rule)) 0 0/100% 1px no-repeat,linear-gradient(var(--rule),var(--rule)) 0 100%/100% 1px no-repeat,
  linear-gradient(var(--rule),var(--rule)) 0 0/1px 100% no-repeat,linear-gradient(var(--rule),var(--rule)) 100% 0/1px 100% no-repeat,
  var(--panel)}
.contact .slab.frame .giant{color:var(--ink);opacity:.06}
/* signature at the bottom right of the contact panel (under the closing line on phones) */
@media(min-width:721px){
  .contact .sign-row{position:static}
  .contact .slab>.sign-row>.sig{position:absolute;right:clamp(28px,5vw,64px);bottom:clamp(28px,5vw,64px);margin:0;z-index:1}
}
@media(max-width:720px){.contact .sign-row{align-items:stretch}.contact .sig{align-self:flex-end}}
.contact .slab.frame>.slab-bar{margin:calc(-1 * clamp(40px,7vw,96px)) calc(-1 * clamp(28px,5vw,64px)) clamp(28px,4vw,48px)}
.contact .slab.frame .cta .btn:not(.solid){background:transparent;color:var(--ink);border:1px solid var(--ink)}
/* results: all results stacked in one cell; the visible one cross-fades. The cell is as tall as the tallest result. */
.con-slides{display:grid}
.con-slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.con-slide.on{opacity:1;visibility:visible;transition:opacity .5s ease .15s,visibility 0s}
.no-motion .con-slide{transition:none}
.con-main{min-height:0}
/* phones and small tablets: the lens note shows under the tabs, always two lines tall, so the pinned stripe keeps one height */
@media(max-width:900px){
  .prov-lenses .lens-note,.prov-lenses .lens-note:empty{display:grid;align-content:center;flex:1 0 100%;height:2.9em;min-height:2.9em;margin:2px 0 0;text-align:left;font-size:.85rem;line-height:1.45;white-space:normal;overflow:hidden;text-overflow:clip;opacity:1;transform:none}
}

/* a role with no further claims in the current tab shows no "more claims" button */
.more-btn[hidden]{display:none!important}
/* phone contact card: closing line, then Email and LinkedIn centred, then a bottom row with the QR code left and the signature right */
@media(max-width:720px){
  .contact .slab.frame{display:grid;grid-template-columns:1fr 1fr;align-items:end;column-gap:16px}
  .contact .slab.frame>*{grid-column:1/-1}
  .contact .slab.frame>.giant,.contact .slab.frame>.eyebrow{grid-column:auto}
  .contact .sign-row{display:contents}
  .contact .sign-row>h2{grid-column:1/-1;margin-bottom:24px}
  .contact .slab.frame .cta{grid-column:1/-1;justify-self:center;justify-content:center;margin:0 0 28px}
  .contact .slab.frame>.qr{grid-column:1;grid-row:auto;justify-self:start;align-self:end;margin:0}
  .contact .slab.frame>.qr img{width:104px;height:auto}
  .contact .sign-row>.sig{grid-column:2;justify-self:end;align-self:end;width:100%;max-width:170px;margin:0 0 4px}
  .contact .slab.frame>.slab-bar{order:0}.contact .sign-row>h2{order:1}.contact .slab.frame .cta{order:2}.contact .slab.frame>.qr{order:3}.contact .sign-row>.sig{order:4}
}
/* phones: every lens tab visible at once (they wrap onto two rows), no sideways scrolling */
@media(max-width:720px){
  #timeline .prov-lenses .lenses{flex-wrap:wrap;overflow:visible;gap:6px;width:100%}
  #timeline .prov-lenses .lenses .chip{flex:0 0 auto;padding:7px 9px;font-size:.62rem;letter-spacing:.06em}
}
/* phone contact: the buttons sit centred in the two middle columns; the QR code starts in the first of them, so its left
   edge lines up with the Email button; the signature runs to the right edge */
@media(max-width:720px){
  .contact .slab.frame{grid-template-columns:1fr max-content 1fr}
  .contact .slab.frame .cta{grid-column:2;justify-self:center;flex-wrap:nowrap}
  .contact .slab.frame>.qr{grid-column:2;grid-row:4;justify-self:start}
  .contact .sign-row>.sig{grid-column:2/4;grid-row:4;justify-self:end;max-width:150px}
  .contact .slab.frame>.slab-bar{grid-row:1}.contact .sign-row>h2{grid-row:2}.contact .slab.frame .cta{grid-row:3}
}

/* phone hero: a little more room under the top bar */
@media(max-width:720px){.hero{padding-top:104px}}
/* phone contact, refined: the buttons fill the row from the title's left edge to the right edge; the QR code (a little smaller)
   starts at the same left edge; the signature stays bottom right */
@media(max-width:720px){
  .contact .slab.frame{grid-template-columns:1fr 1fr}
  .contact .slab.frame .cta{grid-column:1/-1;justify-self:stretch;display:flex;gap:12px}
  .contact .slab.frame .cta .btn{flex:1 1 0;justify-content:center}
  .contact .slab.frame>.qr{grid-column:1;justify-self:start}
  .contact .slab.frame>.qr img{width:88px}
  .contact .sign-row>.sig{grid-column:2;justify-self:end;max-width:150px}
}
/* career ledger collapsed by default: each role shows its line and its top result; the button opens the rest,
   the scope and the case stories (roles with no claims keep their scope) */
.role:has(.claims):not(.expanded) .scope,.role:not(.expanded) details.stories{display:none}

/* Arabic (?lang=ar): right to left, Cairo (the Arabic face of the KAIROS brand) (Latin names keep the site fonts as fallback), no letter-spacing
   because spacing breaks joined Arabic letters; the page stays hidden until its Arabic text is in place */
/* Latin names and figures keep the site fonts; those fonts have no Arabic letters, so Arabic falls through to Cairo */
:root[lang=ar]{--serif:'Fraunces','Cairo',Georgia,serif;--sans:'Inter Tight','Cairo',system-ui,sans-serif;--mono:'IBM Plex Mono','Cairo',ui-monospace,monospace}
:root[lang=ar] body,:root[lang=ar] body *{letter-spacing:0!important}
:root.i18n-wait body{opacity:0}
#langBtn{font-family:'Cairo',var(--mono)}
:root[lang=ar] #langBtn{font-family:var(--mono)}
/* right-to-left layout fixes */
:root[dir=rtl] .skip{left:auto;right:-999px}
:root[dir=rtl] .skip:focus{right:12px;left:auto}
:root[dir=rtl] body{overflow-x:clip}
@media(min-width:1000px){:root[dir=rtl] .hero>.sphere{right:auto;left:max(0px,calc(var(--gut) - 7vw))}}
:root[dir=rtl] .giant{right:auto;left:-20%}
/* figures, years and counters read left to right inside Arabic text */
:root[dir=rtl] .odo,:root[dir=rtl] .odo-digits,:root[dir=rtl] .con-val,:root[dir=rtl] [data-count],:root[dir=rtl] [data-n],:root[dir=rtl] .role-years{direction:ltr;unicode-bidi:isolate}
/* Arabic headings need taller lines than the Latin serif (dots and marks above and below the letters) */
:root[lang=ar] h2,:root[lang=ar] h3,:root[lang=ar] h4,:root[lang=ar] .con-cap{line-height:1.4}
:root[lang=ar] h1 .line{line-height:1.15}
/* contact card, wide screens: the signature mirrors to the bottom left */
/* Arabic fixes: the second line of the name sits closer to the first; figures on the results page and the
   employer logos in the career rail align to the right; the career title stays on one line on wide screens;
   a project title may carry its own line break */
:root[lang=ar] .hero h1 .line{line-height:1.05}
:root[lang=ar] .hero h1 .l2{margin-top:-.18em}
:root[dir=rtl] .con-val,:root[dir=rtl] [data-n]{text-align:right}
:root[dir=rtl] .rl{left:auto;right:0}
@media(min-width:900px){:root[lang=ar] #timeline h2{white-space:nowrap}}
:root[lang=ar] .case h3,:root[lang=ar] .flag h3{white-space:pre-line}
/* Arabic hero: the place line and the name move up, leaving room between the dots under زوبي and the title */
:root[lang=ar] .hero>#loc{margin-top:calc(-1 * clamp(20px,4vw,48px))}
:root[lang=ar] .hero>h1{margin-bottom:clamp(20px,4vw,48px)}
/* career rail: "حالياً" (now) right-aligned under the year and a little smaller */
:root[dir=rtl] .odo-now{justify-self:end;font-size:.72em}

/* the contact page is nearly a screen tall, so at the very bottom its card sits about 140px from the top and the
   skills subtitle has scrolled away */
section.scene.contact{min-height:calc(100svh - 140px);box-sizing:border-box}
/* Arabic closing line: Cairo's taller lines need a smaller size so the three lines clear the buttons and the QR code */
:root[lang=ar] .contact .slab h2{font-size:clamp(2rem,4.6vw,3.8rem);line-height:1.35}
@media(min-width:721px){:root[lang=ar] .contact .sign-row h2{margin-bottom:64px}}
/* flagship facts, right to left: the dividing rules and padding mirror, so the first fact clears the frame */
:root[dir=rtl] .flag-facts>div{padding:14px 16px 14px 0}
:root[dir=rtl] .flag-facts>div+div,:root[dir=rtl] .flag .flag-facts>div:first-child{padding-left:16px;padding-right:16px}
:root[dir=rtl] .flag-facts>div+div{border-left:0;border-right:1px solid var(--rule)}
@media(max-width:520px){:root[dir=rtl] .flag-facts>div+div{padding-right:16px;border-right:0}}
/* headline results: a little taller */
@media(min-width:861px){.record .con-main{padding-top:48px;padding-bottom:46px}}
/* seamless switches: language changes fade the page out and the new one in at the same place; theme changes
   cross-fade the whole page (view transition) */
html{background:var(--bg)}
body{transition:opacity .26s ease}
:root.lang-out body,:root.lang-in body{opacity:0}
::view-transition-old(root),::view-transition-new(root){animation-duration:.55s;animation-timing-function:ease}
/* Arabic: the name keeps two lines while its weight animates; the career title breaks after عاماً on phones (on wide
   screens it stays one line); accent rules beside paragraphs move to the right-hand side */
:root[lang=ar] .hero h1 .line{white-space:nowrap}
@media(max-width:720px){:root[lang=ar] .hero h1{font-size:clamp(2.6rem,14vw,4.4rem)}}
@media(max-width:899px){:root[lang=ar] #timeline h2{white-space:pre-line}}
:root[dir=rtl] .case .out,:root[dir=rtl] .claims li,:root[dir=rtl] .top-claims li{padding-left:0;padding-right:16px;border-left:0;border-right-style:solid}
:root[dir=rtl] .case .out{border-right-width:3px;border-right-color:var(--acc)}
:root[dir=rtl] .claims li,:root[dir=rtl] .top-claims li{border-right-width:2px;border-right-color:var(--rule)}
:root[dir=rtl] .ev-body{border-left:0;border-right:2px solid var(--acc);padding:2px 18px 2px 0}
/* phones: larger employer logos in the career list */
.role-logo img{max-height:64px;max-width:210px}
.role-logo img[src$="core.png"]{max-height:44px}
.role-logo [data-slug=ucc] img,.role-logo [data-slug=almanara] img,.role-logo [data-slug=estishari] img,.role-logo [data-slug=bcd] img,.role-logo [data-slug=hemfa] img,.role-logo [data-slug=hemfa-academy] img{width:220px;max-width:220px}

/* right to left: text set to start on the left in English starts on the right in Arabic */
:root[dir=rtl] .contact .slab,:root[dir=rtl] .qr span,:root[dir=rtl] .ev-link,:root[dir=rtl] .skill,:root[dir=rtl] .prov-lenses .lens-note{text-align:right}
/* contact buttons: icon and label centred in the button (both languages); the gap after the icon follows the reading direction */
.contact .slab .btn{display:inline-flex;align-items:center;justify-content:center;text-align:center}
.contact .slab .btn .ico{margin:0;margin-inline-end:.9em}
/* contact card, Arabic: the QR code stays bottom left and the signature bottom right, as in English (the card's grid
   runs left to right; its text, buttons and header still read right to left) */
@media(max-width:720px){
  :root[dir=rtl] .contact .slab.frame{direction:ltr}
  :root[dir=rtl] .contact .slab.frame>*,:root[dir=rtl] .contact .sign-row>h2{direction:rtl}
  :root[dir=rtl] .contact .slab.frame>.qr,:root[dir=rtl] .contact .sign-row>.sig{direction:ltr}
}

/* wide screens, Arabic: the buttons sit on the right, so the signature takes the bottom left */
@media(min-width:721px){:root[dir=rtl] .contact .slab>.sign-row>.sig{right:auto;left:clamp(28px,5vw,64px)}}
/* phones and tablets: the headline result gets more room above and below */
@media(max-width:860px){.record .con-main{padding-top:40px;padding-bottom:40px}.record .con-val{margin:30px 0 18px}}
/* career logos (phone list and desktop rail): one fixed-height row, the logo centred in it vertically and set at the
   start edge, so the years below always start at the same place */
.role-logo>span:not(.role-years){height:76px;align-items:center}
.role-logo .dk,.rl .dk{object-fit:contain;top:50%;translate:0 -50%}
/* phones: the employer's years sit right under the logo row with the same space above and below them, and on the
   start side (right in Arabic) */
.role-logo>.role-years{margin-top:4px}
@media(max-width:900px){.role-logo{margin-bottom:22px}}
:root[dir=rtl] .role-logo>.role-years{text-align:right}
/* phones: all lens tabs on one line (smaller type, tighter padding), the lens description on the line below */
@media(max-width:720px){
  #timeline .prov-lenses #lenses{flex-wrap:nowrap;gap:4px}
  #timeline #prov{padding-left:12px;padding-right:12px}
  #timeline .prov-lenses #lenses .chip{flex:1 1 auto;min-width:0;padding:7px 4px;font-size:min(.62rem,2.45vw);letter-spacing:0;white-space:nowrap;text-align:center;justify-content:center}
  :root[lang=en] #timeline .prov-lenses #lenses .chip{font-family:var(--sans);font-weight:600;font-size:min(.7rem,2.2vw);text-transform:none;padding:7px 3px}
}
/* title line breaks: English breaks where the owner set them; Arabic keeps one line on wide screens and breaks after
   عاماً on phones */
@media(min-width:900px){:root[lang=ar] .br-en{display:none}}
@media(max-width:899px){:root[lang=ar] #voicesec .br-en,:root[lang=ar] #skills .br-en{display:none}}
/* no drop shadows on cards (both themes) */
.console,.prov,.prov.frame{box-shadow:none}
:root[data-theme=dark] .marquee{box-shadow:none}
/* headline results: taller on wide screens */
@media(min-width:861px){.record .con-main{padding-top:72px;padding-bottom:70px}}
/* employers-over-time chart: bars are clickable (a taller invisible hit area), the chosen one turns bronze, year
   marks sit under the axis, and the line below the chart names the employer, its roles and their dates */
.con-ticks span{cursor:pointer}
.con-ticks span::before{content:"";position:absolute;inset:-5px 0}
.con-ticks span:hover,.con-ticks span:focus-visible{background:color-mix(in srgb,var(--ink) 70%,transparent);outline:none}
.con-ticks span.sel{background:var(--ink)}
.con-ticks .yr{position:absolute;left:var(--a);top:calc(100% + 5px);translate:-50% 0;font:500 .62rem var(--mono);font-style:normal;color:var(--mute);letter-spacing:.04em;pointer-events:none}
.record .con-ticks{margin-bottom:34px}
.con-tip{margin:0 20px 18px;min-height:2.6em;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-size:.86rem;line-height:1.4;color:var(--ink)}
.con-tip>.mono{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.con-tip b{font-weight:600;color:var(--bronze-ink)}
.con-tip small{font-size:.66rem;color:var(--mute);letter-spacing:.04em}
@media(min-width:861px){.record .con-tip{grid-column:2;grid-row:5}.record .con-main{grid-row:2/6}}
/* Arabic: the chart reads right to left, like the 1997 ... now labels above it */
:root[dir=rtl] .con-ticks span{left:auto;right:var(--a)}
:root[dir=rtl] .con-ticks .yr{left:auto;right:var(--a);translate:50% 0}
/* headline results: the figure and its caption a size larger */
@media(min-width:861px){.record .con-val{font-size:clamp(5.4rem,9.4vw,9.6rem)}.record .con-cap{font-size:1.4rem;line-height:1.4}.record .con-meta .chip-ev{font-size:.8rem}}
.con-tip>span{flex-basis:100%}

.con-tip{align-content:flex-start}
/* the headline result sits in the middle of its (taller) column */
@media(min-width:861px){.record .con-main{display:flex;flex-direction:column;justify-content:center}}
/* top bar: the same layout in both languages - mark, page number and search on the left; language and theme
   switches on the right; the theme switch shows its icon only */
.bar{direction:ltr}
.tools-l{display:flex;gap:10px;align-items:center}
.bar .tools{margin-left:auto}
#themeBtn .lbl{display:none}
#themeBtn{padding-left:10px;padding-right:10px}
#langBtn{font-family:var(--mono);letter-spacing:.08em}
:root[lang=ar] #langBtn{font-family:'IBM Plex Mono',ui-monospace,monospace}
@media(max-width:720px){.tools-l{gap:6px}}
/* contact closing line: a size smaller */
@media(min-width:721px){.contact .slab h2{font-size:clamp(2.2rem,4.6vw,3.9rem)}:root[lang=ar] .contact .slab h2{font-size:clamp(1.9rem,3.8vw,3.2rem)}}
/* language switch: the browser cross-fades from the old page to the new one (same-origin navigation) */
@view-transition{navigation:auto}
/* career ledger: roles before Tadawul stay folded until "See earlier roles" */
#ledger:not(.show-early) .role.early{display:none}
.early-btn{display:block;margin:28px 0 0;padding:12px 20px;background:none;border:1px solid var(--rule);color:var(--ink);font:500 .78rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:border-color .3s}
.early-btn:hover,.early-btn:focus-visible{border-color:var(--bronze-ink)}
/* success stories: details fold; skills: first six per group, the rest behind "+ N more" */
.case:not(.open) dl:not(.flag-facts){display:none}
.case-more,.skill-more{display:inline-block;margin:14px 0 0;padding:0;background:none;border:0;color:var(--label,var(--mute));font:500 .75rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--rule)}
.case-more:hover,.skill-more:hover,.case-more:focus-visible,.skill-more:focus-visible{color:var(--ink);text-decoration-color:var(--bronze-ink)}
.skill-group:not(.all) .skill-extra{display:none}