body {
  background-image: url( '../../lib/img/global/logo_small.png' ), url( '../../lib/img/global/workinghands.png' ) !important;
  background-repeat:no-repeat, no-repeat !important;
  background-attachment: fixed, fixed !important;
  background-position: bottom left, center !important;
  -webkit-background-size: auto, cover !important;
  -moz-background-size: auto, cover !important;
  -o-background-size: auto, cover !important;
  background-size: 100px 100px, cover !important;

}

img[alt=career-development-model] {
	height: 550px;
	background-color: white !important;
	vertical-align: top; 
}

img[alt=work-profiler] {
	height: 550px;
	background-color: white !important;
	vertical-align: top; 
}

img[alt=robot-and-human] {
	height: 250px;
	vertical-align: top;
}

img[alt=ai-orchestrator] {
    height: 350px;
    background-color: white !important;
    vertical-align: top; 
}

img[alt=github-workshop] {
    height: 350px;
    vertical-align: top; 
}

img[alt=huge-old-dictionary] {
    height: 250px;
    vertical-align: top; 
}


img[alt^="grid-item-"] {
    height: 150px;
    width: 150px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 1.25rem;
}

.role-grid {
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 4px 6px;
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: border-color .15s ease, transform .08s ease;
}

.role-grid:focus-within, .role:hover {
    border-color: var(--ring);
}

.dot {
    width: 8px; height: 8px; border-radius: 999px; background: var(--ring);
    box-shadow: 0 0 0 3px rgba(59,130,246,.25);
    flex-shrink: 0;
}
.role-grid span { display: inline-block; font-size: 12px; }