/* Versions 21 and 23, round 5 shared layer. Self-contained, so r3.css (Versions 18 to 22) stays as it is.
   No header bar and no footer: a single theme control, one contact pair at the top, and the career marks in their own colours
   (a uniform light silhouette on navy). Navy dark ground #10243B; light ground #F6F8FB. */
@font-face{font-family:Archivo;src:url("assets/fonts/archivo/archivo-latin-standard-normal.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
/* Size-matched local fallbacks (measured in round 4): the first paint keeps the webfont's line breaks, so the swap does not shift
   the page. Where Arial is absent the stack falls through to the system face. */
@font-face{font-family:"Archivo fallback";src:local("Arial"),local("ArialMT");font-weight:100 549;size-adjust:98.7%}
@font-face{font-family:"Archivo fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:550 649;size-adjust:96%}
@font-face{font-family:"Archivo fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:650 749;size-adjust:98.8%}
@font-face{font-family:"Archivo fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:750 900;size-adjust:103.6%}

/* Tokens: light by default; navy when the device prefers dark and no Light choice is stored; navy for a stored Dark choice */
:root{color-scheme:light dark;--ground:#F6F8FB;--raised:#FFFFFF;--ink:#10243B;--quiet:#4A5B70;--signal:#1F5FBF;--rule:#D5DDE7;--on-signal:#FFFFFF;
  --signal-hover:#174A96;--shadow:rgba(16,36,59,.16);--logo:none;--logo-o:1;--li:#0A66C2;
  --sig-filter:contrast(1.35);--sig-blend:multiply;
  --gut:clamp(20px,5.2vw,56px);--sans:Archivo,"Archivo fallback",system-ui,-apple-system,"Segoe UI",sans-serif}
:root[data-theme=light]{color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--ground:#10243B;--raised:#17304D;--ink:#F3F6FA;--quiet:#A9B8CB;--signal:#8EC5FF;
  --rule:#2A4466;--on-signal:#10243B;--signal-hover:#B6DAFF;--shadow:rgba(0,0,0,.4);--logo:brightness(0) invert(1);--logo-o:.82;--li:#FFFFFF;
  --sig-filter:invert(1) contrast(1.35);--sig-blend:screen}}
:root[data-theme=dark]{color-scheme:dark;--ground:#10243B;--raised:#17304D;--ink:#F3F6FA;--quiet:#A9B8CB;--signal:#8EC5FF;
  --rule:#2A4466;--on-signal:#10243B;--signal-hover:#B6DAFF;--shadow:rgba(0,0,0,.4);--logo:brightness(0) invert(1);--logo-o:.82;--li:#FFFFFF;
  --sig-filter:invert(1) contrast(1.35);--sig-blend:screen}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 18px/1.55 var(--sans);font-stretch:100%;overflow-wrap:break-word}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:20;padding:10px 14px;background:var(--ink);color:var(--ground);font-weight:600}
.skip:focus{left:8px}
.nw{white-space:nowrap}
.page{position:relative;margin:0 auto}
@media (prefers-reduced-motion:no-preference){a,button{transition:color .15s,background-color .15s,border-color .15s,box-shadow .15s}}

/* ---------------------------------------------------------------- theme control: one 44px button, System > Light > Dark */
.tt{position:absolute;z-index:5;top:12px;right:12px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  border:0;border-radius:999px;background:none;color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 1px transparent}
.tt:hover,.tt:focus-visible{box-shadow:inset 0 0 0 1px var(--rule)}
.tt svg{display:none;width:20px;height:20px}
/* the glyph follows the state the early theme script already set, so it is right from the first paint */
:root:not([data-theme]) .tt-system,:root[data-theme=light] .tt-light,:root[data-theme=dark] .tt-dark{display:block}
html:not(.js) .tt{display:none}

/* ---------------------------------------------------------------- the one contact pair: equal size, type and style */
.contact{container-type:inline-size}
.contact-list{display:flex;flex-wrap:wrap;gap:8px}
.contact-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;width:100%;padding:0 16px;border:1px solid var(--rule);
  border-radius:999px;background:transparent;color:var(--ink);font:600 16px/1.2 var(--sans);text-decoration:none;white-space:nowrap}
.contact-link:hover{border-color:var(--signal)}
.contact-link svg{flex:none;width:18px;height:18px}
.ico-li{color:var(--li)}
.contact-list li{flex:1 1 100%}
/* side by side only where both fit at full size: the pair measures 383px in Archivo (labels 100 and 151px, 18px icons, 10px gaps,
   16px padding, 8px between), so below a 400px container they stack at full width */
@container (min-width:400px){.contact-list li{flex:0 0 auto}.contact-link{width:auto}}

/* ---------------------------------------------------------------- career marks: original colours, light silhouettes on navy */
.logo-box{container-type:inline-size}
.logos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px 12px;align-items:center;--k:.75}
.logos li{grid-column:span 3;display:flex;justify-content:center;align-items:center;min-width:0}
.logos li:nth-child(-n+3){grid-column:span 4}
.logos img{width:auto;height:calc(var(--b) * var(--k) * 1px);max-width:100%;object-fit:contain;filter:var(--logo);opacity:var(--logo-o)}
/* optical heights at full size (Cowork, round 5); every cell is the same width */
.lg-servicenow{--b:20}.lg-ironclad{--b:25}.lg-launchdarkly{--b:20}.lg-flexport{--b:23}.lg-altiris{--b:29}.lg-symantec{--b:29}.lg-dell{--b:38}
@container (min-width:520px){.logos{--k:.85}.logos li:nth-child(-n+3){grid-column:span 3}.logos li:nth-child(n+5){grid-column:span 4}}
/* seven across only where each cell has room for its mark at full size (a 1000px container); otherwise 4 + 3 */
@container (min-width:1000px){.logos{grid-template-columns:repeat(7,minmax(0,1fr));--k:1}.logos li,.logos li:nth-child(-n+3),.logos li:nth-child(n+5){grid-column:auto}}