/* Isolated visual study; no shared page styles are changed. */
.roles-page {background:#dfe2de;overflow-x:hidden}
.roles-page .grain {opacity:.018}
.roles-page::before {content:"";position:fixed;inset:-12%;pointer-events:none;background:radial-gradient(circle at 16% 28%,rgba(238,154,103,.58) 0,rgba(238,154,103,.24) 16%,transparent 37%),radial-gradient(circle at 76% 18%,rgba(93,146,174,.54) 0,rgba(93,146,174,.22) 17%,transparent 39%),radial-gradient(circle at 74% 82%,rgba(164,143,190,.46) 0,rgba(164,143,190,.18) 18%,transparent 39%),radial-gradient(circle at 28% 78%,rgba(110,165,151,.38) 0,transparent 36%);filter:blur(28px);opacity:.86;transform:translate3d(-5%,-3%,0) scale(1.03);animation:rolesAmbientLight 12s ease-in-out infinite alternate;will-change:transform;z-index:0}
.roles-page::after {content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.4),transparent 36%,rgba(255,255,255,.14) 68%,rgba(255,255,255,.34));z-index:0}
.roles-page .nav {position:relative;z-index:20}
.roles-page main {position:relative;z-index:1}
@keyframes rolesAmbientLight {
  0% {transform:translate3d(-5%,-3%,0) scale(1.03) rotate(-1deg)}
  46% {transform:translate3d(6%,2%,0) scale(1.1) rotate(3deg)}
  100% {transform:translate3d(-2%,8%,0) scale(1.05) rotate(-2deg)}
}
.roles-section {display:grid;grid-template-columns:minmax(390px,.92fr) minmax(0,1.08fr);align-items:start;gap:6vw;overflow:visible;background:transparent;padding-top:155px}
.roles-introduction {position:sticky;top:135px}
.roles-introduction .section-heading {display:block}
.roles-introduction .section-number {margin-bottom:35px}
.roles-introduction .section-heading h1 {font-size:clamp(54px,5.25vw,74px);line-height:.96;letter-spacing:-.06em;text-align:left}
.roles-section .projects-intro {margin:28px 0 0;max-width:330px;font-size:16px;line-height:1.6;color:#525b58}
.roles-grid {display:grid;grid-template-columns:1fr;gap:18px;margin:0}
.roles-grid .role-card,.roles-grid .role-card:last-child:nth-child(4) {grid-column:auto;min-height:280px;padding:25px 28px 20px;border-radius:26px;border:1px solid rgba(255,255,255,.16);background-color:#172029;color:#f3f3ee;box-shadow:0 16px 38px rgba(22,30,36,.14);backdrop-filter:blur(14px);overflow:hidden}
.roles-grid .role-card:nth-child(1) {background-image:radial-gradient(circle at 82% 4%,rgba(232,125,69,.72),transparent 34%),radial-gradient(circle at 8% 100%,rgba(43,105,143,.55),transparent 44%),linear-gradient(135deg,#25323c 0%,#131b24 72%)}
.roles-grid .role-card:nth-child(2) {background-image:radial-gradient(circle at 90% 92%,rgba(70,136,163,.66),transparent 38%),radial-gradient(circle at 5% 8%,rgba(215,147,91,.38),transparent 38%),linear-gradient(145deg,#18252f 0%,#121922 76%)}
.roles-grid .role-card:nth-child(3) {background-image:radial-gradient(circle at 15% 100%,rgba(219,108,62,.62),transparent 40%),radial-gradient(circle at 94% 10%,rgba(51,93,145,.54),transparent 38%),linear-gradient(135deg,#222b38 0%,#141a23 76%)}
.roles-grid .role-card:nth-child(4) {background-image:radial-gradient(circle at 82% 5%,rgba(89,94,170,.62),transparent 37%),radial-gradient(circle at 3% 95%,rgba(224,139,73,.48),transparent 43%),linear-gradient(140deg,#202633 0%,#121922 78%)}
.roles-grid .role-card::before,.roles-grid .role-card::after {display:none}
.role-card .project-card__top {border:0;padding:0;gap:10px;opacity:.72}
.role-card .project-index {font:500 12px var(--mono);letter-spacing:0}
.role-card .project-card__top>span:last-child {font-size:9px}
.role-card .project-card__main {max-width:100%;padding:22px 0}
.role-card .project-event {font:500 10px/1.5 var(--mono);max-width:100%;color:rgba(246,246,240,.68);margin-bottom:10px}
.roles-grid .role-card h2 {font-size:clamp(32px,3.4vw,48px);line-height:1.03;letter-spacing:-.055em;max-width:440px}
.role-card .role-card__details {border-top:1px solid rgba(255,255,255,.22);padding-top:14px;gap:20px}
.role-card .role-card__responsibilities {font-size:10px;max-width:64%;color:rgba(246,246,240,.7)}
.role-card .role-card__explore {font-size:9px;min-height:44px}
.role-card .role-card__explore .project-arrow {position:relative;border:1px solid rgba(255,255,255,.28);border-radius:50%;width:33px;height:33px;display:grid;place-items:center;font-size:18px}
.role-card .role-card__explore .project-arrow::before {top:8px;right:7px;width:8px;height:8px}
.role-card .role-card__explore .project-arrow::after {top:16px;left:8px;width:16px;height:1.5px}
.roles-grid .role-card:hover {transform:translateY(-4px);filter:saturate(1.08) brightness(1.07);box-shadow:0 24px 46px rgba(18,27,34,.22)}
.role-expansion__scrim {background:rgba(12,18,24,.46);backdrop-filter:blur(12px)}
.role-expansion-layer .role-expansion {
  color:#f5f4ef;border-radius:25px;border:1px solid rgba(255,255,255,.2);
  --role-expansion-line:rgba(255,255,255,.25);--role-expansion-soft-line:rgba(255,255,255,.13);
  background:radial-gradient(circle at 88% 4%,rgba(218,111,61,.57),transparent 33%),radial-gradient(circle at 10% 96%,rgba(42,92,137,.55),transparent 42%),linear-gradient(rgba(14,22,29,.82),rgba(14,22,29,.91)),url("assets/kappa-venue-wide.jpg") center/cover;
  box-shadow:0 25px 80px rgba(10,16,22,.42);
  padding:62px 36px 32px;
}
.role-expansion-layer .role-expansion__primary::after {display:none}
.role-expansion__close {position:absolute;top:20px;right:22px;display:block;width:auto;min-height:44px;margin:0;padding:5px 12px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(18,28,36,.58);color:#f5f4ef;text-align:center;backdrop-filter:blur(10px)}
.role-expansion__layout {grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);gap:clamp(36px,5vw,72px)}
.role-expansion__primary {min-height:0;padding-right:clamp(0px,1vw,18px)}
.role-expansion__label {margin-bottom:20px}
.role-expansion h2 {font-size:clamp(38px,4.25vw,60px);line-height:1.01}
.role-expansion__overview {margin-top:38px;padding-top:18px}
.role-expansion__overview h3 {margin-bottom:17px}
.role-expansion__overview p {max-width:36ch;font-size:clamp(16px,1.35vw,19px);line-height:1.48;color:rgba(245,244,239,.84)}
.role-expansion__secondary {gap:22px;padding-top:0}
.role-expansion__capabilities ul {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
.role-expansion__capabilities li {min-height:34px;padding:8px 0 7px 16px;font-size:10px}
.role-expansion__experience {padding-top:15px}
.role-expansion__experience h3 {margin-bottom:12px}
.role-expansion__experience-item {padding:0;margin-top:7px;border:1px solid rgba(255,255,255,.14);border-radius:13px;background:rgba(9,16,22,.24);overflow:hidden}
.role-expansion__experience-link,.role-expansion__experience-item>.role-expansion__experience-copy {display:flex;width:100%;min-height:52px;padding:10px 12px;align-items:center;justify-content:space-between;gap:14px}
.role-expansion__experience-copy {display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:3px}
.role-expansion__experience-copy b {font:600 14px/1.25 var(--sans)}
.role-expansion__experience-copy small,.role-expansion__experience-copy em {display:block;font:500 9px/1.35 var(--mono);letter-spacing:.01em;opacity:.74;font-style:normal}
.role-expansion__experience-copy em {color:#f0b08a;opacity:1}
.role-expansion__experience-link>span:last-child {flex:0 0 auto;font-size:19px}
.role-expansion__experience-link:hover {transform:none;background:rgba(255,255,255,.08)}
@media(max-width:900px) {
 .roles-section {grid-template-columns:1fr;gap:35px;padding-top:130px}
 .roles-introduction {position:static}
 .roles-introduction .section-number {margin-bottom:25px}
 .roles-introduction .section-heading h1 {font-size:clamp(46px,8vw,65px)}
 .roles-section .projects-intro {max-width:520px;margin-top:20px}
 .roles-grid .role-card {min-height:270px}
 .roles-grid .role-card h2 {font-size:clamp(32px,5.6vw,44px)}
 .role-expansion__layout {grid-template-columns:1fr;gap:28px}
 .role-expansion__primary {padding-right:0}
 .role-expansion__overview {margin-top:30px}
 .role-expansion__overview p {max-width:46ch}
 .role-expansion-layer {place-items:start center;padding:82px 14px 14px}
 .role-expansion-layer .role-expansion {max-height:calc(100dvh - 96px)}
}
@media(max-width:480px) {
 .roles-grid .role-card {padding:22px;min-height:280px;border-radius:20px}
 .role-card .role-card__details {gap:12px}
 .role-card .role-card__responsibilities {font-size:9px;max-width:60%}
 .role-card .role-card__explore {font-size:8px;gap:5px}
 .role-expansion-layer .role-expansion {border-radius:20px;padding:58px 22px 26px}
 .role-expansion__close {top:15px;right:16px}
 .role-expansion h2 {font-size:clamp(35px,10vw,48px)}
 .role-expansion__overview p {font-size:16px;line-height:1.5}
 .role-expansion__capabilities ul {grid-template-columns:1fr}
 .role-expansion__experience-copy b {font-size:13px}
}
@media(prefers-reduced-motion:reduce) {
 .roles-page::before {animation:none}
 .roles-grid .role-card:hover{transform:none}
}