.roles-grid .role-card{padding-top:0}
.role-art{align-self:stretch;position:relative;margin:0 -16px 17px;height:150px;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--role-border);background:radial-gradient(ellipse at 50% 55%,var(--wash),#ffffff60 80%)}
.role-art svg{width:100%;height:100%;overflow:visible}
.role-art .glass{fill:var(--art-glass);stroke:var(--accent);stroke-opacity:.8;stroke-width:2.4;filter:var(--art-shadow);paint-order:stroke fill}
.role-art .rim{fill:none;stroke:var(--accent);stroke-opacity:.85;stroke-width:3}
.role-art .wire{fill:none;stroke:var(--accent);stroke-opacity:.5;stroke-width:2}
.role-art .detail{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;opacity:.95}
.role-art .soft{fill:var(--accent);opacity:.3}
.role-art .lit{fill:var(--accent);stroke:white;stroke-width:2;filter:var(--art-glow)}
.role-art .build,.role-art .travel,.role-art .scan{transform-box:fill-box;transform-origin:center}
.role-art .scan{opacity:0}
.role-card:is(:hover,.is-animating) .role-art .pulse{animation:art-pulse 3s ease-in-out both}
.role-card:is(:hover,.is-animating) .role-art .travel{animation:art-travel 3s ease-in-out both}
.role-card:is(:hover,.is-animating) .role-art .build{animation:art-build 3s ease both}
.role-card:is(:hover,.is-animating) .role-art .scan{animation:art-scan 3s ease-in-out both}
.role-card:is(:hover,.is-animating) .role-art .draw{stroke-dasharray:500;animation:art-draw 3s ease both}
@keyframes art-pulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes art-travel{0%{transform:translate(-65px,25px);opacity:0}60%,100%{transform:translate(0);opacity:1}}
@keyframes art-build{0%{transform:translateY(30px);opacity:0}65%,100%{transform:translateY(0);opacity:1}}
@keyframes art-scan{0%,100%{transform:translateX(-75px);opacity:0}20%{opacity:1}80%{transform:translateX(100px);opacity:1}}
@keyframes art-draw{from{stroke-dashoffset:500}to{stroke-dashoffset:0}}
@media(max-width:1000px){.role-art{height:155px}}
@media(max-width:600px){.role-art{margin-inline:-20px}}
@media(prefers-reduced-motion:reduce){.role-art *{animation:none!important}}
/* Quieter, smaller illustrations requested after the first preview. */
.roles-grid .role-art{height:112px;margin-bottom:15px;background:radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--wash) 40%,white),#ffffff45 80%)}
.role-art svg{width:84%;height:90%;filter:saturate(.62);opacity:.83}
.role-art .glass{stroke-opacity:.48;stroke-width:1.8}
.role-art .rim{stroke-opacity:.55;stroke-width:2}
.role-art .wire{stroke-opacity:.3;stroke-width:1.5}
.role-art .detail{opacity:.65;stroke-width:2.2}
.role-art .soft{opacity:.18}
.role-art .lit{filter:none;opacity:.7}
@media(max-width:1000px){.roles-grid .role-art{height:110px}}
/* Slightly brighter while retaining the reduced size. */
.role-art svg{filter:saturate(.76);opacity:.92}
.role-art .detail{opacity:.76}
.role-art .glass{stroke-opacity:.58}