html.showcase-narrative.showcase-motion .responsibility-showcase{height:520svh}
html.showcase-narrative.showcase-motion .responsibility-stage::after{content:"";position:absolute;z-index:4;top:0;bottom:0;left:calc(var(--gutter)*.5);width:3px;background:#8C82FF;transform:scaleY(var(--rail-progress,0));transform-origin:top;pointer-events:none}
html.showcase-narrative.showcase-motion .responsibility-band,html.showcase-narrative.showcase-motion .responsibility-band.is-filled{position:relative;isolation:isolate;background:#fff;color:#050607;border:0;border-bottom:1px solid #a2afb8;grid-template-columns:clamp(76px,9vw,140px) minmax(0,min(32vw,430px)) minmax(260px,430px);column-gap:clamp(24px,3vw,48px);justify-content:start;padding:18px var(--gutter);transition:none;will-change:auto}
html.showcase-narrative.showcase-motion .responsibility-band::after{content:"";position:absolute;z-index:0;inset:0;background:#050607;transform:scaleX(var(--dark-fill,0));transform-origin:left center;pointer-events:none}
html.showcase-narrative.showcase-motion .responsibility-band>:is(.responsibility-number,h3,p){position:relative;z-index:2;color:#fff;mix-blend-mode:difference}
html.showcase-narrative.showcase-motion .responsibility-band .responsibility-number{font-size:clamp(48px,5vw,88px)}
html.showcase-narrative.showcase-motion .responsibility-band h3{font-size:clamp(30px,3.1vw,54px)}
html.showcase-narrative.showcase-motion .responsibility-band p{justify-self:start;max-width:430px;font-size:clamp(16px,1.4vw,22px);line-height:1.35}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  html.showcase-narrative.showcase-motion .responsibility-showcase.is-complete .responsibility-band.is-filled::before{z-index:1}
  html.showcase-narrative.showcase-motion .responsibility-showcase.is-complete .responsibility-band.is-filled:hover>:is(.responsibility-number,h3,p){z-index:2}
}
@media(max-width:760px), (max-height:640px), (prefers-reduced-motion:reduce){
  html.showcase-narrative .responsibility-showcase{height:auto;padding:24px var(--gutter) 0;background:#fff}
  html.showcase-narrative .responsibility-stage{position:relative;height:auto;overflow:visible;background:#fff}
  html.showcase-narrative .responsibility-stage::after{content:none}
  html.showcase-narrative .responsibility-image{position:relative;inset:auto;width:100%;height:min(74svh,680px);border-radius:24px;overflow:hidden;will-change:auto}
  html.showcase-narrative .responsibility-heading{top:min(27svh,235px);width:calc(100% - 4*var(--gutter));opacity:1;transform:translate3d(-50%,-50%,0);will-change:auto}
  html.showcase-narrative .responsibility-heading h2{font-size:clamp(32px,8.4vw,56px)}
  html.showcase-narrative .responsibility-bands{position:relative;inset:auto;display:block;margin:48px calc(-1*var(--gutter)) 0}
  html.showcase-narrative .responsibility-band,html.showcase-narrative .responsibility-band.is-filled{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:start;column-gap:16px;row-gap:8px;min-height:180px;padding:27px var(--gutter);background:#fff;color:#050607;border:0;border-top:1px solid #d7dfe5;transform:none!important;transition:none;will-change:auto}
  html.showcase-narrative .responsibility-band:last-child{border-bottom:1px solid #d7dfe5}
  html.showcase-narrative .responsibility-number{grid-row:span 2;align-self:start;font-size:36px;color:#8C82FF;mix-blend-mode:normal}
  html.showcase-narrative .responsibility-band h3{font-size:clamp(24px,5.6vw,34px);color:#050607;mix-blend-mode:normal}
  html.showcase-narrative .responsibility-band p{justify-self:start;max-width:36rem;font-size:16px;line-height:1.42;color:#3a454f;mix-blend-mode:normal}
}