/* The About role picker shares the site's editorial width and glass controls. */
.home-about .working-glass.role-carousel{--role-control-size:52px;--role-inset:5px;width:min(100%,1100px);max-width:100%;margin:clamp(64px,8vw,120px) auto;padding:0;container-type:inline-size;scroll-margin-top:90px}
.role-carousel .role-fan{position:relative;isolation:isolate;height:clamp(300px,52cqw,540px);width:100%;margin:0 auto 44px;overflow:clip;overflow-clip-margin:24px}
.role-carousel .role-card{position:absolute;left:50%;top:4%;width:42%;max-width:410px;height:88%;border:1px solid #ffffffcc;border-radius:clamp(28px,5cqw,64px);box-sizing:border-box;background:linear-gradient(135deg,#ffffff38,#ffffff08 48%,#ffffff28),color-mix(in srgb,var(--paper) 42%,transparent);box-shadow:inset 1px 1px 1px #ffffffb8,inset -1px -1px 2px #ffffff70,inset 0 0 22px #ffffff24,0 14px 32px color-mix(in srgb,var(--ink) 4%,transparent);backdrop-filter:blur(18px) saturate(1.18);-webkit-backdrop-filter:blur(18px) saturate(1.18);overflow:hidden;transform-origin:50% 85%;padding:0;color:inherit;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.role-carousel .role-card::before,.role-carousel .role-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2}
.role-carousel .role-card::before{background:radial-gradient(ellipse at var(--glare-x,25%) var(--glare-y,8%),#ffffff45,transparent 62%),linear-gradient(115deg,#ffffff28,transparent 18% 74%,#ffffff30);box-shadow:inset 0 0 0 5px #ffffff0d,inset 0 0 0 1px #ffffff38}
.role-carousel .role-card::after{background-image:url('./images/card-frost.svg');opacity:.045;mix-blend-mode:multiply}
.role-carousel .role-card-active{z-index:3;transform:translateX(-50%);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.role-carousel .role-fan.is-dragging,.role-carousel .role-fan.is-dragging *{cursor:grabbing!important}
.role-carousel .role-card-previous,.role-carousel .role-card-next{z-index:1;user-select:none;opacity:.8}
.role-carousel .role-card-previous{transform:translateX(-114%) translateY(7%) rotate(-12deg) scale(.88)}
.role-carousel .role-card-next{transform:translateX(14%) translateY(7%) rotate(12deg) scale(.88)}
.role-carousel .role-card:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.role-carousel .role-card[inert]{pointer-events:none}
.role-carousel .role-card>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;pointer-events:none;transition:opacity .2s}
.role-carousel .role-card-active>img{transition:none}
.home-about .role-carousel .role-card .about-floating-piece{position:absolute!important;inset:0;width:100%;height:100%;max-width:none;margin:0;top:0!important;touch-action:pan-y}
.role-carousel .role-controls{display:grid;grid-template-columns:var(--role-control-size) minmax(0,1fr) var(--role-control-size);align-items:center;gap:12px;width:100%;margin:0 auto}
.home-about .role-carousel .audience-tabs{display:flex;align-items:center;gap:4px;width:100%;min-width:0;height:var(--role-control-size);box-sizing:border-box;margin:0;padding:var(--role-inset);overflow-x:auto;scroll-padding-inline:var(--role-inset);scrollbar-width:none;border:1px solid #ffffffa6;border-radius:999px;background:linear-gradient(125deg,#ffffff24,#ffffff0a,#ffffff28)}
.home-about .role-carousel .audience-tabs::-webkit-scrollbar{display:none}
.home-about .role-carousel .audience-tab{display:flex;align-items:center;justify-content:center;flex:1 0 auto;height:calc(var(--role-control-size) - 2px - 2 * var(--role-inset));min-height:0;margin:0;padding:0 15px;border:1px solid #ffffff70;border-radius:999px;font:300 14px/1 'ABC Oracle',Arial,sans-serif;color:var(--ink);text-align:center;white-space:nowrap;background:linear-gradient(120deg,#ffffff12,#ffffff20);box-sizing:border-box}
.home-about .role-carousel .audience-tab[aria-selected=true]{background:color-mix(in srgb,var(--ink) 11%,transparent)}
.role-carousel .role-arrow{display:grid;place-items:center;width:var(--role-control-size);height:var(--role-control-size);padding:0;border:1px solid #ffffffb0;box-sizing:border-box;border-radius:50%;color:var(--ink);background:linear-gradient(135deg,#ffffff14,#ffffff35);cursor:pointer;touch-action:manipulation}
.role-carousel .role-arrow svg{display:block;width:20px;height:20px;pointer-events:none}
.role-carousel .role-arrow:hover{background:color-mix(in srgb,var(--ink) 7%,var(--paper))}
.role-carousel .role-arrow:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.home-about .role-carousel .role-copy{width:min(100%,700px);margin:38px auto 0;text-align:center;align-self:auto}
.role-carousel .role-title{font:300 var(--service-heading-size)/1 'FAIRE Octave Trial Variable',serif;letter-spacing:0;font-feature-settings:'dlig' 1,'ss01' 1,'ss06' 1,'ss11' 1;text-transform:uppercase;margin:0 0 24px;text-wrap:balance}
.role-carousel .role-title-line{display:block}
.home-about .role-carousel .audience-messages{display:grid;margin:0;min-height:9em}
.home-about .role-carousel .audience-panel{grid-area:1/1}
.home-about .role-carousel .audience-panel[aria-hidden=true]{display:block;visibility:hidden;pointer-events:none;opacity:0}
.home-about .role-carousel .audience-panel p{max-width:48ch;margin:0 auto;font:300 var(--service-body-size,16px)/var(--service-body-leading,1.5) 'ABC Oracle',Arial,sans-serif;text-align:center;text-wrap:pretty}
.home-about .role-carousel .audience-panel p+p{margin-top:16px}
@media(max-width:700px){
 .home-about .working-glass.role-carousel{--role-control-size:48px}
 .role-carousel .role-fan{height:clamp(280px,82cqw,430px);margin-bottom:28px}
 .role-carousel .role-card{width:52%;height:90%;top:0;border-radius:30px}
 .role-carousel .role-card-previous{transform:translateX(-94%) translateY(9%) rotate(-11deg) scale(.8)}
 .role-carousel .role-card-next{transform:translateX(-6%) translateY(9%) rotate(11deg) scale(.8)}
 .role-carousel .role-controls{gap:8px}
 .home-about .role-carousel .audience-tab{font-size:13px;padding-inline:12px}
 .home-about .role-carousel .role-copy{margin-top:28px}
 .role-carousel .role-title{margin-bottom:20px}
}
@media(prefers-reduced-motion:reduce){.role-carousel *{animation:none!important;transition:none!important}}
