/* An open editorial scene changes the rhythm after the framed Workspace tour. */
.meeting-roles{padding-block:116px 112px;scroll-margin-top:32px;background:#080808;overflow:hidden}
.roles-heading{position:relative;z-index:2;margin-bottom:85px}
.roles-heading .eyebrow{display:block;margin-bottom:20px}
.roles-heading h2{margin:0;font:400 clamp(46px,5.3vw,80px)/1.03 Inter,Arial,sans-serif;letter-spacing:-.066em}
.roles-heading h2 span{color:#898989}
.roles-frame{position:relative;min-height:690px;isolation:isolate}
.roles-frame::before{content:"";position:absolute;left:22%;top:11%;width:48%;height:75%;pointer-events:none;background:radial-gradient(ellipse at 48% 48%,#a4bc8015 0%,#8197a20c 30%,transparent 67%);z-index:-1}
.roles-tabs{position:absolute;top:34%;left:0;width:22%;z-index:3;display:flex;flex-direction:column;align-items:stretch}
.roles-tabs button{position:relative;display:flex;align-items:center;width:100%;min-height:76px;padding:12px 8px 12px 35px;border:0;border-top:1px solid #ffffff20;border-radius:0;background:transparent;color:#7f7f7f;text-align:left;font:400 clamp(14px,1.3vw,18px)/1.28 Inter,Arial,sans-serif;letter-spacing:-.025em;cursor:pointer;transition:color .25s,padding-left .25s}
.roles-tabs button:last-child{border-bottom:1px solid #ffffff20}
.roles-tabs button::before{content:"";position:absolute;left:0;top:50%;width:13px;height:2px;background:#626262;transform:translateY(-50%);transition:width .25s,background .25s}
.roles-tabs button:hover{color:#e8e8e8;padding-left:39px}
.roles-tabs button[aria-selected=true]{color:#f4f4f4}
.roles-tabs button[aria-selected=true]::before{width:23px;background:#a4bc80}
.roles-tabs button:focus-visible,.role-panel:focus-visible{outline:2px solid #a4bc80;outline-offset:4px}
.role-panel{position:absolute;inset:0;display:grid;grid-template-columns:23% 44% 33%;grid-template-rows:1fr auto auto;min-width:0;min-height:690px}
.role-panel[hidden]{display:none}
.role-portrait{--portrait-zoom:1.14;--portrait-eye-y:.274;--portrait-eye-target:.32;position:relative;grid-column:2;grid-row:1/4;align-self:stretch;margin:-52px 32px -16px -30px;min-width:0;overflow:hidden;background:transparent;mask-image:radial-gradient(ellipse 78% 76% at 50% 43%,#000 49%,#000e 65%,#0008 77%,transparent 98%);-webkit-mask-image:radial-gradient(ellipse 78% 76% at 50% 43%,#000 49%,#000e 65%,#0008 77%,transparent 98%)}
.role-portrait img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 27%}
#role-panel-consultant .role-portrait{--portrait-eye-y:.22}
#role-panel-sales .role-portrait{--portrait-eye-y:.215}
.role-dither{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated;opacity:0}
.role-portrait.has-dither img{opacity:1}
.role-portrait.has-dither .role-dither{opacity:.72;background:#080808}
.role-content{grid-column:3;grid-row:1;align-self:end;min-width:0;padding:0 0 42px 16px}
.role-name{margin:0 0 23px;color:#a4bc80;font:400 11px/1.4 Inter,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.role-content h3{max-width:16ch;margin:0;font:400 clamp(34px,3.4vw,51px)/1.07 Inter,Arial,sans-serif;letter-spacing:-.052em;text-wrap:balance}
.role-outcomes{grid-column:3;grid-row:2;list-style:none;margin:0 0 26px 16px;padding:0;border-top:1px solid #ffffff29}
.role-outcomes li{display:grid;grid-template-columns:1fr;gap:4px;padding:15px 0;border-bottom:1px solid #ffffff1c}
.role-outcomes strong{color:#e4e4e4;font:400 15px/1.35 Inter,Arial,sans-serif}
.role-outcomes p{margin:0;color:#888;font:400 12px/1.45 Inter,Arial,sans-serif}
.role-footer{grid-column:3;grid-row:3;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-left:16px}
.role-footer>span{max-width:18ch;color:#8a8a8a;font-size:11px;line-height:1.45}
.role-footer .button{min-height:44px;padding:8px 15px;white-space:nowrap;font-size:12px}
.role-footer .button span{margin-left:19px}
@media(prefers-reduced-motion:no-preference){
  .role-panel:not([hidden]) .role-portrait{animation:role-reveal-image .52s ease-out both}
  .role-panel:not([hidden]) .role-content,.role-panel:not([hidden]) .role-outcomes,.role-panel:not([hidden]) .role-footer{animation:role-reveal-copy .48s ease-out both}
  .role-panel:not([hidden]) .role-outcomes{animation-delay:.07s}
  .role-panel:not([hidden]) .role-footer{animation-delay:.13s}
  @keyframes role-reveal-image{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
  @keyframes role-reveal-copy{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
}
@media(max-width:1050px){
  .meeting-roles{padding-block:90px 85px}
  .roles-frame{min-height:650px}
  .roles-tabs{width:25%;top:35%}
  .role-panel{grid-template-columns:26% 38% 36%;min-height:650px}
  .role-portrait{margin:-20px 16px -12px -28px}
  .role-content{padding-left:0}
  .role-outcomes,.role-footer{margin-left:0}
  .role-content h3{font-size:clamp(32px,3.4vw,44px)}
}
@media(max-width:700px){
  .meeting-roles{padding-block:70px 72px}
  .roles-heading{margin-bottom:22px}
  .roles-heading h2{font-size:clamp(38px,8.5vw,55px)}
  .roles-frame{min-height:0}
  .roles-frame::before{left:-10%;top:90px;width:120%;height:430px}
  .roles-tabs{position:relative;top:auto;left:auto;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px}
  .roles-tabs button{min-height:53px;padding:7px 8px;border:0;border-bottom:1px solid #ffffff2b;font-size:11px;line-height:1.3}
  .roles-tabs button:last-child{border-bottom:1px solid #ffffff2b}
  .roles-tabs button::before{top:auto;bottom:-1px;left:0;width:0;height:2px;transform:none}
  .roles-tabs button[aria-selected=true]::before{width:100%}
  .roles-tabs button:hover{padding-left:8px}
  .role-panel{position:relative;inset:auto;display:grid;grid-template-columns:1fr;grid-template-rows:440px auto auto auto;min-height:0}
  .role-portrait{grid-column:1;grid-row:1;margin:0 -17px;mask-image:radial-gradient(ellipse 70% 72% at 50% 38%,#000 42%,#000d 61%,transparent 98%);-webkit-mask-image:radial-gradient(ellipse 70% 72% at 50% 38%,#000 42%,#000d 61%,transparent 98%)}
  .role-content{grid-column:1;grid-row:2;align-self:auto;padding:0 0 15px}
  .role-name{margin-bottom:11px}
  .role-content h3{max-width:20ch;font-size:clamp(31px,8vw,42px)}
  .role-outcomes{grid-column:1;grid-row:3;margin:12px 0 24px}
  .role-outcomes li{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:baseline;gap:12px}
  .role-footer{grid-column:1;grid-row:4;margin:0}
}
@media(max-width:430px){.role-panel{grid-template-rows:365px auto auto auto}.roles-tabs button{font-size:10px}.role-content h3{font-size:31px}.role-outcomes strong{font-size:13px}.role-outcomes p{font-size:11px}}
@media(prefers-reduced-motion:reduce){.roles-tabs button,.roles-tabs button::before{transition:none}}
/* The portrait is a picture, not a handle: no drag ghost, no long-press menu, no selection. */
.role-portrait,.role-portrait img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.role-portrait img{pointer-events:none}