.recruit-grid{gap:24px}
.recruit-grid .role{padding:30px 32px 32px;min-width:0;border:1px solid #ced0d3;background:linear-gradient(145deg,rgba(255,255,255,.74),rgba(249,250,250,.42));box-shadow:0 14px 42px rgba(35,39,43,.025);border-radius:8px;position:relative;isolation:isolate}
.role .role-art{position:relative;overflow:hidden;margin:-8px -12px 25px;height:200px;display:grid;place-items:center;border-bottom:1px solid #d9dbdd}
.role .role-art:before{content:"";position:absolute;width:86%;height:100%;background:radial-gradient(ellipse,rgba(255,255,255,.95),rgba(255,255,255,0) 70%);z-index:-1;transition:transform 1.2s var(--ease)}
.role .role-art:after{content:"";position:absolute;bottom:0;left:12px;height:1px;width:28px;background:#757c81;transition:width 1s var(--ease)}
.role .role-art svg{display:block;width:min(100%,360px);height:100%;overflow:visible;transition:transform 1.2s var(--ease)}
.recruit-grid .role h2{font-size:clamp(24px,2.6vw,29px);font-weight:700;color:#303337;letter-spacing:.01em;line-height:1.4}
.recruit-grid .role p{margin-top:15px;font-size:15px;color:#656a6f;line-height:1.95;text-wrap:pretty}
.recruit-grid .role ul{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:1px solid #d9dbdd;color:#73787d;font-size:13px;line-height:1.9}
.recruit-grid .role li{position:relative;padding-left:15px}
.recruit-grid .role li+li{margin-top:7px}
.recruit-grid .role li:before{content:"";position:absolute;left:0;top:.85em;width:4px;height:4px;border:1px solid #a5aaae;border-radius:50%}
.role-art .world-platform{animation:role-world-float 9s ease-in-out infinite}
.role-art .world-node{animation:role-node 5s ease-in-out infinite;animation-delay:var(--delay,0s)}
.role-art .design-shape{transform-origin:180px 102px;animation:role-sculpt 12s ease-in-out infinite}
.role-art .design-line{stroke-dasharray:180 340;animation:role-curve 14s linear infinite}
.role-art .sensor-ring{transform-origin:180px 109px;animation:role-sensor 6s ease-in-out infinite}
.role-art .signal-highlight{stroke-dasharray:42 360;animation:role-signal 7s linear infinite}
.role-art .sleep-moon{animation:role-moon 9s ease-in-out infinite}
.role-art .aroma{animation:role-aroma 7s ease-in-out infinite;animation-delay:var(--delay,0s)}
.role-art .flavor-ripple{transform-origin:180px 126px;animation:role-ripple 7s ease-in-out infinite}
.role-art .flavor-leaf{transform-origin:265px 124px;animation:role-leaf 8s ease-in-out infinite}
.role-art [class]{animation-play-state:paused}
.role.is-animating .role-art [class]{animation-play-state:running}
@keyframes role-world-float{50%{transform:translateY(-6px)}}
@keyframes role-node{50%{opacity:.25}}
@keyframes role-sculpt{50%{transform:rotate(6deg) scale(1.025)}}
@keyframes role-curve{to{stroke-dashoffset:-520}}
@keyframes role-sensor{50%{transform:scale(1.055);opacity:.45}}
@keyframes role-signal{to{stroke-dashoffset:-402}}
@keyframes role-moon{50%{transform:translateY(-4px)}}
@keyframes role-aroma{0%,100%{transform:translateY(3px);opacity:.3}50%{transform:translateY(-7px);opacity:.85}}
@keyframes role-ripple{50%{transform:scaleX(1.045);opacity:.5}}
@keyframes role-leaf{50%{transform:rotate(-4deg)}}
@media(hover:hover) and (pointer:fine){
  .role:hover .role-art svg{transform:translateY(-3px) scale(1.025)}
  .role:hover .role-art:before{transform:scale(1.15)}
  .role:hover .role-art:after{width:calc(100% - 24px)}
}
@media(max-width:800px){
  .recruit-grid{gap:20px}
  .recruit-grid .role{padding:24px 26px 28px}
  .role .role-art{height:190px;margin:-6px -6px 24px}
  .recruit-grid .role h2{font-size:26px}
}
@media(max-width:380px){.recruit-grid .role{padding-inline:20px}.recruit-grid .role h2{font-size:24px}.role .role-art{height:174px}}
@media(prefers-reduced-motion:reduce){
  .role-art [class]{animation:none!important}
  .role .role-art svg,.role .role-art:before{transform:none!important;transition:none}
  .hero-title.reveal,.hero-lead.reveal,.role.reveal,.join-contact.reveal{opacity:1;filter:none;transform:none;transition:none}
}