/* Approved direction A: graphite, glass and warm yellow, with readable card copy. */
.roles-section{background:radial-gradient(ellipse at 50% 85%,#2e392d42,transparent 70%),#121612}
.roles-section .role-cards{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:18px}
.roles-section .role-card{display:grid;grid-template-rows:auto auto 1fr auto;align-content:start;min-width:0;min-height:0;padding:28px 26px 24px;border:1px solid #ffffff38;border-radius:17px;isolation:isolate;transform:none;text-align:left;background:var(--paper);box-shadow:inset 0 1px 0 #ffffff50;transition:background-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.roles-section .role-topline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;min-height:30px;margin:0 0 22px}
.roles-section .role-topline .index{font-size:.75rem;font-weight:500;letter-spacing:.08em;line-height:1.4}
.roles-section .role-category{display:inline-flex;align-items:center;justify-content:center;flex:none;font-size:.75rem;line-height:1.4;padding:5px 11px;border:1px solid #15191735;border-radius:24px;letter-spacing:-.015em}
.roles-section .role-copy{display:block;min-height:128px;position:relative;z-index:2}
.roles-section .role-title{display:block;color:var(--ink);font-size:clamp(1.75rem,2.45vw,2.5rem);font-weight:620;line-height:1.07;letter-spacing:-.045em;margin:0 0 13px;text-wrap:initial;overflow-wrap:anywhere}
.roles-section .role-description{display:block;font-size:1rem;line-height:1.5;letter-spacing:-.018em;color:#354034;max-width:none}
.roles-section .role-art{position:relative;display:block;align-self:end;aspect-ratio:3/2;width:calc(100% + 36px);margin:8px -18px 14px;pointer-events:none}
.roles-section .role-art img{display:block;width:100%;height:100%;object-fit:contain;transform:translateY(0) scale(1);filter:brightness(1);transform-origin:50% 70%;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(0deg,transparent,#000 3%,#000 97%,transparent);mask-composite:intersect;transition:transform .45s var(--ease),filter .45s var(--ease)}
.roles-section .role-bottom{position:relative;inset:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 0 0;border-top:1px solid #15191732;font-size:1rem;line-height:1.4;min-height:61px;z-index:2}
.roles-section .role-bottom>.circle{width:43px;height:43px;background:var(--ink);border-color:var(--ink);color:var(--paper);font-size:25px;transition:transform .3s var(--ease),background .3s var(--ease)}
.roles-section .role-card:after{z-index:1;background:radial-gradient(320px circle at var(--card-x,50%) var(--card-y,40%),#ffffff29,transparent 72%)}
.roles-section .role-card:focus-visible{background-color:var(--signal);outline:3px solid var(--paper);outline-offset:6px}
.roles-section .role-card:focus-visible .role-bottom>.circle{background:#344236;border-color:#344236}
.roles-section .role-hint{margin-top:24px;font-size:.875rem;line-height:1.6}
@media(hover:hover) and (pointer:fine){
 .roles-section .role-card:hover{background-color:var(--signal);transform:translateY(-5px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));box-shadow:0 24px 48px -28px #000b,inset 0 1px 0 #ffffffa0}
 .roles-section .role-card:hover .role-art img{transform:translateY(-5px) scale(1.025);filter:brightness(1.045) saturate(1.04)}
 .roles-section .role-card:hover .role-bottom>.circle{transform:rotate(-35deg);background:var(--ink);border-color:var(--ink);color:var(--paper)}
}
@media(max-width:1100px) and (min-width:851px){
 .roles-section .role-cards{gap:14px}
 .roles-section .role-card{padding:24px 20px 20px}
 .roles-section .role-topline{gap:7px;margin-bottom:20px}
 .roles-section .role-topline .index{letter-spacing:.02em}
 .roles-section .role-category{display:none}
 .roles-section .role-copy{min-height:136px}
 .roles-section .role-title{font-size:1.75rem}
 .roles-section .role-art{width:calc(100% + 28px);margin-inline:-14px}
 .roles-section .role-bottom{font-size:.875rem;gap:10px}
}
@media(max-width:850px){
 .roles-section .role-cards{grid-template-columns:minmax(0,1fr);max-width:490px;margin-inline:auto;gap:22px}
 .roles-section .role-card{padding:25px 24px 22px}
 .roles-section .role-topline{margin-bottom:20px}
 .roles-section .role-copy{min-height:0}
 .roles-section .role-title{font-size:clamp(1.75rem,6vw,2.25rem);margin-bottom:12px}
 .roles-section .role-description{font-size:1rem}
 .roles-section .role-art{margin-top:18px;margin-bottom:10px}
 .roles-section .role-card:after{display:none}
 .roles-section .role-bottom{padding-top:15px;font-size:.9375rem}
 .roles-section .role-bottom>.circle{width:41px;height:41px}
}
@media(max-width:370px){
 .roles-section .role-card{padding-inline:20px}
 .roles-section .role-topline{gap:7px}
 .roles-section .role-topline .index{letter-spacing:.02em}
 .roles-section .role-category{padding-inline:8px}
 .roles-section .role-title{font-size:1.6875rem}
}
@media(prefers-reduced-motion:reduce){
 .roles-section .role-card,.roles-section .role-art img,.roles-section .role-bottom>.circle,.roles-section .role-card:after{transition:none}
 .roles-section .role-card:hover,.roles-section .role-card:hover .role-art img,.roles-section .role-card:hover .role-bottom>.circle{transform:none;filter:none}
}